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

package/dist/web.cjs

@@ -2,38 +2,9 @@
 
 var solidJs = require('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 Properties = /*#__PURE__*/new Set([
+"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
-  class: "className",
-  formnovalidate: {
-    $: "formNoValidate",
-    BUTTON: 1,
-    INPUT: 1
-  },
-  ismap: {
-    $: "isMap",
-    IMG: 1
-  },
-  nomodule: {
-    $: "noModule",
-    SCRIPT: 1
-  },
-  playsinline: {
-    $: "playsInline",
-    VIDEO: 1
-  },
-  readonly: {
-    $: "readOnly",
-    INPUT: 1,
-    TEXTAREA: 1
-  }
-});
-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",
@@ -44,7 +15,11 @@ 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",
+"webview",
+"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
+
+const memo = fn => solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -108,8 +83,10 @@ function render(code, element, init, options = {}) {
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
-  }, options.owner);
+    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+  }, {
+    id: options.renderId
+  });
   return () => {
     disposer();
     element.textContent = "";
@@ -141,20 +118,20 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
+  if (isHydrating(node)) return;
   node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+  if (isHydrating(node)) return;
+  if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
 }
 function setAttributeNS(node, 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;
-  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value, isSVG, prev) {
-  if (value == null) {
+  if (isHydrating(node)) return;
+  if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
@@ -211,6 +188,9 @@ function style(node, value, prev) {
   }
   for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
+function setStyleProperty(node, name, value) {
+  value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
+}
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
@@ -271,21 +251,19 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 }
 function hydrate$1(code, element, options = {}) {
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  options.renderId ||= "";
   solidJs.sharedConfig.completed = globalThis._$HY.completed;
   solidJs.sharedConfig.events = globalThis._$HY.events;
   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.registry = new Map();
-  solidJs.sharedConfig.context = {
-    id: options.renderId || "",
-    count: 0
-  };
+  solidJs.sharedConfig.hydrating = true;
   try {
     gatherHydratable(element, options.renderId);
     return render(code, element, [...element.childNodes], options);
   } finally {
-    solidJs.sharedConfig.context = null;
+    solidJs.sharedConfig.hydrating = false;
   }
 }
 function getNextElement(template) {
@@ -346,7 +324,7 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return !!solidJs.sharedConfig.context && !solidJs.sharedConfig.done && (!node || node.isConnected);
+  return solidJs.sharedConfig.hydrating && !solidJs.sharedConfig.done && (!node || node.isConnected);
 }
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
@@ -355,16 +333,19 @@ function toggleClassKey(node, key, 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;
+  let forceProp;
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
@@ -385,12 +366,9 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if (prop.slice(0, 5) === "attr:") {
-    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 && 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 {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
@@ -449,6 +427,7 @@ function eventHandler(e) {
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
+  if (isHydrating(parent)) return;
   if (value === current) return;
   const t = typeof value,
     multi = marker !== undefined;
@@ -485,7 +464,7 @@ 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],
@@ -513,10 +492,10 @@ function cleanChildren(parent, current, marker, replacement) {
   } else if (replacement) parent.insertBefore(replacement, marker);
 }
 function gatherHydratable(element, root) {
-  const templates = element.querySelectorAll(`*[data-hk]`);
+  const templates = element.querySelectorAll(`*[_hk]`);
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
-    const key = node.getAttribute("data-hk");
+    const key = node.getAttribute("_hk");
     if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
@@ -524,7 +503,7 @@ function getHydrationKey() {
   return solidJs.sharedConfig.getNextContextId();
 }
 function NoHydration(props) {
-  return solidJs.sharedConfig.context ? undefined : props.children;
+  return solidJs.sharedConfig.hydrating ? undefined : props.children;
 }
 function Hydration(props) {
   return props.children;
@@ -557,8 +536,10 @@ function escape(html) {}
 const isServer = false;
 const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
+function createElement(tagName, isSVG = false, is = undefined) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+    is
+  });
 }
 const hydrate = (...args) => {
   solidJs.enableHydration();
@@ -601,31 +582,38 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  const cached = solidJs.createMemo(() => props.component);
+function createDynamic(component, props) {
+  const cached = solidJs.createMemo(component);
   return solidJs.createMemo(() => {
     const component = cached();
     switch (typeof component) {
       case "function":
-        return solidJs.untrack(() => component(others));
+        return solidJs.untrack(() => component(props));
       case "string":
         const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.context ? getNextElement() : createElement(component, isSvg);
-        spread(el, others, isSvg);
+        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, "ErrorBoundary", {
+Object.defineProperty(exports, "Errored", {
   enumerable: true,
-  get: function () { return solidJs.ErrorBoundary; }
+  get: function () { return solidJs.Errored; }
 });
 Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function () { return solidJs.Loading; }
+});
 Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
@@ -634,10 +622,6 @@ Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
 });
-Object.defineProperty(exports, "Suspense", {
-  enumerable: true,
-  get: function () { return solidJs.Suspense; }
-});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () { return solidJs.Switch; }
@@ -654,10 +638,6 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
-Object.defineProperty(exports, "memo", {
-  enumerable: true,
-  get: function () { return solidJs.createMemo; }
-});
 Object.defineProperty(exports, "mergeProps", {
   enumerable: true,
   get: function () { return solidJs.merge; }
@@ -683,6 +663,7 @@ exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
+exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;
@@ -692,12 +673,12 @@ exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
 exports.getNextMatch = getNextMatch;
-exports.getPropAlias = getPropAlias;
 exports.getRequestEvent = voidFn;
 exports.hydrate = hydrate;
 exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
+exports.memo = memo;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
@@ -706,8 +687,8 @@ exports.resolveSSRNode = resolveSSRNode;
 exports.runHydrationEvents = runHydrationEvents;
 exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
-exports.setBoolAttribute = setBoolAttribute;
 exports.setProperty = setProperty;
+exports.setStyleProperty = setStyleProperty;
 exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;

package/dist/web.js

@@ -1,38 +1,9 @@
-import { createRoot, untrack, createRenderEffect, sharedConfig, flatten, enableHydration, createMemo, 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';
+import { createMemo, createRoot, flatten, untrack, createRenderEffect, sharedConfig, enableHydration, omit } from 'solid-js';
+export { Errored, For, Loading, Match, Show, Switch, createComponent, createRenderEffect as effect, getOwner, 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 Properties = /*#__PURE__*/new Set([
+"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
-  class: "className",
-  formnovalidate: {
-    $: "formNoValidate",
-    BUTTON: 1,
-    INPUT: 1
-  },
-  ismap: {
-    $: "isMap",
-    IMG: 1
-  },
-  nomodule: {
-    $: "noModule",
-    SCRIPT: 1
-  },
-  playsinline: {
-    $: "playsInline",
-    VIDEO: 1
-  },
-  readonly: {
-    $: "readOnly",
-    INPUT: 1,
-    TEXTAREA: 1
-  }
-});
-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",
@@ -43,7 +14,11 @@ 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",
+"webview",
+"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
+
+const memo = fn => createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -107,8 +82,10 @@ function render(code, element, init, options = {}) {
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
-  }, options.owner);
+    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+  }, {
+    id: options.renderId
+  });
   return () => {
     disposer();
     element.textContent = "";
@@ -140,20 +117,20 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
+  if (isHydrating(node)) return;
   node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+  if (isHydrating(node)) return;
+  if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
 }
 function setAttributeNS(node, 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;
-  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value, isSVG, prev) {
-  if (value == null) {
+  if (isHydrating(node)) return;
+  if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
@@ -210,6 +187,9 @@ function style(node, value, prev) {
   }
   for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
+function setStyleProperty(node, name, value) {
+  value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
+}
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
@@ -270,21 +250,19 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 }
 function hydrate$1(code, element, options = {}) {
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  options.renderId ||= "";
   sharedConfig.completed = globalThis._$HY.completed;
   sharedConfig.events = globalThis._$HY.events;
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
   sharedConfig.registry = new Map();
-  sharedConfig.context = {
-    id: options.renderId || "",
-    count: 0
-  };
+  sharedConfig.hydrating = true;
   try {
     gatherHydratable(element, options.renderId);
     return render(code, element, [...element.childNodes], options);
   } finally {
-    sharedConfig.context = null;
+    sharedConfig.hydrating = false;
   }
 }
 function getNextElement(template) {
@@ -345,7 +323,7 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
+  return sharedConfig.hydrating && !sharedConfig.done && (!node || node.isConnected);
 }
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
@@ -354,16 +332,19 @@ function toggleClassKey(node, key, 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;
+  let forceProp;
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
@@ -384,12 +365,9 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if (prop.slice(0, 5) === "attr:") {
-    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 && 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 {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
@@ -448,6 +426,7 @@ function eventHandler(e) {
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
+  if (isHydrating(parent)) return;
   if (value === current) return;
   const t = typeof value,
     multi = marker !== undefined;
@@ -484,7 +463,7 @@ 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],
@@ -512,10 +491,10 @@ function cleanChildren(parent, current, marker, replacement) {
   } else if (replacement) parent.insertBefore(replacement, marker);
 }
 function gatherHydratable(element, root) {
-  const templates = element.querySelectorAll(`*[data-hk]`);
+  const templates = element.querySelectorAll(`*[_hk]`);
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
-    const key = node.getAttribute("data-hk");
+    const key = node.getAttribute("_hk");
     if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
@@ -523,7 +502,7 @@ function getHydrationKey() {
   return sharedConfig.getNextContextId();
 }
 function NoHydration(props) {
-  return sharedConfig.context ? undefined : props.children;
+  return sharedConfig.hydrating ? undefined : props.children;
 }
 function Hydration(props) {
   return props.children;
@@ -556,8 +535,10 @@ function escape(html) {}
 const isServer = false;
 const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
+function createElement(tagName, isSVG = false, is = undefined) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+    is
+  });
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -600,21 +581,24 @@ 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) {
       case "function":
-        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);
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
+        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, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, use, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-experimental.1",
+  "version": "2.0.0-experimental.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.1"
+    "solid-js": "^2.0.0-experimental.11"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.1"
+    "solid-js": "2.0.0-experimental.11"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",