@dom-expressions/runtime 0.50.0-next.18 → 0.50.0-next.20

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # dom-expressions
 
+## 0.50.0-next.20
+
+### Patch Changes
+
+- 9d5a90b: Queue streamed fragment activations whose `pl-*` marker is not yet in the live DOM instead of silently dropping them.
+
+  A fragment's marker can sit inside a flushed-but-unactivated ancestor `<template>` (a slot held by a reveal group). Template content is inert, so `document.getElementById` cannot see the marker and `$df`/`$dfl` previously returned `0` and lost the swap permanently — the fallback stayed stuck even though the content template had streamed. Today this window is masked because the server enrolls nested boundaries into the ancestor reveal group, but fixing that enrollment (solidjs/solid#2871, solidjs/solid#2872) makes nested boundaries activate independently, exposing the drop.
+
+  `$df` and `$dfl` now queue marker misses (`_$HY.dq` / `_$HY.dlq`) and a new `$dfd` drains both queues after every successful swap or fallback materialization — the only events that can bring queued markers into the live document. Content swaps drain before fallbacks so a settled fragment wins over its own pending fallback, and drains cascade through arbitrarily nested held levels. An activation whose content template is already consumed remains a plain no-op and is never queued.
+
+## 0.50.0-next.19
+
+### Patch Changes
+
+- 75de952: The `manifest` option of `renderToString`/`renderToStream` now also accepts a
+  resolver — `{ resolve(key), resolveSync?(key) }` — as an alternative to a
+  static manifest object, letting dev servers answer asset lookups from their
+  live module graph while production keeps passing the built manifest object.
+  `resolve` may return a promise and may resolve CSS entries to inline-style
+  descriptors (`{ id, content, attrs }`) for HMR adoption; `resolveSync`
+  answers with what is knowable without async work (typically js URLs) for
+  sync consumers like a lazy component's `moduleUrl` getter used by islands,
+  and is exposed on the render context as `resolveAssetsSync` (object
+  manifests, being sync by nature, expose it too). A bare function is accepted
+  as shorthand for `{ resolve }`. The consumer contract stays
+  `renderToStream(fn, { manifest })` in both modes. Entry-asset
+  auto-registration only applies to object manifests, since a resolver cannot
+  be enumerated for entries.
+
 ## 0.50.0-next.18
 
 ## 0.50.0-next.17

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.18",
+  "version": "0.50.0-next.20",
   "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.18"
