cleanup init logic

Author: deebloo

integration/todo/src/elements/todo-card.element.ts

@@ -57,10 +57,6 @@ import type { TodoStatus } from "../services/todo.service.js";
   ],
 })
 export class TodoCardElement extends HTMLElement {
-  @attr()
-  @observe()
-  accessor status: TodoStatus = "active";
-
   @bind(({ status }) => ({
     value: status === "active" ? "complete" : "active",
     showStar: status === "complete",
@@ -70,6 +66,10 @@ export class TodoCardElement extends HTMLElement {
     showStar: false,
   };
 
+  @attr()
+  @observe()
+  accessor status: TodoStatus = "active";
+
   @listen("click", "#complete")
   onClick() {
     this.dispatchEvent(new Event("complete", { bubbles: true }));

packages/observable/src/lib/metadata.test.ts

@@ -10,6 +10,7 @@ it("should return default metadata", () => {
     changes: new Changes(),
     scheduler: null,
     bindings: new Set<() => void>(),
+    initialized: new Set<string | symbol>(),
   });
 });
 

packages/observable/src/lib/metadata.ts

@@ -13,6 +13,7 @@ export class ObservableInstanceMetadata<T> {
   scheduler: Promise<void> | null = null;
   changes: Changes<T> = new Changes();
   bindings: Set<(changes: Changes<T>) => void> = new Set();
+  initialized: Set<string | symbol> = new Set();
 }
 
 export class ObservableInstanceMetaDataStore extends WeakMap<

packages/observable/src/lib/observe.ts

@@ -11,7 +11,7 @@ export function observe<This extends object, Value>(mapper?: (instance: This) =>
 
     observableMeta.effects.add(function mapperFn(this: This) {
       if (mapper) {
-        ctx.access.set(this, mapper(this));
+        base.set.call(this, mapper(this));
       }
     });
 
@@ -35,6 +35,14 @@ export function observe<This extends object, Value>(mapper?: (instance: This) =>
       },
       get() {
         if (mapper) {
+          const instanceMeta = instanceMetadataStore.read<This>(this);
+
+          if (!instanceMeta.initialized.has(ctx.name)) {
+            instanceMeta.initialized.add(ctx.name);
+
+            return mapper(this);
+          }
+
           return mapper(this);
         }