@praxisjs/decorators 0.7.5 → 0.8.0

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/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 {

package/src/properties/deep-state.ts

@@ -0,0 +1,60 @@
+import { signal } from "@praxisjs/core/internal";
+
+import { createFieldDecorator } from "../create-field-decorator";
+
+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({
+    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/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();
+        },
+      };
+    },
+  });
+}