Update Lit TodoMVC to latest Lit and TypeScript

Author: justinfagnani

resources/todomvc/architecture-examples/lit/dist/index.js

@@ -18,15 +18,15 @@
         "@rollup/plugin-node-resolve": "^15.1.0",
         "@rollup/plugin-terser": "^0.4.3",
         "@rollup/plugin-typescript": "^11.1.1",
+        "@web/dev-server": "^0.2.1",
         "rollup": "^2.79.1",
         "rollup-plugin-minify-html-literals": "^1.2.6",
-        "@web/dev-server": "^0.2.1",
-        "typescript": "^5.0.4",
-        "wireit": "^0.9.5"
+        "typescript": "^5.8.3",
+        "wireit": "^0.14.12"
     },
     "dependencies": {
-        "lit": "^3.0.0-pre.0",
-        "tslib": "^2.5.2"
+        "lit": "^3.3.0",
+        "tslib": "^2.8.1"
     },
     "wireit": {
         "serve": {
@@ -69,7 +69,7 @@
                 ".tsbuildinfo"
             ],
             "clean": false,
-            "command": "tsc"
+            "command": "tsc --pretty"
         },
         "rollup": {
             "files": [

resources/todomvc/architecture-examples/lit/package-lock.json

@@ -52,7 +52,7 @@ export class TodoApp extends LitElement {
 
     @updateOnEvent("change")
     @state()
-    readonly todoList = new Todos();
+    accessor todoList = new Todos();
 
     constructor() {
         super();

resources/todomvc/architecture-examples/lit/package.json

@@ -85,7 +85,7 @@ export class TodoFooter extends LitElement {
 
     @updateOnEvent("change")
     @property({ attribute: false })
-        todoList?: Todos;
+    accessor todoList: Todos | undefined;
 
     override render() {
         if (this.todoList === undefined || this.todoList.all.length === 0)

resources/todomvc/architecture-examples/lit/src/lib/todo-app.ts

@@ -36,13 +36,14 @@ export class TodoForm extends LitElement {
 
     @updateOnEvent("change")
     @property({ attribute: false })
-        todoList?: Todos;
+    accessor todoList: Todos | undefined;
 
     override render() {
         return html`<input @change=${this.#onChange} @keydown=${this.#onKeydown} class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" />`;
     }
 
-    @query("input", true) newTodoInput!: HTMLInputElement;
+    @query("input", true)
+    accessor newTodoInput!: HTMLInputElement;
 
     #onChange() {
         const { value } = this.newTodoInput;

resources/todomvc/architecture-examples/lit/src/lib/todo-footer.ts

@@ -139,16 +139,16 @@ export class TodoItem extends LitElement {
     ];
 
     @property()
-        todoId = "";
+    accessor todoId = "";
 
     @property()
-        text = "";
+    accessor text = "";
 
     @property({ type: Boolean })
-        completed = false;
+    accessor completed = false;
 
     @state()
-        isEditing: boolean = false;
+    accessor isEditing: boolean = false;
 
     override render() {
         const itemClassList = {

resources/todomvc/architecture-examples/lit/src/lib/todo-form.ts

@@ -88,7 +88,7 @@ export class TodoList extends LitElement {
 
     @updateOnEvent("change")
     @property({ attribute: false })
-        todoList?: Todos;
+        accessor todoList: Todos | undefined;
 
     override render() {
         return html`

resources/todomvc/architecture-examples/lit/src/lib/todo-item.ts

@@ -1,29 +1,35 @@
 import type { ReactiveElement } from "lit";
 
 interface ListenerCarryingElement extends ReactiveElement {
+    // This property will be used by the decorator to store the event listener.
+    // It can be dynamically added or explicitly declared by the class using the decorator.
     __updateOnEventListener?: () => void;
 }
 
 /**
- * A property decorator that subscribes to an event on the property value and
+ * An accessor 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`.
+ * 
+ * The accessor type must be an `EventTarget`.
  */
-export const updateOnEvent = (eventName: string) => (target: ListenerCarryingElement, propertyKey: string) => {
-    const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey)!;
+export const updateOnEvent = (eventName: string) =>
+  function <T extends ListenerCarryingElement, V extends EventTarget | undefined>(
+    target: ClassAccessorDecoratorTarget<T, V>,
+    _context: ClassAccessorDecoratorContext<T, V>
+  ) {
+    const {get, set} = target;
 
-    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);
-        },
+    return {
+      get(this: T): V {
+        return get.call(this);
+      },
+      set(this: T, newValue: V): void {
+        const listener = this.__updateOnEventListener ??= () => this.requestUpdate();
+        const oldValue = get.call(this);
+        oldValue?.removeEventListener(eventName, listener);
+        newValue?.addEventListener(eventName, listener);
+        set.call(this, newValue);
+      }
     };
-    Object.defineProperty(target, propertyKey, newDescriptor);
-};
+  };
+  

resources/todomvc/architecture-examples/lit/src/lib/todo-list.ts

@@ -2,11 +2,11 @@
     "compilerOptions": {
         "incremental": true,
         "tsBuildInfoFile": "./.tsbuildinfo",
-        "target": "ES2022",
-        "module": "ES2022",
-        "lib": ["DOM", "DOM.Iterable"],
+        "target": "ES2024",
+        "module": "NodeNext",
+        "lib": ["ES2024", "DOM", "DOM.Iterable"],
         "rootDir": "./src",
-        "moduleResolution": "node",
+        "moduleResolution": "NodeNext",
         "sourceMap": true,
         "outDir": "./",
         "importHelpers": true,
@@ -21,9 +21,6 @@
         "noFallthroughCasesInSwitch": true,
         "noImplicitOverride": true,
         "skipLibCheck": true,
-        // Once standard decorators ship, we can remove these two.
-        "experimentalDecorators": true,
-        "useDefineForClassFields": false
     },
     "include": ["src/**/*.ts"],
     "exclude": []