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

package/dist/dev.cjs

@@ -3,8 +3,28 @@
 var solidJs = require('solid-js');
 var signals = require('@solidjs/signals');
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    checked: 1
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1
+  },
+  TEXTAREA: {
+    value: 1
+  },
+  VIDEO: {
+    muted: 1
+  },
+  AUDIO: {
+    muted: 1
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -12,6 +32,7 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -101,16 +122,16 @@ function render$1(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
-  fn._html = html;
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
+  fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
   return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
@@ -139,16 +160,16 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -203,7 +224,7 @@ function style(node, value, prev) {
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
   if (!skipChildren) insert(node, () => props.children);
   effect(() => {
@@ -217,7 +238,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -262,12 +283,13 @@ function insert(parent, accessor, marker, initial) {
   }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName, prevProps);
     }
   }
   for (const prop in props) {
@@ -275,8 +297,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName, props);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -310,10 +331,8 @@ function hydrate$1(code, element, options = {}) {
   {
     solidJs.sharedConfig.verifyHydration = () => {
       if (solidJs.sharedConfig.registry && solidJs.sharedConfig.registry.size) {
-        const orphaned = [];
-        for (const [key, node] of solidJs.sharedConfig.registry.entries()) {
-          if (node.isConnected) orphaned.push(node);else solidJs.sharedConfig.registry.delete(key);
-        }
+        const orphaned = [...solidJs.sharedConfig.registry.values()].filter(node => node.isConnected);
+        solidJs.sharedConfig.registry.clear();
         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"));
       }
@@ -456,14 +475,16 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (hasNamespace && prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
@@ -478,11 +499,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop] && !("prop:" + prop in props)) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -564,7 +585,6 @@ 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,18 +610,6 @@ 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) {
@@ -610,10 +618,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
-          clearHydrationRegistry(el);
-          el.remove();
-        }
+        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -783,11 +788,12 @@ Object.defineProperty(exports, "untrack", {
 exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
+exports.DOMWithState = DOMWithState;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = voidFn;
+exports.MathMLElements = MathMLElements;
 exports.Portal = Portal;
-exports.Properties = Properties;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;

package/dist/dev.js

@@ -2,8 +2,28 @@ import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack,
 export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    checked: 1
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1
+  },
+  TEXTAREA: {
+    value: 1
+  },
+  VIDEO: {
+    muted: 1
+  },
+  AUDIO: {
+    muted: 1
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -11,6 +31,7 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -100,16 +121,16 @@ function render$1(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
-  fn._html = html;
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
+  fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
   return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
@@ -138,16 +159,16 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -202,7 +223,7 @@ function style(node, value, prev) {
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
   if (!skipChildren) insert(node, () => props.children);
   effect(() => {
@@ -216,7 +237,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -261,12 +282,13 @@ function insert(parent, accessor, marker, initial) {
   }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName, prevProps);
     }
   }
   for (const prop in props) {
@@ -274,8 +296,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName, props);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -309,10 +330,8 @@ function hydrate$1(code, element, options = {}) {
   {
     sharedConfig.verifyHydration = () => {
       if (sharedConfig.registry && sharedConfig.registry.size) {
-        const orphaned = [];
-        for (const [key, node] of sharedConfig.registry.entries()) {
-          if (node.isConnected) orphaned.push(node);else sharedConfig.registry.delete(key);
-        }
+        const orphaned = [...sharedConfig.registry.values()].filter(node => node.isConnected);
+        sharedConfig.registry.clear();
         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"));
       }
@@ -455,14 +474,16 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (hasNamespace && prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
@@ -477,11 +498,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop] && !("prop:" + prop in props)) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -563,7 +584,6 @@ 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,18 +609,6 @@ 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) {
@@ -609,10 +617,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
-          clearHydrationRegistry(el);
-          el.remove();
-        }
+        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -731,4 +736,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Portal, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/dist/server.cjs

@@ -5,8 +5,6 @@ var seroval = require('seroval');
 var web = require('seroval-plugins/web');
 var signals = require('@solidjs/signals');
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -915,7 +913,6 @@ exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = HydrationScript;
 exports.Portal = Portal;
-exports.Properties = Properties;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;

package/dist/server.js

@@ -4,8 +4,6 @@ import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 import { createMemo } from '@solidjs/signals';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -856,4 +854,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };

package/dist/web.cjs

@@ -3,8 +3,28 @@
 var solidJs = require('solid-js');
 var signals = require('@solidjs/signals');
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    checked: 1
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1
+  },
+  TEXTAREA: {
+    value: 1
+  },
+  VIDEO: {
+    muted: 1
+  },
+  AUDIO: {
+    muted: 1
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -12,6 +32,7 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -98,14 +119,14 @@ function render$1(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
   return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
@@ -134,16 +155,16 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -198,7 +219,7 @@ function style(node, value, prev) {
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
   if (!skipChildren) insert(node, () => props.children);
   effect(() => {
@@ -212,7 +233,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -257,12 +278,13 @@ function insert(parent, accessor, marker, initial) {
   }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName, prevProps);
     }
   }
   for (const prop in props) {
@@ -270,8 +292,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName, props);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -398,14 +419,16 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (hasNamespace && prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
@@ -420,11 +443,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop] && !("prop:" + prop in props)) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -506,7 +529,6 @@ 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);
     }
@@ -532,18 +554,6 @@ 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) {
@@ -552,10 +562,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
-          clearHydrationRegistry(el);
-          el.remove();
-        }
+        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -720,11 +727,12 @@ Object.defineProperty(exports, "untrack", {
 exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
+exports.DOMWithState = DOMWithState;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = voidFn;
+exports.MathMLElements = MathMLElements;
 exports.Portal = Portal;
-exports.Properties = Properties;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;

package/dist/web.js

@@ -2,8 +2,28 @@ import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack,
 export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    checked: 1
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1
+  },
+  TEXTAREA: {
+    value: 1
+  },
+  VIDEO: {
+    muted: 1
+  },
+  AUDIO: {
+    muted: 1
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -11,6 +31,7 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -97,14 +118,14 @@ function render$1(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
   return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
@@ -133,16 +154,16 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -197,7 +218,7 @@ function style(node, value, prev) {
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
   if (!skipChildren) insert(node, () => props.children);
   effect(() => {
@@ -211,7 +232,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -256,12 +277,13 @@ function insert(parent, accessor, marker, initial) {
   }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName, prevProps);
     }
   }
   for (const prop in props) {
@@ -269,8 +291,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName, props);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -397,14 +418,16 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (hasNamespace && prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
@@ -419,11 +442,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop] && !("prop:" + prop in props)) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -505,7 +528,6 @@ 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);
     }
@@ -531,18 +553,6 @@ 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) {
@@ -551,10 +561,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
-          clearHydrationRegistry(el);
-          el.remove();
-        }
+        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -668,4 +675,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Portal, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

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.4",
+  "version": "2.0.0-beta.5",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,11 +75,12 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.4",
-    "@solidjs/signals": "^0.13.6"
+    "@solidjs/signals": "^0.13.9",
+    "solid-js": "^2.0.0-beta.5"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.4"
+    "@solidjs/signals": "^0.13.9",
+    "solid-js": "2.0.0-beta.5"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/client.d.ts

@@ -1,9 +1,10 @@
 import { JSX } from "./jsx.js";
-export const Properties: Set<string>;
+export const DOMWithState: Record<string, Record<string, number>>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
 export const DOMElements: Set<string>;
 export const SVGElements: Set<string>;
+export const MathMLElements: Set<string>;
 export const SVGNamespace: Record<string, string>;
 
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
@@ -13,7 +14,7 @@ export function render(
   init?: JSX.Element,
   options?: { owner?: unknown }
 ): () => void;
-export function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Element;
+export function template(html: string, flag?: number): () => Element;
 export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function untrack<T>(fn: () => T): T;
@@ -29,13 +30,11 @@ export function clearDelegatedEvents(d?: Document): void;
 export function spread<T>(
   node: Element,
   accessor: T,
-  isSVG?: Boolean,
   skipChildren?: Boolean
 ): void;
 export function assign(
   node: Element,
   props: any,
-  isSVG?: Boolean,
   skipChildren?: Boolean,
   prevProps?: any,
   skipRef?: Boolean
@@ -45,7 +44,7 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
 type ClassList =
   | Record<string, boolean>
   | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(node: Element, value: string | ClassList, isSvg?: boolean, prev?: string | ClassList): void;
+export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
 export function addEventListener(

package/types/server.d.ts

@@ -1,5 +1,4 @@
 import { JSX } from "./jsx.js";
-export const Properties: Set<string>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
 export const DOMElements: Set<string>;
@@ -107,7 +106,6 @@ export function insert<T>(
 export function spread<T>(
   node: Element,
   accessor: T,
-  isSVG?: Boolean,
   skipChildren?: Boolean
 ): void;
 
@@ -131,13 +129,13 @@ export function addEventListener(
 /** @deprecated not supported on the server side */
 export function render(code: () => JSX.Element, element: MountableElement): () => void;
 /** @deprecated not supported on the server side */
-export function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Element;
+export function template(html: string, flag?: number): () => Element;
 /** @deprecated not supported on the server side */
 export function setProperty(node: Element, name: string, value: any): void;
 /** @deprecated not supported on the server side */
 export function className(node: Element, value: string): void;
 /** @deprecated not supported on the server side */
-export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+export function assign(node: Element, props: any, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
 export function hydrate(