solid-js 1.4.8 → 1.5.0-beta.2

package/web/dist/server.cjs

@@ -7,6 +7,7 @@ var solidJs = require('solid-js');
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -232,8 +233,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
-const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   solidJs.sharedConfig.context = {
@@ -252,77 +252,25 @@ function renderToString(code, options = {}) {
   return html;
 }
 function renderToStringAsync(code, options = {}) {
-  let scripts = "";
   const {
-    nonce,
-    renderId,
     timeoutMs = 30000
   } = options;
-  const dedupe = new WeakMap();
-  const context = solidJs.sharedConfig.context = {
-    id: renderId || "",
-    count: 0,
-    resources: {},
-    suspense: {},
-    assets: [],
-    async: true,
-    nonce,
-    writeResource(id, p, error) {
-      if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p) + ";";
-      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
-    }
-  };
   let timeoutHandle;
   const timeout = new Promise((_, reject) => {
     timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
   });
-  function asyncWrap(fn) {
-    return new Promise(resolve => {
-      const registry = new Map();
-      const cache = Object.create(null);
-      solidJs.sharedConfig.context.registerFragment = register;
-      const rendered = fn();
-      if (!registry.size) resolve(rendered);
-      function register(key) {
-        if (!registry.has(key)) registry.set(key, []);
-        return (value = "", error) => {
-          if (!registry.has(key)) return;
-          cache[key] = value;
-          registry.delete(key);
-          if (waitForFragments(registry, key)) return;
-          if (error) scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;else scripts += `_$HY.set("${key}", null);`;
-          if (!registry.size) Promise.resolve().then(() => {
-            let source = resolveSSRNode(rendered);
-            let final = "";
-            let match;
-            while (match = source.match(FRAGMENT_REPLACE)) {
-              final += source.substring(0, match.index);
-              source = cache[match[1]] + source.substring(match.index + match[0].length);
-            }
-            resolve(final + source);
-          });
-          return true;
-        };
-      }
-    });
-  }
-  return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+  return Promise.race([renderToStream(code, options), timeout]).then(html => {
     clearTimeout(timeoutHandle);
-    let html = injectAssets(context.assets, resolveSSRNode(res));
-    if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
 function renderToStream(code, options = {}) {
-  const {
+  let {
     nonce,
     onCompleteShell,
     onCompleteAll,
     renderId
   } = options;
-  const tmp = [];
-  const tasks = [];
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -339,42 +287,52 @@ function renderToStream(code, options = {}) {
     }
   };
   const pushTask = task => {
-    tasks.push(task);
-    if (!scheduled) {
+    tasks += task + ";";
+    if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
     }
   };
   const writeTasks = () => {
-    if (tasks.length && !completed) {
-      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
-      tasks.length = 0;
+    if (tasks.length && !completed && firstFlushed) {
+      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
+      tasks = "";
     }
     scheduled = false;
   };
+  let context;
   let writable;
+  let tmp = "";
+  let tasks = "";
   let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
   let buffer = {
     write(payload) {
-      tmp.push(payload);
+      tmp += payload;
     }
   };
-  solidJs.sharedConfig.context = {
+  solidJs.sharedConfig.context = context = {
     id: renderId || "",
     count: 0,
     async: true,
-    streaming: true,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
+    replace(id, payloadFn) {
+      if (firstFlushed) return;
+      const placeholder = `<!${id}>`;
+      const first = html.indexOf(placeholder);
+      if (first === -1) return;
+      const last = html.indexOf(`<!/${id}>`, first + placeholder.length);
+      html = html.replace(html.slice(first, last + placeholder.length + 1), resolveSSRNode(payloadFn()));
+    },
     writeResource(id, p, error, wait) {
-      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (error) return pushTask(serializeSet(dedupe, id, p, serializeError));
       if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
-      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
+      if (!firstFlushed) wait && blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
         !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
@@ -384,7 +342,7 @@ function renderToStream(code, options = {}) {
     registerFragment(key) {
       if (!registry.has(key)) {
         registry.set(key, []);
-        pushTask(`_$HY.init("${key}")`);
+        firstFlushed && pushTask(`_$HY.init("${key}")`);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -394,7 +352,7 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+              error && pushTask(serializeSet(dedupe, key, error, serializeError));
             } else {
               buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
               pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
@@ -402,17 +360,21 @@ function renderToStream(code, options = {}) {
             }
           }
         }
-        if (firstFlushed) checkEnd();
-        return true;
+        Promise.resolve().then(checkEnd);
+        return firstFlushed;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
   function doShell() {
-    html = injectAssets(solidJs.sharedConfig.context.assets, html);
-    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    html = injectAssets(context.assets, html);
+    for (const key in context.resources) {
+      if (!("data" in context.resources[key] || context.resources[key].ref[0].error)) pushTask(`_$HY.init("${key}")`);
+    }
+    for (const key of registry.keys()) pushTask(`_$HY.init("${key}")`);
+    if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
-    tasks.length = 0;
+    tasks = "";
     scheduled = false;
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -421,11 +383,25 @@ function renderToStream(code, options = {}) {
     });
   }
   return {
+    then(fn) {
+      function complete() {
+        doShell();
+        fn(tmp);
+      }
+      if (onCompleteAll) {
+        ogComplete = onCompleteAll;
+        onCompleteAll = options => {
+          ogComplete(options);
+          complete();
+        };
+      } else onCompleteAll = complete;
+      checkEnd();
+    },
     pipe(w) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
         buffer = writable = w;
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -446,7 +422,7 @@ function renderToStream(code, options = {}) {
             writer.write(encoder.encode(payload));
           }
         };
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -481,12 +457,12 @@ function NoHydration(props) {
 function ssr(t, ...nodes) {
   if (nodes.length) {
     let result = "";
-    for (let i = 0; i < t.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
       result += t[i];
       const node = nodes[i];
       if (node !== undefined) result += resolveSSRNode(node);
     }
-    t = result;
+    t = result + t[nodes.length];
   }
   return {
     t
@@ -517,16 +493,15 @@ function ssrStyle(value) {
   }
   return result;
 }
-function ssrSpread(props, isSVG, skipChildren) {
-  let result = "";
-  if (props == null) return results;
+function ssrElement(tag, props, children, needsId) {
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
-    if (prop === "children") {
-      !skipChildren && console.warn(`SSR currently does not support spread children.`);
+    if (ChildProperties.has(prop) && children === undefined) {
+      children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -546,7 +521,9 @@ function ssrSpread(props, isSVG, skipChildren) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  return result;
+  return {
+    t: result + `>${resolveSSRNode(children)}</${tag}>`
+  };
 }
 function ssrAttribute(key, value, isBoolean) {
   return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
@@ -606,7 +583,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -618,7 +595,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=(t,o)=>{if(o=e.r[t])return o[0]};</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -658,11 +635,11 @@ function waitForFragments(registry, key) {
   }
   return false;
 }
-function serializeSet(registry, key, value) {
+function serializeSet(registry, key, value, serializer = devalue) {
   const exist = registry.get(value);
   if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)})`;
+  return `_$HY.set("${key}", ${serializer(value)})`;
 }
 function replacePlaceholder(html, key, value) {
   const nextRegex = /(<[/]?span[^>]*>)/g;
@@ -722,8 +699,7 @@ function Dynamic(props) {
         t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
-      const [local, sOthers] = solidJs.splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
+      return ssrElement(comp, others, undefined, true);
     }
   }
 }
@@ -790,6 +766,6 @@ exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
+exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
-exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;

package/web/dist/server.js

@@ -4,6 +4,7 @@ export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch,
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -229,8 +230,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
-const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -249,77 +249,25 @@ function renderToString(code, options = {}) {
   return html;
 }
 function renderToStringAsync(code, options = {}) {
-  let scripts = "";
   const {
-    nonce,
-    renderId,
     timeoutMs = 30000
   } = options;
-  const dedupe = new WeakMap();
-  const context = sharedConfig.context = {
-    id: renderId || "",
-    count: 0,
-    resources: {},
-    suspense: {},
-    assets: [],
-    async: true,
-    nonce,
-    writeResource(id, p, error) {
-      if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p) + ";";
-      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
-    }
-  };
   let timeoutHandle;
   const timeout = new Promise((_, reject) => {
     timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
   });
-  function asyncWrap(fn) {
-    return new Promise(resolve => {
-      const registry = new Map();
-      const cache = Object.create(null);
-      sharedConfig.context.registerFragment = register;
-      const rendered = fn();
-      if (!registry.size) resolve(rendered);
-      function register(key) {
-        if (!registry.has(key)) registry.set(key, []);
-        return (value = "", error) => {
-          if (!registry.has(key)) return;
-          cache[key] = value;
-          registry.delete(key);
-          if (waitForFragments(registry, key)) return;
-          if (error) scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;else scripts += `_$HY.set("${key}", null);`;
-          if (!registry.size) Promise.resolve().then(() => {
-            let source = resolveSSRNode(rendered);
-            let final = "";
-            let match;
-            while (match = source.match(FRAGMENT_REPLACE)) {
-              final += source.substring(0, match.index);
-              source = cache[match[1]] + source.substring(match.index + match[0].length);
-            }
-            resolve(final + source);
-          });
-          return true;
-        };
-      }
-    });
-  }
-  return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+  return Promise.race([renderToStream(code, options), timeout]).then(html => {
     clearTimeout(timeoutHandle);
-    let html = injectAssets(context.assets, resolveSSRNode(res));
-    if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
 function renderToStream(code, options = {}) {
-  const {
+  let {
     nonce,
     onCompleteShell,
     onCompleteAll,
     renderId
   } = options;
-  const tmp = [];
-  const tasks = [];
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -336,42 +284,52 @@ function renderToStream(code, options = {}) {
     }
   };
   const pushTask = task => {
-    tasks.push(task);
-    if (!scheduled) {
+    tasks += task + ";";
+    if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
     }
   };
   const writeTasks = () => {
-    if (tasks.length && !completed) {
-      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
-      tasks.length = 0;
+    if (tasks.length && !completed && firstFlushed) {
+      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
+      tasks = "";
     }
     scheduled = false;
   };
+  let context;
   let writable;
+  let tmp = "";
+  let tasks = "";
   let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
   let buffer = {
     write(payload) {
-      tmp.push(payload);
+      tmp += payload;
     }
   };
-  sharedConfig.context = {
+  sharedConfig.context = context = {
     id: renderId || "",
     count: 0,
     async: true,
-    streaming: true,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
+    replace(id, payloadFn) {
+      if (firstFlushed) return;
+      const placeholder = `<!${id}>`;
+      const first = html.indexOf(placeholder);
+      if (first === -1) return;
+      const last = html.indexOf(`<!/${id}>`, first + placeholder.length);
+      html = html.replace(html.slice(first, last + placeholder.length + 1), resolveSSRNode(payloadFn()));
+    },
     writeResource(id, p, error, wait) {
-      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (error) return pushTask(serializeSet(dedupe, id, p, serializeError));
       if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
-      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
+      if (!firstFlushed) wait && blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
         !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
@@ -381,7 +339,7 @@ function renderToStream(code, options = {}) {
     registerFragment(key) {
       if (!registry.has(key)) {
         registry.set(key, []);
-        pushTask(`_$HY.init("${key}")`);
+        firstFlushed && pushTask(`_$HY.init("${key}")`);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -391,7 +349,7 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+              error && pushTask(serializeSet(dedupe, key, error, serializeError));
             } else {
               buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
               pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
@@ -399,17 +357,21 @@ function renderToStream(code, options = {}) {
             }
           }
         }
-        if (firstFlushed) checkEnd();
-        return true;
+        Promise.resolve().then(checkEnd);
+        return firstFlushed;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
   function doShell() {
-    html = injectAssets(sharedConfig.context.assets, html);
-    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    html = injectAssets(context.assets, html);
+    for (const key in context.resources) {
+      if (!("data" in context.resources[key] || context.resources[key].ref[0].error)) pushTask(`_$HY.init("${key}")`);
+    }
+    for (const key of registry.keys()) pushTask(`_$HY.init("${key}")`);
+    if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
-    tasks.length = 0;
+    tasks = "";
     scheduled = false;
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -418,11 +380,25 @@ function renderToStream(code, options = {}) {
     });
   }
   return {
+    then(fn) {
+      function complete() {
+        doShell();
+        fn(tmp);
+      }
+      if (onCompleteAll) {
+        ogComplete = onCompleteAll;
+        onCompleteAll = options => {
+          ogComplete(options);
+          complete();
+        };
+      } else onCompleteAll = complete;
+      checkEnd();
+    },
     pipe(w) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
         buffer = writable = w;
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -443,7 +419,7 @@ function renderToStream(code, options = {}) {
             writer.write(encoder.encode(payload));
           }
         };
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -478,12 +454,12 @@ function NoHydration(props) {
 function ssr(t, ...nodes) {
   if (nodes.length) {
     let result = "";
-    for (let i = 0; i < t.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
       result += t[i];
       const node = nodes[i];
       if (node !== undefined) result += resolveSSRNode(node);
     }
-    t = result;
+    t = result + t[nodes.length];
   }
   return {
     t
@@ -514,16 +490,15 @@ function ssrStyle(value) {
   }
   return result;
 }
-function ssrSpread(props, isSVG, skipChildren) {
-  let result = "";
-  if (props == null) return results;
+function ssrElement(tag, props, children, needsId) {
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
-    if (prop === "children") {
-      !skipChildren && console.warn(`SSR currently does not support spread children.`);
+    if (ChildProperties.has(prop) && children === undefined) {
+      children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -543,7 +518,9 @@ function ssrSpread(props, isSVG, skipChildren) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  return result;
+  return {
+    t: result + `>${resolveSSRNode(children)}</${tag}>`
+  };
 }
 function ssrAttribute(key, value, isBoolean) {
   return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
@@ -603,7 +580,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -615,7 +592,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=(t,o)=>{if(o=e.r[t])return o[0]};</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -655,11 +632,11 @@ function waitForFragments(registry, key) {
   }
   return false;
 }
-function serializeSet(registry, key, value) {
+function serializeSet(registry, key, value, serializer = devalue) {
   const exist = registry.get(value);
   if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)})`;
+  return `_$HY.set("${key}", ${serializer(value)})`;
 }
 function replacePlaceholder(html, key, value) {
   const nextRegex = /(<[/]?span[^>]*>)/g;
@@ -719,8 +696,7 @@ function Dynamic(props) {
         t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
-      const [local, sOthers] = splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
+      return ssrElement(comp, others, undefined, true);
     }
   }
 }
@@ -728,4 +704,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle };