@praxisjs/runtime 0.7.0 → 0.8.0

package/dist/template.js

@@ -0,0 +1,270 @@
+import { mountChildren } from "./children";
+import { getCurrentScope } from "./context";
+import { createElement } from "./dom/create";
+import { addDelegatedEvent, delegatedProp } from "./dom/events";
+import { applyProp, bindClass, hasWritableProperty, setProp } from "./dom/props";
+import { recording, recordProp } from "./hydration-context";
+import { mountReactive } from "./reactive";
+/** A reactive child's position: the comment it inserts its nodes before. */
+export const MARKER = 0;
+let pendingPatches = null;
+// Templates are built in the inert document that <template> contents live in: cloning there and
+// letting the insertion adopt the clone is cheaper than cloning inside the live document. Custom
+// elements are the exception, since only the live document upgrades them, so a template that
+// contains one is built (and cloned) there instead.
+let inertDocument = null;
+// null is the live document, looked up when used: the module is imported before any DOM exists
+// when a server renderer installs one afterwards.
+let buildDocument = null;
+let sawCustomElement = false;
+// The global document the cached templates were built for, and a counter that tells every template
+// to build again. A server renderer may install a new window (a new global document) for each run:
+// nodes cloned from another window's templates fail every `instanceof Node` check and are dropped.
+let templatesDocument = null;
+let generation = 0;
+function inert() {
+    templatesDocument ??= document;
+    return (inertDocument ??= document.createElement("template").content.ownerDocument);
+}
+/** Called by render(): templates built for another global document are built again on next use. */
+export function syncTemplateDocument() {
+    if (templatesDocument === null || templatesDocument === document)
+        return;
+    templatesDocument = null;
+    inertDocument = null;
+    generation++;
+}
+// Attribute-level props survive cloneNode, so they are applied to the template itself. A prop that
+// lives only in a property (an expando, a custom element's field) would be lost by cloning, so it is
+// replayed on every clone instead. Which is which is checked on a probe element, not guessed.
+function bakeProp(el, key, value) {
+    const name = key === "htmlFor" ? "for" : key;
+    if (name === "class" || name === "className" || name === "style" || value === null || value === undefined) {
+        setProp(el, name, value);
+        return;
+    }
+    // Deep, so state held by the children (a <select>'s chosen option) is part of the check.
+    const probe = el.cloneNode(true);
+    setProp(probe, name, value);
+    const survives = !hasWritableProperty(probe, name) ||
+        Object.is(probe.cloneNode(true)[name], probe[name]);
+    if (survives)
+        setProp(el, name, value);
+    else
+        pendingPatches.push([el, name, value]);
+}
+function appendStatic(parent, child) {
+    if (child === MARKER) {
+        parent.appendChild((buildDocument ?? document).createComment(""));
+    }
+    else if (typeof child === "string") {
+        parent.appendChild((buildDocument ?? document).createTextNode(child));
+    }
+    else if (Array.isArray(child)) {
+        for (const c of child)
+            appendStatic(parent, c);
+    }
+    else if (child instanceof Node) {
+        parent.appendChild(child);
+    }
+}
+/** Builds one static element of a template. */
+export function element(tag, props, children) {
+    if (tag.includes("-"))
+        sawCustomElement = true;
+    const el = createElement(tag, buildDocument ?? document);
+    // Children first, as mountElement does, so a prop that depends on them (a <select> value) sees them.
+    if (children !== null)
+        for (const child of children)
+            appendStatic(el, child);
+    if (props !== null)
+        for (const key in props)
+            bakeProp(el, key, props[key]);
+    return el;
+}
+function pathOf(root, node) {
+    const path = [];
+    let current = node;
+    while (current !== root) {
+        let index = 0;
+        let sibling = current.previousSibling;
+        while (sibling !== null) {
+            index++;
+            sibling = sibling.previousSibling;
+        }
+        path.unshift(index);
+        current = current.parentNode;
+    }
+    return path;
+}
+function nodeAt(root, path) {
+    let node = root;
+    for (const index of path)
+        node = node.childNodes[index];
+    return node;
+}
+// Builds the template root in `doc` (null: the live document) and lists the props to replay on
+// every clone.
+function buildIn(doc, build) {
+    const pending = [];
+    pendingPatches = pending;
+    buildDocument = doc;
+    sawCustomElement = false;
+    const built = build();
+    return [built, pending.length > 0 ? pending.map(([el, key, value]) => [pathOf(built, el), key, value]) : null];
+}
+/** Returns a function that clones the template `build` creates (built on first use). */
+export function template(build) {
+    let root = null;
+    let patches = null;
+    let live = false;
+    let built = -1;
+    return () => {
+        if (built !== generation) {
+            const outerPatches = pendingPatches;
+            const outerDocument = buildDocument;
+            const outerSaw = sawCustomElement;
+            try {
+                let result = buildIn(inert(), build);
+                live = sawCustomElement;
+                if (live)
+                    result = buildIn(null, build);
+                [root, patches] = result;
+                built = generation;
+            }
+            finally {
+                pendingPatches = outerPatches;
+                buildDocument = outerDocument;
+                sawCustomElement = outerSaw;
+            }
+        }
+        // A clone of a live-document template taken while another template builds forces that one
+        // into the live document too, or its own clones would hold never-upgraded custom elements.
+        if (live)
+            sawCustomElement = true;
+        const node = root.cloneNode(true);
+        if (patches !== null) {
+            for (const [path, key, value] of patches) {
+                const el = nodeAt(node, path);
+                setProp(el, key, value);
+                // Cloned while another template is being built: that template's clones need it too.
+                if (pendingPatches !== null)
+                    pendingPatches.push([el, key, value]);
+                if (recording)
+                    recordProp(el, key, value, getCurrentScope());
+            }
+        }
+        return node;
+    };
+}
+/**
+ * Returns a function that clones the tree `markup` parses to (parsed on first use). The compiler
+ * emits it only for markup the parser reads back as the tree element() would build, with no custom
+ * element in it, so it is parsed and cloned in the inert document like a built template.
+ */
+export function html(markup) {
+    let root = null;
+    let built = -1;
+    return () => {
+        if (built !== generation) {
+            const parser = inert().createElement("template");
+            parser.innerHTML = markup;
+            root = parser.content.firstChild;
+            built = generation;
+        }
+        return root.cloneNode(true);
+    };
+}
+/** Applies a dynamic prop to a cloned element. */
+export function prop(el, key, value, scope) {
+    if (recording)
+        recordProp(el, key, value, scope);
+    applyProp(el, key, value, scope);
+}
+/** Binds an event prop of a compiled template element through the delegated path (dom/events). */
+export function on(el, key, value, scope) {
+    if (recording)
+        recordProp(el, key, value, scope);
+    const entry = delegatedProp(key);
+    if (entry !== null)
+        addDelegatedEvent(el, entry, value, scope);
+    else
+        applyProp(el, key, value, scope);
+}
+/**
+ * The binding target of an event prop, resolved once per module by the compiler: the delegated
+ * entry, or the key itself when `key` is not a known event (it is then bound as a plain prop).
+ */
+export function event(key) {
+    return delegatedProp(key) ?? key;
+}
+/** Binds an event prop through the target `event()` resolved, with no lookup per binding. */
+export function onEvent(el, target, value, scope) {
+    if (typeof target === "string") {
+        prop(el, target, value, scope);
+        return;
+    }
+    if (recording)
+        recordProp(el, target.key, value, scope);
+    addDelegatedEvent(el, target, value, scope);
+}
+/**
+ * Binds a reactive `class` (or `className`) prop: the compiler emits it for a function literal
+ * value, which applyProp would bind the same way after its key checks.
+ */
+export function className(el, read, scope) {
+    if (recording)
+        recordProp(el, "class", read, scope);
+    bindClass(el, read, scope);
+}
+/** Mounts a reactive child before its marker comment from the template. */
+export function reactive(marker, fn, scope) {
+    mountReactive(marker.parentNode, fn, scope, marker);
+}
+/**
+ * Binds a reactive child that is the only content of `parent`, which the template leaves empty: no
+ * anchor comment is needed. Templates compiled by earlier versions hold an empty text node there,
+ * which a text result takes over; a hydration build pass gets one too, as mountReactive registers
+ * fresh nodes of other results only.
+ */
+export function reactiveOnly(parent, fn, scope) {
+    let placeholder = null;
+    if (parent.hasChildNodes())
+        placeholder = parent.firstChild;
+    else if (recording)
+        placeholder = parent.appendChild(document.createTextNode(""));
+    mountReactive(parent, fn, scope, null, placeholder);
+}
+/** Inserts the only child of `parent`, which the template leaves empty. */
+export function insertOnly(parent, value, scope) {
+    // textContent builds the text node without a JS wrapper for it. An empty string still gets its
+    // (empty) text node, as mountChildren gives it one.
+    if ((typeof value === "string" && value !== "") || typeof value === "number") {
+        parent.textContent = value;
+        return;
+    }
+    mountChildren(parent, value, scope);
+}
+/** Inserts a dynamic child before `before`, or at the end of `parent` when it is null. */
+export function insert(parent, value, before, scope) {
+    if (before === null) {
+        mountChildren(parent, value, scope);
+    }
+    else if (typeof value === "function") {
+        const end = parent.insertBefore(document.createComment(""), before);
+        mountReactive(parent, value, scope, end);
+    }
+    else if (value instanceof Node) {
+        parent.insertBefore(value, before);
+    }
+    else if (typeof value === "string" || typeof value === "number") {
+        before.before(String(value));
+    }
+    else if (Array.isArray(value)) {
+        // Each item goes straight in front of `before`, in order: no fragment to fill and empty again.
+        for (const item of value)
+            insert(parent, item, before, scope);
+    }
+}
+export { getCurrentScope as scope };
+//# sourceMappingURL=template.js.map

