@solidjs/web 2.0.0-beta.0 → 2.0.0-beta.10

package/README.md

@@ -1,7 +1,30 @@
-# Solid Web
+# @solidjs/web
 
-This submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.
+Solid 2.0's web platform runtime — DOM rendering, hydration, server-side rendering, and the web-only control-flow components (`Portal`, `Dynamic`).
 
-In addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `<Portal>` and `<Dynamic>`.
+> **Solid 2.0 (experimental beta).** In 1.x this package was the `solid-js/web` subpath; in 2.0 it's a separate `@solidjs/web` package.
+>
+> See [`solid-js`'s CHEATSHEET](https://github.com/solidjs/solid/blob/next/packages/solid/CHEATSHEET.md) and [MIGRATION guide](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md) for the 2.0 surface.
 
-Refer to the [website](https://docs.solidjs.com) for documentation.
+## Entry points
+
+```ts
+// Browser / hydration
+import { render, hydrate, Portal, Dynamic, dynamic } from "@solidjs/web";
+
+// Server (SSR)
+import {
+  renderToString,
+  renderToStringAsync,
+  renderToStream,
+  isServer
+} from "@solidjs/web";
+```
+
+The control-flow components from `solid-js` (`For`, `Show`, `Switch`/`Match`, `Loading`, `Errored`, `Repeat`, `Reveal`) are also re-exported from `@solidjs/web` for convenience.
+
+## More
+
+- [Documentation](https://docs.solidjs.com)
+- [Cheatsheet (2.0 public API)](https://github.com/solidjs/solid/blob/next/packages/solid/CHEATSHEET.md)
+- [Migration guide (1.x → 2.0)](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md)

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,17 +37,26 @@ 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, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
@@ -82,32 +117,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 +179,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") {
@@ -188,7 +231,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 +242,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 +256,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,41 +276,79 @@ 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) && Array.isArray(initial)) {
-    let j = 0;
-    for (let i = 0; i < initial.length; i++) {
-      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+  if (isHydrating(parent)) {
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
+    if (Array.isArray(initial)) {
+      let j = 0;
+      for (let i = 0; i < initial.length; i++) {
+        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+      }
+      initial.length = j;
     }
-    initial.length = j;
   }
   if (typeof accessor !== "function") {
     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(() => {
+    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;
+    }, 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 = {};
@@ -282,6 +357,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) {
@@ -303,14 +379,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;
   }
@@ -359,7 +455,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));
@@ -369,20 +465,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}>`;
@@ -427,6 +524,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);
@@ -445,18 +545,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) {
@@ -467,11 +569,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;
@@ -529,21 +631,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) {
@@ -551,7 +654,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);
@@ -576,9 +679,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;
@@ -602,12 +707,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return solidJs.sharedConfig.getNextContextId();
 }
-function NoHydration(props) {
-  return solidJs.sharedConfig.hydrating ? undefined : props.children;
-}
-function Hydration(props) {
-  return props.children;
-}
 const voidFn = () => undefined;
 const RequestContext = Symbol();
 
@@ -633,13 +732,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();
@@ -665,6 +774,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) {
@@ -682,28 +821,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,
@@ -713,6 +830,10 @@ Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
+Object.defineProperty(exports, "Hydration", {
+  enumerable: true,
+  get: function () { return solidJs.Hydration; }
+});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function () { return solidJs.Loading; }
@@ -721,6 +842,18 @@ Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
 });
+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; }
@@ -737,10 +870,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; }
@@ -748,23 +877,24 @@ Object.defineProperty(exports, "untrack", {
 exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
+exports.DOMWithState = DOMWithState;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.Hydration = Hydration;
 exports.HydrationScript = voidFn;
-exports.NoHydration = NoHydration;
+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;
@@ -782,6 +912,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;