@praxisjs/decorators 0.7.4 → 0.8.0

package/src/__tests__/deep-state.test.ts

@@ -0,0 +1,185 @@
+import { describe, it, expect } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+
+import { DeepState } from "../properties/deep-state";
+
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+describe("@DeepState decorator", () => {
+  it("reads initial value", () => {
+    const { ctx, run } = fieldCtx("config");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).config = { theme: "light" };
+    run(instance);
+
+    const inst = instance as unknown as { config: { theme: string } };
+    expect(inst.config.theme).toBe("light");
+  });
+
+  it("nested object mutation triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("config");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).config = { theme: { mode: "light" } };
+    run(instance);
+
+    const inst = instance as unknown as { config: { theme: { mode: string } } };
+    const log: string[] = [];
+    effect(() => { log.push(inst.config.theme.mode); });
+
+    inst.config.theme.mode = "dark";
+    expect(log).toEqual(["light", "dark"]);
+  });
+
+  it("array push triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("items");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).items = [1, 2];
+    run(instance);
+
+    const inst = instance as unknown as { items: number[] };
+    const log: number[][] = [];
+    effect(() => { log.push([...inst.items]); });
+
+    inst.items.push(3);
+    expect(log[log.length - 1]).toEqual([1, 2, 3]);
+  });
+
+  it("array index assignment triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("list");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).list = ["a", "b"];
+    run(instance);
+
+    const inst = instance as unknown as { list: string[] };
+    const log: string[][] = [];
+    effect(() => { log.push([...inst.list]); });
+
+    inst.list[0] = "z";
+    expect(log[log.length - 1]).toEqual(["z", "b"]);
+  });
+
+  it("property deletion triggers reactive effect", () => {
+    const { ctx, run } = fieldCtx("obj");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).obj = { a: 1, b: 2 };
+    run(instance);
+
+    const inst = instance as unknown as { obj: Record<string, number> };
+    const log: string[][] = [];
+    effect(() => { log.push(Object.keys(inst.obj)); });
+
+    delete inst.obj.a;
+    expect(log[log.length - 1]).not.toContain("a");
+  });
+
+  it("direct assignment replaces root and triggers effect", () => {
+    const { ctx, run } = fieldCtx("data");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).data = { x: 1 };
+    run(instance);
+
+    const inst = instance as unknown as { data: { x: number } };
+    const log: number[] = [];
+    effect(() => { log.push(inst.data.x); });
+
+    inst.data = { x: 99 };
+    expect(log).toEqual([1, 99]);
+  });
+
+  it("mutations on new root after reassignment are reactive", () => {
+    const { ctx, run } = fieldCtx("cfg");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).cfg = { v: 0 };
+    run(instance);
+
+    const inst = instance as unknown as { cfg: { v: number } };
+    inst.cfg = { v: 10 };
+
+    const log: number[] = [];
+    effect(() => { log.push(inst.cfg.v); });
+
+    inst.cfg.v = 20;
+    expect(log).toEqual([10, 20]);
+  });
+
+  it("null initial value is handled gracefully", () => {
+    const { ctx, run } = fieldCtx("maybe");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).maybe = null;
+    run(instance);
+
+    const inst = instance as unknown as { maybe: null | { x: number } };
+    expect(inst.maybe).toBeNull();
+
+    const log: unknown[] = [];
+    effect(() => { log.push(inst.maybe); });
+
+    inst.maybe = { x: 5 };
+    expect(log).toEqual([null, { x: 5 }]);
+  });
+
+  it("setter with null value — proxy not created, value is null", () => {
+    const { ctx, run } = fieldCtx("nullable");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).nullable = { x: 1 };
+    run(instance);
+
+    const inst = instance as unknown as { nullable: { x: number } | null };
+    inst.nullable = null;
+    expect(inst.nullable).toBeNull();
+  });
+
+  it("setter with primitive value — value stored directly without proxy", () => {
+    const { ctx, run } = fieldCtx("num");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).num = { v: 0 };
+    run(instance);
+
+    const inst = instance as unknown as { num: number | { v: number } };
+    inst.num = 99;
+    expect(inst.num).toBe(99);
+  });
+
+  it("deeply nested mutation triggers effect", () => {
+    const { ctx, run } = fieldCtx("deep");
+    DeepState()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).deep = { a: { b: { c: 0 } } };
+    run(instance);
+
+    const inst = instance as unknown as { deep: { a: { b: { c: number } } } };
+    const log: number[] = [];
+    effect(() => { log.push(inst.deep.a.b.c); });
+
+    inst.deep.a.b.c = 42;
+    expect(log).toEqual([0, 42]);
+  });
+});

