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

package/README.md

@@ -2,7 +2,7 @@
 
 Solid 2.0's web platform runtime — DOM rendering, hydration, server-side rendering, and the web-only control-flow components (`Portal`, `Dynamic`).
 
-> **Solid 2.0 (experimental beta).** In 1.x this package was the `solid-js/web` subpath; in 2.0 it's a separate `@solidjs/web` package.
+> **Solid 2.0 (Release Candidate).** In 1.x this package was the `solid-js/web` subpath; in 2.0 it's a separate `@solidjs/web` package.
 >
 > See [`solid-js`'s CHEATSHEET](https://github.com/solidjs/solid/blob/next/packages/solid/CHEATSHEET.md) and [MIGRATION guide](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md) for the 2.0 surface.
 

package/dist/dev.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--;
     }
@@ -592,6 +597,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;
@@ -655,6 +665,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;
@@ -895,7 +910,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) {
@@ -950,7 +965,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();
     }
@@ -1117,7 +1136,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;
@@ -1219,6 +1238,9 @@ function getNextElement(template) {
     if (!template) {
       throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
     }
+    if (hydrating) {
+      console.warn(`Hydration key miss for "${key}": no server-rendered element carries this key` + (template._html ? ` (template: ${template._html.slice(0, 60)})` : "") + `. A detached element was created instead; its subtree will not appear in the ` + `document or become interactive. This usually means the server and client ` + `hydration id namespaces are misaligned — when hydrating a subtree of a larger ` + `server render, wrap the document shell in <NoHydration> and re-enter with ` + `<Hydration> around the hydrated subtree (or pass hydrate() a renderId matching ` + `the server's <Hydration id>).`);
+    }
     return template(true);
   }
   if (template && template._html) {
@@ -1422,6 +1444,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}`;
@@ -1432,7 +1455,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);
@@ -1442,7 +1469,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;
     }
@@ -1894,21 +1921,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);
@@ -2038,6 +2065,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;
@@ -2049,6 +2077,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/dev.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--;
     }
@@ -591,6 +596,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;
@@ -654,6 +664,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;
@@ -894,7 +909,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) {
@@ -949,7 +964,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();
     }
@@ -1116,7 +1135,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;
@@ -1218,6 +1237,9 @@ function getNextElement(template) {
     if (!template) {
       throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
     }
+    if (hydrating) {
+      console.warn(`Hydration key miss for "${key}": no server-rendered element carries this key` + (template._html ? ` (template: ${template._html.slice(0, 60)})` : "") + `. A detached element was created instead; its subtree will not appear in the ` + `document or become interactive. This usually means the server and client ` + `hydration id namespaces are misaligned — when hydrating a subtree of a larger ` + `server render, wrap the document shell in <NoHydration> and re-enter with ` + `<Hydration> around the hydrated subtree (or pass hydrate() a renderId matching ` + `the server's <Hydration id>).`);
+    }
     return template(true);
   }
   if (template && template._html) {
@@ -1421,6 +1443,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}`;
@@ -1431,7 +1454,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);
@@ -1441,7 +1468,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;
     }
@@ -1893,21 +1920,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);
@@ -1921,4 +1948,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 };