canvasengine 2.0.0-rc.3 → 2.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/engine/signal.ts

@@ -30,6 +30,28 @@ export let currentSubscriptionsTracker: ((subscription: Subscription) => void) |
 export let currentDefinePropsTracker: ((signals: Record<string, any>) => void) | null = null;
 export let mountTracker: MountFunction | null = null;
 
+const readSignalValue = (value: any) => {
+  const callableValueSignal = value?.__canvasEngineCallableSignalValue;
+  if (callableValueSignal) return callableValueSignal();
+  return isSignal(value) ? value() : value;
+};
+
+const patchDefinePropsSignals = (target: Element, source: Element) => {
+  const targetSignals = (target as any)[DEFINE_PROPS_SIGNALS];
+  const sourceSignals = (source as any)[DEFINE_PROPS_SIGNALS];
+
+  if (!targetSignals || !sourceSignals) {
+    return;
+  }
+
+  Object.entries(sourceSignals as Record<string, any>).forEach(([key, sourceSignal]) => {
+    const targetSignal = targetSignals[key];
+    if (targetSignal && typeof targetSignal.set === "function") {
+      targetSignal.set(readSignalValue(sourceSignal));
+    }
+  });
+};
+
 const getHotComponentRegistry = (): Map<string, HotComponentRecord> => {
   const hotGlobal = globalThis as any;
   if (!hotGlobal.__CANVAS_ENGINE_HOT_COMPONENTS__) {
@@ -274,6 +296,8 @@ export function createHotComponent<P>(
             nextProps.children = target.props.children;
           }
 
+          patchDefinePropsSignals(target, source);
+
           target.props = nextProps;
           target.propObservables = source.propObservables;
           target.componentInstance.onUpdate?.(nextProps);

package/src/hooks/useProps.ts

@@ -1,6 +1,7 @@
 import { isSignal, signal } from "@signe/reactive"
 import { isPrimitive } from "../engine/reactive"
 import { currentDefinePropsTracker } from "../engine/signal"
+import { isTrigger } from "../engine/trigger"
 
 /**
  * Converts props into reactive signals if they are primitive values.
@@ -47,7 +48,36 @@ type PropSchema = {
     [key: string]: PropType | PropType[] | PropConfig;
 }
 
-const toPropSignal = (value: any) => isSignal(value) ? value : signal(value)
+const DEFINE_PROPS_CALLABLE_SIGNAL_VALUE = "__canvasEngineCallableSignalValue"
+
+const createCallablePropSignal = (value: (...args: any[]) => any) => {
+    const valueSignal: any = signal(value)
+    const callable: any = (...args: any[]) => valueSignal()(...args)
+
+    callable[DEFINE_PROPS_CALLABLE_SIGNAL_VALUE] = valueSignal
+    callable.set = valueSignal.set
+    callable.freeze = valueSignal.freeze
+    callable.unfreeze = valueSignal.unfreeze
+    callable.mutate = valueSignal.mutate
+    callable.update = valueSignal.update
+    callable.observable = valueSignal.observable
+    callable._subject = valueSignal._subject
+
+    Object.defineProperty(callable, "_isFrozen", {
+        get: () => valueSignal._isFrozen,
+        set: (value) => {
+            valueSignal._isFrozen = value
+        }
+    })
+
+    return callable
+}
+
+const toPropSignal = (value: any) => {
+    if (isSignal(value) || isTrigger(value)) return value
+    if (typeof value === 'function') return createCallablePropSignal(value)
+    return signal(value)
+}
 
 const definePropSignals = (props: any): any => {
     const obj: any = {}