package/src/__tests__/properties.test.ts

@@ -3,6 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { StatefulComponent } from "@praxisjs/core";
 import { signal, computed } from "@praxisjs/core/internal";
 
+import { createFieldDecorator } from "../create-field-decorator";
 import { Watch } from "../functions/watch";
 import { When } from "../functions/when";
 import { Compose } from "../properties/compose";
@@ -232,7 +233,7 @@ describe("Watch decorator", () => {
     expect(handler).not.toHaveBeenCalled();
   });
 
-  it("multi-prop watch fires when any watched prop changes", () => {
+  it("multi-prop watch fires when any watched prop changes", async () => {
     const { ctx, run } = methodCtx("onMulti");
     const handler = vi.fn();
     Watch("a" as never, "b" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
@@ -246,10 +247,34 @@ describe("Watch decorator", () => {
     (instance as unknown as { onMount: () => void }).onMount?.();
 
     sa.set(1);
+    await Promise.resolve();
     expect(handler).toHaveBeenCalledTimes(1);
     sb.set(1);
+    await Promise.resolve();
     expect(handler).toHaveBeenCalledTimes(2);
   });
+
+  it("multi-prop watch coalesces simultaneous changes into a single callback", async () => {
+    const { ctx, run } = methodCtx("onMulti");
+    const handler = vi.fn();
+    Watch("a" as never, "b" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const sa = signal(0);
+    const sb = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "a", { get: () => sa(), configurable: true });
+    Object.defineProperty(instance, "b", { get: () => sb(), configurable: true });
+    run(instance);
+    (instance as unknown as { onMount: () => void }).onMount?.();
+
+    // both change in the same synchronous block
+    sa.set(1);
+    sb.set(1);
+    await Promise.resolve();
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith({ a: 1, b: 1 }, { a: 0, b: 0 });
+  });
 });
 
 // ── History ───────────────────────────────────────────────────────────────────
@@ -506,7 +531,7 @@ describe("When decorator", () => {
     expect(unmountSpy).toHaveBeenCalled();
   });
 
-  it("works when the watched prop is a computed value", () => {
+  it("works when the watched prop is a computed value", async () => {
     const { ctx, run } = methodCtxFor("onComputed");
     const handler = vi.fn();
     When("doubled")(handler, ctx as unknown as ClassMethodDecoratorContext);
@@ -521,6 +546,7 @@ describe("When decorator", () => {
     (instance as unknown as { onMount: () => void }).onMount?.();
 
     s.set(5); // doubled becomes 10 (truthy)
+    await Promise.resolve();
     expect(handler).toHaveBeenCalledTimes(1);
   });
 });
@@ -677,7 +703,7 @@ describe("Watch decorator — onUnmount cleanup", () => {
     expect(unmountSpy).toHaveBeenCalled();
   });
 
-  it("multi-prop watch does NOT fire when an unwatched prop changes", () => {
+  it("multi-prop watch does NOT fire when an unwatched prop changes", async () => {
     const { ctx, run } = methodCtx("onAB");
     const handler = vi.fn();
     Watch("a" as never, "b" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
@@ -694,9 +720,11 @@ describe("Watch decorator — onUnmount cleanup", () => {
     (instance as unknown as { onMount: () => void }).onMount?.();
 
     sc.set(99); // unwatched prop — handler must NOT fire
+    await Promise.resolve();
     expect(handler).not.toHaveBeenCalled();
 
     sa.set(1); // watched — handler fires
+    await Promise.resolve();
     expect(handler).toHaveBeenCalledTimes(1);
   });
 });
@@ -704,7 +732,7 @@ describe("Watch decorator — onUnmount cleanup", () => {
 // ── Watch (additional branches — computed readValue) ──────────────────────────
 
 describe("Watch decorator — reading computed values", () => {
-  it("reads the value of a computed field (not the computed object)", () => {
+  it("reads the value of a computed field (not the computed object)", async () => {
     const { ctx, run } = methodCtx("onDoubled");
     const handler = vi.fn();
     Watch("doubled" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
@@ -721,6 +749,7 @@ describe("Watch decorator — reading computed values", () => {
     (instance as unknown as { onMount: () => void }).onMount?.();
 
     s.set(5); // c() goes from 2 to 10 → triggers handler
+    await Promise.resolve();
     expect(handler).toHaveBeenCalledTimes(1);
   });
 });
@@ -956,3 +985,35 @@ describe("@Compose decorator — new cases", () => {
     expect(view.resolved).toBeUndefined();
   });
 });
+
+// ── createFieldDecorator — additional property ────────────────────────────────
+
+describe("createFieldDecorator — additional property", () => {
+  it("defines extra properties on the instance when additional is returned", () => {
+    const decorator = createFieldDecorator({
+      bind(_instance, _name, initialValue) {
+        return {
+          descriptor: {
+            get() { return initialValue; },
+            set() { /* no-op */ },
+          },
+          additional: {
+            extraProp: {
+              configurable: true,
+              get() { return "extra"; },
+            },
+          },
+        };
+      },
+    });
+
+    const { ctx, run } = fieldCtx("myField");
+    decorator(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).myField = 42;
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).myField).toBe(42);
+    expect((instance as unknown as Record<string, unknown>).extraProp).toBe("extra");
+  });
+});

package/src/__tests__/synced.test.ts

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+
+import { Synced } from "../properties/synced";
+
+// BroadcastChannel mock (same as core test)
+class MockBroadcastChannel {
+  static instances: MockBroadcastChannel[] = [];
+  static byChannel: Map<string, MockBroadcastChannel[]> = new Map();
+
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  readonly name: string;
+  closed = false;
+
+  constructor(name: string) {
+    this.name = name;
+    MockBroadcastChannel.instances.push(this);
+    if (!MockBroadcastChannel.byChannel.has(name)) {
+      MockBroadcastChannel.byChannel.set(name, []);
+    }
+    MockBroadcastChannel.byChannel.get(name)!.push(this);
+  }
+
+  postMessage(data: unknown) {
+    MockBroadcastChannel.byChannel.get(this.name)?.forEach((ch) => {
+      if (ch !== this && ch.onmessage) {
+        ch.onmessage(new MessageEvent("message", { data }));
+      }
+    });
+  }
+
+  close() {
+    this.closed = true;
+    const list = MockBroadcastChannel.byChannel.get(this.name);
+    if (list) {
+      const idx = list.indexOf(this);
+      if (idx !== -1) list.splice(idx, 1);
+    }
+    MockBroadcastChannel.instances.splice(
+      MockBroadcastChannel.instances.indexOf(this),
+      1,
+    );
+  }
+}
+
+beforeEach(() => {
+  MockBroadcastChannel.instances = [];
+  MockBroadcastChannel.byChannel = new Map();
+  vi.stubGlobal("BroadcastChannel", MockBroadcastChannel);
+});
+
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+describe("@Synced decorator", () => {
+  it("reads and writes the field reactively", () => {
+    const { ctx, run } = fieldCtx("count");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).count = 0;
+    run(instance);
+
+    const inst = instance as unknown as { count: number };
+    expect(inst.count).toBe(0);
+    inst.count = 5;
+    expect(inst.count).toBe(5);
+  });
+
+  it("uses field name as channel name by default", () => {
+    const { ctx, run } = fieldCtx("cart");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).cart = [];
+    run(instance);
+
+    expect(MockBroadcastChannel.instances[0].name).toBe("cart");
+  });
+
+  it("uses custom channel name when provided", () => {
+    const { ctx, run } = fieldCtx("items");
+    Synced("my-channel")(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).items = [];
+    run(instance);
+
+    expect(MockBroadcastChannel.instances[0].name).toBe("my-channel");
+  });
+
+  it("triggers reactive effects on write", () => {
+    const { ctx, run } = fieldCtx("value");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).value = 0;
+    run(instance);
+
+    const inst = instance as unknown as { value: number };
+    const log: number[] = [];
+    effect(() => { log.push(inst.value); });
+
+    inst.value = 10;
+    expect(log).toEqual([0, 10]);
+  });
+
+  it("updates field when a remote message arrives", () => {
+    const { ctx, run } = fieldCtx("score");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).score = 0;
+    run(instance);
+
+    const inst = instance as unknown as { score: number };
+    const channel = MockBroadcastChannel.instances[0];
+    channel.onmessage!(new MessageEvent("message", { data: JSON.stringify(42) }));
+
+    expect(inst.score).toBe(42);
+  });
+
+  it("two @Synced fields on the same instance share the signalMap entry", () => {
+    const { ctx: ctx1, run: run1 } = fieldCtx("a");
+    const { ctx: ctx2, run: run2 } = fieldCtx("b");
+    Synced()(undefined, ctx1);
+    Synced()(undefined, ctx2);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).a = 1;
+    (instance as unknown as Record<string, unknown>).b = 2;
+    run1(instance);
+    run2(instance);
+
+    const inst = instance as unknown as { a: number; b: number };
+    inst.a = 10;
+    inst.b = 20;
+    expect(inst.a).toBe(10);
+    expect(inst.b).toBe(20);
+
+    // Both fields have their own BroadcastChannel
+    expect(MockBroadcastChannel.instances.length).toBe(2);
+    instance.onUnmount?.();
+    expect(MockBroadcastChannel.instances.every((ch) => ch.closed)).toBe(true);
+  });
+
+  it("onUnmount closes the BroadcastChannel", () => {
+    const { ctx, run } = fieldCtx("data");
+    Synced()(undefined, ctx);
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).data = null;
+    run(instance);
+
+    const channel = MockBroadcastChannel.instances[0];
+    expect(channel.closed).toBe(false);
+    instance.onUnmount?.();
+    expect(channel.closed).toBe(true);
+  });
+});

package/src/__tests__/virtual.test.ts

@@ -137,7 +137,7 @@ describe("Virtual decorator", () => {
     document.body.removeChild(container);
   });
 
-  it("re-renders visible items when scrollTop changes (covers while loop cleanup)", () => {
+  it("re-renders visible items when scrollTop changes (covers while loop cleanup)", async () => {
     class ScrollList extends StatefulComponent {
       items = Array.from({ length: 20 }, (_, i) => i);
       renderItem(item: unknown) {
@@ -164,6 +164,7 @@ describe("Virtual decorator", () => {
     // Change scrollTop to trigger effect re-run (covers the while loop removing old nodes)
     Object.defineProperty(container, "scrollTop", { configurable: true, value: 500 });
     container.dispatchEvent(new Event("scroll"));
+    await Promise.resolve();
 
     // buffer=0, itemHeight=50, scrollTop=500 → startIdx=10 → offsetTop=500px
     const spacerTop = outer.children[0] as HTMLElement;
@@ -234,7 +235,7 @@ describe("Virtual decorator", () => {
     expect(() => instance.onUnmount?.()).not.toThrow();
   });
 
-  it("updates scrollTop on scroll event", () => {
+  it("updates scrollTop on scroll event", async () => {
     const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
     const instance = new Wrapped();
     (instance as unknown as { items: unknown[] }).items = Array.from({ length: 20 }, (_, i) => i);
@@ -251,6 +252,7 @@ describe("Virtual decorator", () => {
 
     Object.defineProperty(container, "scrollTop", { configurable: true, value: 200 });
     container.dispatchEvent(new Event("scroll"));
+    await Promise.resolve();
 
     // buffer=3, itemHeight=50, scrollTop=200 → startIdx=1 → offsetTop=50px
     const spacerTop = outer.children[0] as HTMLElement;

package/src/component/virtual.tsx

@@ -1,6 +1,15 @@
-import { computed, effect, type RootComponent, signal } from "@praxisjs/core/internal";
-
-import { ClassBehavior, createClassDecorator, type ClassEnhancement } from "../create-class-decorator";
+import {
+  computed,
+  effect,
+  type RootComponent,
+  signal,
+} from "@praxisjs/core/internal";
+
+import {
+  ClassBehavior,
+  createClassDecorator,
+  type ClassEnhancement,
+} from "../create-class-decorator";
 
 interface VirtualHost {
   _anchor?: Comment;
@@ -39,8 +48,9 @@ class VirtualBehavior extends ClassBehavior {
         container.style.position = "relative";
         viewHeight.set(container.clientHeight || 600);
 
+        const currentContainer = container;
         scrollHandler = () => {
-          if (container) scrollTop.set(container.scrollTop);
+          scrollTop.set(currentContainer.scrollTop);
         };
         container.addEventListener("scroll", scrollHandler);
       },
@@ -49,7 +59,9 @@ class VirtualBehavior extends ClassBehavior {
         if (container && scrollHandler) {
           container.removeEventListener("scroll", scrollHandler);
         }
-        cleanups.forEach((c) => { c(); });
+        cleanups.forEach((c) => {
+          c();
+        });
         cleanups.length = 0;
       },
 
@@ -84,10 +96,15 @@ class VirtualBehavior extends ClassBehavior {
           return result;
         });
         const offsetTop = computed(() => startIdx() * itemHeight);
-        const offsetBottom = computed(() => (total - 1 - endIdx()) * itemHeight);
+        const offsetBottom = computed(
+          () => (total - 1 - endIdx()) * itemHeight,
+        );
 
         const outer = document.createElement("div");
-        outer.setAttribute("style", `height:${String(totalH)}px; position:relative;`);
+        outer.setAttribute(
+          "style",
+          `height:${String(totalH)}px; position:relative;`,
+        );
 
         const spacerTop = document.createElement("div");
         cleanups.push(
@@ -99,7 +116,8 @@ class VirtualBehavior extends ClassBehavior {
         const itemsSlot = document.createElement("div");
         cleanups.push(
           effect(() => {
-            while (itemsSlot.firstChild) itemsSlot.removeChild(itemsSlot.firstChild);
+            while (itemsSlot.firstChild)
+              itemsSlot.removeChild(itemsSlot.firstChild);
             visibleItems().forEach(({ item, index }) => {
               const wrapper = document.createElement("div");
               wrapper.setAttribute(
@@ -108,9 +126,12 @@ class VirtualBehavior extends ClassBehavior {
               );
               const rendered = renderItem(item, index);
               if (rendered) {
-                (Array.isArray(rendered) ? rendered.flat() : [rendered]).forEach(
-                  (n) => { wrapper.appendChild(n); },
-                );
+                (Array.isArray(rendered)
+                  ? rendered.flat()
+                  : [rendered]
+                ).forEach((n) => {
+                  wrapper.appendChild(n);
+                });
               }
               itemsSlot.appendChild(wrapper);
             });
@@ -120,7 +141,10 @@ class VirtualBehavior extends ClassBehavior {
         const spacerBottom = document.createElement("div");
         cleanups.push(
           effect(() => {
-            spacerBottom.setAttribute("style", `height:${String(offsetBottom())}px;`);
+            spacerBottom.setAttribute(
+              "style",
+              `height:${String(offsetBottom())}px;`,
+            );
           }),
         );
 

package/src/create-lifecycle-method-decorator.ts

@@ -13,7 +13,8 @@ export function createLifecycleMethodDecorator<
   T extends StatefulComponent = StatefulComponent,
 >(behavior: LifecycleMethodBehavior<T>) {
   return function (
-    value: (this: T, ...args: unknown[]) => void,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: (this: T, ...args: any[]) => void,
     _context: ClassMethodDecoratorContext<T>,
   ): void {
     _context.addInitializer(function (this: unknown) {

package/src/functions/watch.ts

@@ -1,5 +1,5 @@
 import type { StatefulComponent } from "@praxisjs/core";
-import { effect } from "@praxisjs/core/internal";
+import { effect, batch } from "@praxisjs/core/internal";
 import type { Computed } from "@praxisjs/shared";
 import { isComputed } from "@praxisjs/shared/internal";
 
@@ -76,11 +76,23 @@ export function Watch<
       const read = () =>
         Object.fromEntries(props.map((p) => [p, readValue(inst, p)]));
       let oldVals = read();
+      let latestVals = oldVals;
+      let scheduled = false;
       return effect(() => {
         const newVals = read();
         if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
-          callback(newVals, oldVals);
-          oldVals = newVals;
+          latestVals = newVals;
+          if (!scheduled) {
+            scheduled = true;
+            const prevVals = oldVals;
+            queueMicrotask(() => {
+              scheduled = false;
+              oldVals = latestVals;
+              batch(() => {
+                callback(latestVals, prevVals);
+              });
+            });
+          }
         }
       });
     },

package/src/index.ts

@@ -26,6 +26,8 @@ export {
   Resource,
   type ResourceInstance,
   type ResourceOptions,
+  Synced,
+  DeepState,
 } from "./properties";
 export { type Command, createCommand, Emit, OnCommand } from "./events";
 export {