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

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

@@ -1219,6 +1219,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 +1425,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}`;
@@ -1442,7 +1446,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 +1898,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);

package/dist/dev.js

@@ -1218,6 +1218,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 +1424,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}`;
@@ -1441,7 +1445,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 +1897,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);

package/dist/server.cjs

@@ -969,7 +969,7 @@ function renderToString(code, options = {}) {
   solidJs.sharedConfig.context.noHydrate = true;
   serializer.close();
   const head = renderShellHead(headRegistry, nonce, null);
-  return assembleDocument(html, tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce, head, onHead);
+  return assembleDocument(resolveSSRSelectValues(html), tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce, head, onHead);
 }
 function renderToStream(code, options = {}) {
   let {
@@ -1302,7 +1302,7 @@ function renderToStream(code, options = {}) {
               const styles = collectStreamStyles(key, tracking, headStyles);
               const headOps = error ? null : flushHeadFragment(headRegistry, key);
               if (headOps) emitHeadOps(key, headOps);
-              sink.fragment(key, value !== undefined ? value : " ", {
+              sink.fragment(key, resolveSSRSelectValues(value !== undefined ? value : " "), {
                 styles,
                 revealGroup,
                 error
@@ -1394,7 +1394,7 @@ function renderToStream(code, options = {}) {
     }
     serializeRootAssets();
     const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
-    sink.shell(html, {
+    sink.shell(resolveSSRSelectValues(html), {
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
       tasks,
@@ -2279,6 +2279,93 @@ function ssrHydrationKey() {
   const hk = getHydrationKey();
   return hk ? ` _hk=${hk}` : "";
 }
+function decodeSSREntities(s) {
+  return s.indexOf("&") < 0 ? s : s.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+}
+const SELECT_VALUE_ATTR = /\svalue="([^"]*)"/;
+function tagEnd(html, i) {
+  for (let j = i + 1; j < html.length; j++) {
+    const c = html.charCodeAt(j);
+    if (c === 34) {
+      j = html.indexOf('"', j + 1);
+      if (j < 0) return -1;
+    } else if (c === 62) return j;
+  }
+  return -1;
+}
+function optionText(html, from) {
+  let t = "";
+  let i = from;
+  for (;;) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) return t + html.slice(i);
+    t += html.slice(i, lt);
+    if (!html.startsWith("<!--", lt)) return t;
+    const ce = html.indexOf("-->", lt);
+    if (ce < 0) return t;
+    i = ce + 3;
+  }
+}
+function tagIs(html, i, name) {
+  if (!html.startsWith(name, i + 1)) return false;
+  const c = html.charCodeAt(i + 1 + name.length);
+  return c === 32 || c === 62 || c === 9 || c === 10 || c === 13;
+}
+function resolveSSRSelectValues(html) {
+  if (html.indexOf("<select") < 0) return html;
+  let out = "";
+  let idx = 0;
+  let sel = null;
+  let i = html.indexOf("<");
+  while (i >= 0) {
+    let e;
+    if (html.charCodeAt(i + 1) === 33) {
+      e = html.charCodeAt(i + 2) === 45 ? html.indexOf("-->", i) : html.indexOf(">", i);
+      if (e < 0) break;
+      if (html.charCodeAt(i + 2) === 45) e += 2;
+    } else {
+      e = tagEnd(html, i);
+      if (e < 0) break;
+      if (sel) {
+        if (html.startsWith("</select>", i)) {
+          out += html.slice(idx, sel.strip) + html.slice(sel.stripEnd, sel.body);
+          let seg = sel.body;
+          if (!sel.defaulted) {
+            for (let k = 0; k < sel.marks.length; k++) {
+              out += html.slice(seg, sel.marks[k]) + " selected";
+              seg = sel.marks[k];
+            }
+          }
+          out += html.slice(seg, i);
+          idx = i;
+          sel = null;
+        } else if (tagIs(html, i, "option")) {
+          const attrs = html.slice(i + 7, e);
+          if (/\sselected(?=[\s=]|$)/.test(attrs)) sel.defaulted = true;else {
+            const vm = SELECT_VALUE_ATTR.exec(attrs);
+            const value = vm ? decodeSSREntities(vm[1]) : decodeSSREntities(optionText(html, e + 1)).replace(/\s+/g, " ").trim();
+            if (sel.values.includes(value)) sel.marks.push(e);
+          }
+        }
+      } else if (tagIs(html, i, "select")) {
+        const m = SELECT_VALUE_ATTR.exec(html.slice(i, e + 1));
+        if (m) {
+          const bound = decodeSSREntities(m[1]);
+          sel = {
+            values: /\smultiple(?=[\s>=])/.test(html.slice(i, e + 1)) ? bound.split(",") : [bound],
+            strip: i + m.index,
+            stripEnd: i + m.index + m[0].length,
+            body: e + 1,
+            marks: [],
+            defaulted: false
+          };
+        }
+      }
+    }
+    i = html.indexOf("<", e + 1);
+  }
+  return out + html.slice(idx);
+}
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
@@ -2423,7 +2510,9 @@ function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
 function serializeFragmentAssets(key, boundaryModules, context, name = key) {
   const map = boundaryModules.get(key);
   if (!map || !Object.keys(map).length) return;
-  context.serialize(name + "_assets", map);
+  context.serialize(name + "_assets", {
+    ...map
+  });
 }
 function propagateBoundaryStyles(childKey, parentKey, tracking) {
   const childStyles = tracking.getBoundaryStyles(childKey);
@@ -3106,6 +3195,7 @@ exports.reload = reload;
 exports.render = notSup;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
+exports.resolveSSRSelectValues = resolveSSRSelectValues;
 exports.respond = respond;
 exports.runHydrationEvents = notSup;
 exports.serializeCookie = serializeCookie;

package/dist/server.js

@@ -968,7 +968,7 @@ function renderToString(code, options = {}) {
   sharedConfig.context.noHydrate = true;
   serializer.close();
   const head = renderShellHead(headRegistry, nonce, null);
-  return assembleDocument(html, tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce, head, onHead);
+  return assembleDocument(resolveSSRSelectValues(html), tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce, head, onHead);
 }
 function renderToStream(code, options = {}) {
   let {
@@ -1301,7 +1301,7 @@ function renderToStream(code, options = {}) {
               const styles = collectStreamStyles(key, tracking, headStyles);
               const headOps = error ? null : flushHeadFragment(headRegistry, key);
               if (headOps) emitHeadOps(key, headOps);
-              sink.fragment(key, value !== undefined ? value : " ", {
+              sink.fragment(key, resolveSSRSelectValues(value !== undefined ? value : " "), {
                 styles,
                 revealGroup,
                 error
@@ -1393,7 +1393,7 @@ function renderToStream(code, options = {}) {
     }
     serializeRootAssets();
     const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
-    sink.shell(html, {
+    sink.shell(resolveSSRSelectValues(html), {
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
       tasks,
@@ -2278,6 +2278,93 @@ function ssrHydrationKey() {
   const hk = getHydrationKey();
   return hk ? ` _hk=${hk}` : "";
 }
+function decodeSSREntities(s) {
+  return s.indexOf("&") < 0 ? s : s.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+}
+const SELECT_VALUE_ATTR = /\svalue="([^"]*)"/;
+function tagEnd(html, i) {
+  for (let j = i + 1; j < html.length; j++) {
+    const c = html.charCodeAt(j);
+    if (c === 34) {
+      j = html.indexOf('"', j + 1);
+      if (j < 0) return -1;
+    } else if (c === 62) return j;
+  }
+  return -1;
+}
+function optionText(html, from) {
+  let t = "";
+  let i = from;
+  for (;;) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) return t + html.slice(i);
+    t += html.slice(i, lt);
+    if (!html.startsWith("<!--", lt)) return t;
+    const ce = html.indexOf("-->", lt);
+    if (ce < 0) return t;
+    i = ce + 3;
+  }
+}
+function tagIs(html, i, name) {
+  if (!html.startsWith(name, i + 1)) return false;
+  const c = html.charCodeAt(i + 1 + name.length);
+  return c === 32 || c === 62 || c === 9 || c === 10 || c === 13;
+}
+function resolveSSRSelectValues(html) {
+  if (html.indexOf("<select") < 0) return html;
+  let out = "";
+  let idx = 0;
+  let sel = null;
+  let i = html.indexOf("<");
+  while (i >= 0) {
+    let e;
+    if (html.charCodeAt(i + 1) === 33) {
+      e = html.charCodeAt(i + 2) === 45 ? html.indexOf("-->", i) : html.indexOf(">", i);
+      if (e < 0) break;
+      if (html.charCodeAt(i + 2) === 45) e += 2;
+    } else {
+      e = tagEnd(html, i);
+      if (e < 0) break;
+      if (sel) {
+        if (html.startsWith("</select>", i)) {
+          out += html.slice(idx, sel.strip) + html.slice(sel.stripEnd, sel.body);
+          let seg = sel.body;
+          if (!sel.defaulted) {
+            for (let k = 0; k < sel.marks.length; k++) {
+              out += html.slice(seg, sel.marks[k]) + " selected";
+              seg = sel.marks[k];
+            }
+          }
+          out += html.slice(seg, i);
+          idx = i;
+          sel = null;
+        } else if (tagIs(html, i, "option")) {
+          const attrs = html.slice(i + 7, e);
+          if (/\sselected(?=[\s=]|$)/.test(attrs)) sel.defaulted = true;else {
+            const vm = SELECT_VALUE_ATTR.exec(attrs);
+            const value = vm ? decodeSSREntities(vm[1]) : decodeSSREntities(optionText(html, e + 1)).replace(/\s+/g, " ").trim();
+            if (sel.values.includes(value)) sel.marks.push(e);
+          }
+        }
+      } else if (tagIs(html, i, "select")) {
+        const m = SELECT_VALUE_ATTR.exec(html.slice(i, e + 1));
+        if (m) {
+          const bound = decodeSSREntities(m[1]);
+          sel = {
+            values: /\smultiple(?=[\s>=])/.test(html.slice(i, e + 1)) ? bound.split(",") : [bound],
+            strip: i + m.index,
+            stripEnd: i + m.index + m[0].length,
+            body: e + 1,
+            marks: [],
+            defaulted: false
+          };
+        }
+      }
+    }
+    i = html.indexOf("<", e + 1);
+  }
+  return out + html.slice(idx);
+}
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
@@ -2422,7 +2509,9 @@ function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
 function serializeFragmentAssets(key, boundaryModules, context, name = key) {
   const map = boundaryModules.get(key);
   if (!map || !Object.keys(map).length) return;
-  context.serialize(name + "_assets", map);
+  context.serialize(name + "_assets", {
+    ...map
+  });
 }
 function propagateBoundaryStyles(childKey, parentKey, tracking) {
   const childStyles = tracking.getBoundaryStyles(childKey);
@@ -2974,4 +3063,4 @@ function httpHeader(name, value, options) {
   }
 }
 
-export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, notSup as acquireAsset, notSup as addEvent, applyRef, notSup as assign, claimElement, claimElementTree, notSup as className, clearFlashCookie, clientOnly, commitEventResponse, commitResponseStub, composeMiddleware, createLiveHoles, createRequestEvent, createResponseStub, createSSRResponse, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, notSup as getDelegatedRoot, getExpectedRedirectStatus, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, notSup as hydrate, notSup as insert, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, parseCookieHeader, redirect, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, registerElementClaim, reload, notSup as render, renderToStream, renderToString, respond, notSup as runHydrationEvents, serializeCookie, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useHead };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, notSup as acquireAsset, notSup as addEvent, applyRef, notSup as assign, claimElement, claimElementTree, notSup as className, clearFlashCookie, clientOnly, commitEventResponse, commitResponseStub, composeMiddleware, createLiveHoles, createRequestEvent, createResponseStub, createSSRResponse, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, notSup as getDelegatedRoot, getExpectedRedirectStatus, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, notSup as hydrate, notSup as insert, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, parseCookieHeader, redirect, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, registerElementClaim, reload, notSup as render, renderToStream, renderToString, resolveSSRSelectValues, respond, notSup as runHydrationEvents, serializeCookie, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useHead };

package/dist/web.cjs

@@ -1361,6 +1361,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}`;
@@ -1381,7 +1382,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 +1829,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);

package/dist/web.js

@@ -1360,6 +1360,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}`;
@@ -1380,7 +1381,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 +1828,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);

package/frames/dist/client.cjs

@@ -995,7 +995,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) {

package/frames/dist/client.dev.cjs

@@ -1003,7 +1003,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) {

package/frames/dist/client.dev.js

@@ -1001,7 +1001,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) {

package/frames/dist/client.js

@@ -993,7 +993,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) {

package/frames/dist/server.cjs

@@ -1266,7 +1266,7 @@ function renderToStream(code, options = {}) {
               const styles = collectStreamStyles(key, tracking, headStyles);
               const headOps = error ? null : flushHeadFragment(headRegistry, key);
               if (headOps) emitHeadOps(key, headOps);
-              sink.fragment(key, value !== undefined ? value : " ", {
+              sink.fragment(key, resolveSSRSelectValues(value !== undefined ? value : " "), {
                 styles,
                 revealGroup,
                 error
@@ -1358,7 +1358,7 @@ function renderToStream(code, options = {}) {
     }
     serializeRootAssets();
     const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
-    sink.shell(html, {
+    sink.shell(resolveSSRSelectValues(html), {
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
       tasks,
@@ -2154,6 +2154,93 @@ function ssr(t) {
   };
   return result;
 }
+function decodeSSREntities(s) {
+  return s.indexOf("&") < 0 ? s : s.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+}
+const SELECT_VALUE_ATTR = /\svalue="([^"]*)"/;
+function tagEnd(html, i) {
+  for (let j = i + 1; j < html.length; j++) {
+    const c = html.charCodeAt(j);
+    if (c === 34) {
+      j = html.indexOf('"', j + 1);
+      if (j < 0) return -1;
+    } else if (c === 62) return j;
+  }
+  return -1;
+}
+function optionText(html, from) {
+  let t = "";
+  let i = from;
+  for (;;) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) return t + html.slice(i);
+    t += html.slice(i, lt);
+    if (!html.startsWith("<!--", lt)) return t;
+    const ce = html.indexOf("-->", lt);
+    if (ce < 0) return t;
+    i = ce + 3;
+  }
+}
+function tagIs(html, i, name) {
+  if (!html.startsWith(name, i + 1)) return false;
+  const c = html.charCodeAt(i + 1 + name.length);
+  return c === 32 || c === 62 || c === 9 || c === 10 || c === 13;
+}
+function resolveSSRSelectValues(html) {
+  if (html.indexOf("<select") < 0) return html;
+  let out = "";
+  let idx = 0;
+  let sel = null;
+  let i = html.indexOf("<");
+  while (i >= 0) {
+    let e;
+    if (html.charCodeAt(i + 1) === 33) {
+      e = html.charCodeAt(i + 2) === 45 ? html.indexOf("-->", i) : html.indexOf(">", i);
+      if (e < 0) break;
+      if (html.charCodeAt(i + 2) === 45) e += 2;
+    } else {
+      e = tagEnd(html, i);
+      if (e < 0) break;
+      if (sel) {
+        if (html.startsWith("</select>", i)) {
+          out += html.slice(idx, sel.strip) + html.slice(sel.stripEnd, sel.body);
+          let seg = sel.body;
+          if (!sel.defaulted) {
+            for (let k = 0; k < sel.marks.length; k++) {
+              out += html.slice(seg, sel.marks[k]) + " selected";
+              seg = sel.marks[k];
+            }
+          }
+          out += html.slice(seg, i);
+          idx = i;
+          sel = null;
+        } else if (tagIs(html, i, "option")) {
+          const attrs = html.slice(i + 7, e);
+          if (/\sselected(?=[\s=]|$)/.test(attrs)) sel.defaulted = true;else {
+            const vm = SELECT_VALUE_ATTR.exec(attrs);
+            const value = vm ? decodeSSREntities(vm[1]) : decodeSSREntities(optionText(html, e + 1)).replace(/\s+/g, " ").trim();
+            if (sel.values.includes(value)) sel.marks.push(e);
+          }
+        }
+      } else if (tagIs(html, i, "select")) {
+        const m = SELECT_VALUE_ATTR.exec(html.slice(i, e + 1));
+        if (m) {
+          const bound = decodeSSREntities(m[1]);
+          sel = {
+            values: /\smultiple(?=[\s>=])/.test(html.slice(i, e + 1)) ? bound.split(",") : [bound],
+            strip: i + m.index,
+            stripEnd: i + m.index + m[0].length,
+            body: e + 1,
+            marks: [],
+            defaulted: false
+          };
+        }
+      }
+    }
+    i = html.indexOf("<", e + 1);
+  }
+  return out + html.slice(idx);
+}
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
@@ -2285,7 +2372,9 @@ function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
 function serializeFragmentAssets(key, boundaryModules, context, name = key) {
   const map = boundaryModules.get(key);
   if (!map || !Object.keys(map).length) return;
-  context.serialize(name + "_assets", map);
+  context.serialize(name + "_assets", {
+    ...map
+  });
 }
 function propagateBoundaryStyles(childKey, parentKey, tracking) {
   const childStyles = tracking.getBoundaryStyles(childKey);