@praxisjs/decorators 0.7.5 → 0.8.1

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/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-field-decorator.ts

@@ -18,12 +18,12 @@ export interface FieldBehavior<T = object> {
 }
 
 export function createFieldDecorator<T = StatefulComponent>(behavior: FieldBehavior<T>) {
-  return function (
+  return function <This extends T, Value = unknown>(
     _value: undefined,
-    context: ClassFieldDecoratorContext<T>,
+    context: ClassFieldDecoratorContext<This, Value>,
   ): void {
     context.addInitializer(function (this: unknown) {
-      const instance = this as T & StatefulComponent & Record<string, unknown>;
+      const instance = this as This & StatefulComponent & Record<string, unknown>;
       const name = context.name as string;
       const initialValue = instance[name];
 

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 {
@@ -33,6 +35,7 @@ export {
   type FieldBehavior,
   type FieldBinding,
 } from "./create-field-decorator";
+export { type ReactiveHost } from "./reactive-host";
 export {
   createClassDecorator,
   ClassBehavior,

package/src/properties/deep-state.ts

@@ -0,0 +1,62 @@
+import { signal } from "@praxisjs/core/internal";
+
+import { createFieldDecorator } from "../create-field-decorator";
+
+import type { ReactiveHost } from "../reactive-host";
+
+function deepProxy<T extends object>(target: T, notify: () => void): T {
+  return new Proxy(target, {
+    get(obj, key, receiver) {
+      const val: unknown = Reflect.get(obj, key, receiver);
+      if (val !== null && typeof val === "object") {
+        return deepProxy(val, notify);
+      }
+      return val;
+    },
+    set(obj, key, value) {
+      const result = Reflect.set(obj, key, value);
+      notify();
+      return result;
+    },
+    deleteProperty(obj, key) {
+      const result = Reflect.deleteProperty(obj, key);
+      notify();
+      return result;
+    },
+  });
+}
+
+export function DeepState() {
+  return createFieldDecorator<ReactiveHost>({
+    bind(instance, _name, initialValue) {
+      const version = signal(0);
+      let current = initialValue;
+      let proxy =
+        current !== null && typeof current === "object"
+          ? deepProxy(current, notify)
+          : current;
+
+      function notify() {
+        instance._stateDirty = true;
+        version.update((v) => v + 1);
+      }
+
+      return {
+        descriptor: {
+          get() {
+            version();
+            return proxy;
+          },
+          set(value: unknown) {
+            current = value;
+            proxy =
+              value !== null && typeof value === "object"
+                ? deepProxy(value, notify)
+                : value;
+            notify();
+          },
+        },
+      };
+    },
+  });
+}

package/src/properties/index.ts

@@ -6,3 +6,5 @@ export { Slot, initSlots } from "./slot";
 export { History, type HistoryOf } from "./history";
 export { Compose } from "./compose";
 export { Resource, type ResourceInstance, type ResourceOptions } from "./resource";
+export { Synced } from "./synced";
+export { DeepState } from "./deep-state";

package/src/properties/state.ts

@@ -2,8 +2,10 @@ import { signal } from "@praxisjs/core/internal";
 
 import { createFieldDecorator } from "../create-field-decorator";
 
+import type { ReactiveHost } from "../reactive-host";
+
 export function State() {
-  return createFieldDecorator({
+  return createFieldDecorator<ReactiveHost>({
     bind(instance, _name, initialValue) {
       const sig = signal(initialValue);
       return {

package/src/properties/synced.ts

@@ -0,0 +1,28 @@
+import { syncedSignal, type SyncedSignal } from "@praxisjs/core/internal";
+
+import { createFieldDecorator } from "../create-field-decorator";
+
+const signalMap = new WeakMap<object, Map<string, SyncedSignal<unknown>>>();
+
+export function Synced(channelName?: string) {
+  return createFieldDecorator({
+    bind(instance, name, initialValue) {
+      const key = channelName ?? name;
+
+      if (!signalMap.has(instance)) signalMap.set(instance, new Map());
+      const map = signalMap.get(instance) as Map<string, SyncedSignal<unknown>>;
+      if (!map.has(key)) map.set(key, syncedSignal(key, initialValue));
+      const sig = map.get(key) as SyncedSignal<unknown>;
+
+      return {
+        descriptor: {
+          get: () => sig(),
+          set: (value: unknown) => { sig.set(value); },
+        },
+        onUnmount() {
+          sig.close();
+        },
+      };
+    },
+  });
+}

package/src/reactive-host.ts

@@ -0,0 +1,3 @@
+export interface ReactiveHost {
+  _stateDirty: boolean;
+}