@solidjs/web 2.0.0-beta.29 → 2.0.0-beta.30

package/frames/dist/client.cjs

@@ -102,12 +102,11 @@ function createFrameHost(options = {}) {
       const sibling = set.size ? set.values().next().value : undefined;
       set.add(frame);
       if (sibling) {
-        if (sibling.version !== undefined) {
-          frame.apply({
-            version: sibling.version,
-            r: sibling.store
-          });
-        }
+        frame.apply({
+          version: sibling.version ?? 0,
+          r: sibling.store
+        });
+        if (sibling.version === undefined) frame.rebase && frame.rebase();
         return;
       }
       const kept = retained.get(id);
@@ -117,6 +116,7 @@ function createFrameHost(options = {}) {
           version: kept.version,
           r: kept.records
         });
+        frame.rebase && frame.rebase();
       }
       const buffered = pending.get(id);
       if (buffered) {
@@ -205,6 +205,7 @@ class FrameImpl {
   #mountedSlots = new Set();
   #slotCleanups = new Map();
   #slotArgs = new Map();
+  #slotUpdaters = new Map();
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
@@ -382,6 +383,21 @@ class FrameImpl {
       } else if (record !== this.#slotArgs.get(occurrence)) {
         if (this.#refArgsUnchanged(occurrence, record)) {
           this.#slotArgs.set(occurrence, record);
+          this.#reconcileRegions(occurrence, record);
+          continue;
+        }
+        const update = this.#slotUpdaters.get(occurrence);
+        if (update) {
+          const props = this.#resolveArgs(occurrence, record.args);
+          const regions = this.#slotRegions.get(occurrence);
+          if (regions) {
+            for (const [argKey, entry] of regions) {
+              if (!(argKey in props)) props[argKey] = entry.element;
+            }
+          }
+          this.#slotArgs.set(occurrence, record);
+          update(props);
+          this.#bindRegions(occurrence);
           continue;
         }
         const nodes = this.#invokeSlot(occurrence, callback, record, start);
@@ -397,6 +413,7 @@ class FrameImpl {
     }
   }
   #invokeSlot(occurrence, callback, record, start, adopted) {
+    this.#slotUpdaters.delete(occurrence);
     const cleanups = this.#slotCleanups.get(occurrence) ?? [];
     let existing = [];
     let end = null;
@@ -415,6 +432,7 @@ class FrameImpl {
       adopted: !!adopted,
       invoked: !!(record && record.kind === "slot"),
       onCleanup: fn => cleanups.push(fn),
+      onUpdate: fn => this.#slotUpdaters.set(occurrence, fn),
       existing,
       range: end ? {
         start,
@@ -424,8 +442,7 @@ class FrameImpl {
     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);
+      for (const [argKey, entry] of regions) {
         if (!(argKey in props)) props[argKey] = entry.element;
       }
     }
@@ -451,6 +468,7 @@ class FrameImpl {
     this.#mountedSlots.delete(key);
     this.#slotNodes.delete(key);
     this.#slotArgs.delete(key);
+    this.#slotUpdaters.delete(key);
     this.#slotResolvedRefs.delete(key);
     this.#removeSlotRecord(key);
     this.#runSlotCleanups(key);
@@ -485,7 +503,7 @@ class FrameImpl {
         cache[key] = resolved;
         props[key] = resolved;
       } else if (isFrameRef(value)) {
-        let entry = regions.get(value.$frame);
+        let entry = regions.get(key);
         if (!entry) {
           const element = makeFrameElement(value.$frame);
           entry = {
@@ -493,7 +511,9 @@ class FrameImpl {
             element,
             frame: undefined
           };
-          regions.set(value.$frame, entry);
+          regions.set(key, entry);
+        } else if (entry.childId !== value.$frame) {
+          renameRegion(entry, value.$frame);
         }
         props[key] = entry.element;
       } else {
@@ -510,9 +530,10 @@ class FrameImpl {
       this.#slotRegions.set(slotKey, regions);
     }
     const endData = slotEnd(slotKey);
+    const prefix = `${this.#options.id}.`;
     let n = start.nextSibling;
     while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-      collectRegionElements(n, regions);
+      collectRegionElements(n, regions, prefix);
       n = n.nextSibling;
     }
   }
@@ -531,7 +552,7 @@ class FrameImpl {
         if (key in a) continue;
         const vb = b[key];
         if (!vb || typeof vb !== "object" || typeof vb.$frame !== "string") return false;
-        if (!regions || !regions.has(vb.$frame)) return false;
+        if (!regions || !regions.has(key)) return false;
       }
     }
     const cache = this.#slotResolvedRefs.get(occurrence);
@@ -540,7 +561,7 @@ class FrameImpl {
       const vb = b[key];
       if (va === vb) continue;
       if (!va || !vb || typeof va !== "object" || typeof vb !== "object") return false;
-      if (typeof va.$frame === "string" && va.$frame === vb.$frame) continue;
+      if (typeof va.$frame === "string" && typeof vb.$frame === "string") continue;
       if (typeof va.$ref === "string" && typeof vb.$ref === "string" && cache && key in cache) {
         const host = this.#options.host;
         const next = host ? host.resolve(vb, this.#options.id) : undefined;
@@ -554,6 +575,18 @@ class FrameImpl {
     }
     return true;
   }
+  #reconcileRegions(occurrence, record) {
+    const args = record && record.args;
+    if (!args) return;
+    const regions = this.#slotRegions.get(occurrence);
+    if (!regions) return;
+    for (const key of Object.keys(args)) {
+      const value = args[key];
+      if (!isFrameRef(value)) continue;
+      const entry = regions.get(key);
+      if (entry && entry.childId !== value.$frame) renameRegion(entry, value.$frame);
+    }
+  }
   #bindRegions(slotKey) {
     const regions = this.#slotRegions.get(slotKey);
     if (!regions) return;
@@ -595,6 +628,31 @@ class FrameImpl {
       records
     };
   }
+  rebind(id) {
+    if (this.#disposed || id === this.#options.id) return;
+    const {
+      host,
+      id: oldId
+    } = this.#options;
+    if (host && oldId !== undefined) host.unregister(oldId, this);
+    this.#options = {
+      ...this.#options,
+      id
+    };
+    if (this.#element && this.#element.nodeType === ELEMENT_NODE) {
+      this.#element.setAttribute(FRAME_ID_ATTR, id);
+    }
+    this.#version = undefined;
+    this.#revealed.clear();
+    this.#fallbackShown.clear();
+    for (const key of Object.keys(this.#store)) {
+      if (key.startsWith("seg:") || key === ":error") delete this.#store[key];
+    }
+    if (host) host.register(id, this);
+  }
+  rebase() {
+    this.#version = undefined;
+  }
   dispose() {
     if (this.#disposed) return;
     const {
@@ -626,6 +684,7 @@ class FrameImpl {
       const ranges = new Map();
       this.#collectSlots(ranges);
       reconcileChildren(parent, fragment, this.#start, this.#end, claim, ranges);
+      if (ranges.size) restoreDisplacedRanges(this.#firstContent(), this.#end, ranges);
     }
   }
   #clearContent() {
@@ -652,8 +711,8 @@ class FrameImpl {
     const assets = this.#store[`seg:${name}:assets`];
     if (assets && assets.styles) {
       let ready = true;
-      for (const href of assets.styles) {
-        if (!ensureStylesheet(href, this.#styleFlush)) ready = false;
+      for (const entry of assets.styles) {
+        if (!ensureStylesheet(entry, this.#styleFlush)) ready = false;
       }
       if (!ready) return false;
     }
@@ -766,11 +825,15 @@ function findHeadElement(selector, attr, value) {
   }
   return null;
 }
-function ensureStylesheet(href, onSettle) {
+function ensureStylesheet(entry, onSettle) {
+  const href = typeof entry === "string" ? entry : entry.href;
   let link = findHeadElement('link[rel="stylesheet"]', "href", href);
   if (!link) {
     link = document.createElement("link");
     link.rel = "stylesheet";
+    if (typeof entry !== "string" && entry.attrs) {
+      for (const name in entry.attrs) link.setAttribute(name, entry.attrs[name]);
+    }
     link.href = href;
     const waiters = new Set();
     link._$frWaiters = waiters;
@@ -840,21 +903,28 @@ function collectSlots(n, end, out) {
     n = n.nextSibling;
   }
 }
-function collectRegionElements(node, regions) {
+function collectRegionElements(node, regions, prefix) {
   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
-      });
+    if (childId && childId.startsWith(prefix)) {
+      const argKey = childId.slice(childId.lastIndexOf(".") + 1);
+      if (!regions.has(argKey)) {
+        regions.set(argKey, {
+          childId,
+          element: node,
+          frame: undefined,
+          adopt: true
+        });
+      }
     }
     return;
   }
-  for (let c = node.firstChild; c; c = c.nextSibling) collectRegionElements(c, regions);
+  for (let c = node.firstChild; c; c = c.nextSibling) collectRegionElements(c, regions, prefix);
+}
+function renameRegion(entry, childId) {
+  entry.childId = childId;
+  if (entry.frame) entry.frame.rebind(childId);else entry.element.setAttribute(FRAME_ID_ATTR, childId);
 }
 function argsEquivalent(a, b) {
   if (a === b) return true;
@@ -1050,6 +1120,22 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
     oldChild = next;
   }
 }
+function restoreDisplacedRanges(first, end, ranges) {
+  const found = new Map();
+  collectSlots(first, end, found);
+  for (const [id, start] of found) {
+    const displaced = ranges.get(id);
+    if (!displaced || displaced === start) continue;
+    ranges.delete(id);
+    const parent = start.parentNode;
+    if (displaced.nodeType === 11 ) {
+      parent.insertBefore(displaced, start);
+    } else {
+      moveRangeBefore(parent, displaced, id, start);
+    }
+    stashRange(document.createDocumentFragment(), start, id);
+  }
+}
 function stashRange(frag, start, id) {
   const end = slotEnd(id);
   let n = start;
@@ -1093,6 +1179,7 @@ async function applyFrameResponse(response, host, options = {}) {
 }
 const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
 const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
+const COMPONENT_HANDOFF = /*#__PURE__*/Symbol.for("dom-expressions.component-handoff");
 let resolveServerComponent;
 function parseServerComponent(value, ctx) {
   return {
@@ -1147,18 +1234,48 @@ function createServerComponentHandler({
   codec = client.getServerFunctionsCodec
 }) {
   const byAddress = new Map();
-  const boundaryFor = address => {
+  const forwards = new Map();
+  const brand = (comp, fnId, frameId) => {
+    const brandable = typeof comp === "function" || typeof comp === "object" && comp !== null;
+    if (brandable && !comp[COMPONENT_HANDOFF]) {
+      comp[COMPONENT_HANDOFF] = {
+        fnId,
+        frameId,
+        take(prev) {
+          const meta = prev !== null && (typeof prev === "function" || typeof prev === "object") && prev[COMPONENT_HANDOFF];
+          if (!meta || meta.fnId !== fnId) return false;
+          const root = meta.frameId;
+          let cur = forwards.get(root) ?? root;
+          if (cur !== root && !host.get(cur)) {
+            forwards.delete(root);
+            cur = root;
+          }
+          if (cur === frameId) return true;
+          let frame = host.get(cur);
+          if (!frame) return false;
+          while (frame) {
+            frame.rebind(frameId);
+            frame = host.get(cur);
+          }
+          if (frameId === root) forwards.delete(root);else forwards.set(root, frameId);
+          return true;
+        }
+      };
+    }
+    return comp;
+  };
+  const boundaryFor = (address, fnId) => {
     let entry = byAddress.get(address);
     if (!entry) {
       entry = {
         frameId: address,
-        component: component(address)
+        component: brand(component(address), fnId, address)
       };
       byAddress.set(address, entry);
     }
     return entry;
   };
-  const resolveAddress = (id, address) => boundaryFor(address).component;
+  const resolveAddress = (id, address) => boundaryFor(address, id).component;
   resolveServerComponent = resolveAddress;
   const versions = new Map();
   const bump = frameId => {
@@ -1173,7 +1290,7 @@ function createServerComponentHandler({
         const address = client.frameAddress(info.id, info.args);
         byAddress.set(address, {
           frameId: info.id,
-          component: hit
+          component: brand(hit, info.id, info.id)
         });
       }
       return hit;
@@ -1187,11 +1304,11 @@ function createServerComponentHandler({
         if (adopted) {
           entry = {
             frameId: ctx.id,
-            component: adopted
+            component: brand(adopted, ctx.id, ctx.id)
           };
           byAddress.set(address, entry);
         } else {
-          entry = boundaryFor(address);
+          entry = boundaryFor(address, ctx.id);
         }
       }
       if (response.headers.has(client.SINGLE_FLIGHT_HEADER)) {
@@ -1216,7 +1333,7 @@ function createServerComponentHandler({
       if (!byAddress.has(address)) {
         byAddress.set(address, {
           frameId: functionId,
-          component,
+          component: brand(component, functionId, functionId),
           address
         });
       }
@@ -1348,6 +1465,15 @@ function gatherClaims(el, registry) {
   if (el.hasAttribute(FRAME_ID_ATTR)) return;
   for (let c = el.firstElementChild; c; c = c.nextElementSibling) gatherClaims(c, registry);
 }
+function hasPendingFragment(existing) {
+  for (const n of existing) {
+    if (n.nodeType !== 1) continue;
+    const el = n;
+    if (el.tagName === "TEMPLATE" && el.id.startsWith("pl-")) return true;
+    if (el.querySelector?.('template[id^="pl-"]')) return true;
+  }
+  return false;
+}
 function claimRender(prefix, existing, render) {
   const sc = solidJs.sharedConfig;
   if (!sc.getNextContextId) return render();
@@ -1356,10 +1482,11 @@ function claimRender(prefix, existing, render) {
     if (n.nodeType !== 1) continue;
     gatherClaims(n, registry);
   }
-  if (!registry.size) return render();
+  if (!registry.size && !hasPendingFragment(existing)) return render();
   const prevRegistry = sc.registry;
   const prevHydrating = sc.hydrating;
   const prevClaimRoots = sc.claimRoots;
+  if (prevRegistry) for (const key of registry.keys()) prevRegistry.delete(key);
   sc.registry = registry;
   sc.hydrating = true;
   sc.claimRoots = existing;
@@ -1373,6 +1500,19 @@ function claimRender(prefix, existing, render) {
     sc.claimRoots = prevClaimRoots;
   }
 }
+function liveSlotProps(initial, ctx) {
+  const [args, setArgs] = solidJs.createSignal(initial);
+  ctx.onUpdate(next => setArgs(() => next));
+  return new Proxy({}, {
+    get: (_, key) => args()[key],
+    has: (_, key) => key in args(),
+    ownKeys: () => Reflect.ownKeys(args()),
+    getOwnPropertyDescriptor: (_, key) => key in args() ? {
+      enumerable: true,
+      configurable: true
+    } : undefined
+  });
+}
 function isReactiveContent(value) {
   if (typeof value === "function") return true;
   if (Array.isArray(value)) {
@@ -1403,7 +1543,10 @@ function slotsFor(props) {
         };
         const evaluate = () => {
           const v = props[prop];
-          return typeof v === "function" && ctx && ctx.invoked ? v(slotProps) : v;
+          if (typeof v === "function" && ctx && ctx.invoked) {
+            return v(ctx.onUpdate ? liveSlotProps(slotProps, ctx) : slotProps);
+          }
+          return v;
         };
         const adopted = !!(ctx && ctx.frame && ctx.adopted && ctx.existing && ctx.existing.length);
         const prefix = ctx && ctx.frame ? `sc-${ctx.frame}-${ctx.key}-` : "";