@praxisjs/runtime 0.2.7 → 0.2.9

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @praxisjs/runtime
 
+## 0.2.9
+
+### Patch Changes
+
+- 6c353ba: Add `untrack` utility and isolate component mounting from outer reactive contexts
+
+  **`@praxisjs/core`** exports two new functions from the public API:
+
+  - `peek(signal)` — reads a signal once without subscribing to it (was already in `/internal`, now public)
+  - `untrack(fn)` — runs a function with no active effect, suppressing all signal tracking inside it
+
+  ```ts
+  import { peek, untrack } from "@praxisjs/core";
+
+  // read a signal without creating a dependency
+  if (peek(this.max) > peek(this.count)) {
+    this.count++;
+  }
+
+  // suppress tracking for a block of reads
+  const snapshot = untrack(() => this.totalCost);
+  ```
+
+  **`@praxisjs/runtime`** — `mountComponent` now runs entirely inside `untrack`. This fixes a bug where components mounted inside a reactive context (e.g. the router) would accidentally subscribe the outer effect to any signal read during construction or render. The symptoms were:
+
+  - Eager reads like `description={this.count}` in JSX causing the router to re-mount the component on every state change, resetting state to its initial value
+  - `@Debug()` (and any decorator that reads a signal in its `addInitializer`) triggering the same re-mount loop
+
+  Reactive subscriptions set up via `{() => signal}` in JSX are unaffected — each arrow function creates its own isolated effect.
+
+- Updated dependencies [6c353ba]
+  - @praxisjs/core@1.2.0
+  - @praxisjs/decorators@0.7.1
+
+## 0.2.8
+
+### Patch Changes
+
+- Updated dependencies [2b8c768]
+  - @praxisjs/decorators@0.7.0
+
 ## 0.2.7
 
 ### Patch Changes

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAG,MAAM,2BAA2B,CAAC;AAKpF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,cAAc,CAC5B,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,WAAW,EAAE,KAAK,GACjB,IAAI,EAAE,CA6CR;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAG,MAAM,2BAA2B,CAAC;AAKpF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,cAAc,CAC5B,IAAI,EAAE,oBAAoB,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,WAAW,EAAE,KAAK,GACjB,IAAI,EAAE,CA+CR;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/component.js

