@solidjs/web 2.0.0-beta.32 → 2.0.0-beta.34

package/frames/dist/client.dev.js

@@ -1,8 +1,6 @@
-import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig } from 'solid-js';
+import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } from 'solid-js';
 import { insert } from '@solidjs/web';
-import { createPlugin, fromCrossJSON, Feature } from 'seroval';
 import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
-import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
@@ -65,16 +63,32 @@ function chunkToRecords(chunk) {
           args: chunk.args
         }
       };
+    case "hole":
+      return {
+        [`hole:${chunk.key}`]: {
+          kind: "html",
+          value: chunk.html
+        }
+      };
+    case "attr":
+      return {
+        [`attr:${chunk.key}`]: {
+          kind: "attrs",
+          value: chunk.attrs,
+          removed: chunk.removed
+        }
+      };
     case "complete":
       return {
         ":complete": true
       };
     case "error":
-      return chunk.key ? {
-        [`seg:${chunk.key}:error`]: chunk.error
-      } : {
+      if (!chunk.key) return {
         ":error": chunk.error
       };
+      return {
+        [`${/^lha?:/.test(chunk.key) ? "hole" : "seg"}:${chunk.key}:error`]: chunk.error
+      };
     default:
       return {};
   }
@@ -159,7 +173,10 @@ function createFrameHost(options = {}) {
     },
     resolve(ref, frameId) {
       return options.resolve ? options.resolve(ref, frameId) : undefined;
-    }
+    },
+    revive: options.revive,
+    isContainer: options.isContainer,
+    prepareData: options.prepareData
   };
 }
 const FRAME_APPLIED_EVENT = "frame:applied";
@@ -175,6 +192,7 @@ class FrameImpl {
   #errorNotified = false;
   #revealed = new Set();
   #fallbackShown = new Set();
+  #appliedHoles = new Map();
   #slots;
   #mountedSlots = new Set();
   #slotCleanups = new Map();
@@ -275,6 +293,7 @@ class FrameImpl {
   #resetStreamState(root) {
     this.#revealed.clear();
     this.#fallbackShown.clear();
+    this.#appliedHoles.clear();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -316,6 +335,24 @@ class FrameImpl {
         }
       }
     }
+    for (const key in this.#store) {
+      const record = this.#store[key];
+      if (!record || this.#appliedHoles.get(key) === record) continue;
+      if (key.startsWith("hole:")) {
+        if (key.endsWith(":error")) {
+          this.#appliedHoles.set(key, record);
+          console.error(`Live hole ${key.slice(5, -6)} failed on the server; latched:`, record);
+        } else if (this.#applyHole(key.slice(5), record.value)) {
+          this.#appliedHoles.set(key, record);
+          this.#applied(version, "morph");
+        }
+      } else if (key.startsWith("attr:")) {
+        if (this.#applyAttrs(key.slice(5), record.value, record.removed)) {
+          this.#appliedHoles.set(key, record);
+          this.#applied(version, "morph");
+        }
+      }
+    }
     for (const key in this.#store) {
       if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
       this.#processedAssets.add(key);
@@ -492,7 +529,7 @@ class FrameImpl {
         }
         props[key] = entry.element;
       } else {
-        props[key] = value;
+        props[key] = host && host.revive ? host.revive(value) : value;
       }
     }
     return props;
