@dom-expressions/runtime 0.50.0-next.15 → 0.50.0-next.16

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # dom-expressions
 
+## 0.50.0-next.16
+
+### Patch Changes
+
+- f2e56fe: fix(client): re-claim a hole's live DOM region when a streamed `$df` fragment swap replaced its tracked nodes mid-hydration (solidjs/solid#2801 bug 1, pending-stream case). A Loading fallback claimed during hydration is swapped out by `$df` before the boundary resumes; insert's node bookkeeping still pointed at the removed fallback, so the content pass fabricated detached text nodes and the first post-hydration refresh appended duplicates. When the tracked nodes are disconnected while hydrating, insert now re-derives the region (parent children, or back to the matching `<!--$-->` for marker-bounded holes) so loose text re-claims positionally — elements already recovered via `_hk`.
+- b431fe7: Handle module preload failures during hydration instead of hanging silently (solidjs/solid#2817 layer 3). `loadModuleAssets` drops rejected entries from the loading cache so later boundaries/navigations can retry, and the root `_assets` path in `hydrate()` falls back to a fresh client render (with a console diagnostic) instead of leaving the page permanently dead.
+- 016b460: Server rendering a plain (non-template) object child now dev-warns and skips it, matching the client, instead of crashing with `Cannot read properties of undefined (reading 'fn')` (solidjs/solid#2801 bug 6)
+- c40ac21: Fix style object updates so shared or constant style objects are not mutated while diffing, and nullish property values correctly remove the applied style.
+- c2a542b: Fix hydration key mismatches when async holes defer past eager siblings
+  (solidjs/solid#2801 bug 2). Dynamic element children that can allocate
+  hydration ids (conditionals, component-children access, call expressions)
+  are now compiled with their own id scope on both generates: the dom and ssr
+  generates wrap the hole expression in a new `scope()` runtime helper using a
+  shared predicate, so marking cannot desync.
+
+  On the client, `scope(fn)` tags the accessor and `insert()` makes the outer
+  render effect non-transparent (its own id scope) for tagged accessors; the
+  inner unwrapping effect stays transparent so content ids keep a fixed depth.
+  On the server, `scope` (framework-provided via rxcore as `ssrScope`) reserves
+  one id slot at registration and evaluates the hole — including async retries
+  — under that reserved id with a zeroed child counter, so retry timing can no
+  longer shift sibling ids. The ssr generate's `orderedInsert` sibling
+  thunk-wrapping is removed; it is superseded by hole scopes.
+
+  Hole content ids gain one nesting level (e.g. `_hk=10` instead of `_hk=1`)
+  identically on both sides. rxcore implementations must provide an `ssrScope`
+  export and honor a `scope: true` effect option (mapped to a non-transparent
+  render effect).
+
+- fa24389: Fix delegated events never reaching outer roots when a render root is
+  rendered inside another root's DOM (embedded widgets, microfrontends).
+  The first (innermost) container listener marked the event consumed for
+  every other root, so an outer root's delegated handlers were silently
+  skipped even though the native event bubbled through its elements: a
+  plain `addEventListener` on the same element fired while the delegated
+  handler didn't.
+
+  `$$EVENT_OWNER` now records the boundary of the most recent walk instead
+  of a consumed flag: an ancestor container whose subtree contains that boundary
+  resumes the handler walk from it up to its own boundary, so each root's
+  handlers fire exactly once, innermost-out, matching native bubbling.
+  `stopPropagation()` inside a nested root still suppresses outer roots (it
+  stops the native event before their listeners run), and hydration event
+  replay now relays queued events through all matching roots innermost-first
+  so pre- and post-hydration clicks behave identically. Apps that relied on
+  nested roots to isolate clicks from outer handlers should use
+  `stopPropagation()`, which remains the documented mechanism. Non-nested
+  apps are unaffected; the resume path is unreachable unless an inner root
+  already handled the event.
+
+- 75b4ab2: Normalize manifest asset URL joining in `resolveAssets` (solidjs/solid#2817 layers 1-2). A non-string `_base` (e.g. a dev-manifest proxy answering every key) falls back to `/`, leading-slash `file` values no longer produce `//` URLs, and absolute/protocol-relative URLs pass through untouched — the server runtime emits sane module URLs for any reasonable manifest shape instead of relying on bundler plugins getting the contract exactly right.
+- 668264f: Universal JSX now passes compile-time static host props to `createElement(tag, staticProps)` so custom renderers can configure nodes before children are inserted. Dynamic props and elements with spreads continue to use the existing `setProp` / `spread` paths.
+
 ## 0.50.0-next.15
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dom-expressions/runtime",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.50.0-next.15",
+  "version": "0.50.0-next.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "csstype": "^3.1",
     "seroval": "~1.5.0",
     "seroval-plugins": "~1.5.0",
-    "@dom-expressions/babel-plugin-jsx": "0.50.0-next.15"
+    "@dom-expressions/babel-plugin-jsx": "0.50.0-next.16"
   },
   "scripts": {
     "test": "jest --no-cache",

package/src/client.d.ts

@@ -23,6 +23,7 @@ export function render(
  * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
  */
 export function template(html: string, flag?: 1 | 2): () => Element;
+export function scope<T extends () => any>(fn: T): T;
 export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function untrack<T>(fn: () => T): T;

package/src/client.js

@@ -246,20 +246,45 @@ export function addEvent(node, name, handler, delegate) {
 
 export function style(node, value, prev) {
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return (nodeStyle.cssText = value);
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return (nodeStyle.cssText = value);
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  // Track declarations applied by style() itself. value/prev are user-owned
+  // and may be the same object on shared-effect reruns.
+  let applied = node._$styles;
+  if (!applied) {
+    // seed from prev so direct callers that track their own previous value
+    // still get removals on their first call here
+    applied = node._$styles = prev ? { ...prev } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
+  // Diff against applied state so in-place mutations are detected without
+  // rewriting unchanged DOM styles.
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
 
 export function setStyleProperty(node, name, value) {
@@ -311,20 +336,35 @@ export function ref(fn, element) {
   runWithOwner(null, () => applyRef(resolved, element));
 }
 
+// Compiler tag for holes that can allocate hydration ids: the outer insert
+// effect gets its own (non-transparent) id scope, mirroring the server's
+// `scope()` owner. Keeps sibling ids stable no matter when the hole runs.
+export function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+
+const SCOPE_OPTIONS = { scope: true };
+
+// Drop the `<!--!$-->` text-hole separators the server emits so adjacent
+// text nodes stay individually claimable; the array is compacted in place.
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();
+    else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
+
 export function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();
-        else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
@@ -340,12 +380,44 @@ export function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
+  // A streamed `$df` fragment swap replaces a hole's region out from under
+  // its bookkeeping (Loading fallback claimed during hydration, settled
+  // content swapped in later). When the tracked nodes are gone mid-hydration,
+  // re-claim the live region so the content pass can match loose text
+  // positionally — elements recover through the registry, text only has
+  // position. The region is `parent`'s children, or for marker-bounded holes
+  // the nodes back to the matching `<!--$-->` start marker.
+  function reclaimSwappedRegion() {
+    if (!sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;
+          else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(
     prev => {
+      reclaimSwappedRegion();
       const value = normalize(accessor(), current, multi, true);
       if (typeof value !== "function") return value;
       effect(
-        () => normalize(value, current, multi),
+        () => (reclaimSwappedRegion(), normalize(value, current, multi)),
         inner => {
           insertExpression(parent, inner, current, marker);
           current = inner;
@@ -363,7 +435,9 @@ export function insert(parent, accessor, marker, initial, options) {
       current = value;
       host && tagHost(current, host);
     },
-    options
+    // Only the OUTER effect takes the scope — the inner unwrapping effect
+    // stays transparent so content ids keep a fixed depth per hole.
+    accessor.$s ? (options ? { ...options, scope: true } : SCOPE_OPTIONS) : options
   );
 }
 
@@ -394,9 +468,16 @@ function loadModuleAssets(mapping) {
     if (hy.modules[moduleUrl]) continue;
     const entryUrl = mapping[moduleUrl];
     if (!hy.loading[moduleUrl]) {
-      hy.loading[moduleUrl] = import(/* @vite-ignore */ entryUrl).then(mod => {
-        hy.modules[moduleUrl] = mod;
-      });
+      hy.loading[moduleUrl] = import(/* @vite-ignore */ entryUrl).then(
+        mod => {
+          hy.modules[moduleUrl] = mod;
+        },
+        err => {
+          // drop the rejected entry so a later boundary/navigation can retry
+          delete hy.loading[moduleUrl];
+          throw err;
+        }
+      );
     }
     pending.push(hy.loading[moduleUrl]);
   }
@@ -460,8 +541,15 @@ export function hydrate(code, element, options = {}) {
             sharedConfig.hydrating = false;
           }
         },
-        () => {
+        err => {
+          // A chunk failed to preload; hydration can't claim the server DOM
+          // (lazy components have no module). Fall back to a fresh client
+          // render replacing the server markup — lazy's own import() gets to
+          // retry through normal channels — instead of a silently dead page.
+          console.error("Hydration module preload failed, falling back to client render:", err);
           sharedConfig.hydrating = false;
+          sharedConfig.registry = undefined;
+          disposer = render(code, element, [...element.childNodes], options);
         }
       );
       return () => disposer && disposer();
@@ -597,14 +685,34 @@ export function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance))
-            match = { container, state, distance: entry.distance };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches)
+              matches = [
+                {
+                  container: matchContainer,
+                  state: matchState,
+                  distance: matchDistance
+                }
+              ];
+            matches.push({ container, state, distance: entry.distance });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          // Replay innermost-first so queued hydration events follow the same
+          // root-boundary handoff as live native bubbling.
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++)
+            eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
       if (sharedConfig.done) {
         sharedConfig.events = _$HY.events = null;
@@ -696,7 +804,15 @@ function eventHandler(e, container, state) {
   if (sharedConfig.registry && sharedConfig.events) {
     if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    // An inner root already walked its segment. Ancestor roots resume from
+    // that boundary; unrelated/shared containers must not see the event as
+    // theirs. Native stopPropagation still prevents this listener from running.
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner =
     state &&
     (state.owners.size === 1 && state.owners.has(container)
@@ -705,7 +821,7 @@ function eventHandler(e, container, state) {
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
 
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
   const boundary = owner || container || e.currentTarget;
@@ -742,7 +858,13 @@ function eventHandler(e, container, state) {
       return node || boundary || document;
     }
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    // If the boundary was the target, the inner walk already fired it.
+    // Resume above it so boundary handlers do not run twice.
+    if (resumeNode === e.target)
+      node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
     if (path.length) {
       retarget(path[0]);

package/src/server.d.ts

@@ -75,6 +75,7 @@ export function ssrStyle(value: string | { [k: string]: string }): string;
 export function ssrStyleProperty(name: string, value: any): string;
 export function ssrAttribute(key: string, value: any): string;
 export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
+export function scope<T>(fn: () => T): () => unknown;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;

package/src/server.js

@@ -7,6 +7,10 @@ import { createSerializer, getLocalHeaderScript } from "./serializer";
 // core, and a local copy here drifts from them (it resolved function sources
 // for key enumeration only, dropping their values in SSR output).
 export { createComponent, effect, memo, untrack, mergeProps } from "rxcore";
+// Hole owner scope (`_$scope(...)` in compiled ssr output) — owner-creating
+// wrapper for deferred child holes that can allocate hydration ids. The
+// framework owns the implementation (owner creation + per-attempt reset).
+export { ssrScope as scope } from "rxcore";
 export { getOwner };
 
 export {
@@ -23,9 +27,22 @@ export {
 
 // ---- Asset Manifest ----
 
+// Join defensively rather than trusting the manifest's shape: dev manifests
+// have answered `_base` with non-strings and emitted `file` values with a
+// leading slash (solidjs/solid#2817 layers 1-2). Normalizing here keeps the
+// emitted URLs sane for any reasonable manifest instead of playing contract
+// ping-pong with bundler plugins.
+function joinAssetPath(base, file) {
+  // absolute (`https://cdn/x.js`) and protocol-relative (`//cdn/x.js`) pass through
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
+  if (typeof base !== "string" || !base) base = "/";
+  if (base[base.length - 1] !== "/") base += "/";
+  return base + (file[0] === "/" ? file.slice(1) : file);
+}
+
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
-  const base = manifest._base || "/";
+  const base = manifest._base;
   const entry = manifest[moduleUrl];
   if (!entry) return null;
   const css = [];
@@ -36,8 +53,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     if (!e) return;
-    js.push(base + e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
+    js.push(joinAssetPath(base, e.file));
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(joinAssetPath(base, e.css[i]));
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
   };
   walk(moduleUrl);
@@ -1178,6 +1195,12 @@ function tryResolveString(node) {
       return s;
     }
     if (node.h && node.h.length > 0) return { merge: node };
+    if (node.t === undefined) {
+      // Not a template object — mirror the client's dev warn-and-skip
+      // instead of crashing downstream on a malformed template shape.
+      if ("_DX_DEV_") console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
     return Array.isArray(node.t) ? node.t[0] : node.t;
   }
   if (t === "function") {
@@ -1225,7 +1248,9 @@ function resolveSSRNode(
         result.h.push(...node.h);
         result.p.push(...node.p);
       }
-    } else result.t[result.t.length - 1] += node.t;
+    } else if (node.t !== undefined) {
+      result.t[result.t.length - 1] += node.t;
+    } else if ("_DX_DEV_") console.warn(`Unrecognized value. Skipped inserting`, node);
   } else if (t === "function") {
     try {
       resolveSSRNode(node(), result);

package/src/universal.d.ts

@@ -1,5 +1,5 @@
 export interface RendererOptions<NodeType> {
-  createElement(tag: string): NodeType;
+  createElement(tag: string, staticProps?: Record<string, unknown>): NodeType;
   createTextNode(value: string): NodeType;
   createSentinel?(): NodeType;
   replaceText(textNode: NodeType, value: string): void;
@@ -18,7 +18,7 @@ export interface Renderer<NodeType> {
   effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
   memo<T>(fn: () => T, equal: boolean): () => T;
   createComponent<T>(Comp: (props: T) => NodeType, props: T): NodeType;
-  createElement(tag: string): NodeType;
+  createElement(tag: string, staticProps?: Record<string, unknown>): NodeType;
   createTextNode(value: string): NodeType;
   insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
   insert<T>(parent: any, accessor: (() => T) | T, marker?: any | null, initial?: any): NodeType;