@@ -1,42 +1,45 @@
+import { untrack } from "@praxisjs/core/internal";
 import { initSlots } from "@praxisjs/decorators";
 import { isComponent } from "@praxisjs/shared/internal";
 import { mountChildren } from "./children";
 import { runInScope } from "./context";
 export function mountComponent(ctor, props, parentScope) {
-    const scope = parentScope.fork();
-    const instance = new ctor({ ...props });
-    const rawChildren = props.children;
-    if (rawChildren != null) {
-        initSlots(instance, rawChildren);
-    }
-    const start = document.createComment(`[${ctor.name}]`);
-    const end = document.createComment(`[/${ctor.name}]`);
-    // Expose anchor so decorators like @Virtual can find the parent element
-    instance._anchor = end;
-    instance.onBeforeMount?.();
-    const container = document.createDocumentFragment();
-    container.appendChild(start);
-    let dom = null;
-    runInScope(scope, () => {
-        try {
-            dom = instance.render();
+    return untrack(() => {
+        const scope = parentScope.fork();
+        const instance = new ctor({ ...props });
+        const rawChildren = props.children;
+        if (rawChildren != null) {
+            initSlots(instance, rawChildren);
         }
-        catch (e) {
-            instance.onError?.(e instanceof Error ? e : new Error(String(e)));
-        }
-    });
-    mountChildren(container, dom, scope);
-    container.appendChild(end);
-    queueMicrotask(() => {
-        instance._mounted = true;
-        instance.onMount?.();
-    });
-    scope.add(() => {
-        instance.onUnmount?.();
-        instance._mounted = false;
+        const start = document.createComment(`[${ctor.name}]`);
+        const end = document.createComment(`[/${ctor.name}]`);
+        // Expose anchor so decorators like @Virtual can find the parent element
+        instance._anchor = end;
+        instance.onBeforeMount?.();
+        const container = document.createDocumentFragment();
+        container.appendChild(start);
+        let dom = null;
+        runInScope(scope, () => {
+            try {
+                dom = instance.render();
+            }
+            catch (e) {
+                instance.onError?.(e instanceof Error ? e : new Error(String(e)));
+            }
+        });
+        mountChildren(container, dom, scope);
+        container.appendChild(end);
+        queueMicrotask(() => {
+            instance._mounted = true;
+            instance.onMount?.();
+        });
+        scope.add(() => {
+            instance.onUnmount?.();
+            instance._mounted = false;
+        });
+        // Return the nodes from the fragment as an array so the caller can append them
+        return Array.from(container.childNodes);
     });
-    // Return the nodes from the fragment as an array so the caller can append them
-    return Array.from(container.childNodes);
 }
 export { isComponent };
 //# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,WAAW,EAA8B,MAAM,2BAA2B,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIvC,MAAM,UAAU,cAAc,CAC5B,IAA0B,EAC1B,KAA8B,EAC9B,WAAkB;IAElB,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEjC,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAExC,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;IACnC,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;QACxB,SAAS,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAEtD,wEAAwE;IACxE,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAC;IAEvB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;IAE3B,MAAM,SAAS,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IACpD,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,GAAG,GAAyB,IAAI,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE;QACrB,IAAI,CAAC;YACH,GAAG,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;QAC1B,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE3B,cAAc,CAAC,GAAG,EAAE;QAClB,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;QACzB,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,+EAA+E;IAC/E,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;AAC1C,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,WAAW,EAA8B,MAAM,2BAA2B,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIvC,MAAM,UAAU,cAAc,CAC5B,IAA0B,EAC1B,KAA8B,EAC9B,WAAkB;IAElB,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;QAEjC,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QAExC,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;QACnC,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,SAAS,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QACnC,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACvD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QAEtD,wEAAwE;QACxE,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAC;QAEvB,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;QAE3B,MAAM,SAAS,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QACpD,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,GAAG,GAAyB,IAAI,CAAC;QACrC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE;YACrB,IAAI,CAAC;gBACH,GAAG,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC1B,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,aAAa,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QACrC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAE3B,cAAc,CAAC,GAAG,EAAE;YAClB,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;YACzB,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;YACvB,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,+EAA+E;QAC/E,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/runtime",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,8 +14,8 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@praxisjs/core": "1.1.0",
-    "@praxisjs/decorators": "0.6.1",
+    "@praxisjs/decorators": "0.7.1",
+    "@praxisjs/core": "1.2.0",
     "@praxisjs/shared": "0.2.0"
   },
   "scripts": {

package/src/component.ts

@@ -1,3 +1,4 @@
+import { untrack } from "@praxisjs/core/internal";
 import { initSlots } from "@praxisjs/decorators";
 import { isComponent, type ComponentConstructor  } from "@praxisjs/shared/internal";
 
@@ -11,50 +12,52 @@ export function mountComponent(
   props: Record<string, unknown>,
   parentScope: Scope,
 ): Node[] {
-  const scope = parentScope.fork();
+  return untrack(() => {
+    const scope = parentScope.fork();
 
-  const instance = new ctor({ ...props });
+    const instance = new ctor({ ...props });
 
-  const rawChildren = props.children;
-  if (rawChildren != null) {
-    initSlots(instance, rawChildren);
-  }
+    const rawChildren = props.children;
+    if (rawChildren != null) {
+      initSlots(instance, rawChildren);
+    }
 
-  const start = document.createComment(`[${ctor.name}]`);
-  const end = document.createComment(`[/${ctor.name}]`);
+    const start = document.createComment(`[${ctor.name}]`);
+    const end = document.createComment(`[/${ctor.name}]`);
 
-  // Expose anchor so decorators like @Virtual can find the parent element
-  instance._anchor = end;
+    // Expose anchor so decorators like @Virtual can find the parent element
+    instance._anchor = end;
 
-  instance.onBeforeMount?.();
+    instance.onBeforeMount?.();
 
-  const container = document.createDocumentFragment();
-  container.appendChild(start);
+    const container = document.createDocumentFragment();
+    container.appendChild(start);
 
-  let dom: Node | Node[] | null = null;
-  runInScope(scope, () => {
-    try {
-      dom = instance.render();
-    } catch (e) {
-      instance.onError?.(e instanceof Error ? e : new Error(String(e)));
-    }
-  });
+    let dom: Node | Node[] | null = null;
+    runInScope(scope, () => {
+      try {
+        dom = instance.render();
+      } catch (e) {
+        instance.onError?.(e instanceof Error ? e : new Error(String(e)));
+      }
+    });
 
-  mountChildren(container, dom, scope);
-  container.appendChild(end);
+    mountChildren(container, dom, scope);
+    container.appendChild(end);
 
-  queueMicrotask(() => {
-    instance._mounted = true;
-    instance.onMount?.();
-  });
+    queueMicrotask(() => {
+      instance._mounted = true;
+      instance.onMount?.();
+    });
 
-  scope.add(() => {
-    instance.onUnmount?.();
-    instance._mounted = false;
-  });
+    scope.add(() => {
+      instance.onUnmount?.();
+      instance._mounted = false;
+    });
 
-  // Return the nodes from the fragment as an array so the caller can append them
-  return Array.from(container.childNodes);
+    // Return the nodes from the fragment as an array so the caller can append them
+    return Array.from(container.childNodes);
+  });
 }
 
 export { isComponent };