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

package/dist/server.js

@@ -1,512 +1,41 @@
-import { sharedConfig, createRoot, splitProps } from "solid-js";
-export {
-  ErrorBoundary,
-  For,
-  Index,
-  Match,
-  Show,
-  Suspense,
-  SuspenseList,
-  Switch,
-  createComponent,
-  createRenderEffect as effect,
-  getOwner,
-  createMemo as memo,
-  mergeProps,
-  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 { createMemo, sharedConfig, createRoot, ssrHandleError, omit } 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 { 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 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",
-  "set",
-  "stop",
-  "svg",
-  "switch",
-  "symbol",
-  "text",
-  "textPath",
-  "tref",
-  "tspan",
-  "use",
-  "view",
-  "vkern"
-]);
+const Properties = /*#__PURE__*/new Set([
+"value", "checked", "selected", "muted"]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+const SVGElements = /*#__PURE__*/new Set([
+"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",
+"webview",
+"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
+
+const memo = fn => createMemo(() => fn());
 
-const ES2017FLAG = Feature.AggregateError | Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = "_$HY.r";
-function createSerializer({ onData, onDone, scopeId, onError }) {
+const ES2017FLAG = Feature.AggregateError
+| Feature.BigIntTypedArray;
+const GLOBAL_IDENTIFIER = '_$HY.r';
+function createSerializer({
+  onData,
+  onDone,
+  scopeId,
+  onError
+}) {
   return new Serializer({
     scopeId,
-    plugins: [
-      CustomEventPlugin,
-      DOMExceptionPlugin,
-      EventPlugin,
-      FormDataPlugin,
-      HeadersPlugin,
-      ReadableStreamPlugin,
-      RequestPlugin,
-      ResponsePlugin,
-      URLSearchParamsPlugin,
-      URLPlugin
-    ],
+    plugins: [AbortSignalPlugin,
+    CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
+    FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin],
     globalIdentifier: GLOBAL_IDENTIFIER,
     disabledFeatures: ES2017FLAG,
     onData,
@@ -515,18 +44,22 @@ function createSerializer({ onData, onDone, scopeId, onError }) {
   });
 }
 function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id) + ";";
+  return getCrossReferenceHeader(id) + ';';
 }
 
-const VOID_ELEMENTS =
-  /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
+const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const REPLACE_SCRIPT = `function $df(e,n,o,t){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content)}n.remove(),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
-  const { renderId } = options;
+  const {
+    renderId = "",
+    nonce,
+    noScripts
+  } = options;
   let scripts = "";
   const serializer = createSerializer({
     scopeId: renderId,
     onData(script) {
+      if (noScripts) return;
       if (!scripts) {
         scripts = getLocalHeaderScript(renderId);
       }
@@ -535,23 +68,20 @@ function renderToString(code, options = {}) {
     onError: options.onError
   });
   sharedConfig.context = {
-    id: renderId || "",
-    count: 0,
-    suspense: {},
-    lazy: {},
     assets: [],
-    nonce: options.nonce,
+    nonce,
+    escape: escape,
+    resolve: resolveSSRNode,
+    ssr: ssr,
     serialize(id, p) {
       !sharedConfig.context.noHydrate && serializer.write(id, p);
-    },
-    roots: 0,
-    nextRoot() {
-      return this.renderId + "i-" + this.roots++;
     }
   };
   let html = createRoot(d => {
     setTimeout(d);
-    return resolveSSRNode(escape(code()));
+    return resolveSSRSync(escape(code()));
+  }, {
+    id: renderId
   });
   sharedConfig.context.noHydrate = true;
   serializer.close();
@@ -559,19 +89,14 @@ function renderToString(code, options = {}) {
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
 }
-function renderToStringAsync(code, options = {}) {
-  const { timeoutMs = 30000 } = options;
-  let timeoutHandle;
-  const timeout = new Promise((_, reject) => {
-    timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
-  });
-  return Promise.race([renderToStream(code, options), timeout]).then(html => {
-    clearTimeout(timeoutHandle);
-    return html;
-  });
-}
 function renderToStream(code, options = {}) {
-  let { nonce, onCompleteShell, onCompleteAll, renderId, noScripts } = options;
+  let {
+    nonce,
+    onCompleteShell,
+    onCompleteAll,
+    renderId = "",
+    noScripts
+  } = options;
   let dispose;
   const blockingPromises = [];
   const pushTask = task => {
@@ -587,12 +112,11 @@ function renderToStream(code, options = {}) {
   const onDone = () => {
     writeTasks();
     doShell();
-    onCompleteAll &&
-      onCompleteAll({
-        write(v) {
-          !completed && buffer.write(v);
-        }
-      });
+    onCompleteAll && onCompleteAll({
+      write(v) {
+        !completed && buffer.write(v);
+      }
+    });
     writable && writable.end();
     completed = true;
     if (firstFlushed) dispose();
@@ -632,12 +156,7 @@ function renderToStream(code, options = {}) {
     }
   };
   sharedConfig.context = context = {
-    id: renderId || "",
-    count: 0,
     async: true,
-    resources: {},
-    lazy: {},
-    suspense: {},
     assets: [],
     nonce,
     block(p) {
@@ -649,59 +168,59 @@ 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;
       if (!firstFlushed && wait && typeof p === "object" && "then" in p) {
         blockingPromises.push(p);
-        !serverOnly &&
-          p
-            .then(d => {
-              serializer.write(id, d);
-            })
-            .catch(e => {
-              serializer.write(id, e);
-            });
+        !serverOnly && p.then(d => {
+          serializer.write(id, d);
+        }).catch(e => {
+          serializer.write(id, e);
+        });
       } else if (!serverOnly) serializer.write(id, p);
     },
-    roots: 0,
-    nextRoot() {
-      return this.renderId + "i-" + this.roots++;
-    },
+    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);
-            })
-          )
-        );
+        const p = new Promise((r, rej) => (resolve = r, reject = rej));
+        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);
+              queue(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              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;
             }
           }
@@ -712,22 +231,22 @@ 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);
     tasks = "";
-    onCompleteShell &&
-      onCompleteShell({
-        write(v) {
-          !completed && buffer.write(v);
-        }
-      });
+    onCompleteShell && onCompleteShell({
+      write(v) {
+        !completed && buffer.write(v);
+      }
+    });
     shellCompleted = true;
   }
   return {
@@ -762,7 +281,7 @@ function renderToStream(code, options = {}) {
     pipeTo(w) {
       return allSettled(blockingPromises).then(() => {
         let resolve;
-        const p = new Promise(r => (resolve = r));
+        const p = new Promise(r => resolve = r);
         setTimeout(() => {
           doShell();
           const encoder = new TextEncoder();
@@ -792,30 +311,24 @@ function renderToStream(code, options = {}) {
   };
 }
 function HydrationScript(props) {
-  const { nonce } = sharedConfig.context;
-  return ssr(
-    generateHydrationScript({
-      nonce,
-      ...props
-    })
-  );
+  const {
+    nonce
+  } = sharedConfig.context;
+  return ssr(generateHydrationScript({
+    nonce,
+    ...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
   };
 }
 function ssrClassName(value) {
   if (!value) return "";
+  if (typeof value === "string") return escape(value, true);
+  value = classListToObject(value);
   let classKeys = Object.keys(value),
     result = "";
   for (let i = 0, len = classKeys.length; i < len; i++) {
@@ -837,22 +350,26 @@ 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();
+  if (props == null) props = {};else if (typeof props === "function") props = props();
   const skipChildren = VOID_ELEMENTS.test(tag);
   const keys = Object.keys(props);
   let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (ChildProperties.has(prop)) {
-      if (children === undefined && !skipChildren)
-        children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
+      if (children === undefined && !skipChildren) children = tag === "script" || tag === "style" || prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -860,51 +377,38 @@ 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:"
-    ) {
+    } 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 += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
+      result += value === "" ? escape(prop) : `${escape(prop)}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
   }
-  if (skipChildren)
-    return {
-      t: result + "/>"
-    };
-  if (typeof children === "function") children = children();
-  return {
-    t: result + `>${resolveSSRNode(children, true)}</${tag}>`
+  if (skipChildren) return {
+    t: result + "/>"
   };
+  if (typeof children === "function") children = children();
+  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();
-  return hk ? ` data-hk=${hk}` : "";
+  return hk ? ` _hk=${hk}` : "";
 }
 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 ? '"' : "<";
@@ -934,38 +438,43 @@ function escape(s, attr) {
       left = iDelim + 1;
       iDelim = s.indexOf(delim, left);
     } while (iDelim >= 0);
-  } else
-    while (iAmp >= 0) {
-      if (left < iAmp) out += s.substring(left, iAmp);
-      out += "&amp;";
-      left = iAmp + 1;
-      iAmp = s.indexOf("&", left);
-    }
+  } else while (iAmp >= 0) {
+    if (left < iAmp) out += s.substring(left, iAmp);
+    out += "&amp;";
+    left = iAmp + 1;
+    iAmp = s.indexOf("&", left);
+  }
   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]));
