fix(todo-fast): make hydration work correctly with FAST-HTML example (#65)

mohamedmansour · web-flow · commit fe7cf0d56ef2 · 2026-03-04T22:05:33.000-08:00
Two issues prevented the todo-fast example from working after hydration: 1. Class field initializers overwrote hydration state RenderableFASTElement calls prepare() synchronously during super(). Esbuild compiles `@observable items: TodoItemData[] = []` as `this.items = []` in the subclass constructor AFTER super() returns, silently overwriting the 3 items that prepare() extracted from the SSR shadow DOM. Fixed by removing class field initializers from @observable properties set in prepare(). 2. ObserverMap deep proxies silently swallowed immutable-style updates With `observerMap: 'all'`, each array item is wrapped with deep observable proxies. When onToggleItem used .map() to create new plain objects, instanceResolverChanged triggered deepMerge which compared proxied getter values via deepEqual and concluded nothing changed, silently dropping the state update. Fixed by mutating items in-place (item.state = 'done') so the observable setter fires directly. Other fixes: - Move todo-item loop from light DOM into shadow DOM template and query via this.shadowRoot instead of this - Always assign this.items in prepare() to guarantee a default - Add return true to onAddKeydown so the event propagates
diff --git a/examples/app/todo-fast/src/index.html b/examples/app/todo-fast/src/index.html
@@ -23,15 +23,7 @@
 </head>
 
 <body>
-  <todo-app title="{{title}}">
-    <for each="item in items">
-      <todo-item
-        id="{{item.id}}"
-        title="{{item.title}}"
-        state="{{item.state}}"
-      ></todo-item>
-    </for>
-  </todo-app>
+  <todo-app title="{{title}}"></todo-app>
 
   <script type="module" src="/index.js"></script>
 </body>
diff --git a/examples/app/todo-fast/src/todo-app/todo-app.html b/examples/app/todo-fast/src/todo-app/todo-app.html
@@ -15,7 +15,13 @@ <h1>{{title}}</h1>
   </div>
 
   <div class="todo-list">
-    <slot></slot>
+    <for each="item in items">
+      <todo-item
+        id="{{item.id}}"
+        title="{{item.title}}"
+        state="{{item.state}}"
+      ></todo-item>
+    </for>
   </div>
 
   <div class="footer">
diff --git a/examples/app/todo-fast/src/todo-app/todo-app.ts b/examples/app/todo-fast/src/todo-app/todo-app.ts
@@ -9,8 +9,8 @@ interface TodoItemData {
 
 export class TodoApp extends RenderableFASTElement(FASTElement) {
   @attr title = '';
-  @observable items: TodoItemData[] = [];
-  @observable remainingCount = 0;
+  @observable items!: TodoItemData[];
+  @observable remainingCount!: number;
 
   addInput!: HTMLInputElement;
 
@@ -26,27 +26,25 @@ export class TodoApp extends RenderableFASTElement(FASTElement) {
   }
   async prepare(): Promise<void> {
     const items: TodoItemData[] = [];
-    for (const el of this.querySelectorAll('todo-item')) {
+    for (const el of this.shadowRoot!.querySelectorAll('todo-item')) {
       items.push({
         id: el.getAttribute('id') || '',
         title: el.getAttribute('title') || '',
         state: el.getAttribute('state') || 'pending',
       });
     }
+    this.items = items;
     if (items.length > 0) {
-      this.items = items;
       this.nextId = Math.max(...items.map(i => Number(i.id) || 0)) + 1;
     }
     this.updateCount();
   }
 
   onToggleItem(e: CustomEvent<{id: string}>): void {
-    const id = e.detail.id;
-    this.items = this.items.map(item =>
-      item.id === id
-        ? { ...item, state: item.state === 'done' ? 'pending' : 'done' }
-        : item
-    );
+    const item = this.items.find(i => i.id === e.detail.id);
+    if (item) {
+      item.state = item.state === 'done' ? 'pending' : 'done';
+    }
     this.updateCount();
   }
 
@@ -55,10 +53,11 @@ export class TodoApp extends RenderableFASTElement(FASTElement) {
     this.updateCount();
   }
 
-  onAddKeydown(e: KeyboardEvent): void {
+  onAddKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
       this.addTodo();
     }
+    return true;
   }
 
   onAddClick(): void {
