@solidjs/web 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/dev.cjs

@@ -2,8 +2,34 @@
 
 var solidJs = require('solid-js');
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    defaultValue: 2,
+    checked: 1,
+    defaultChecked: 2
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1,
+    defaultSelected: 2
+  },
+  TEXTAREA: {
+    value: 1,
+    defaultValue: 2
+  },
+  VIDEO: {
+    muted: 1,
+    defaultMuted: 2
+  },
+  AUDIO: {
+    muted: 1,
+    defaultMuted: 2
+  }
+};
 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,18 +37,32 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+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 Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
-  transparent: true
-});
-const memo = fn => solidJs.createMemo(() => fn());
+const transparentOptions = {
+  transparent: true,
+  sync: true
+};
+const syncOptions = {
+  sync: true
+};
+const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  sync: true,
+  ...options
+} : transparentOptions);
+const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -51,10 +91,12 @@ function reconcileArrays(parentNode, a, b) {
         aStart++;
       }
     } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
+      const anchor = a[aStart];
+      do {
+        parentNode.insertBefore(a[--aEnd], anchor);
+        bStart++;
+        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
       if (!map) {
         map = new Map();
@@ -82,32 +124,40 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init, options = {}) {
+const INNER_OWNED = {};
+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);
+    if (element === document) {
+      const tree = code();
+      effect(() => solidJs.flatten(tree), () => {});
+    } else {
+      const tree = code();
+      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+    }
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.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) {
@@ -136,16 +186,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.indexOf(":") > -1 ? name.split(":").pop() : 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") {
@@ -159,13 +209,13 @@ function className(node, value, isSVG, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
 function addEventListener(node, name, handler, delegate) {
@@ -188,7 +238,6 @@ function style(node, value, prev) {
   if (typeof value === "string") return nodeStyle.cssText = value;
   typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
   prev || (prev = {});
-  value || (value = {});
   let v, s;
   for (s in value) {
     v = value[s];
@@ -200,14 +249,9 @@ 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) {
-    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);
@@ -219,7 +263,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) {
@@ -239,11 +283,12 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
+  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++) {
@@ -256,27 +301,64 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
-}
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  if (multi && initial.length === 0) {
+    const placeholder = document.createTextNode("");
+    childRoot.insertBefore(placeholder, marker);
+    initial = [placeholder];
+  }
+  let current = initial;
+  effect(prev => {
+    const value = normalize(accessor(), current, multi, true);
+    if (typeof value !== "function") return value;
+    effect(() => normalize(value, current, multi), inner => {
+      insertExpression(parent, inner, current, marker);
+      current = inner;
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
+    return INNER_OWNED;
+  }, value => {
+    if (value === INNER_OWNED) return;
+    insertExpression(parent, value, current, marker);
+    current = value;
+  }, options);
+}
+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);
     }
   }
   for (const prop in props) {
     if (prop === "children") {
-      if (!skipChildren) insertExpression(node, props.children);
+      if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
       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);
+  }
+}
+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(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 = {};
@@ -285,6 +367,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) {
@@ -306,14 +389,34 @@ 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 = [...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"));
       }
     };
   }
+  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(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -362,7 +465,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));
@@ -372,20 +475,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}>`;
@@ -430,14 +534,24 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
-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);
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
 }
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
   }
   return classList;
@@ -448,18 +562,20 @@ 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) {
   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] !== 1) 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);
-  } else if (prop.slice(0, 2) === "on") {
+  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -470,11 +586,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]) {
+    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 && Namespaces[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -532,21 +648,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) {
@@ -554,7 +671,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);
@@ -579,9 +696,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;
@@ -630,13 +749,23 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
+const mergeProps = solidJs.merge;
 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, {
-    is
-  });
+function render(code, element, init, options = {}) {
+  solidJs.enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
+        schedule: true
+      }
+    });
+    solidJs.flush();
+    return dispose;
+  } finally {
+    solidJs.enforceLoadingBoundary(false);
+  }
 }
 const hydrate = (...args) => {
   solidJs.enableHydration();
@@ -662,6 +791,36 @@ function Portal(props) {
   });
   return treeMarker;
 }
+function dynamic(source) {
+  const cached = solidJs.createMemo(source, {
+    lazy: true
+  });
+  return props => {
+    return solidJs.createMemo(() => {
+      const component = cached();
+      switch (typeof component) {
+        case "function":
+          Object.assign(component, {
+            [solidJs.$DEVCOMP]: true
+          });
+          return solidJs.untrack(() => component(props));
+        case "string":
+          const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+          spread(el, props);
+          return el;
+      }
+    });
+  };
+}
+function Dynamic(props) {
+  const Comp = dynamic(() => props.component);
+  return solidJs.createComponent(Comp, solidJs.omit(props, "component"));
+}
+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
+  });
+}
 function createElementProxy(el, marker) {
   return new Proxy(el, {
     get(target, prop) {
@@ -679,28 +838,6 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function createDynamic(component, props) {
-  const cached = solidJs.createMemo(component);
-  return solidJs.createMemo(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        Object.assign(component, {
-          [solidJs.$DEVCOMP]: true
-        });
-        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);
-        return el;
-    }
-  });
-}
-function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  return createDynamic(() => props.component, others);
-}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,
@@ -726,6 +863,14 @@ 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; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -742,10 +887,6 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
-Object.defineProperty(exports, "mergeProps", {
-  enumerable: true,
-  get: function () { return solidJs.merge; }
-});
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
@@ -753,21 +894,24 @@ 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.Namespaces = Namespaces;
 exports.Portal = Portal;
-exports.Properties = Properties;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
-exports.SVGNamespace = SVGNamespace;
+exports.VoidElements = VoidElements;
 exports.addEventListener = addEventListener;
 exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
+exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
 exports.effect = effect;
 exports.escape = escape;
@@ -785,6 +929,7 @@ exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
 exports.memo = memo;
+exports.mergeProps = mergeProps;
 exports.ref = ref;
 exports.render = render;
 exports.renderToStream = renderToStream;