@solidjs/web 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/dev.cjs

@@ -205,12 +205,7 @@ function setStyleProperty(node, name, value) {
 }
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) {
-    effect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
-  }
+  if (!skipChildren) insert(node, () => props.children);
   effect(() => {
     const r = props.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
@@ -260,7 +255,7 @@ function insert(parent, accessor, marker, initial) {
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
   accessor = memo(accessor, true);
-  if (multi && initial.length === 0 && !isHydrating(parent)) {
+  if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     parent.insertBefore(placeholder, marker);
     initial = [placeholder];
@@ -315,7 +310,11 @@ function hydrate$1(code, element, options = {}) {
   {
     solidJs.sharedConfig.verifyHydration = () => {
       if (solidJs.sharedConfig.registry && solidJs.sharedConfig.registry.size) {
-        const orphaned = [...solidJs.sharedConfig.registry.values()];
+        const orphaned = [];
+        for (const [key, node] of solidJs.sharedConfig.registry.entries()) {
+          if (node.isConnected) orphaned.push(node);else solidJs.sharedConfig.registry.delete(key);
+        }
+        if (!orphaned.length) return;
         console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => `  ${node.outerHTML.slice(0, 100)}`).join("\n"));
       }
     };
@@ -565,6 +564,7 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value);
     } else {
+      if (current && current.nodeType) clearHydrationRegistry(current);
       current && cleanChildren(parent);
       appendNodes(parent, value);
     }
@@ -590,6 +590,18 @@ function normalize(value, current, multi, doNotUnwrap) {
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
+function clearHydrationRegistry(node) {
+  if (!solidJs.sharedConfig.registry || !node || node.nodeType !== 1) return;
+  const key = node.getAttribute("_hk");
+  if (key) solidJs.sharedConfig.registry.delete(key);
+  const descendants = node.querySelectorAll?.(`*[_hk]`);
+  if (descendants) {
+    for (let i = 0; i < descendants.length; i++) {
+      const descendantKey = descendants[i].getAttribute("_hk");
+      if (descendantKey) solidJs.sharedConfig.registry.delete(descendantKey);
+    }
+  }
+}
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
@@ -598,7 +610,10 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
+          clearHydrationRegistry(el);
+          el.remove();
+        }
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -640,28 +655,9 @@ function resolveSSRNode(node) {}
 function escape(html) {}
 
 function render(...args) {
-  let unhandledAsync = false;
-  {
-    solidJs.setOnUnhandledAsync(() => {
-      unhandledAsync = true;
-    });
-  }
+  solidJs.enforceLoadingBoundary(true);
   const result = render$1(...args);
-  {
-    solidJs.setOnUnhandledAsync(null);
-    if (unhandledAsync) {
-      const message = "Async content was used in JSX without a <Loading> boundary. " + "Wrap async content in <Loading> to show a fallback while loading.";
-      result();
-      const container = args[1];
-      container.textContent = "";
-      const msg = document.createElement("pre");
-      msg.style.cssText = "color:#e53e3e;background:#fff5f5;border:2px solid #e53e3e;" + "border-radius:4px;padding:16px;margin:16px;font-family:monospace;" + "white-space:pre-wrap;word-break:break-word;";
-      msg.textContent = message;
-      container.appendChild(msg);
-      console.error(message);
-      return () => {};
-    }
-  }
+  solidJs.enforceLoadingBoundary(false);
   return result;
 }
 const isServer = false;

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, setOnUnhandledAsync } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
@@ -204,12 +204,7 @@ function setStyleProperty(node, name, value) {
 }
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) {
-    effect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
-  }
+  if (!skipChildren) insert(node, () => props.children);
   effect(() => {
     const r = props.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
@@ -259,7 +254,7 @@ function insert(parent, accessor, marker, initial) {
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
   accessor = memo(accessor, true);
-  if (multi && initial.length === 0 && !isHydrating(parent)) {
+  if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     parent.insertBefore(placeholder, marker);
     initial = [placeholder];
@@ -314,7 +309,11 @@ function hydrate$1(code, element, options = {}) {
   {
     sharedConfig.verifyHydration = () => {
       if (sharedConfig.registry && sharedConfig.registry.size) {
-        const orphaned = [...sharedConfig.registry.values()];
+        const orphaned = [];
+        for (const [key, node] of sharedConfig.registry.entries()) {
+          if (node.isConnected) orphaned.push(node);else sharedConfig.registry.delete(key);
+        }
+        if (!orphaned.length) return;
         console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => `  ${node.outerHTML.slice(0, 100)}`).join("\n"));
       }
     };
@@ -564,6 +563,7 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value);
     } else {
+      if (current && current.nodeType) clearHydrationRegistry(current);
       current && cleanChildren(parent);
       appendNodes(parent, value);
     }
@@ -589,6 +589,18 @@ function normalize(value, current, multi, doNotUnwrap) {
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
+function clearHydrationRegistry(node) {
+  if (!sharedConfig.registry || !node || node.nodeType !== 1) return;
+  const key = node.getAttribute("_hk");
+  if (key) sharedConfig.registry.delete(key);
+  const descendants = node.querySelectorAll?.(`*[_hk]`);
+  if (descendants) {
+    for (let i = 0; i < descendants.length; i++) {
+      const descendantKey = descendants[i].getAttribute("_hk");
+      if (descendantKey) sharedConfig.registry.delete(descendantKey);
+    }
+  }
+}
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
@@ -597,7 +609,10 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
+          clearHydrationRegistry(el);
+          el.remove();
+        }
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -639,28 +654,9 @@ function resolveSSRNode(node) {}
 function escape(html) {}
 
 function render(...args) {
-  let unhandledAsync = false;
-  {
-    setOnUnhandledAsync(() => {
-      unhandledAsync = true;
-    });
-  }
+  enforceLoadingBoundary(true);
   const result = render$1(...args);
-  {
-    setOnUnhandledAsync(null);
-    if (unhandledAsync) {
-      const message = "Async content was used in JSX without a <Loading> boundary. " + "Wrap async content in <Loading> to show a fallback while loading.";
-      result();
-      const container = args[1];
-      container.textContent = "";
-      const msg = document.createElement("pre");
-      msg.style.cssText = "color:#e53e3e;background:#fff5f5;border:2px solid #e53e3e;" + "border-radius:4px;padding:16px;margin:16px;font-family:monospace;" + "white-space:pre-wrap;word-break:break-word;";
-      msg.textContent = message;
-      container.appendChild(msg);
-      console.error(message);
-      return () => {};
-    }
-  }
+  enforceLoadingBoundary(false);
   return result;
 }
 const isServer = false;

package/dist/web.cjs

@@ -200,12 +200,7 @@ function setStyleProperty(node, name, value) {
 }
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) {
-    effect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
-  }
+  if (!skipChildren) insert(node, () => props.children);
   effect(() => {
     const r = props.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
@@ -255,7 +250,7 @@ function insert(parent, accessor, marker, initial) {
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
   accessor = memo(accessor, true);
-  if (multi && initial.length === 0 && !isHydrating(parent)) {
+  if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     parent.insertBefore(placeholder, marker);
     initial = [placeholder];
@@ -511,6 +506,7 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value);
     } else {
+      if (current && current.nodeType) clearHydrationRegistry(current);
       current && cleanChildren(parent);
       appendNodes(parent, value);
     }
@@ -536,6 +532,18 @@ function normalize(value, current, multi, doNotUnwrap) {
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
+function clearHydrationRegistry(node) {
+  if (!solidJs.sharedConfig.registry || !node || node.nodeType !== 1) return;
+  const key = node.getAttribute("_hk");
+  if (key) solidJs.sharedConfig.registry.delete(key);
+  const descendants = node.querySelectorAll?.(`*[_hk]`);
+  if (descendants) {
+    for (let i = 0; i < descendants.length; i++) {
+      const descendantKey = descendants[i].getAttribute("_hk");
+      if (descendantKey) solidJs.sharedConfig.registry.delete(descendantKey);
+    }
+  }
+}
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
@@ -544,7 +552,10 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
+          clearHydrationRegistry(el);
+          el.remove();
+        }
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);

package/dist/web.js

@@ -199,12 +199,7 @@ function setStyleProperty(node, name, value) {
 }
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) {
-    effect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
-  }
+  if (!skipChildren) insert(node, () => props.children);
   effect(() => {
     const r = props.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
@@ -254,7 +249,7 @@ function insert(parent, accessor, marker, initial) {
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
   accessor = memo(accessor, true);
-  if (multi && initial.length === 0 && !isHydrating(parent)) {
+  if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     parent.insertBefore(placeholder, marker);
     initial = [placeholder];
@@ -510,6 +505,7 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value);
     } else {
+      if (current && current.nodeType) clearHydrationRegistry(current);
       current && cleanChildren(parent);
       appendNodes(parent, value);
     }
@@ -535,6 +531,18 @@ function normalize(value, current, multi, doNotUnwrap) {
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
+function clearHydrationRegistry(node) {
+  if (!sharedConfig.registry || !node || node.nodeType !== 1) return;
+  const key = node.getAttribute("_hk");
+  if (key) sharedConfig.registry.delete(key);
+  const descendants = node.querySelectorAll?.(`*[_hk]`);
+  if (descendants) {
+    for (let i = 0; i < descendants.length; i++) {
+      const descendantKey = descendants[i].getAttribute("_hk");
+      if (descendantKey) sharedConfig.registry.delete(descendantKey);
+    }
+  }
+}
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
@@ -543,7 +551,10 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
+          clearHydrationRegistry(el);
+          el.remove();
+        }
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,11 +75,11 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.2",
-    "@solidjs/signals": "^0.12.0"
+    "solid-js": "^2.0.0-beta.4",
+    "@solidjs/signals": "^0.13.6"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.2"
+    "solid-js": "2.0.0-beta.4"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",