npm - @dom-expressions/runtime - Versions diffs - 0.50.0-next.17 → 0.50.0-next.19 - Mend

@dom-expressions/runtime 0.50.0-next.17 → 0.50.0-next.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,26 @@
 # dom-expressions
+## 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
 ### Patch Changes

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@dom-expressions/runtime",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.50.0-next.17",
+  "version": "0.50.0-next.19",
   "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.17"
+    "@dom-expressions/babel-plugin-jsx": "0.50.0-next.19"
   },
   "scripts": {
     "test": "jest --no-cache",

package/src/client.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,7 +150,28 @@ 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