@solidjs/web 2.0.0-experimental.5 → 2.0.0-experimental.7

package/dist/server.js

@@ -1,41 +1,11 @@
 import { createMemo, sharedConfig, createRoot, ssrHandleError, omit } from 'solid-js';
-export { ErrorBoundary, For, Match, Repeat, Show, Suspense, Switch, createComponent, createRenderEffect as effect, getOwner, untrack } from 'solid-js';
+export { ErrorBoundary, For, Match, Repeat, Show, Suspense, Switch, createComponent, createRenderEffect as effect, getOwner, ssrRunInScope, untrack } from 'solid-js';
 import { Feature, Serializer, getCrossReferenceHeader } from 'seroval';
-import { CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
+import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
-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 BooleanAttributes = /*#__PURE__*/new Set(booleans);
-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",
@@ -46,7 +16,9 @@ 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());
 
@@ -61,7 +33,7 @@ function createSerializer({
 }) {
   return new Serializer({
     scopeId,
-    plugins: [
+    plugins: [AbortSignalPlugin,
     CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
     FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin],
     globalIdentifier: GLOBAL_IDENTIFIER,
@@ -96,20 +68,18 @@ function renderToString(code, options = {}) {
     onError: options.onError
   });
   sharedConfig.context = {
-    id: renderId,
-    resources: {},
     assets: [],
     nonce,
-    resolve(value) {
-      return resolveSSRNode(escape(value));
-    },
+    escape: escape,
+    resolve: resolveSSRNode,
+    ssr: ssr,
     serialize(id, p) {
       !sharedConfig.context.noHydrate && serializer.write(id, p);
     }
   };
   let html = createRoot(d => {
     setTimeout(d);
-    return resolveSSRNode(escape(code()));
+    return resolveSSRSync(escape(code()));
   }, {
     id: renderId
   });
@@ -186,9 +156,7 @@ function renderToStream(code, options = {}) {
     }
   };
   sharedConfig.context = context = {
-    id: renderId,
     async: true,
-    resources: {},
     assets: [],
     nonce,
     block(p) {
@@ -200,7 +168,7 @@ function renderToStream(code, options = {}) {
       const first = html.indexOf(placeholder);
       if (first === -1) return;
       const last = html.indexOf(`<!--!$/${id}-->`, first + placeholder.length);
-      html = html.slice(0, first) + resolveSSRNode(escape(payloadFn())) + html.slice(last + placeholder.length + 1);
+      html = html.slice(0, first) + resolveSSRSync(escape(payloadFn())) + html.slice(last + placeholder.length + 1);
     },
     serialize(id, p, wait) {
       const serverOnly = sharedConfig.context.noHydrate;
@@ -213,35 +181,46 @@ function renderToStream(code, options = {}) {
         });
       } else if (!serverOnly) serializer.write(id, p);
     },
-    resolve(value) {
-      return resolveSSRNode(escape(value));
-    },
+    escape: escape,
+    resolve: resolveSSRNode,
+    ssr: ssr,
     registerFragment(key) {
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
-        registry.set(key, err => queue(() => queue(() => {
-          err ? reject(err) : resolve(true);
-          queue(flushEnd);
-        })));
+        registry.set(key, {
+          resolve: err => queue(() => queue(() => {
+            err ? reject(err) : resolve(true);
+            queue(flushEnd);
+          }))
+        });
         serializer.write(key, p);
       }
       return (value, error) => {
         if (registry.has(key)) {
-          const resolve = registry.get(key);
+          const item = registry.get(key);
           registry.delete(key);
-          if (waitForFragments(registry, key)) {
-            resolve();
+          if (item.children) {
+            for (const k in item.children) {
+              value = replacePlaceholder(value, k, item.children[k]);
+            }
+          }
+          const parentKey = waitForFragments(registry, key);
+          if (parentKey) {
+            const parent = registry.get(parentKey);
+            parent.children ||= {};
+            parent.children[key] = value !== undefined ? value : "";
+            item.resolve();
             return;
           }
           if (!completed) {
             if (!firstFlushed) {
               queue(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              resolve(error);
+              item.resolve(error);
             } else {
               buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-              resolve(error);
+              item.resolve(error);
               scriptFlushed = true;
             }
           }
@@ -252,14 +231,13 @@ function renderToStream(code, options = {}) {
   };
   let html = createRoot(d => {
     dispose = d;
-    return resolveSSRNode(escape(code()));
+    return resolveSSRSync(escape(code()));
   }, {
     id: renderId
   });
   function doShell() {
     if (shellCompleted) return;
     sharedConfig.context = context;
-    context.noHydrate = true;
     html = injectAssets(context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
@@ -342,15 +320,7 @@ function HydrationScript(props) {
   }));
 }
 function ssr(t, ...nodes) {
-  if (nodes.length) {
-    let result = "";
-    for (let i = 0; i < nodes.length; i++) {
-      result += t[i];
-      const node = nodes[i];
-      if (node !== undefined) result += resolveSSRNode(node);
-    }
-    t = result + t[nodes.length];
-  }
+  if (nodes.length) return resolveSSR(t, nodes);
   return {
     t
   };
@@ -380,11 +350,17 @@ function ssrStyle(value) {
     const v = value[s];
     if (v != undefined) {
       if (i) result += ";";
-      result += `${s}:${escape(v, true)}`;
+      const r = escape(v, true);
+      if (r != undefined && r !== "undefined") {
+        result += `${s}:${r}`;
+      }
     }
   }
   return result;
 }
+function ssrStyleProperty(name, value) {
+  return value != null ? name + value : "";
+}
 function ssrElement(tag, props, children, needsId) {
   if (props == null) props = {};else if (typeof props === "function") props = props();
   const skipChildren = VOID_ELEMENTS.test(tag);
@@ -401,17 +377,13 @@ function ssrElement(tag, props, children, needsId) {
       result += `style="${ssrStyle(value)}"`;
     } else if (prop === "class") {
       result += `class="${ssrClassName(value)}"`;
-    } else if (BooleanAttributes.has(prop)) {
-      if (value) result += prop;else continue;
     } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
-    } else if (prop.slice(0, 5) === "bool:") {
+    } else if (typeof value === "boolean") {
       if (!value) continue;
-      result += escape(prop.slice(5));
-    } else if (prop.slice(0, 5) === "attr:") {
-      result += `${escape(prop.slice(5))}="${escape(value, true)}"`;
+      result += escape(prop);
     } else {
-      result += `${escape(prop)}="${escape(value, true)}"`;
+      result += value === "" ? escape(prop) : `${escape(prop)}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
   }
@@ -419,12 +391,10 @@ function ssrElement(tag, props, children, needsId) {
     t: result + "/>"
   };
   if (typeof children === "function") children = children();
-  return {
-    t: result + `>${resolveSSRNode(children, true)}</${tag}>`
-  };
+  return ssr([result + ">", `</${tag}>`], resolveSSRNode(children, undefined, true));
 }
-function ssrAttribute(key, value, isBoolean) {
-  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
+function ssrAttribute(key, value) {
+  return value == null || value === false ? "" : value === true ? ` ${key}` : ` ${key}="${value}"`;
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -433,12 +403,12 @@ function ssrHydrationKey() {
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
-    if (!attr && t === "function") return escape(s());
     if (!attr && Array.isArray(s)) {
+      s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
     }
-    if (attr && t === "boolean") return String(s);
+    if (attr && t === "boolean") return s;
     return s;
   }
   const delim = attr ? '"' : "<";
@@ -476,29 +446,6 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
-function resolveSSRNode(node, top) {
-  const t = typeof node;
-  if (t === "string") return node;
-  if (node == null || t === "boolean") return "";
-  if (Array.isArray(node)) {
-    let prev = {};
-    let mapped = "";
-    for (let i = 0, len = node.length; i < len; i++) {
-      if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
-      mapped += resolveSSRNode(prev = node[i]);
-    }
-    return mapped;
-  }
-  if (t === "object") return node.t;
-  if (t === "function") {
-    try {
-      return resolveSSRNode(node());
-    } catch (err) {
-      if (!ssrHandleError(err)) throw err;
-    }
-  }
-  return String(node);
-}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -527,7 +474,7 @@ function getHydrationKey() {
   return hydrate && !hydrate.noHydrate && sharedConfig.getNextContextId();
 }
 function useAssets(fn) {
-  sharedConfig.context.assets.push(() => resolveSSRNode(escape(fn())));
+  sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
 function getAssets() {
   const assets = sharedConfig.context.assets;
@@ -546,8 +493,6 @@ function Hydration(props) {
   const context = sharedConfig.context;
   sharedConfig.context = {
     ...context,
-    count: 0,
-    id: sharedConfig.getNextContextId(),
     noHydrate: false
   };
   const res = props.children;
@@ -592,7 +537,7 @@ function injectScripts(html, scripts, nonce) {
 }
 function waitForFragments(registry, key) {
   for (const k of [...registry.keys()].reverse()) {
-    if (key.startsWith(k)) return true;
+    if (key.startsWith(k)) return k;
   }
   return false;
 }
@@ -618,6 +563,62 @@ 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 resolveSSR(template, holes, result = {
+  t: [""],
+  h: [],
+  p: []
+}) {
+  for (let i = 0; i < holes.length; i++) {
+    const hole = holes[i];
+    result.t[result.t.length - 1] += template[i];
+    if (hole == null || hole === true || hole === false) continue;
+    resolveSSRNode(hole, result);
+  }
+  result.t[result.t.length - 1] += template[template.length - 1];
+  return result;
+}
+function resolveSSRNode(node, result = {
+  t: [""],
+  h: [],
+  p: []
+}, top) {
+  const t = typeof node;
+  if (t === "string" || t === "number") {
+    result.t[result.t.length - 1] += node;
+  } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
+    let prev = {};
+    for (let i = 0, len = node.length; i < len; i++) {
+      if (!top && typeof prev !== "object" && typeof node[i] !== "object") result.t[result.t.length - 1] += `<!--!$-->`;
+      resolveSSRNode(prev = node[i], result);
+    }
+  } else if (t === "object") {
+    if (node.h) {
+      result.t[result.t.length - 1] += node.t[0];
+      if (node.t.length > 1) {
+        result.t.push(...node.t.slice(1));
+        result.h.push(...node.h);
+        result.p.push(...node.p);
+      }
+    } else result.t[result.t.length - 1] += node.t;
+  } else if (t === "function") {
+    try {
+      resolveSSRNode(node(), result);
+    } catch (err) {
+      const p = ssrHandleError(err);
+      if (p) {
+        result.h.push(node);
+        result.p.push(p);
+        result.t.push("");
+      }
+    }
+  }
+  return result;
+}
+function resolveSSRSync(node) {
+  const res = resolveSSRNode(node);
+  if (!res.h.length) return res.t[0];
+  throw new Error("This value cannot be rendered synchronously. Are you missing a Suspsense boundary?");
+}
 const RequestContext = Symbol();
 function getRequestEvent() {
   return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || sharedConfig.context && sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
@@ -648,4 +649,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getPropAlias, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };

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,9 @@ 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());
 
@@ -150,19 +123,15 @@ function setProperty(node, name, value) {
 }
 function setAttribute(node, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+  if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
   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);
-}
 function className(node, value, isSVG, prev) {
   if (isHydrating(node)) return;
-  if (value == null) {
+  if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
@@ -219,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) {
@@ -373,7 +345,7 @@ function flattenClassList(list, result) {
   }
 }
 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;
@@ -394,13 +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)) {
+  } 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[propAlias || prop] = 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);
@@ -568,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();
@@ -621,7 +591,7 @@ function createDynamic(component, props) {
         return solidJs.untrack(() => component(props));
       case "string":
         const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.context ? getNextElement() : createElement(component, isSvg);
+        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
         spread(el, props, isSvg);
         return el;
     }
@@ -703,7 +673,6 @@ exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
 exports.getNextMatch = getNextMatch;
-exports.getPropAlias = getPropAlias;
 exports.getRequestEvent = voidFn;
 exports.hydrate = hydrate;
 exports.insert = insert;
@@ -718,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;