+    "@dom-expressions/babel-plugin-jsx": "0.50.0-next.20"
   },
   "scripts": {
     "test": "jest --no-cache",

package/src/client.js

@@ -1020,8 +1020,7 @@ function insertExpression(parent, value, current, marker) {
     if (tc === "string" || tc === "number") {
       parent.firstChild.data = value;
     } else {
-      const owned = ownedChildCount(current);
-      if (owned === -1 || owned === parent.childNodes.length) parent.textContent = value;
+      if (ownsAllChildren(parent, current)) parent.textContent = value;
       else {
         // Foreign nodes present (e.g. stream-injected stylesheet links) —
         // replace only our own nodes, keeping text content leading.
@@ -1106,14 +1105,26 @@ function appendNodes(parent, array, marker = null) {
   }
 }
 
-// Number of parent children the tracked `current` value accounts for, or -1
-// when unknown (initial render / untracked content — the whole parent is
-// considered owned, preserving the designed clear-on-first-render behavior).
-function ownedChildCount(current) {
-  if (Array.isArray(current)) return current.length;
-  if (current == null) return -1;
-  if (current === "") return 0; // `textContent = ""` left no node behind
-  return 1; // single node, or a string/number rendered as one text node
+// Whether the tracked `current` value accounts for all of the parent's
+// children, using only O(1) boundary pointer reads — `childNodes.length`
+// re-counts the child list after every mutation, which is O(n) on exactly
+// the hot markerless clear path this guards. Foreign nodes appended after
+// our content (late-flushed stylesheet <link>s at the end of <body>) break
+// the `lastChild` identity. `current == null` (initial render / untracked
+// content) reports true, preserving the designed clear-on-first-render
+// behavior.
+function ownsAllChildren(parent, current) {
+  if (current == null) return true;
+  if (Array.isArray(current)) {
+    return current.length
+      ? parent.firstChild === current[0] && parent.lastChild === current[current.length - 1]
+      : parent.firstChild === null;
+  }
+  if (current === "") return parent.firstChild === null; // `textContent = ""` left no node behind
+  if (current.nodeType) return parent.firstChild === current && parent.lastChild === current;
+  // string/number content lives in a single leading text node
+  const first = parent.firstChild;
+  return first !== null && first.nodeType === 3 && parent.lastChild === first;
 }
 
 // Remove only the nodes tracked by `current` from a root-level (markerless)
@@ -1141,8 +1152,7 @@ function cleanChildren(parent, current, marker, replacement) {
     // children. Streaming can append foreign nodes to the root (late-flushed
     // stylesheet <link>s land at the end of <body>) and those must survive a
     // re-render — wiping them drops loaded CSS.
-    const owned = ownedChildCount(current);
-    if (owned === -1 || owned === parent.childNodes.length) return (parent.textContent = "");
+    if (ownsAllChildren(parent, current)) return (parent.textContent = "");
     return removeOwnedChildren(parent, current);
   }
   if (current.length) {

package/src/server.d.ts

@@ -11,6 +11,51 @@ export const Namespaces: Record<string, string>;
 
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 
+/** Static asset manifest produced by a build (e.g. parsed Vite manifest.json). */
+export type AssetManifest = Record<
+  string,
+  { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+> & { _base?: string };
+
+/** Inline style content, e.g. dev CSS collected from a bundler's module graph. */
+export type InlineStyleAsset = {
+  id: string;
+  content: string;
+  attrs?: Record<string, string>;
+};
+
+export type ResolvedAssets = {
+  js: string[];
+  css: (string | InlineStyleAsset)[];
+};
+
+/**
+ * Resolver form of the manifest option — the primitive a dev server
+ * implements against its live module graph (a static manifest object is
+ * normalized into a sync resolver internally). `resolve` may return a
+ * promise (async resolvers require streaming rendering); CSS entries may be
+ * URL strings (emitted as load-gated `<link>` tags) or inline-style
+ * descriptors (emitted as `<style>` tags). A bare `resolve`-shaped function
+ * is accepted as shorthand for `{ resolve }`.
+ */
+export type AssetResolver = {
+  resolve(
+    key: string
+  ): ResolvedAssets | null | undefined | Promise<ResolvedAssets | null | undefined>;
+  /**
+   * Synchronous fast path answering with whatever is knowable without async
+   * work (typically js URLs, omitting css). Sync consumers — e.g. a lazy
+   * component's `moduleUrl` getter used by islands — use this when `resolve`
+   * would return a promise, so adapters should provide it whenever possible.
+   */
+  resolveSync?(key: string): ResolvedAssets | null | undefined;
+};
+
+/** Bare-function shorthand for `AssetResolver` (no sync fast path). */
+export type AssetResolverFn = (
+  key: string
+) => ResolvedAssets | null | undefined | Promise<ResolvedAssets | null | undefined>;
+
 export function renderToString<T>(
   fn: () => T,
   options?: {
@@ -18,10 +63,7 @@ export function renderToString<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<
-      string,
-      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
-    > & { _base?: string };
+    manifest?: AssetManifest | AssetResolver | AssetResolverFn;
     onError?: (err: any) => void;
   }
 ): string;
@@ -34,10 +76,7 @@ export function renderToStringAsync<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<
-      string,
-      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
-    > & { _base?: string };
+    manifest?: AssetManifest | AssetResolver | AssetResolverFn;
     onError?: (err: any) => void;
   }
 ): Promise<string>;
@@ -48,10 +87,7 @@ export function renderToStream<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<
-      string,
-      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
-    > & { _base?: string };
+    manifest?: AssetManifest | AssetResolver | AssetResolverFn;
     onCompleteShell?: (info: { write: (v: string) => void }) => void;
     onCompleteAll?: (info: { write: (v: string) => void }) => void;
     onError?: (err: any) => void;

package/src/server.js

@@ -62,7 +62,9 @@ function resolveAssets(moduleUrl, manifest) {
 }
 
 function registerEntryAssets(manifest) {
-  if (!manifest) return;
+  // Resolver manifests can't be enumerated for entries; consumers that want
+  // SSR'd entry assets resolve their entry key themselves.
+  if (!manifest || typeof manifest === "function" || typeof manifest.resolve === "function") return;
   const ctx = sharedConfig.context;
   if (!ctx?.registerAsset) return;
   for (const key in manifest) {
@@ -148,21 +150,52 @@ function applyAssetTracking(context, tracking, manifest) {
   });
   context.registerModule = tracking.registerModule;
   context.getBoundaryModules = tracking.getBoundaryModules;
-  if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
+  // A manifest can be the static object produced by a build (sync lookups,
+  // entry enumeration) or a resolver — the primitive a dev server implements
+  // against its live module graph: `{ resolve, resolveSync? }`, where
+  // `resolve` may return a promise and may resolve css entries to
+  // inline-style descriptors instead of URLs, and `resolveSync` answers with
+  // what is knowable without async work (for sync consumers like a lazy
+  // component's moduleUrl getter). A bare function is accepted as shorthand
+  // for `{ resolve }`. Callers (the reactive library's lazy()) handle both
+  // result shapes. Static manifests are sync by nature, so both context
+  // paths point at the same lookup.
+  if (typeof manifest === "function") {
+    context.resolveAssets = manifest;
+  } else if (manifest && typeof manifest.resolve === "function") {
+    context.resolveAssets = key => manifest.resolve(key);
+    if (typeof manifest.resolveSync === "function") {
+      context.resolveAssetsSync = key => manifest.resolveSync(key);
+    }
+  } else if (manifest) {
+    const resolve = moduleUrl => resolveAssets(moduleUrl, manifest);
+    context.resolveAssets = resolve;
+    context.resolveAssetsSync = resolve;
+  }
 }
 
 // Based on https://github.com/WebReflection/domtagger/blob/master/esm/sanitizer.js
 const VOID_ELEMENTS =
   /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 // Fragment replacement helpers emitted into stream task scripts:
-// - $df(id): swap template payload into the `pl-*` marker range.
+// - $df(id): swap template payload into the `pl-*` marker range. A marker that
+//   isn't in the live DOM yet (it sits inside a flushed-but-unactivated ancestor
+//   template held by a reveal group) queues the id in `_$HY.dq` for retry instead
+//   of dropping the swap. A missing content template means the swap already ran —
+//   that stays a plain no-op and is never queued.
 // - $dfl(id): materialize fallback from `pl-*` template content without resolving.
+//   Marker misses queue in `_$HY.dlq`, same reasoning as $df.
 // - $dflj(ids): materialize fallback content for every id in the list.
+// - $dfd(): drain both retry queues. Runs after every successful swap or fallback
+//   materialization — the only events that can bring queued markers into the live
+//   document. Content swaps ($df) drain before fallbacks ($dfl) so a settled
+//   fragment wins over its own pending fallback. Each pass snapshots the queue,
+//   so still-inert entries simply re-queue and wait for the next swap.
 // - $dfs(id, count, defer): register pending stylesheet count for fragment `id`.
 // - $dfc(id): style completion callback; reveals when the fragment/group is unblocked.
 // - $dfg(id): group-style gate check; reveals a waiting group once all style counts hit zero.
 // - $dfj(ids): reveal a group in registration order, waiting if any member still has pending styles.
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 
 export function renderToString(code, options = {}) {
   const { renderId = "", nonce, noScripts, manifest } = options;