@solidjs/web 2.0.0-beta.6 → 2.0.0-beta.7

package/dist/dev.cjs

@@ -6,9 +6,9 @@ var signals = require('@solidjs/signals');
 const DOMWithState = {
   INPUT: {
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
   SELECT: {
     value: 1
@@ -16,26 +16,21 @@ const DOMWithState = {
   OPTION: {
     value: 1,
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 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([
@@ -54,10 +49,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
 
@@ -123,16 +118,17 @@ function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
+  const renderRoot = getChildRoot(element);
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? solidJs.flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -272,10 +268,11 @@ function ref(fn, element) {
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -291,10 +288,10 @@ function insert(parent, accessor, marker, initial) {
   accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -313,8 +310,24 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
     prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
   }
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -323,6 +336,7 @@ function hydrate$1(code, element, options = {}) {
   solidJs.sharedConfig.load = id => globalThis._$HY.r[id];
   solidJs.sharedConfig.has = id => id in globalThis._$HY.r;
   solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.loadModuleAssets = loadModuleAssets;
   solidJs.sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -351,9 +365,27 @@ function hydrate$1(code, element, options = {}) {
       }
     };
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          solidJs.sharedConfig.hydrating = false;
+        }
+      }, () => {
+        solidJs.sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -402,7 +434,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
     const isMissing = !child || child.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
@@ -412,20 +444,21 @@ function getFirstChild(node, expectedTag) {
 function getNextSibling(node, expectedTag) {
   const sibling = node.nextSibling;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     const isMissing = !sibling || sibling.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
   }
   return sibling;
 }
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = parent.firstChild;
+  let child = getChildRoot(parent).firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
     const tags = children.map(c => `<${c.localName}>`).join("");
     return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
@@ -470,6 +503,9 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
@@ -491,7 +527,7 @@ function flattenClassList(list, result) {
 function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
     return value;
@@ -574,21 +610,22 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -596,7 +633,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -621,9 +658,11 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;
@@ -680,9 +719,8 @@ function render(...args) {
 }
 const isServer = false;
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
   });
 }
@@ -738,9 +776,8 @@ function createDynamic(component, props) {
         });
         return solidJs.untrack(() => component(props));
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+        spread(el, props);
         return el;
     }
   });
@@ -774,6 +811,10 @@ Object.defineProperty(exports, "NoHydration", {
   enumerable: true,
   get: function () { return solidJs.NoHydration; }
 });
+Object.defineProperty(exports, "Repeat", {
+  enumerable: true,
+  get: function () { return solidJs.Repeat; }
+});
 Object.defineProperty(exports, "Reveal", {
   enumerable: true,
   get: function () { return solidJs.Reveal; }

package/dist/dev.js

@@ -1,13 +1,13 @@
 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, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
 const DOMWithState = {
   INPUT: {
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
   SELECT: {
     value: 1
@@ -15,26 +15,21 @@ const DOMWithState = {
   OPTION: {
     value: 1,
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 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([
@@ -53,10 +48,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
@@ -122,16 +117,17 @@ function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
+  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -271,10 +267,11 @@ function ref(fn, element) {
   runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -290,10 +287,10 @@ function insert(parent, accessor, marker, initial) {
   accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -312,8 +309,24 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
     prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
   }
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -322,6 +335,7 @@ function hydrate$1(code, element, options = {}) {
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -350,9 +364,27 @@ function hydrate$1(code, element, options = {}) {
       }
     };
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, () => {
+        sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -401,7 +433,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
     const isMissing = !child || child.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
@@ -411,20 +443,21 @@ function getFirstChild(node, expectedTag) {
 function getNextSibling(node, expectedTag) {
   const sibling = node.nextSibling;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     const isMissing = !sibling || sibling.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
   }
   return sibling;
 }
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = parent.firstChild;
+  let child = getChildRoot(parent).firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
     const tags = children.map(c => `<${c.localName}>`).join("");
     return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
@@ -469,6 +502,9 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return sharedConfig.hydrating && (!node || node.isConnected);
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
@@ -490,7 +526,7 @@ function flattenClassList(list, result) {
 function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
     return value;
@@ -573,21 +609,22 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -595,7 +632,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -620,9 +657,11 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;
@@ -679,9 +718,8 @@ function render(...args) {
 }
 const isServer = false;
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
   });
 }
@@ -737,9 +775,8 @@ function createDynamic(component, props) {
         });
         return untrack(() => component(props));
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+        spread(el, props);
         return el;
     }
   });