@solidjs/web 2.0.0-rc.1 → 2.0.0-rc.2

package/frames/dist/client.dev.js

@@ -1,5 +1,5 @@
 import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } from 'solid-js';
-import { insert } from '@solidjs/web';
+import { delegateEvents, insert } from '@solidjs/web';
 import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
 
 const ELEMENT_NODE = 1;
@@ -15,6 +15,74 @@ function claimNode(handlers, el) {
   for (let i = 0; i < handlers.length; i++) handlers[i](el);
 }
 const claimedAttr = name => name === "href" || name === "action";
+const BOUND_SEAM = Symbol.for("dx.bnd");
+const boundSeam = globalThis[BOUND_SEAM] || (globalThis[BOUND_SEAM] = {});
+const BND_ATTR = "_bnd";
+const BND_SELECTOR = "[_bnd]";
+function bndMap(el) {
+  const s = el.getAttribute(BND_ATTR);
+  if (!s) return undefined;
+  const map = {};
+  for (const entry of s.split(",")) {
+    const eq = entry.indexOf("=");
+    if (eq < 1) continue;
+    const pos = entry.slice(0, eq);
+    const prop = decodeURIComponent(entry.slice(eq + 1));
+    const prev = map[pos];
+    if (prev === undefined) map[pos] = prop;else if (Array.isArray(prev)) prev.push(prop);else map[pos] = [prev, prop];
+  }
+  return map;
+}
+boundSeam.resolve = (el, type) => {
+  const frame = el._$bndFrame;
+  if (!frame) return undefined;
+  const map = bndMap(el);
+  const prop = map && map[type];
+  if (typeof prop !== "string") return undefined;
+  return claimFn(frame, type, prop);
+};
+function claimFn(frame, pos, prop) {
+  const fn = frame.clientProp(prop);
+  if (typeof fn === "function") return fn;
+  if (fn !== undefined) {
+    console.warn(`A server element claims \`${pos}\` from client prop \`${prop}\`, but the mounted ` + `frame's prop is not a function.`);
+  }
+  return undefined;
+}
+function sweepBound(root, frame, delegate, scope) {
+  const isElement = root.nodeType === ELEMENT_NODE;
+  if (!isElement && root.nodeType !== 11 ) return;
+  let els;
+  if (isElement && root.hasAttribute(BND_ATTR)) (els = []).push(root);
+  const found = root.querySelectorAll(BND_SELECTOR);
+  if (found.length) {
+    els || (els = []);
+    for (let i = 0; i < found.length; i++) els.push(found[i]);
+  }
+  if (!els) return;
+  const run = () => {
+    let types;
+    for (const el of els) {
+      el._$bndFrame = frame;
+      const map = bndMap(el);
+      if (!map) continue;
+      for (const pos in map) {
+        if (pos === "ref") fireRefs(frame, el, map.ref);else (types || (types = [])).push(pos);
+      }
+    }
+    if (types && delegate) delegate(types);
+  };
+  scope ? scope(run) : run();
+}
+function fireRefs(frame, el, prop) {
+  const fired = el._$bndFired || (el._$bndFired = new Set());
+  for (const p of Array.isArray(prop) ? prop : [prop]) {
+    if (fired.has(p)) continue;
+    fired.add(p);
+    const fn = claimFn(frame, "ref", p);
+    if (fn) fn(el);
+  }
+}
 function claimTree(handlers, root) {
   const isElement = root.nodeType === ELEMENT_NODE;
   if (!isElement && root.nodeType !== 11 ) return;
@@ -114,6 +182,7 @@ function createFrameHost(options = {}) {
     return true;
   };
   return {
+    delegate: options.delegate,
     register(id, frame) {
       let set = frames.get(id);
       if (!set) frames.set(id, set = new Set());
@@ -208,10 +277,18 @@ class FrameImpl {
     if (!this.#disposed) this.#flush();
   };
   #claimTree = (node, direct) => {
+    if (!direct && node.nodeType !== TEXT_NODE && node.nodeType !== COMMENT_NODE) {
+      const o = this.#options;
+      sweepBound(node, this, o.delegate || o.host && o.host.delegate, o.ownerScope);
+    }
     const handlers = claimHandlers();
     if (!handlers) return;
     this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
   };
+  clientProp(name) {
+    const props = this.#options.props;
+    return props ? props[name] : undefined;
+  }
   #scoped(fn) {
     const scope = this.#options.ownerScope;
     return scope ? scope(fn) : fn();
@@ -661,7 +738,7 @@ class FrameImpl {
       parent.insertBefore(fragment, this.#end);
       this.#hasContent = true;
     } else {
-      const claim = claimHandlers() ? this.#claimTree : null;
+      const claim = this.#claimTree;
       const ranges = new Map();
       this.#collectSlots(ranges);
       const grafts = [];
@@ -680,8 +757,7 @@ class FrameImpl {
       }
       return false;
     }
-    const claim = claimHandlers() ? this.#claimTree : null;
-    reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
+    reconcileChildren(open.parentNode, parseFragment(html), open, close, this.#claimTree);
     return true;
   }
   #applyAttrs(addr, text, removed) {
@@ -705,7 +781,6 @@ class FrameImpl {
     removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
   #claimContent() {
-    if (!claimHandlers()) return;
     let n = this.#firstContent();
     while (n && n !== this.#end) {
       this.#claimTree(n);
@@ -1421,7 +1496,9 @@ 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";
+  if (value == null || typeof value !== "object" || value.$tr == null) return false;
+  const tr = value.$tr;
+  return tr.__SEROVAL_STREAM__ === true || typeof tr[Symbol.asyncIterator] === "function";
 }
 function reviveContainerTraces(value) {
   if (!state.materializeTrace || value == null || typeof value !== "object") return value;
@@ -1467,7 +1544,8 @@ function getFrameHost() {
       applyData: c => tableFor(c.id)?.apply(c),
       resolve: (ref, id) => tableFor(id)?.resolve(ref),
       revive: reviveContainerTraces,
-      isContainer: isMaterializedContainer
+      isContainer: isMaterializedContainer,
+      delegate: delegateEvents
     });
   }
   return sharedHost;
@@ -1543,7 +1621,16 @@ function slotArgsProxy(args) {
       if (!isAsyncValue(v)) return v;
       let read = asyncReads.get(key);
       if (!read) {
-        const make = () => createMemo(() => args()[key]);
+        const make = () => createMemo(() => {
+          const raw = args()[key];
+          if (raw != null && typeof raw.then === "function") {
+            if (raw.s === 1) return raw.v;
+            if (raw.s === 2) throw raw.v;
+          }
+          return raw;
+        }, {
+          transparent: true
+        });
         read = owner ? runWithOwner(owner, make) : make();
         asyncReads.set(key, read);
       }
@@ -1662,6 +1749,7 @@ function boundaryComponent(host, fnId) {
       host,
       id,
       slots: slotsFor(props),
+      props,
       ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner),
       onApply: () => {
@@ -1846,6 +1934,7 @@ function adoptBoundary(host, id, el, props, binding) {
     host,
     id: address,
     slots: slotsFor(props),
+    props,
     ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner),
     onApply: () => {

package/frames/dist/client.js

@@ -1,5 +1,5 @@
 import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } from 'solid-js';
-import { insert } from '@solidjs/web';
+import { delegateEvents, insert } from '@solidjs/web';
 import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
 
 const ELEMENT_NODE = 1;
@@ -15,6 +15,71 @@ function claimNode(handlers, el) {
   for (let i = 0; i < handlers.length; i++) handlers[i](el);
 }
 const claimedAttr = name => name === "href" || name === "action";
+const BOUND_SEAM = Symbol.for("dx.bnd");
+const boundSeam = globalThis[BOUND_SEAM] || (globalThis[BOUND_SEAM] = {});
+const BND_ATTR = "_bnd";
+const BND_SELECTOR = "[_bnd]";
+function bndMap(el) {
+  const s = el.getAttribute(BND_ATTR);
+  if (!s) return undefined;
+  const map = {};
+  for (const entry of s.split(",")) {
+    const eq = entry.indexOf("=");
+    if (eq < 1) continue;
+    const pos = entry.slice(0, eq);
+    const prop = decodeURIComponent(entry.slice(eq + 1));
+    const prev = map[pos];
+    if (prev === undefined) map[pos] = prop;else if (Array.isArray(prev)) prev.push(prop);else map[pos] = [prev, prop];
+  }
+  return map;
+}
+boundSeam.resolve = (el, type) => {
+  const frame = el._$bndFrame;
+  if (!frame) return undefined;
+  const map = bndMap(el);
+  const prop = map && map[type];
+  if (typeof prop !== "string") return undefined;
+  return claimFn(frame, type, prop);
+};
+function claimFn(frame, pos, prop) {
+  const fn = frame.clientProp(prop);
+  if (typeof fn === "function") return fn;
+  return undefined;
+}
+function sweepBound(root, frame, delegate, scope) {
+  const isElement = root.nodeType === ELEMENT_NODE;
+  if (!isElement && root.nodeType !== 11 ) return;
+  let els;
+  if (isElement && root.hasAttribute(BND_ATTR)) (els = []).push(root);
+  const found = root.querySelectorAll(BND_SELECTOR);
+  if (found.length) {
+    els || (els = []);
+    for (let i = 0; i < found.length; i++) els.push(found[i]);
+  }
+  if (!els) return;
+  const run = () => {
+    let types;
+    for (const el of els) {
+      el._$bndFrame = frame;
+      const map = bndMap(el);
+      if (!map) continue;
+      for (const pos in map) {
+        if (pos === "ref") fireRefs(frame, el, map.ref);else (types || (types = [])).push(pos);
+      }
+    }
+    if (types && delegate) delegate(types);
+  };
+  scope ? scope(run) : run();
+}
+function fireRefs(frame, el, prop) {
+  const fired = el._$bndFired || (el._$bndFired = new Set());
+  for (const p of Array.isArray(prop) ? prop : [prop]) {
+    if (fired.has(p)) continue;
+    fired.add(p);
+    const fn = claimFn(frame, "ref", p);
+    if (fn) fn(el);
+  }
+}
 function claimTree(handlers, root) {
   const isElement = root.nodeType === ELEMENT_NODE;
   if (!isElement && root.nodeType !== 11 ) return;
@@ -114,6 +179,7 @@ function createFrameHost(options = {}) {
     return true;
   };
   return {
+    delegate: options.delegate,
     register(id, frame) {
       let set = frames.get(id);
       if (!set) frames.set(id, set = new Set());
@@ -208,10 +274,18 @@ class FrameImpl {
     if (!this.#disposed) this.#flush();
   };
   #claimTree = (node, direct) => {
+    if (!direct && node.nodeType !== TEXT_NODE && node.nodeType !== COMMENT_NODE) {
+      const o = this.#options;
+      sweepBound(node, this, o.delegate || o.host && o.host.delegate, o.ownerScope);
+    }
     const handlers = claimHandlers();
     if (!handlers) return;
     this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
   };
+  clientProp(name) {
+    const props = this.#options.props;
+    return props ? props[name] : undefined;
+  }
   #scoped(fn) {
     const scope = this.#options.ownerScope;
     return scope ? scope(fn) : fn();
@@ -660,7 +734,7 @@ class FrameImpl {
       parent.insertBefore(fragment, this.#end);
       this.#hasContent = true;
     } else {
-      const claim = claimHandlers() ? this.#claimTree : null;
+      const claim = this.#claimTree;
       const ranges = new Map();
       this.#collectSlots(ranges);
       const grafts = [];
@@ -676,8 +750,7 @@ class FrameImpl {
     if (!close) {
       return false;
     }
-    const claim = claimHandlers() ? this.#claimTree : null;
-    reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
+    reconcileChildren(open.parentNode, parseFragment(html), open, close, this.#claimTree);
     return true;
   }
   #applyAttrs(addr, text, removed) {
@@ -701,7 +774,6 @@ class FrameImpl {
     removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
   #claimContent() {
-    if (!claimHandlers()) return;
     let n = this.#firstContent();
     while (n && n !== this.#end) {
       this.#claimTree(n);
@@ -1404,7 +1476,9 @@ 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";
+  if (value == null || typeof value !== "object" || value.$tr == null) return false;
+  const tr = value.$tr;
+  return tr.__SEROVAL_STREAM__ === true || typeof tr[Symbol.asyncIterator] === "function";
 }
 function reviveContainerTraces(value) {
   if (!state.materializeTrace || value == null || typeof value !== "object") return value;
@@ -1450,7 +1524,8 @@ function getFrameHost() {
       applyData: c => tableFor(c.id)?.apply(c),
       resolve: (ref, id) => tableFor(id)?.resolve(ref),
       revive: reviveContainerTraces,
-      isContainer: isMaterializedContainer
+      isContainer: isMaterializedContainer,
+      delegate: delegateEvents
     });
   }
   return sharedHost;
@@ -1526,7 +1601,16 @@ function slotArgsProxy(args) {
       if (!isAsyncValue(v)) return v;
       let read = asyncReads.get(key);
       if (!read) {
-        const make = () => createMemo(() => args()[key]);
+        const make = () => createMemo(() => {
+          const raw = args()[key];
+          if (raw != null && typeof raw.then === "function") {
+            if (raw.s === 1) return raw.v;
+            if (raw.s === 2) throw raw.v;
+          }
+          return raw;
+        }, {
+          transparent: true
+        });
         read = owner ? runWithOwner(owner, make) : make();
         asyncReads.set(key, read);
       }
@@ -1645,6 +1729,7 @@ function boundaryComponent(host, fnId) {
       host,
       id,
       slots: slotsFor(props),
+      props,
       ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner),
       onApply: () => {
@@ -1829,6 +1914,7 @@ function adoptBoundary(host, id, el, props, binding) {
     host,
     id: address,
     slots: slotsFor(props),
+    props,
     ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner),
     onApply: () => {