{
+ return this.#todos.filter((todo) => todo.completed);
+ }
+
+ get allCompleted(): boolean {
+ return this.#todos.every((todo) => todo.completed);
+ }
+
+ connect() {
+ window.addEventListener("hashchange", this.#onHashChange);
+ }
+
+ disconnect() {
+ window.removeEventListener("hashchange", this.#onHashChange);
+ }
+
+ filtered() {
+ switch (this.#filter) {
+ case "active":
+ return this.active;
+ case "completed":
+ return this.completed;
+ }
+ return this.all;
+ }
+
+ #notifyChange() {
+ this.dispatchEvent(new Event("change"));
+ }
+
+ add(text: string) {
+ this.#todos.push({
+ text,
+ completed: false,
+ id: nanoid(),
+ });
+ this.#notifyChange();
+ }
+
+ delete(id: string) {
+ const index = this.#todos.findIndex((todo) => todo.id === id);
+ // Note: if the todo is not found, index is -1, and the >>> will flip the
+ // sign which makes the splice do nothing. Otherwise, index is the item
+ // we want to remove.
+ this.#todos.splice(index >>> 0, 1);
+ this.#notifyChange();
+ }
+
+ update(edit: TodoEdit) {
+ const todo = this.#todos.find((todo) => todo.id === edit.id);
+
+ if (todo === undefined)
+ return;
+
+ Object.assign(todo, edit);
+ this.#notifyChange();
+ }
+
+ toggle(id: string) {
+ const todo = this.#todos.find((todo) => todo.id === id);
+ if (todo === undefined)
+ return;
+
+ todo.completed = !todo.completed;
+ this.#notifyChange();
+ }
+
+ toggleAll() {
+ // First pass to see if all the TODOs are completed. If all the
+ // todos are completed, we'll set them all to active
+ const allComplete = this.#todos.every((todo) => todo.completed);
+
+ // Replace the list to trigger updates
+ this.#todos = this.#todos.map((todo) => ({
+ ...todo,
+ completed: !allComplete,
+ }));
+ this.#notifyChange();
+ }
+
+ clearCompleted() {
+ this.#todos = this.active as Todo[];
+ this.#notifyChange();
+ }
+
+ get filter(): TodoFilter {
+ return this.#filter;
+ }
+
+ set filter(filter: TodoFilter) {
+ this.#filter = filter;
+ this.#notifyChange();
+ }
+
+ #onHashChange = () => {
+ this.filter = this.#filterFromUrl();
+ };
+
+ #filterFromUrl() {
+ let filter = /#\/(.*)/.exec(window.location.hash)?.[1];
+ if (isTodoFilter(filter))
+ return filter;
+
+ return "all";
+ }
+}
diff --git a/examples/lit/src/lib/utils.ts b/examples/lit/src/lib/utils.ts
new file mode 100644
index 0000000000..16a753cbf3
--- /dev/null
+++ b/examples/lit/src/lib/utils.ts
@@ -0,0 +1,29 @@
+import type { ReactiveElement } from "lit";
+
+interface ListenerCarryingElement extends ReactiveElement {
+ __updateOnEventListener?: () => void;
+}
+
+/**
+ * A property decorator that subscribes to an event on the property value and
+ * calls `requestUpdate` when the event fires.
+ *
+ * If we were using this outside of just this one app we'd use the type system
+ * to enforce that the property value is an `EventTarget`.
+ */
+export const updateOnEvent = (eventName: string) => (target: ListenerCarryingElement, propertyKey: string) => {
+ const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey)!;
+
+ const { get, set } = descriptor;
+ const newDescriptor = {
+ ...descriptor,
+ set(this: ListenerCarryingElement, v: EventTarget) {
+ const listener = this.__updateOnEventListener ??= () => this.requestUpdate();
+ const oldValue = get!.call(this);
+ oldValue?.removeEventListener?.(eventName, listener);
+ v?.addEventListener?.(eventName, listener);
+ return set!.call(this, v);
+ },
+ };
+ Object.defineProperty(target, propertyKey, newDescriptor);
+};
diff --git a/examples/lit/tsconfig.json b/examples/lit/tsconfig.json
new file mode 100644
index 0000000000..84588eded8
--- /dev/null
+++ b/examples/lit/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "incremental": true,
+ "tsBuildInfoFile": "./.tsbuildinfo",
+ "target": "ES2022",
+ "module": "ES2022",
+ "lib": ["DOM", "DOM.Iterable"],
+ "rootDir": "./src",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "outDir": "./",
+ "importHelpers": true,
+ "verbatimModuleSyntax": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "useUnknownInCatchVariables": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "exactOptionalPropertyTypes": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "noImplicitOverride": true,
+ "skipLibCheck": true,
+ // Once standard decorators ship, we can remove these two.
+ "experimentalDecorators": true,
+ "useDefineForClassFields": false
+ },
+ "include": ["src/**/*.ts"],
+ "exclude": []
+}
diff --git a/examples/lit/web-dev-server.config.js b/examples/lit/web-dev-server.config.js
new file mode 100644
index 0000000000..9d93352288
--- /dev/null
+++ b/examples/lit/web-dev-server.config.js
@@ -0,0 +1,5 @@
+export default {
+ nodeResolve: {
+ exportConditions: ["development", "browser"],
+ },
+};
diff --git a/index.html b/index.html
index 4781b38e29..8391059e31 100644
--- a/index.html
+++ b/index.html
@@ -120,6 +120,9 @@ Examples
Marionette.js
+
+ Lit
+
diff --git a/learn.json b/learn.json
index 3677daea3c..8904f94b86 100644
--- a/learn.json
+++ b/learn.json
@@ -1150,6 +1150,27 @@
}]
}]
},
+
+ "lit": {
+ "name": "Lit",
+ "description": "Lit is a simple library for building fast, lightweight web components.",
+ "homepage": "lit.dev",
+ "examples": [{
+ "name": "Example",
+ "url": "examples/lit/dist"
+ }],
+ "link_groups": [{
+ "heading": "Official Resources",
+ "links": [{
+ "name": "Getting Started",
+ "url": "https://lit.dev/docs/getting-started/"
+ },{
+ "name": "Tutorials",
+ "url": "https://lit.dev/tutorials/"
+ }]
+ }]
+ },
+
"marionettejs": {
"name": "Backbone.Marionette",
"description": "Marionette simplifies your Backbone application code with robust views and architecture solutions.",