+function mergeProps(...sources) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              const v = (sources[i] || {})[key];
+              if (v !== undefined) return v;
+            }
+          }
+        });
+      }
     }
-    return mapped;
   }
-  if (t === "object") return node.t;
-  if (t === "function") return resolveSSRNode(node());
-  return String(node);
+  return target;
 }
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
   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;
@@ -973,20 +482,17 @@ function getAssets() {
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
   return out;
 }
-function generateHydrationScript({ eventNames = ["click", "input"], nonce } = {}) {
-  return `<script${
-    nonce ? ` nonce="${nonce}"` : ""
-  }>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join(
-    '", "'
-  )}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
+function generateHydrationScript({
+  eventNames = ["click", "input"],
+  nonce
+} = {}) {
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
 function Hydration(props) {
   if (!sharedConfig.context.noHydrate) return props.children;
   const context = sharedConfig.context;
   sharedConfig.context = {
     ...context,
-    count: 0,
-    id: sharedConfig.getNextContextId(),
     noHydrate: false
   };
   const res = props.children;
@@ -994,8 +500,14 @@ function Hydration(props) {
   return res;
 }
 function NoHydration(props) {
-  if (sharedConfig.context) sharedConfig.context.noHydrate = true;
-  return props.children;
+  let context = sharedConfig.context;
+  if (context) sharedConfig.context = {
+    ...context,
+    noHydrate: true
+  };
+  const res = props.children;
+  if (context) sharedConfig.context = context;
+  return res;
 }
 function queue(fn) {
   return Promise.resolve().then(fn);
@@ -1025,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;
 }
@@ -1037,91 +549,104 @@ function replacePlaceholder(html, key, value) {
   const last = html.indexOf(close, first + marker.length);
   return html.slice(0, first) + value + html.slice(last + close.length);
 }
+function classListToObject(classList) {
+  if (Array.isArray(classList)) {
+    const result = {};
+    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 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;
+  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;
 }
-function Assets(props) {
-  useAssets(() => props.children);
+function renderToStringAsync(code, options = {}) {
+  return renderToStream(code, options).then(html => html);
 }
 function notSup() {
-  throw new Error(
-    "Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>."
-  );
+  throw new Error("Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.");
 }
 
 const isServer = true;
 const isDev = false;
-function Dynamic(props) {
-  const [p, others] = splitProps(props, ["component"]);
-  const comp = p.component,
+function createDynamic(component, props) {
+  const comp = component(),
     t = typeof comp;
   if (comp) {
-    if (t === "function") return comp(others);
-    else if (t === "string") {
-      return ssrElement(comp, others, undefined, true);
+    if (t === "function") return comp(props);else if (t === "string") {
+      return ssrElement(comp, props, undefined, true);
     }
   }
 }
+function Dynamic(props) {
+  const others = omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 function Portal(props) {
-  return "";
+  throw new Error("Portal is not supported on the server");
 }
 
-export {
-  Assets,
-  ChildProperties,
-  DOMElements,
-  DelegatedEvents,
-  Dynamic,
-  Hydration,
-  HydrationScript,
-  NoHydration,
-  Portal,
-  Properties,
-  RequestContext,
-  SVGElements,
-  SVGNamespace,
-  notSup as addEventListener,
-  notSup as assign,
-  notSup as className,
-  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,
-  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 };