@@ -520,6 +557,10 @@ class FrameImpl {
       if (isDataRef(va) && isDataRef(vb) && cache && key in cache) {
         const host = this.#options.host;
         const next = host ? host.resolve(vb, this.#options.id) : undefined;
+        if (host && host.isContainer && (host.isContainer(next) || host.isContainer(cache[key]))) {
+          if (next === cache[key]) continue;
+          return false;
+        }
         if (isAsyncLike(next) || isAsyncLike(cache[key])) return false;
         try {
           if (JSON.stringify(next) === JSON.stringify(cache[key])) continue;
@@ -628,6 +669,38 @@ class FrameImpl {
       if (ranges.size) for (const root of grafts) flushGrafts(root, ranges);
     }
   }
+  #applyHole(marker, html) {
+    if (!this.#hasContent) return false;
+    const open = findLiveTarget(this.#firstContent(), this.#end, n => n.nodeType === COMMENT_NODE && n.data === marker);
+    if (!open) return false;
+    const close = rangeClose(open, "lh:/" + marker.slice(3));
+    if (!close) {
+      {
+        console.error(`Live hole "${marker}" is missing its closing comment; update dropped. ` + `Likely an HTML-rewriting layer stripped it.`, open);
+      }
+      return false;
+    }
+    const claim = claimHandlers() ? this.#claimTree : null;
+    reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
+    return true;
+  }
+  #applyAttrs(addr, text, removed) {
+    if (!this.#hasContent) return false;
+    const el = findLiveTarget(this.#firstContent(), this.#end, n => n.nodeType === ELEMENT_NODE && n.getAttribute("data-lha") === addr);
+    if (!el) return false;
+    const parsed = parseFragment(`<i${text}></i>`).firstChild;
+    if (parsed) {
+      for (let i = 0; i < parsed.attributes.length; i++) {
+        const {
+          name,
+          value
+        } = parsed.attributes[i];
+        if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+      }
+    }
+    if (removed) for (const name of removed) el.removeAttribute(name);
+    return true;
+  }
   #clearContent() {
     removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
@@ -823,6 +896,20 @@ function rangeClose(start, id) {
   }
   return null;
 }
+function findLiveTarget(n, end, test) {
+  while (n && n !== end) {
+    if (n.nodeType === ELEMENT_NODE) {
+      const fid = isFrameElement(n) ? n.getAttribute(FRAME_ID_ATTR) : null;
+      if (fid === null || fid.includes(".")) {
+        if (test(n)) return n;
+        const found = findLiveTarget(n.firstChild, null, test);
+        if (found) return found;
+      }
+    } else if (test(n)) return n;
+    n = n.nextSibling;
+  }
+  return null;
+}
 function findPlaceholder(n, end, id) {
   while (n && n !== end) {
     if (isPlaceholderStart(n, id)) return n;
@@ -882,7 +969,9 @@ function eachInRange(start, key, cb) {
 }
 function clearStreamRecords(records, root) {
   for (const key in records) {
-    if (key.startsWith("seg:") || key === ":error" || root && key === "") delete records[key];
+    if (/^(seg|hole|attr):/.test(key) || key === ":error" || root && key === "") {
+      delete records[key];
+    }
   }
 }
 function argsEquivalent(a, b) {
@@ -1147,6 +1236,7 @@ async function applyFrameResponse(response, host, options = {}) {
         if (v === undefined) perFrame.set(chunk.id, v = version(chunk.id));
         chunk.version = v;
       } else if (version !== undefined) chunk.version = version;
+      if (chunk.type === "data" && host.prepareData) await host.prepareData();
       host.apply(chunk);
     }
     result = await reader.next();
@@ -1163,7 +1253,7 @@ function parseServerComponent(value, ctx) {
     address: ctx.parse(value[SERVER_COMPONENT_ADDRESS])
   };
 }
-const ServerComponentPlugin = /*#__PURE__*/createPlugin({
+const ServerComponentPlugin = {
   tag: "dom-expressions/server-component",
   test(value) {
     return typeof value === "function" && SERVER_COMPONENT in value;
@@ -1190,12 +1280,10 @@ const ServerComponentPlugin = /*#__PURE__*/createPlugin({
     }
     return globalThis._$SC.r(id);
   }
-});
+};
 function flightCodec(codec) {
   const plugins = codec && codec.plugins || [];
-  for (const plugin of plugins) {
-    if (plugin && plugin.tag === "dom-expressions/server-component") return codec;
-  }
+  if (plugins.some(plugin => plugin && plugin.tag === ServerComponentPlugin.tag)) return codec;
   return {
     ...codec,
     plugins: [...plugins, ServerComponentPlugin]
@@ -1312,72 +1400,74 @@ function createServerComponentHandler({
   }
 }
 
-Feature.AggregateError | Feature.BigIntTypedArray;
-const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
-CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
-FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin]);
-function resolveSerializerPlugins(customPlugins) {
-  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
-}
-const JSON_CODEC_DISABLED_FEATURES = Feature.RegExp;
-const JSON_CODEC_DEPTH_LIMIT = 64;
-function resolveCodecOptions({
-  plugins,
-  disabledFeatures,
-  depthLimit
-} = {}) {
-  return {
-    plugins: resolveSerializerPlugins(plugins),
-    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
-    depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
-  };
+const STATE = Symbol.for("dom-expressions.container-trace-state");
+const state = globalThis[STATE] || (globalThis[STATE] = {
+  materialized: new WeakMap(),
+  materializedValues: new WeakSet()
+});
+function setContainerTraceMaterializer(fn) {
+  state.materializeTrace = fn;
 }
-function createJSONDeserializer(options) {
-  const refs = new Map();
-  const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
-    return fromCrossJSON(node, {
-      refs,
-      ...resolved
-    });
-  };
+function materialize(marker) {
+  let value = state.materialized.get(marker.$tr);
+  if (value === undefined) {
+    value = state.materializeTrace(marker);
+    state.materialized.set(marker.$tr, value);
+    if (value !== null && typeof value === "object") state.materializedValues.add(value);
+  }
+  return value;
 }
-function createJSONDataTable(options) {
-  const deserialize = createJSONDeserializer(options);
-  const table = new Map();
-  return {
-    apply(record) {
-      const value = deserialize(record.node);
-      if (record.initial) table.set(record.key, value);
-    },
-    get(key) {
-      return table.get(key);
-    },
-    resolve(ref) {
-      return table.get(ref.$ref);
-    }
-  };
+function isMaterializedContainer(value) {
+  return value !== null && typeof value === "object" && state.materializedValues.has(value);
+}
+function isContainerTraceMarker(value) {
+  return value != null && typeof value === "object" && value.$tr != null && typeof value.$tr[Symbol.asyncIterator] === "function";
+}
+function reviveContainerTraces(value) {
+  if (!state.materializeTrace || value == null || typeof value !== "object") return value;
+  if (isContainerTraceMarker(value)) return materialize(value);
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) value[i] = reviveContainerTraces(value[i]);
+  } else if (Object.getPrototypeOf(value) === Object.prototype) {
+    for (const key of Object.keys(value)) value[key] = reviveContainerTraces(value[key]);
+  }
+  return value;
 }
 
+setContainerTraceMaterializer(materializeContainerTrace);
 function asyncArg(value) {
   return value;
 }
 let sharedHost;
+let codec;
+let codecLoading;
+function loadCodec() {
+  return codecLoading ??= import('@solidjs/web/serialization/decode').then(m => {
+    codec = m;
+  });
+}
 const tables = new Map();
+function ensureTable(root) {
+  let table = tables.get(root);
+  if (!table && codec) tables.set(root, table = codec.createJSONDataTable());
+  return table;
+}
 function tableFor(id) {
-  const table = tables.get(id);
-  if (table) return table;
-  for (const [root, t] of tables) if (id.startsWith(root + ".")) return t;
+  if (tables.has(id)) return ensureTable(id);
+  for (const root of tables.keys()) if (id.startsWith(root + ".")) return ensureTable(root);
   return undefined;
 }
 function beginStream(frameId) {
-  tables.set(frameId, createJSONDataTable());
+  tables.set(frameId, undefined);
 }
 function getFrameHost() {
   if (!sharedHost) {
     sharedHost = createFrameHost({
+      prepareData: loadCodec,
       applyData: c => tableFor(c.id)?.apply(c),
-      resolve: (ref, id) => tableFor(id)?.resolve(ref)
+      resolve: (ref, id) => tableFor(id)?.resolve(ref),
+      revive: reviveContainerTraces,
+      isContainer: isMaterializedContainer
     });
   }
   return sharedHost;
@@ -1449,6 +1539,7 @@ function slotArgsProxy(args) {
   return new Proxy({}, {
     get: (_, key) => {
       const v = args()[key];
+      if (isMaterializedContainer(v)) return v;
       if (!isAsyncValue(v)) return v;
       let read = asyncReads.get(key);
       if (!read) {
@@ -1600,6 +1691,24 @@ function boundaryComponent(host, fnId) {
   };
 }
 const claimedBoundaries = new Set();
+const liveOps = new Map();
+const liveAppliers = new Set();
+let livePumped = null;
+function pumpLiveChannel() {
+  const stream = globalThis._$HY?.r?.["sc:live"];
+  if (!stream || stream === livePumped || typeof stream.getReader !== "function") return;
+  livePumped = stream;
+  const reader = stream.getReader();
+  const pump = () => reader.read().then(r => {
+    if (r.done) return;
+    const op = r.value;
+    liveOps.set(`${op.type}:${op.fid || ""}:${op.key || ""}`, op);
+    for (const apply of liveAppliers) apply(op);
+    return pump();
+  });
+  pump().catch(() => {
+  });
+}
 let boundaryIndex = null;
 const isBoundaryId = id => !id.includes(".");
 function indexBoundaries(root) {
@@ -1678,6 +1787,7 @@ function adoptBoundary(host, id, el, props, binding) {
   const drainRecords = () => {
     const hy = globalThis._$HY;
     if (!hy || !hy.r) return;
+    pumpLiveChannel();
     const slotPrefix = `sc:slot:${id}:`;
     for (const key of Object.keys(hy.r)) {
       if (appliedRecords.has(key)) continue;
@@ -1712,11 +1822,22 @@ function adoptBoundary(host, id, el, props, binding) {
     if (fr.claim && parent && el.contains(parent)) claimRegionFragments(parent);
     drainRecords();
   }) : undefined;
+  const applyLiveOp = op => {
+    if (op.type === "slot" && op.fid !== id) return;
+    host.apply({
+      ...op,
+      id: address,
+      version: 0
+    });
+  };
+  liveAppliers.add(applyLiveOp);
   onCleanup(() => {
+    liveAppliers.delete(applyLiveOp);
     unsubscribe && unsubscribe();
     if (fr && fr.release) for (const fragId of claimedFragments) fr.release(fragId);
   });
   drainRecords();
+  for (const op of liveOps.values()) applyLiveOp(op);
   const owner = getOwner();
   let release;
   let setGate;