@solidjs/web 2.0.0-experimental.1 → 2.0.0-experimental.3

package/dist/dev.js

@@ -1,10 +1,72 @@
-import { createRoot, untrack, createRenderEffect, sharedConfig, flatten, enableHydration, createMemo, omit, $DEVCOMP } from 'solid-js';
-export { ErrorBoundary, For, Match, Show, Suspense, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, merge as mergeProps, untrack } from 'solid-js';
+import {
+  createRoot,
+  untrack,
+  createRenderEffect,
+  sharedConfig,
+  flatten,
+  enableHydration,
+  createMemo,
+  $DEVCOMP,
+  omit
+} from "solid-js";
+export {
+  ErrorBoundary,
+  For,
+  Match,
+  Show,
+  Suspense,
+  Switch,
+  createComponent,
+  createRenderEffect as effect,
+  getOwner,
+  createMemo as memo,
+  merge as mergeProps,
+  untrack
+} from "solid-js";
 
-const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
-const Properties = /*#__PURE__*/new Set(["value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
-const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+const booleans = [
+  "allowfullscreen",
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "indeterminate",
+  "inert",
+  "ismap",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "seamless",
+  "selected"
+];
+const Properties = /*#__PURE__*/ new Set([
+  "value",
+  "readOnly",
+  "formNoValidate",
+  "isMap",
+  "noModule",
+  "playsInline",
+  ...booleans
+]);
+const ChildProperties = /*#__PURE__*/ new Set([
+  "innerHTML",
+  "textContent",
+  "innerText",
+  "children"
+]);
+const PropAliases = /*#__PURE__*/ Object.assign(Object.create(null), {
   class: "className",
   formnovalidate: {
     $: "formNoValidate",
@@ -31,19 +93,396 @@ const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
 });
 function getPropAlias(prop, tagName) {
   const a = PropAliases[prop];
-  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
-}
-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([
-"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
-"set", "stop",
-"svg", "switch", "symbol", "text", "textPath",
-"tref", "tspan", "use", "view", "vkern"]);
+  return typeof a === "object" ? (a[tagName] ? a["$"] : undefined) : a;
+}
+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([
+  "altGlyph",
+  "altGlyphDef",
+  "altGlyphItem",
+  "animate",
+  "animateColor",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "color-profile",
+  "cursor",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "font",
+  "font-face",
+  "font-face-format",
+  "font-face-name",
+  "font-face-src",
+  "font-face-uri",
+  "foreignObject",
+  "g",
+  "glyph",
+  "glyphRef",
+  "hkern",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "missing-glyph",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tref",
+  "tspan",
+  "use",
+  "view",
+  "vkern"
+]);
 const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-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"]);
+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"
+]);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -64,7 +503,7 @@ function reconcileArrays(parentNode, a, b) {
       bEnd--;
     }
     if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+      const node = bEnd < bLength ? (bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart]) : after;
       while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
     } else if (bEnd === bStart) {
       while (aStart < aEnd) {
@@ -105,12 +544,16 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
 function render(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.");
+    throw new Error(
+      "The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document."
+    );
   }
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document
+      ? code()
+      : insert(element, code(), element.firstChild ? null : undefined, init);
   }, options.owner);
   return () => {
     disposer();
@@ -120,12 +563,19 @@ function render(code, element, init, options = {}) {
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
   const create = () => {
-    if (isHydrating()) 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");
+    if (isHydrating())
+      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;
   };
-  return isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  return isImportNode
+    ? () => untrack(() => document.importNode(node || (node = create()), true))
+    : () => (node || (node = create())).cloneNode(true);
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -147,10 +597,12 @@ function setProperty(node, name, value) {
   node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+  if (value == null) node.removeAttribute(name);
+  else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null) node.removeAttributeNS(namespace, name);
+  else node.setAttributeNS(namespace, name, value);
 }
 function setBoolAttribute(node, name, value) {
   if (isHydrating(node)) return;
@@ -162,7 +614,7 @@ function className(node, value, isSVG, prev) {
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && (isSVG ? node.setAttribute("class", value) : (node.className = value));
     return;
   }
   if (typeof prev === "string") {
@@ -193,7 +645,7 @@ function addEventListener(node, name, handler, delegate) {
     } else node[`$$${name}`] = handler;
   } else if (Array.isArray(handler)) {
     const handlerFn = handler[0];
-    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
+    node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
   } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
 }
 function style(node, value, prev) {
@@ -202,7 +654,7 @@ function style(node, value, prev) {
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
+  if (typeof value === "string") return (nodeStyle.cssText = value);
   typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
   prev || (prev = {});
   value || (value = {});
@@ -217,20 +669,29 @@ function style(node, value, prev) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    createRenderEffect(() => normalize(props.children, prevProps.children), value => {
-      insertExpression(node, value, prevProps.children);
-      prevProps.children = value;
-    });
+    createRenderEffect(
+      () => normalize(props.children, prevProps.children),
+      value => {
+        insertExpression(node, value, prevProps.children);
+        prevProps.children = value;
+      }
+    );
   }
-  createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
-  createRenderEffect(() => {
-    const newProps = {};
-    for (const prop in props) {
-      if (prop === "children" || prop === "ref") continue;
-      newProps[prop] = props[prop];
-    }
-    return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  createRenderEffect(
+    () => typeof props.ref === "function" && use(props.ref, node),
+    () => {}
+  );
+  createRenderEffect(
+    () => {
+      const newProps = {};
+      for (const prop in props) {
+        if (prop === "children" || prop === "ref") continue;
+        newProps[prop] = props[prop];
+      }
+      return newProps;
+    },
+    props => assign(node, props, isSVG, true, prevProps, true)
+  );
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -253,7 +714,11 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  createRenderEffect(
+    prev => normalize(accessor, prev, multi),
+    (value, current) => insertExpression(parent, value, current, marker),
+    initial
+  );
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   props || (props = {});
@@ -295,10 +760,14 @@ function getNextElement(template) {
   let node,
     key,
     hydrating = isHydrating();
-  if (!hydrating || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
+  if (!hydrating || !(node = sharedConfig.registry.get((key = getHydrationKey())))) {
     if (hydrating) {
       sharedConfig.done = true;
-      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
+      throw new Error(
+        `Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${
+          template ? template().outerHTML : ""
+        }`
+      );
     }
     return template();
   }
@@ -318,7 +787,8 @@ function getNextMarker(start) {
     while (end) {
       if (end.nodeType === 8) {
         const v = end.nodeValue;
-        if (v === "$") count++;else if (v === "/") {
+        if (v === "$") count++;
+        else if (v === "/") {
           if (count === 0) return [end, current];
           count--;
         }
@@ -332,10 +802,7 @@ function getNextMarker(start) {
 function runHydrationEvents() {
   if (sharedConfig.events && !sharedConfig.events.queued) {
     queueMicrotask(() => {
-      const {
-        completed,
-        events
-      } = sharedConfig;
+      const { completed, events } = sharedConfig;
       if (!events) return;
       events.queued = false;
       while (events.length) {
@@ -357,19 +824,25 @@ function isHydrating(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);
+  for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
+    node.classList.toggle(classNames[i], value);
 }
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
-    for (let i = 0, len = classList.length; i < len; i++) {
-      const key = classList[i];
-      if (typeof key === "object" && key != null) Object.assign(result, key);else if (key || key === 0) result[key] = true;
-    }
+    flattenClassList(classList, result);
     return result;
   }
   return classList;
 }
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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 propAlias, forceProp;
   if (prop === "style") return style(node, value, prev), value;
@@ -396,11 +869,20 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     setAttribute(node, prop.slice(5), value);
   } else if (prop.slice(0, 5) === "bool:") {
     setBoolAttribute(node, prop.slice(5), value);
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && (propAlias = getPropAlias(prop, node.tagName)) || Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else node[propAlias || prop] = value;
+  } else if (
+    (forceProp = prop.slice(0, 5) === "prop:") ||
+    ChildProperties.has(prop) ||
+    (!isSVG && (propAlias = getPropAlias(prop, node.tagName))) ||
+    Properties.has(prop)
+  ) {
+    if (forceProp) prop = prop.slice(5);
+    if (prop === "value" && node.nodeName === "SELECT")
+      queueMicrotask(() => (node.value = value)) || (node.value = value);
+    else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
+    if (ns) setAttributeNS(node, ns, prop, value);
+    else setAttribute(node, prop, value);
   }
   return value;
 }
@@ -412,10 +894,11 @@ function eventHandler(e) {
   const key = `$$${e.type}`;
   const oriTarget = e.target;
   const oriCurrentTarget = e.currentTarget;
-  const retarget = value => Object.defineProperty(e, "target", {
-    configurable: true,
-    value
-  });
+  const retarget = value =>
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value
+    });
   const handleNode = () => {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -423,7 +906,11 @@ function eventHandler(e) {
       data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
       if (e.cancelBubble) return;
     }
-    node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
+    node.host &&
+      typeof node.host !== "string" &&
+      !node.host._$host &&
+      node.contains(e.target) &&
+      retarget(node.host);
     return true;
   };
   const walkUpTree = () => {
@@ -451,8 +938,7 @@ function eventHandler(e) {
         break;
       }
     }
-  }
-  else walkUpTree();
+  } else walkUpTree();
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
@@ -492,13 +978,15 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
-  if (multi && value != null && !Array.isArray(value)) value = [value];
+  if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],
         prev = current && current[i],
         t = typeof item;
-      if (t === "string" || t === "number") value[i] = prev && prev.nodeType === 3 && prev.data === item ? prev : document.createTextNode(item);
+      if (t === "string" || t === "number")
+        value[i] =
+          prev && prev.nodeType === 3 && prev.data === item ? prev : document.createTextNode(item);
     }
   }
   return value;
@@ -507,14 +995,18 @@ function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
-  if (marker === undefined) return parent.textContent = "";
+  if (marker === undefined) return (parent.textContent = "");
   if (current.length) {
     let inserted = false;
     for (let i = current.length - 1; i >= 0; i--) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        if (replacement && !inserted && !i)
+          isParent
+            ? parent.replaceChild(replacement, el)
+            : parent.insertBefore(replacement, marker);
+        else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -524,7 +1016,8 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key))
+      sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -577,18 +1070,21 @@ function Portal(props) {
     endMarker = document.createTextNode(""),
     mount = () => createElementProxy(props.mount || document.body, treeMarker);
   let content = createMemo(() => [startMarker, props.children]);
-  createRenderEffect(() => [mount(), content()], ([m, c]) => {
-    m.appendChild(endMarker);
-    insert(m, c, endMarker);
-    return () => {
-      let c = startMarker;
-      while (c && c !== endMarker) {
-        const n = c.nextSibling;
-        m.removeChild(c);
-        c = n;
-      }
-    };
-  });
+  createRenderEffect(
+    () => [mount(), content()],
+    ([m, c]) => {
+      m.appendChild(endMarker);
+      insert(m, c, endMarker);
+      return () => {
+        let c = startMarker;
+        while (c && c !== endMarker) {
+          const n = c.nextSibling;
+          m.removeChild(c);
+          c = n;
+        }
+      };
+    }
+  );
   return treeMarker;
 }
 function createElementProxy(el, marker) {
@@ -608,9 +1104,8 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = omit(props, "component");
-  const cached = createMemo(() => props.component);
+function createDynamic(component, props) {
+  const cached = createMemo(component);
   return createMemo(() => {
     const component = cached();
     switch (typeof component) {
@@ -618,14 +1113,73 @@ function Dynamic(props) {
         Object.assign(component, {
           [$DEVCOMP]: true
         });
-        return untrack(() => component(others));
+        return untrack(() => component(props));
       case "string":
         const isSvg = SVGElements.has(component);
         const el = sharedConfig.context ? getNextElement() : createElement(component, isSvg);
-        spread(el, others, isSvg);
+        spread(el, props, isSvg);
         return el;
     }
   });
 }
+function Dynamic(props) {
+  const others = omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, assign, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getPropAlias, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setBoolAttribute, setProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, use, voidFn as useAssets };
+export {
+  voidFn as Assets,
+  ChildProperties,
+  DOMElements,
+  DelegatedEvents,
+  Dynamic,
+  Hydration,
+  voidFn as HydrationScript,
+  NoHydration,
+  Portal,
+  Properties,
+  RequestContext,
+  SVGElements,
+  SVGNamespace,
+  addEventListener,
+  assign,
+  className,
+  clearDelegatedEvents,
+  createDynamic,
+  delegateEvents,
+  dynamicProperty,
+  escape,
+  voidFn as generateHydrationScript,
+  voidFn as getAssets,
+  getHydrationKey,
+  getNextElement,
+  getNextMarker,
+  getNextMatch,
+  getPropAlias,
+  voidFn as getRequestEvent,
+  hydrate,
+  insert,
+  isDev,
+  isServer,
+  render,
+  renderToStream,
+  renderToString,
+  renderToStringAsync,
+  resolveSSRNode,
+  runHydrationEvents,
+  setAttribute,
+  setAttributeNS,
+  setBoolAttribute,
+  setProperty,
+  spread,
+  ssr,
+  ssrAttribute,
+  ssrClassList,
+  ssrElement,
+  ssrHydrationKey,
+  ssrStyle,
+  style,
+  template,
+  use,
+  voidFn as useAssets
+};