@solidjs/web 2.0.0-beta.24 → 2.0.0-beta.26

package/frames/dist/client.js

@@ -1,4 +1,6 @@
-import { getOwner, onCleanup, runWithOwner, sharedConfig, createOwner } from 'solid-js';
+import { getOwner, runWithOwner, onCleanup, createLoadingBoundary, sharedConfig, createOwner } from 'solid-js';
+import { insert } from '@solidjs/web';
+import { configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
 import { fromCrossJSON, Feature } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
@@ -63,22 +65,6 @@ function chunkToRecords(chunk) {
           args: chunk.args
         }
       };
-    case "template":
-      return {
-        [`tpl:${chunk.key}`]: {
-          kind: "template",
-          html: chunk.html,
-          fields: chunk.fields
-        }
-      };
-    case "block":
-      return {
-        [`seg:${chunk.key}`]: {
-          kind: "block",
-          template: `tpl:${chunk.template}`,
-          values: chunk.values
-        }
-      };
     case "complete":
       return {
         ":complete": true
@@ -272,7 +258,7 @@ class FrameImpl {
       this.#revealed.clear();
       this.#fallbackShown.clear();
       for (const key of Object.keys(this.#store)) {
-        if (key.startsWith("seg:") || key.startsWith("tpl:") || key === ":error") {
+        if (key.startsWith("seg:") || key === ":error") {
           delete this.#store[key];
         }
       }
@@ -341,10 +327,14 @@ class FrameImpl {
     if (record !== undefined) return record;
     return this.#options.resolveSlotRecord?.(occurrence);
   }
-  #syncSlots() {
+  #removeSlotRecord(occurrence) {
+    const key = `slot:${occurrence}`;
+    if (key in this.#store) delete this.#store[key];else this.#options.removeSlotRecord?.(occurrence);
+  }
+  #syncSlots(root) {
     if (!this.#slots && !this.#options.resolveSlot) return;
     const found = new Map();
-    this.#collectSlots(found);
+    if (root) collectSlots(root, found);else this.#collectSlots(found);
     for (const [occurrence, start] of found) {
       const callback = this.#resolveSlot(propOf(occurrence));
       if (!callback) continue;
@@ -357,6 +347,7 @@ class FrameImpl {
         this.#runSlotCleanups(occurrence);
       }
       if (!this.#mountedSlots.has(occurrence)) {
+        if (this.#options.adopt) this.#discoverRegions(occurrence, start);
         const nodes = this.#invokeSlot(occurrence, callback, record, start, this.#options.adopt);
         if (nodes) this.#replaceRange(occurrence, start, nodes);
         this.#slotNodes.set(occurrence, nodes);
@@ -374,8 +365,10 @@ class FrameImpl {
         this.#bindRegions(occurrence);
       }
     }
-    for (const occurrence of [...this.#mountedSlots]) {
-      if (!found.has(occurrence)) this.#unmountSlot(occurrence);
+    if (!root) {
+      for (const occurrence of [...this.#mountedSlots]) {
+        if (!found.has(occurrence)) this.#unmountSlot(occurrence);
+      }
     }
   }
   #invokeSlot(occurrence, callback, record, start, adopted) {
@@ -388,6 +381,13 @@ class FrameImpl {
       existing: start ? rangeInterior(start, slotEnd(occurrence)) : []
     };
     const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
+    const regions = this.#slotRegions.get(occurrence);
+    if (regions) {
+      for (const entry of regions.values()) {
+        const argKey = entry.childId.slice(entry.childId.lastIndexOf(".") + 1);
+        if (!(argKey in props)) props[argKey] = entry.element;
+      }
+    }
     const content = callback(props, ctx);
     this.#slotArgs.set(occurrence, record);
     if (cleanups.length) this.#slotCleanups.set(occurrence, cleanups);
@@ -410,7 +410,7 @@ class FrameImpl {
     this.#slotNodes.delete(key);
     this.#slotArgs.delete(key);
     this.#slotResolvedRefs.delete(key);
-    delete this.#store[`slot:${key}`];
+    this.#removeSlotRecord(key);
     this.#runSlotCleanups(key);
     const regions = this.#slotRegions.get(key);
     if (regions) {
@@ -444,29 +444,17 @@ class FrameImpl {
         cache[key] = resolved;
         props[key] = resolved;
       } else if (isFrameRef(value)) {
-        const fragment = document.createDocumentFragment();
         let entry = regions.get(value.$frame);
         if (!entry) {
-          const start = document.createComment(`frame:${value.$frame}:start`);
-          const end = document.createComment(`frame:${value.$frame}:end`);
+          const element = makeFrameElement(value.$frame);
           entry = {
             childId: value.$frame,
-            start,
-            end,
+            element,
             frame: undefined
           };
           regions.set(value.$frame, entry);
-          fragment.append(start, end);
-        } else {
-          let n = entry.start;
-          while (n) {
-            const next = n.nextSibling;
-            fragment.append(n);
-            if (n === entry.end) break;
-            n = next;
-          }
         }
-        props[key] = fragment;
+        props[key] = entry.element;
       } else {
         props[key] = value;
       }
@@ -480,49 +468,12 @@ class FrameImpl {
       regions = new Map();
       this.#slotRegions.set(slotKey, regions);
     }
-    const doc = start.ownerDocument;
     const endData = slotEnd(slotKey);
-    const comments = [];
     let n = start.nextSibling;
     while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-      if (n.nodeType === COMMENT_NODE) comments.push(n);else if (n.nodeType === 1) {
-        const walker = doc.createTreeWalker(n, 128 );
-        let c;
-        while (c = walker.nextNode()) comments.push(c);
-      }
+      collectRegionElements(n, regions);
       n = n.nextSibling;
     }
-    let depth = 0;
-    let openId = null;
-    let openStart = null;
-    for (const c of comments) {
-      const data = c.data;
-      if (!data.startsWith("frame:")) continue;
-      if (data.endsWith(":start")) {
-        const childId = data.slice(6, -6);
-        if (!childId) continue;
-        if (depth === 0) {
-          openId = childId;
-          openStart = c;
-        }
-        depth++;
-      } else if (data.endsWith(":end")) {
-        const childId = data.slice(6, -4);
-        if (!childId) continue;
-        if (depth > 0) {
-          depth--;
-          if (depth === 0 && childId === openId && !regions.has(openId)) {
-            regions.set(openId, {
-              childId: openId,
-              start: openStart,
-              end: c,
-              frame: undefined,
-              adopt: true
-            });
-          }
-        }
-      }
-    }
   }
   #refArgsUnchanged(occurrence, record) {
     const old = this.#slotArgs.get(occurrence);
@@ -566,15 +517,16 @@ class FrameImpl {
     const regions = this.#slotRegions.get(slotKey);
     if (!regions) return;
     for (const entry of regions.values()) {
-      if (!entry.frame && entry.start.parentNode) {
-        entry.frame = new FrameImpl(null, entry.start, entry.end, {
+      if (!entry.frame) {
+        entry.frame = new FrameImpl(entry.element, null, null, {
           id: entry.childId,
           host: this.#options.host,
           adopt: entry.adopt,
           claimScope: this.#options.claimScope ?? this.#options.id,
           ownerScope: this.#options.ownerScope,
           resolveSlot: prop => this.#resolveSlot(prop),
-          resolveSlotRecord: occurrence => this.#resolveSlotRecord(occurrence)
+          resolveSlotRecord: occurrence => this.#resolveSlotRecord(occurrence),
+          removeSlotRecord: occurrence => this.#removeSlotRecord(occurrence)
         });
       }
     }
@@ -589,12 +541,7 @@ class FrameImpl {
         n = afterRange(n, id);
         continue;
       }
-      const regionId = frameRegionStartId(n);
-      if (regionId !== null) {
-        n = afterFrameRegion(n, regionId);
-        continue;
-      }
-      if (n.nodeType === ELEMENT_NODE) collectSlots(n, found);
+      if (n.nodeType === ELEMENT_NODE && !isFrameElement(n)) collectSlots(n, found);
       n = n.nextSibling;
     }
   }
@@ -616,6 +563,7 @@ class FrameImpl {
     if (this.#disposed) return;
     this.#disposed = true;
     for (const key of [...this.#slotCleanups.keys()]) this.#runSlotCleanups(key);
+    for (const key of this.#mountedSlots) this.#removeSlotRecord(key);
     for (const regions of this.#slotRegions.values()) {
       for (const {
         frame
@@ -661,13 +609,7 @@ class FrameImpl {
   }
   #segmentReady(name) {
     const content = this.#store[`seg:${name}`];
-    if (!content) return false;
-    if (content.kind === "block") {
-      const template = this.#store[content.template];
-      if (!template || template.kind !== "template") return false;
-    } else if (content.kind !== "html") {
-      return false;
-    }
+    if (!content || content.kind !== "html") return false;
     if (!this.#store[`seg:${name}:reveal`]) return false;
     const assets = this.#store[`seg:${name}:assets`];
     if (assets && assets.styles) {
@@ -694,6 +636,23 @@ class FrameImpl {
       parent.removeChild(n);
       n = next;
     }
+    if (this.#options.reveal) {
+      const fallbackFrag = tpl.content.cloneNode(true);
+      this.#claimTree(fallbackFrag);
+      this.#options.reveal({
+        before: closing,
+        fallback: [...fallbackFrag.childNodes],
+        content: () => {
+          const materialized = this.#materialize(content);
+          this.#syncSlots(materialized);
+          this.#claimTree(materialized);
+          return materialized;
+        }
+      });
+      tpl.remove();
+      this.#revealed.add(name);
+      return;
+    }
     const materialized = this.#materialize(content);
     this.#claimTree(materialized);
     parent.insertBefore(materialized, closing);
@@ -712,70 +671,37 @@ class FrameImpl {
     return true;
   }
   #materialize(record) {
-    if (record.kind === "html") return parseFragment(record.value);
-    if (record.kind === "block") {
-      const template = this.#store[record.template];
-      if (!template || template.kind !== "template") return parseFragment("");
-      return materializeBlock(template, record.values);
-    }
-    return parseFragment("");
-  }
-}
-function materializeBlock(template, values) {
-  const fragment = parseFragment(template.html);
-  for (let i = 0; i < template.fields.length; i++) {
-    const marker = `field:${template.fields[i]}`;
-    const value = values[i] == null ? "" : String(values[i]);
-    let hole = findComment(fragment, marker);
-    while (hole) {
-      hole.replaceWith(document.createTextNode(value));
-      hole = findComment(fragment, marker);
-    }
+    return record.kind === "html" ? parseFragment(record.value) : parseFragment("");
   }
-  return fragment;
 }
 function createFrame(boundary, options) {
   return new FrameImpl(boundary, null, null, options);
 }
-function adoptFrameRange(start, end, options) {
-  return new FrameImpl(null, start, end, {
-    ...options,
-    adopt: true
-  });
-}
-const FRAME = Symbol.for("dom-expressions.frame");
-function createFrameInsertable(options) {
-  let frame = null;
-  let start = null;
-  let end = null;
+const FRAME_TAG = "dx-frame";
+const FRAME_ID_ATTR = "data-fid";
+function createFrameElement(options) {
+  const el = makeFrameElement(options.id);
+  const frame = new FrameImpl(el, null, null, options);
   return {
+    element: el,
     get frame() {
       return frame;
     },
     dispose() {
-      if (!frame) return;
       frame.dispose();
-      frame = null;
-      const parent = start.parentNode;
-      if (!parent) return;
-      let n = start;
-      while (n) {
-        const next = n.nextSibling;
-        parent.removeChild(n);
-        if (n === end) break;
-        n = next;
-      }
-    },
-    [FRAME](parent, marker) {
-      if (frame) return;
-      start = document.createComment("frame:start");
-      end = document.createComment("frame:end");
-      parent.insertBefore(start, marker);
-      parent.insertBefore(end, marker);
-      frame = new FrameImpl(null, start, end, options);
+      el.remove();
     }
   };
 }
+function makeFrameElement(id) {
+  const el = document.createElement(FRAME_TAG);
+  el.style.display = "contents";
+  if (id !== undefined) el.setAttribute(FRAME_ID_ATTR, id);
+  return el;
+}
+function isFrameElement(node) {
+  return node.nodeType === ELEMENT_NODE && node.hasAttribute(FRAME_ID_ATTR);
+}
 function segmentName(key) {
   const m = /^seg:([^:]+)$/.exec(key);
   return m ? m[1] : null;
@@ -874,29 +800,25 @@ function collectSlots(root, out) {
       n = afterRange(n, id);
       continue;
     }
-    const regionId = frameRegionStartId(n);
-    if (regionId !== null) {
-      n = afterFrameRegion(n, regionId);
-      continue;
-    }
-    if (n.nodeType === ELEMENT_NODE) collectSlots(n, out);
+    if (n.nodeType === ELEMENT_NODE && !isFrameElement(n)) collectSlots(n, out);
     n = n.nextSibling;
   }
 }
-const FRAME_REGION_START = /^frame:(.+):start$/;
-function frameRegionStartId(node) {
-  if (node.nodeType !== COMMENT_NODE) return null;
-  const m = FRAME_REGION_START.exec(node.data);
-  return m ? m[1] : null;
-}
-function afterFrameRegion(start, id) {
-  const end = `frame:${id}:end`;
-  let n = start.nextSibling;
-  while (n) {
-    if (n.nodeType === COMMENT_NODE && n.data === end) return n.nextSibling;
-    n = n.nextSibling;
+function collectRegionElements(node, regions) {
+  if (node.nodeType !== ELEMENT_NODE) return;
+  if (isFrameElement(node)) {
+    const childId = node.getAttribute(FRAME_ID_ATTR);
+    if (childId && !regions.has(childId)) {
+      regions.set(childId, {
+        childId,
+        element: node,
+        frame: undefined,
+        adopt: true
+      });
+    }
+    return;
   }
-  return null;
+  for (let c = node.firstChild; c; c = c.nextSibling) collectRegionElements(c, regions);
 }
 function argsEquivalent(a, b) {
   if (a === b) return true;
@@ -924,18 +846,6 @@ function rangeInterior(start, endData) {
   }
   return nodes;
 }
-function findComment(root, data) {
-  const children = root.childNodes;
-  for (let i = 0; i < children.length; i++) {
-    const node = children[i];
-    if (node.nodeType === COMMENT_NODE && node.data === data) return node;
-    if (node.nodeType === ELEMENT_NODE) {
-      const found = findComment(node, data);
-      if (found) return found;
-    }
-  }
-  return null;
-}
 function slotStartId(node) {
   if (node.nodeType !== COMMENT_NODE) return null;
   const m = SLOT_START.exec(node.data);
@@ -951,12 +861,18 @@ function compatible(a, b) {
   if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName;
   return a.nodeType === TEXT_NODE || a.nodeType === COMMENT_NODE;
 }
+function preservesOpen(el) {
+  const t = el.tagName;
+  return t === "DETAILS" || t === "DIALOG";
+}
 function morphAttributes(oldEl, newEl, claim) {
   let reclaim = false;
   let changed = false;
+  const keepOpen = preservesOpen(oldEl);
   const oldAttrs = oldEl.attributes;
   for (let i = oldAttrs.length - 1; i >= 0; i--) {
     const name = oldAttrs[i].name;
+    if (keepOpen && name === "open") continue;
     if (!newEl.hasAttribute(name)) {
       oldEl.removeAttribute(name);
       changed = true;
@@ -966,6 +882,7 @@ function morphAttributes(oldEl, newEl, claim) {
   const newAttrs = newEl.attributes;
   for (let i = 0; i < newAttrs.length; i++) {
     const attr = newAttrs[i];
+    if (keepOpen && attr.name === "open") continue;
     if (oldEl.getAttribute(attr.name) !== attr.value) {
       oldEl.setAttribute(attr.name, attr.value);
       changed = true;
@@ -976,6 +893,7 @@ function morphAttributes(oldEl, newEl, claim) {
 }
 function morphNode(oldNode, newNode, claim) {
   if (oldNode.nodeType === ELEMENT_NODE) {
+    if (oldNode.hasAttribute("data-preserve")) return;
     morphAttributes(oldNode, newNode, claim);
     reconcileChildren(oldNode, newNode, null, null, claim);
   } else if (oldNode.data !== newNode.data) {
@@ -1160,15 +1078,15 @@ class ChunkReader {
     }
   }
   async next() {
-    if (this.buffer.length === 0) {
+    while (this.buffer.length < 12) {
       if (this.done) {
-        return {
+        if (this.buffer.length === 0) return {
           done: true,
           value: undefined
         };
+        throw new Error("Malformed server function stream.");
       }
       await this.readChunk();
-      return await this.next();
     }
     const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
     const bytes = Number.parseInt(head, 16);
@@ -1281,6 +1199,9 @@ function tableFor(id) {
   for (const [root, t] of tables) if (id.startsWith(root + ".")) return t;
   return undefined;
 }
+function beginStream(frameId) {
+  tables.set(frameId, createJSONDataTable());
+}
 function getFrameHost() {
   if (!sharedHost) {
     sharedHost = createFrameHost({
@@ -1353,50 +1274,44 @@ function slotsFor(props) {
     }
   });
 }
+function revealSeam(owner) {
+  return seam => runWithOwner(owner, () => insert(seam.before.parentNode, createLoadingBoundary(() => seam.content(), () => seam.fallback), seam.before));
+}
 function boundaryComponent(host, id) {
   return props => {
     const owner = getOwner();
-    const insertable = createFrameInsertable({
+    const {
+      element,
+      dispose
+    } = createFrameElement({
       host,
       id,
       slots: slotsFor(props),
-      ownerScope: fn => runWithOwner(owner, fn)
+      ownerScope: fn => runWithOwner(owner, fn),
+      reveal: revealSeam(owner)
     });
-    onCleanup(() => insertable.dispose());
-    return insertable;
+    onCleanup(dispose);
+    return element;
   };
 }
 const claimedBoundaries = new Set();
 let boundaryIndex = null;
-function findBoundaryRange(id) {
+function findBoundaryElement(id) {
   if (!boundaryIndex) {
     boundaryIndex = new Map();
     if (typeof document !== "undefined" && document.body) {
-      const walker = document.createTreeWalker(document.body, 128 );
-      const opens = {};
-      let c;
-      while (c = walker.nextNode()) {
-        const d = c.data;
-        if (!d.startsWith("frame:")) continue;
-        if (d.endsWith(":start")) {
-          const key = d.slice(6, -6);
-          if (key && !(key in opens)) opens[key] = c;
-        } else if (d.endsWith(":end")) {
-          const key = d.slice(6, -4);
-          if (key && opens[key] && !boundaryIndex.has(key)) {
-            boundaryIndex.set(key, [opens[key], c]);
-          }
-        }
-      }
+      document.body.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
+        const key = el.getAttribute(FRAME_ID_ATTR);
+        if (key && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
+      });
     }
   }
   return boundaryIndex.get(id);
 }
 function documentBoundary(host, id, props) {
-  const range = !claimedBoundaries.has(id) && findBoundaryRange(id);
-  if (!range) return boundaryComponent(host, id)(props);
+  const el = !claimedBoundaries.has(id) ? findBoundaryElement(id) : undefined;
+  if (!el) return boundaryComponent(host, id)(props);
   claimedBoundaries.add(id);
-  const [start, end] = range;
   const hy = globalThis._$HY;
   if (hy && hy.r) {
     const slotPrefix = `sc:slot:${id}:`;
@@ -1425,19 +1340,16 @@ function documentBoundary(host, id, props) {
     }
   }
   const owner = getOwner();
-  const frame = adoptFrameRange(start, end, {
+  const frame = createFrame(el, {
+    adopt: true,
     host,
     id,
     slots: slotsFor(props),
-    ownerScope: fn => runWithOwner(owner, fn)
+    ownerScope: fn => runWithOwner(owner, fn),
+    reveal: revealSeam(owner)
   });
   onCleanup(() => frame.dispose());
-  const nodes = [];
-  for (let n = start; n; n = n.nextSibling) {
-    nodes.push(n);
-    if (n === end) break;
-  }
-  return nodes;
+  return el;
 }
 function installServerComponents(host = getFrameHost()) {
   const g = globalThis;
@@ -1450,6 +1362,21 @@ function installServerComponents(host = getFrameHost()) {
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  configureServerFunctionsClient({
+    responseHandler: createServerComponentHandler({
+      host,
+      capture: () => getOwner() ?? undefined,
+      component: frameId => boundaryComponent(host, frameId),
+      onStream: frameId => beginStream(frameId),
+      documentComponent: functionId => g._$SC.c[functionId],
+      intercept: ({
+        id
+      }) => {
+        if (claimedBoundaries.has(id) || !findBoundaryElement(id)) return undefined;
+        return g._$SC.r(id);
+      }
+    })
+  });
 }
 
-export { FRAME_APPLIED_EVENT, FRAME_STREAM_HEADER, applyFrameResponse, createFrame, createFrameHost, createFrameInsertable, createJSONDataTable, createServerComponentHandler, getFrameHost, installServerComponents, isFrameStreamResponse };
+export { FRAME_APPLIED_EVENT, FRAME_STREAM_HEADER, applyFrameResponse, createFrame, createFrameElement, createFrameHost, createJSONDataTable, createServerComponentHandler, getFrameHost, installServerComponents, isFrameStreamResponse };