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

package/dist/web.cjs

@@ -87,13 +87,18 @@ function reconcileArrays(parentNode, a, b, marker) {
     map = null,
     anchor,
     anchorTag;
+  const isLive = n => {
+    if (!n) return false;
+    const tag = n[$$SLOT];
+    return n.parentNode === parentNode && (!tag || tag === marker);
+  };
   while (aStart < aEnd || bStart < bEnd) {
-    if (a[aStart] === b[bStart]) {
+    if (a[aStart] === b[bStart] && isLive(a[aStart])) {
       aStart++;
       bStart++;
       continue;
     }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
+    while (a[aEnd - 1] === b[bEnd - 1] && isLive(a[aEnd - 1])) {
       aEnd--;
       bEnd--;
     }
@@ -586,6 +591,11 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
+const PURE_ROW = Symbol.for("solid.pure-row");
+function rowProof(fn) {
+  fn[PURE_ROW] = true;
+  return fn;
+}
 function scope(fn) {
   fn.$s = true;
   return fn;
@@ -649,6 +659,11 @@ function stripTextSeparators(nodes) {
   nodes.length = j;
   return nodes;
 }
+function patchDriver(subject, body) {
+  {
+    effect(() => body(subject, subject, false), () => body(subject, undefined, true));
+  }
+}
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
@@ -889,7 +904,7 @@ function initHeadRegistry() {
   headOwned = new Map();
   headApplied = new Map();
   const t = document.querySelector("title");
-  headFallbackTitle = t && !t.hasAttribute("data-dh") ? t.textContent : null;
+  headFallbackTitle = t ? t.hasAttribute("data-dh") ? t.getAttribute("data-dhf") : t.textContent : null;
   if (globalThis._$HY) globalThis._$HY.h = applyServerHeadOps;
 }
 function applyServerHeadOps(ops) {
@@ -944,7 +959,11 @@ function flushHeadRegistry() {
     headOwned.delete(identity);
     headApplied.delete(identity);
     if (identity === "title") {
-      if (headFallbackTitle != null) setHeadTitle(headFallbackTitle).removeAttribute("data-dh");
+      if (headFallbackTitle != null) {
+        const el = setHeadTitle(headFallbackTitle);
+        el.removeAttribute("data-dh");
+        el.removeAttribute("data-dhf");
+      }
     } else {
       for (let i = 0; i < els.length; i++) els[i].remove();
     }
@@ -1108,7 +1127,7 @@ function loadModuleAssets(mapping) {
   const pending = [];
   for (const key in mapping) {
     if (hy.modules[key]) continue;
-    const entryUrl = mapping[key];
+    const entryUrl = new URL(mapping[key], document.baseURI).href;
     if (!hy.loading[key]) {
       hy.loading[key] = import(entryUrl).then(mod => {
         hy.modules[key] = mod;
@@ -1361,6 +1380,7 @@ function eventHandler(e, container, state) {
   }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
+  if (owner && owner === resumeNode) return;
   e[$$EVENT_OWNER] = owner || true;
   let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -1371,7 +1391,11 @@ function eventHandler(e, container, state) {
     value
   });
   const handleNode = () => {
-    const handler = node[key];
+    let handler = node[key];
+    if (handler === undefined && node.hasAttribute && node.hasAttribute("_bnd")) {
+      const seam = globalThis[Symbol.for("dx.bnd")];
+      if (seam) handler = seam.resolve(node, e.type);
+    }
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
       data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
@@ -1381,7 +1405,7 @@ function eventHandler(e, container, state) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode()) {
+    while (node && handleNode()) {
       if (node === boundary || node.parentNode === boundary) break;
       node = node._$host || node.parentNode || node.host;
     }
@@ -1828,21 +1852,21 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function loadClientOnly(fn, setComp) {
-  fn().then(m => setComp(() => m.default));
+function loadClientOnly(fn, setComp, exportName) {
+  fn().then(m => setComp(() => exportName ? m[exportName] : m.default));
 }
 function clientOnly(fn, options = {},
 _moduleUrl) {
   const [comp, setComp] = solidJs.createSignal();
   let started = !options.lazy;
-  started && loadClientOnly(fn, setComp);
+  started && loadClientOnly(fn, setComp, options.export);
   return props => {
     let Comp;
     let m;
     const rest = solidJs.omit(props, "fallback");
     if (!started) {
       started = true;
-      loadClientOnly(fn, setComp);
+      loadClientOnly(fn, setComp, options.export);
     }
     if ((Comp = solidJs.untrack(comp)) && !solidJs.sharedConfig.hydrating) return Comp(rest);
     const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.hydrating);
@@ -1972,6 +1996,7 @@ exports.markSafeError = markSafeError;
 exports.memo = memo;
 exports.mergeProps = mergeProps;
 exports.parseCookieHeader = parseCookieHeader;
+exports.patchDriver = patchDriver;
 exports.redirect = redirect;
 exports.ref = ref;
 exports.registerDelegatedContainer = registerDelegatedContainer;
@@ -1983,6 +2008,7 @@ exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
 exports.resolveSSRNode = resolveSSRNode;
 exports.respond = respond;
+exports.rowProof = rowProof;
 exports.runHydrationEvents = runHydrationEvents;
 exports.scope = scope;
 exports.serializeCookie = serializeCookie;

package/dist/web.js

@@ -86,13 +86,18 @@ function reconcileArrays(parentNode, a, b, marker) {
     map = null,
     anchor,
     anchorTag;
+  const isLive = n => {
+    if (!n) return false;
+    const tag = n[$$SLOT];
+    return n.parentNode === parentNode && (!tag || tag === marker);
+  };
   while (aStart < aEnd || bStart < bEnd) {
-    if (a[aStart] === b[bStart]) {
+    if (a[aStart] === b[bStart] && isLive(a[aStart])) {
       aStart++;
       bStart++;
       continue;
     }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
+    while (a[aEnd - 1] === b[bEnd - 1] && isLive(a[aEnd - 1])) {
       aEnd--;
       bEnd--;
     }
@@ -585,6 +590,11 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
+const PURE_ROW = Symbol.for("solid.pure-row");
+function rowProof(fn) {
+  fn[PURE_ROW] = true;
+  return fn;
+}
 function scope(fn) {
   fn.$s = true;
   return fn;
@@ -648,6 +658,11 @@ function stripTextSeparators(nodes) {
   nodes.length = j;
   return nodes;
 }
+function patchDriver(subject, body) {
+  {
+    effect(() => body(subject, subject, false), () => body(subject, undefined, true));
+  }
+}
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
@@ -888,7 +903,7 @@ function initHeadRegistry() {
   headOwned = new Map();
   headApplied = new Map();
   const t = document.querySelector("title");
-  headFallbackTitle = t && !t.hasAttribute("data-dh") ? t.textContent : null;
+  headFallbackTitle = t ? t.hasAttribute("data-dh") ? t.getAttribute("data-dhf") : t.textContent : null;
   if (globalThis._$HY) globalThis._$HY.h = applyServerHeadOps;
 }
 function applyServerHeadOps(ops) {
@@ -943,7 +958,11 @@ function flushHeadRegistry() {
     headOwned.delete(identity);
     headApplied.delete(identity);
     if (identity === "title") {
-      if (headFallbackTitle != null) setHeadTitle(headFallbackTitle).removeAttribute("data-dh");
+      if (headFallbackTitle != null) {
+        const el = setHeadTitle(headFallbackTitle);
+        el.removeAttribute("data-dh");
+        el.removeAttribute("data-dhf");
+      }
     } else {
       for (let i = 0; i < els.length; i++) els[i].remove();
     }
@@ -1107,7 +1126,7 @@ function loadModuleAssets(mapping) {
   const pending = [];
   for (const key in mapping) {
     if (hy.modules[key]) continue;
-    const entryUrl = mapping[key];
+    const entryUrl = new URL(mapping[key], document.baseURI).href;
     if (!hy.loading[key]) {
       hy.loading[key] = import(entryUrl).then(mod => {
         hy.modules[key] = mod;
@@ -1360,6 +1379,7 @@ function eventHandler(e, container, state) {
   }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
+  if (owner && owner === resumeNode) return;
   e[$$EVENT_OWNER] = owner || true;
   let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -1370,7 +1390,11 @@ function eventHandler(e, container, state) {
     value
   });
   const handleNode = () => {
-    const handler = node[key];
+    let handler = node[key];
+    if (handler === undefined && node.hasAttribute && node.hasAttribute("_bnd")) {
+      const seam = globalThis[Symbol.for("dx.bnd")];
+      if (seam) handler = seam.resolve(node, e.type);
+    }
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
       data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
@@ -1380,7 +1404,7 @@ function eventHandler(e, container, state) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode()) {
+    while (node && handleNode()) {
       if (node === boundary || node.parentNode === boundary) break;
       node = node._$host || node.parentNode || node.host;
     }
@@ -1827,21 +1851,21 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function loadClientOnly(fn, setComp) {
-  fn().then(m => setComp(() => m.default));
+function loadClientOnly(fn, setComp, exportName) {
+  fn().then(m => setComp(() => exportName ? m[exportName] : m.default));
 }
 function clientOnly(fn, options = {},
 _moduleUrl) {
   const [comp, setComp] = createSignal();
   let started = !options.lazy;
-  started && loadClientOnly(fn, setComp);
+  started && loadClientOnly(fn, setComp, options.export);
   return props => {
     let Comp;
     let m;
     const rest = omit(props, "fallback");
     if (!started) {
       started = true;
-      loadClientOnly(fn, setComp);
+      loadClientOnly(fn, setComp, options.export);
     }
     if ((Comp = untrack(comp)) && !sharedConfig.hydrating) return Comp(rest);
     const [mounted, setMounted] = createSignal(!sharedConfig.hydrating);
@@ -1855,4 +1879,4 @@ _moduleUrl) {
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, mergeProps, parseCookieHeader, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, warmAsset };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, mergeProps, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, warmAsset };

package/frames/dist/client.cjs

@@ -17,6 +17,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;
@@ -116,6 +181,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());
@@ -210,10 +276,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();
@@ -662,7 +736,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 = [];
@@ -678,8 +752,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) {
@@ -703,7 +776,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);
@@ -995,7 +1067,7 @@ function isSlotMarker(node) {
 }
 function compatible(a, b) {
   if (a.nodeType !== b.nodeType) return false;
-  if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName;
+  if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName && a.getAttribute("_key") === b.getAttribute("_key");
   return a.nodeType === TEXT_NODE || a.nodeType === COMMENT_NODE;
 }
 function preservesOpen(el) {
@@ -1406,7 +1478,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;
@@ -1452,7 +1526,8 @@ function getFrameHost() {
       applyData: c => tableFor(c.id)?.apply(c),
       resolve: (ref, id) => tableFor(id)?.resolve(ref),
       revive: reviveContainerTraces,
-      isContainer: isMaterializedContainer
+      isContainer: isMaterializedContainer,
+      delegate: web.delegateEvents
     });
   }
   return sharedHost;
@@ -1528,7 +1603,16 @@ function slotArgsProxy(args) {
       if (!isAsyncValue(v)) return v;
       let read = asyncReads.get(key);
       if (!read) {
-        const make = () => solidJs.createMemo(() => args()[key]);
+        const make = () => solidJs.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 ? solidJs.runWithOwner(owner, make) : make();
         asyncReads.set(key, read);
       }
@@ -1647,6 +1731,7 @@ function boundaryComponent(host, fnId) {
       host,
       id,
       slots: slotsFor(props),
+      props,
       ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner),
       onApply: () => {
@@ -1831,6 +1916,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.dev.cjs

@@ -17,6 +17,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;
@@ -116,6 +184,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());
@@ -210,10 +279,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();
@@ -663,7 +740,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 = [];
@@ -682,8 +759,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) {
@@ -707,7 +783,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);
@@ -1003,7 +1078,7 @@ function isSlotMarker(node) {
 }
 function compatible(a, b) {
   if (a.nodeType !== b.nodeType) return false;
-  if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName;
+  if (a.nodeType === ELEMENT_NODE) return a.nodeName === b.nodeName && a.getAttribute("_key") === b.getAttribute("_key");
   return a.nodeType === TEXT_NODE || a.nodeType === COMMENT_NODE;
 }
 function preservesOpen(el) {
@@ -1423,7 +1498,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;
@@ -1469,7 +1546,8 @@ function getFrameHost() {
       applyData: c => tableFor(c.id)?.apply(c),
       resolve: (ref, id) => tableFor(id)?.resolve(ref),
       revive: reviveContainerTraces,
-      isContainer: isMaterializedContainer
+      isContainer: isMaterializedContainer,
+      delegate: web.delegateEvents
     });
   }
   return sharedHost;
@@ -1545,7 +1623,16 @@ function slotArgsProxy(args) {
       if (!isAsyncValue(v)) return v;
       let read = asyncReads.get(key);
       if (!read) {
-        const make = () => solidJs.createMemo(() => args()[key]);
+        const make = () => solidJs.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 ? solidJs.runWithOwner(owner, make) : make();
         asyncReads.set(key, read);
       }
@@ -1664,6 +1751,7 @@ function boundaryComponent(host, fnId) {
       host,
       id,
       slots: slotsFor(props),
+      props,
       ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner),
       onApply: () => {
@@ -1848,6 +1936,7 @@ function adoptBoundary(host, id, el, props, binding) {
     host,
     id: address,
     slots: slotsFor(props),
+    props,
     ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner),
     onApply: () => {