package/dist/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../src/template.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@praxisjs/runtime",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -10,16 +11,24 @@
       "types": "./dist/index.d.ts"
     }
   },
+  "files": [
+    "dist",
+    "src",
+    "!dist/**/__tests__",
+    "!src/**/__tests__",
+    "CHANGELOG.md"
+  ],
   "devDependencies": {
     "typescript": "^6.0.3"
   },
   "dependencies": {
-    "@praxisjs/core": "2.2.0",
-    "@praxisjs/decorators": "1.7.0",
-    "@praxisjs/shared": "0.3.1"
+    "@praxisjs/core": "2.3.0",
+    "@praxisjs/decorators": "2.0.0",
+    "@praxisjs/shared": "0.3.2"
   },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/children.ts

@@ -10,7 +10,8 @@ export function mountChildren(
   if (children === null || children === undefined || children === false) return;
 
   if (typeof children === "string" || typeof children === "number") {
-    parent.appendChild(document.createTextNode(String(children)));
+    // append() builds the text node natively: no JS wrapper is created for it.
+    (parent as ParentNode).append(String(children));
     return;
   }
 

package/src/component.ts

@@ -1,100 +1,172 @@
 import {
+  getComponentStart,
+  pauseTracking,
+  resumeTracking,
+  setCurrentOwner,
   setComponentAnchor,
   setComponentMounted,
-  untrack,
 } from "@praxisjs/core/internal";
 import { initSlots } from "@praxisjs/decorators";
-import { isComponent, type ComponentConstructor  } from "@praxisjs/shared/internal";
+import type { ComponentConstructor } from "@praxisjs/shared/internal";
 
 import { mountChildren } from "./children";
-import { runInScope } from "./context";
+import { swapScope } from "./context";
+import { hotEnabled, isHotClass, latestClass, setHotRemount, trackHotInstance, type HotInstance } from "./hmr";
+import { recording, onHydrationReplace } from "./hydration-context";
 
 import type { Scope } from "./scope";
 
-let pendingMounts: Array<() => void> = [];
+type Instance = InstanceType<ComponentConstructor>;
+
+// One object per component carries both lifecycle steps: mounting (drained in a shared microtask)
+// and disposal (registered in the component's scope), instead of a closure for each.
+class ComponentLife {
+  declare disposed: boolean;
+  declare readonly instance: Instance;
+  declare readonly ref: ((instance: object | null) => void) | undefined;
+
+  constructor(instance: Instance, ref: ((instance: object | null) => void) | undefined) {
+    this.disposed = false;
+    this.instance = instance;
+    this.ref = ref;
+  }
+
+  mount(): void {
+    if (this.disposed) return;
+    setComponentMounted(this.instance, true);
+    this.instance.onMount?.();
+    this.ref?.(this.instance);
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    this.instance.onUnmount?.();
+    setComponentMounted(this.instance, false);
+    this.ref?.(null);
+  }
+}
+
+let pendingMounts: ComponentLife[] = [];
 
 // One shared microtask drains every component mounted in the same synchronous pass, in mount
 // order (children before parents). A throwing onMount is rethrown on its own microtask so it
 // can't stop the others, as it couldn't when each component had a microtask of its own.
-function scheduleMount(run: () => void): void {
-  if (pendingMounts.length === 0) {
-    queueMicrotask(() => {
-      const queue = pendingMounts;
-      pendingMounts = [];
-      for (const job of queue) {
-        try {
-          job();
-        } catch (e) {
-          queueMicrotask(() => { throw e; });
-        }
-      }
-    });
+function drainMounts(): void {
+  const queue = pendingMounts;
+  pendingMounts = [];
+  for (const life of queue) {
+    try {
+      life.mount();
+    } catch (e) {
+      queueMicrotask(() => { throw e; });
+    }
   }
-  pendingMounts.push(run);
+}
+
+function scheduleMount(life: ComponentLife): void {
+  if (pendingMounts.length === 0) queueMicrotask(drainMounts);
+  pendingMounts.push(life);
 }
 
 export function mountComponent(
   ctor: ComponentConstructor,
   props: Record<string, unknown>,
   parentScope: Scope,
+  // Hot remount only: the comments of the instance being replaced, kept as the new one's bounds.
+  bounds: [Comment, Comment] | null = null,
 ): Node[] {
-  return untrack(() => {
+  const prevSub = pauseTracking();
+  try {
+    // A registered class (development, see hmr.ts) always mounts its newest version, and every
+    // instance gets comment bounds, which stay in place when it is mounted again.
+    let hot = false;
+    if (hotEnabled) {
+      ctor = latestClass(ctor);
+      hot = isHotClass(ctor);
+    }
     const scope = parentScope.fork();
 
-    // Strip ref — managed by the runtime, not forwarded to the component.
-    const { ref: refFn, ...instanceProps } = props;
-    const ref = typeof refFn === "function"
-      ? refFn as (instance: object | null) => void
-      : undefined;
+    // Strip ref — managed by the runtime, not forwarded to the component. The component copies its
+    // props itself, so they are only copied here when there is a ref to leave out.
+    let instanceProps = props;
+    let ref: ((instance: object | null) => void) | undefined;
+    if ("ref" in props) {
+      const { ref: refFn, ...rest } = props;
+      instanceProps = rest;
+      if (typeof refFn === "function") ref = refFn as (instance: object | null) => void;
+    }
 
-    const instance = new ctor({ ...instanceProps });
+    const instance = new ctor(instanceProps);
 
     const rawChildren = instanceProps.children;
     if (rawChildren != null) {
       initSlots(instance, rawChildren);
     }
 
-    const start = document.createComment(`[${ctor.name}]`);
-    const end = document.createComment(`[/${ctor.name}]`);
-    let disposed = false;
-
-    setComponentAnchor(instance, end);
-
     instance.onBeforeMount?.();
 
-    const container = document.createDocumentFragment();
-    container.appendChild(start);
-
     let dom: Node | Node[] | null = null;
-    runInScope(scope, () => {
-      try {
-        dom = instance.render();
-      } catch (e) {
-        const fallback = instance.onError?.(e instanceof Error ? e : new Error(String(e)));
-        if (fallback != null) dom = fallback;
+    const prevScope = swapScope(scope);
+    const prevOwner = setCurrentOwner(instance);
+    try {
+      dom = instance.render();
+    } catch (e) {
+      const fallback = instance.onError?.(e instanceof Error ? e : new Error(String(e)));
+      if (fallback != null) dom = fallback;
+    } finally {
+      setCurrentOwner(prevOwner);
+      swapScope(prevScope);
+    }
+
+    let nodes: Node[];
+    if (hot) {
+      const container = document.createDocumentFragment();
+      const start = bounds === null ? container.appendChild(document.createComment(`[${ctor.name}]`)) : bounds[0];
+      mountChildren(container, dom, scope);
+      const end = bounds === null ? container.appendChild(document.createComment(`[/${ctor.name}]`)) : bounds[1];
+      setComponentAnchor(instance, end);
+      nodes = Array.from(container.childNodes);
+      trackHotInstance({ ctor, props, parentScope, scope, start, end });
+    } else if (dom instanceof Node && dom.nodeType !== 11) {
+      // A single root node can't change, so it bounds the component by itself: no comments.
+      nodes = [dom];
+      setComponentAnchor(instance, dom);
+      if (recording) onHydrationReplace(dom, (real) => { setComponentAnchor(instance, real); });
+    } else {
+      // Several nodes, or ones a reactive child may replace: comments mark where the component
+      // starts and ends, unless its render already brought them (see getComponentStart).
+      const bounded = getComponentStart(instance) !== undefined;
+      const container = document.createDocumentFragment();
+      if (!bounded) container.appendChild(document.createComment(`[${ctor.name}]`));
+      mountChildren(container, dom, scope);
+      if (!bounded) {
+        const end = document.createComment(`[/${ctor.name}]`);
+        container.appendChild(end);
+        setComponentAnchor(instance, end);
       }
-    });
-
-    mountChildren(container, dom, scope);
-    container.appendChild(end);
-
-    scheduleMount(() => {
-      if (disposed) return;
-      setComponentMounted(instance, true);
-      instance.onMount?.();
-      ref?.(instance);
-    });
-
-    scope.add(() => {
-      disposed = true;
-      instance.onUnmount?.();
-      setComponentMounted(instance, false);
-      ref?.(null);
-    });
-
-    // Return the nodes from the fragment as an array so the caller can append them
-    return Array.from(container.childNodes);
-  });
+      nodes = Array.from(container.childNodes);
+    }
+
+    const life = new ComponentLife(instance, ref);
+    scheduleMount(life);
+    scope.add(life);
+    return nodes;
+  } finally {
+    resumeTracking(prevSub);
+  }
+}
+
+// Mounts `hot` again with `ctor` between the comments it already has: the reactive children and
+// lists around it keep their references to those comments.
+function remountHot(hot: HotInstance, ctor: ComponentConstructor): void {
+  const { start, end } = hot;
+  const parent = end.parentNode;
+  // Detached (kept aside by its owner): there is no place to render into, so it is left as it is.
+  if (parent === null || start.parentNode !== parent) return;
+  hot.scope.dispose();
+  for (let node = start.nextSibling; node !== null && node !== end; node = start.nextSibling) parent.removeChild(node);
+  const nodes = mountComponent(ctor, hot.props, hot.parentScope, [start, end]);
+  for (const node of nodes) parent.insertBefore(node, end);
 }
 
-export { isComponent };
+setHotRemount(remountHot);

package/src/context.ts

@@ -2,15 +2,38 @@ import type { Scope } from "./scope";
 
 let _currentScope: Scope | null = null;
 
+/** Owner of a child scope that is created only once something asks for it (see swapLazyScope). */
+export interface LazyScopeHost {
+  parentScope: Scope;
+  scope: Scope | null;
+}
+
+let lazyHost: LazyScopeHost | null = null;
+
 export function getCurrentScope(): Scope {
-  if (!_currentScope) {
-    throw new Error(
-      "[PraxisJS] jsx() called outside of a render context. Make sure to call render() with a factory function.",
-    );
+  if (_currentScope === null) {
+    if (lazyHost === null) {
+      throw new Error(
+        "[PraxisJS] jsx() called outside of a render context. Make sure to call render() with a factory function.",
+      );
+    }
+    _currentScope = lazyHost.scope ??= lazyHost.parentScope.fork();
   }
   return _currentScope;
 }
 
+/**
+ * Makes `host` the scope source while no scope is current: its child scope is forked from
+ * `host.parentScope` the first time code asks for the current scope, so a run that registers
+ * nothing (a reactive text binding) creates no scope at all. Returns the previous host, which the
+ * caller must restore in a `finally`, together with the current scope (set it to `host.scope`).
+ */
+export function swapLazyScope(host: LazyScopeHost | null): LazyScopeHost | null {
+  const prev = lazyHost;
+  lazyHost = host;
+  return prev;
+}
+
 export function runInScope<T>(scope: Scope, fn: () => T): T {
   const prev = _currentScope;
   _currentScope = scope;
@@ -20,3 +43,11 @@ export function runInScope<T>(scope: Scope, fn: () => T): T {
     _currentScope = prev;
   }
 }
+
+// Same as runInScope without a closure per call, for hot paths that create many scopes in a row.
+// Callers must restore the returned scope in a `finally`.
+export function swapScope(scope: Scope | null): Scope | null {
+  const prev = _currentScope;
+  _currentScope = scope;
+  return prev;
+}