solid-js 1.2.6 → 1.3.0-beta.3

package/web/dist/server.cjs

@@ -232,111 +232,205 @@ function stringifyString(str) {
   return result;
 }
 
+const REPLACE_SCRIPT = `function $df(e,y,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e,y)}`;
+const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
 function renderToString(code, options = {}) {
-  solidJs.sharedConfig.context = Object.assign({
+  let scripts = "";
+  solidJs.sharedConfig.context = {
     id: "",
     count: 0,
-    assets: []
-  }, options);
-  let html = resolveSSRNode(escape(code()));
-  return injectAssets(solidJs.sharedConfig.context.assets, html);
+    suspense: {},
+    assets: [],
+    nonce: options.nonce,
+    writeResource(id, p, error) {
+      if (error) scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    }
+  };
+  let html = injectAssets(solidJs.sharedConfig.context.assets, resolveSSRNode(escape(code())));
+  if (scripts.length) html = injectScripts(html, scripts, options.nonce);
+  return html;
 }
 function renderToStringAsync(code, options = {}) {
-  options = {
-    timeoutMs: 30000,
-    ...options
-  };
-  const context = solidJs.sharedConfig.context = Object.assign({
+  const {
+    nonce,
+    timeoutMs = 30000
+  } = options;
+  const context = solidJs.sharedConfig.context = {
     id: "",
     count: 0,
     resources: {},
     suspense: {},
     assets: [],
-    async: true
-  }, options);
-  const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), options.timeoutMs));
-  return Promise.race([solidJs.awaitSuspense(() => escape(code())), timeout]).then(res => {
-    let html = resolveSSRNode(res);
-    return injectAssets(context.assets, html);
+    async: true,
+    nonce
+  };
+  let scripts = "";
+  solidJs.sharedConfig.context.writeResource = (id, p, error) => {
+    if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`).catch(() => scripts += `_$HY.set("${id}", null);`);
+  };
+  const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  function asyncWrap(fn) {
+    return new Promise(resolve => {
+      const registry = new Set();
+      const cache = Object.create(null);
+      solidJs.sharedConfig.context.registerFragment = register;
+      const rendered = fn();
+      if (!registry.size) resolve(rendered);
+      function register(key) {
+        registry.add(key);
+        return (value = "", error) => {
+          cache[key] = value;
+          registry.delete(key);
+          if (error) return scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;
+          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 => {
+    let html = injectAssets(context.assets, resolveSSRNode(res));
+    if (scripts.length) html = injectScripts(html, scripts, nonce);
+    return html;
   });
 }
-function pipeToNodeWritable(code, writable, options = {}) {
+function renderToPipeableStream(code, options = {}) {
   const {
     nonce,
-    onReady = ({
-      startWriting
-    }) => startWriting(),
-    onComplete
+    onCompleteShell,
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
-  let count = 0,
-      completed = 0,
-      buffer = {
-    write(payload) {
-      tmp.push(payload);
+  const tasks = [];
+  const registry = new Map();
+  const checkEnd = () => {
+    if (!registry.size && !completed) {
+      onCompleteAll && onCompleteAll(result);
+      writable && writable.end();
+      completed = true;
     }
   };
-  const result = {
-    startWriting() {
-      buffer = writable;
-      tmp.forEach(chunk => buffer.write(chunk));
-      setTimeout(checkEnd);
-    },
-    write(c) {
-      writable.write(c);
-    },
-    abort() {
-      completed = count;
-      checkEnd();
+  const writeInitialScript = () => {
+    if (tasks.length && !completed) {
+      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
+      tasks.length = 0;
     }
+    scheduled = false;
   };
-  const checkEnd = () => {
-    if (completed === count) {
-      onComplete && onComplete(result);
-      writable.end();
+  let writable;
+  let completed = false;
+  let scriptFlushed = false;
+  let scheduled = true;
+  let buffer = {
+    write(payload) {
+      tmp.push(payload);
     }
   };
-  solidJs.sharedConfig.context = Object.assign({
+  solidJs.sharedConfig.context = {
     id: "",
     count: 0,
+    async: true,
     streaming: true,
+    dataOnly,
+    resources: {},
     suspense: {},
-    assets: []
-  }, options);
-  solidJs.sharedConfig.context.writeResource = (id, p) => {
-    count++;
-    Promise.resolve().then(() => buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HYDRATION.startResource("${id}")</script>`));
-    p.then(d => {
-      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HYDRATION.resolveResource("${id}", ${devalue(d)})</script>`);
-      ++completed && checkEnd();
-    });
+    assets: [],
+    nonce,
+    writeResource(id, p, error) {
+      if (!scheduled) {
+        Promise.resolve().then(writeInitialScript);
+        scheduled = true;
+      }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
+      tasks.push(`_$HY.init("${id}")`);
+      p.then(d => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+      }).catch(() => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`);
+      });
+    },
+    registerFragment(key) {
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
+        }
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
+        registry.delete(key);
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`);
+          scriptFlushed = true;
+        }
+        checkEnd();
+        return true;
+      };
+    }
   };
   let html = resolveSSRNode(escape(code()));
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
-  buffer.write(html);
-  onReady(result);
+  Promise.resolve().then(() => {
+    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    buffer.write(html);
+    tasks.length = 0;
+    scheduled = false;
+    onCompleteShell && onCompleteShell();
+  });
+  return {
+    pipe(w) {
+      buffer = writable = w;
+      tmp.forEach(chunk => buffer.write(chunk));
+      if (completed) writable.end();else setTimeout(checkEnd);
+    }
+  };
 }
 function pipeToWritable(code, writable, options = {}) {
   const {
     nonce,
-    onReady = ({
+    onCompleteShell = ({
       startWriting
     }) => startWriting(),
-    onComplete
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
+  const tasks = [];
   const writer = writable.getWriter();
   const encoder = new TextEncoder();
-  solidJs.sharedConfig.context = Object.assign({
-    id: "",
-    count: 0,
-    streaming: true,
-    suspense: {},
-    assets: []
-  }, options);
-  let count = 0,
-      completed = 0,
-      buffer = {
+  const registry = new Map();
+  const checkEnd = () => {
+    if (!registry.size && !completed) {
+      onCompleteAll && onCompleteAll(result);
+      writable && writable.close();
+      completed = true;
+    }
+  };
+  const writeInitialScript = () => {
+    if (tasks.length) {
+      buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`));
+      tasks.length = 0;
+    }
+    scheduled = false;
+  };
+  let completed = false;
+  let scriptFlushed = false;
+  let scheduled = true;
+  let buffer = {
     write(payload) {
       tmp.push(payload);
     }
@@ -351,28 +445,67 @@ function pipeToWritable(code, writable, options = {}) {
       writer.write(encoder.encode(c));
     },
     abort() {
-      completed = count;
+      registry.clear();
       checkEnd();
     }
   };
-  const checkEnd = () => {
-    if (completed === count) {
-      onComplete && onComplete(result);
-      writable.close();
+  solidJs.sharedConfig.context = {
+    id: "",
+    count: 0,
+    async: true,
+    streaming: true,
+    dataOnly,
+    resources: {},
+    suspense: {},
+    assets: [],
+    nonce,
+    writeResource(id, p, error) {
+      if (!scheduled) {
+        Promise.resolve().then(writeInitialScript);
+        scheduled = true;
+      }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
+      tasks.push(`_$HY.init("${id}")`);
+      p.then(d => {
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+      }).catch(() => {
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`));
+      });
+    },
+    registerFragment(key) {
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
+        }
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
+        registry.delete(key);
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(encoder.encode(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`));
+          scriptFlushed = true;
+        }
+        checkEnd();
+        return true;
+      };
     }
   };
-  solidJs.sharedConfig.context.writeResource = (id, p) => {
-    count++;
-    Promise.resolve().then(() => buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HYDRATION.startResource("${id}")</script>`)));
-    p.then(d => {
-      buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HYDRATION.resolveResource("${id}", ${devalue(d)})</script>`));
-      ++completed && checkEnd();
-    });
-  };
   let html = resolveSSRNode(escape(code()));
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
-  buffer.write(encoder.encode(html));
-  onReady(result);
+  Promise.resolve().then(() => {
+    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    buffer.write(encoder.encode(html));
+    tasks.length = 0;
+    scheduled = false;
+    onCompleteShell && onCompleteShell(result);
+  });
+}
+function pipeToNodeWritable(code, writable, options = {}) {
+  renderToPipeableStream(code, options).pipe(writable);
 }
 function Assets(props) {
   solidJs.sharedConfig.context.assets.push(() => NoHydration({
@@ -382,15 +515,21 @@ function Assets(props) {
   }));
   return ssr(`%%$${solidJs.sharedConfig.context.assets.length - 1}%%`);
 }
-function HydrationScript() {
-  solidJs.sharedConfig.context.assets.push(generateHydrationScript);
+function HydrationScript(props) {
+  const {
+    nonce
+  } = solidJs.sharedConfig.context;
+  solidJs.sharedConfig.context.assets.push(() => generateHydrationScript({
+    nonce,
+    ...props
+  }));
   return ssr(`%%$${solidJs.sharedConfig.context.assets.length - 1}%%`);
 }
 function NoHydration(props) {
   const c = solidJs.sharedConfig.context;
-  delete solidJs.sharedConfig.context;
+  c.noHydrate = true;
   const children = props.children;
-  solidJs.sharedConfig.context = c;
+  c.noHydrate = false;
   return children;
 }
 function ssr(t, ...nodes) {
@@ -518,26 +657,13 @@ function resolveSSRNode(node) {
 }
 function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
-  return hydrate && `${hydrate.id}${hydrate.count++}`;
+  return hydrate && !hydrate.noHydrate && `${hydrate.id}${hydrate.count++}`;
 }
-function generateHydrationScript() {
-  const {
-    nonce,
-    streaming,
-    resources,
-    eventNames = ["click", "input"]
-  } = solidJs.sharedConfig.context;
-  let s = `<script${nonce ? ` nonce="${nonce}"` : ""}>(()=>{_$HYDRATION={events:[],completed:new WeakSet};const t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),e=e=>{let o=e.composedPath&&e.composedPath()[0]||e.target,s=t(o);s&&!_$HYDRATION.completed.has(s)&&_$HYDRATION.events.push([s,e])};["${eventNames.join('","')}"].forEach(t=>document.addEventListener(t,e))})();`;
-  if (streaming) {
-    s += `(()=>{const e=_$HYDRATION,o={};e.startResource=e=>{let r;o[e]=[new Promise(e=>r=e),r]},e.resolveResource=(e,r)=>{const n=o[e];if(!n)return o[e]=[r];n[1](r)},e.loadResource=e=>{const r=o[e];if(r)return r[0]}})();`;
-  }
-  if (resources) {
-    s += `_$HYDRATION.resources = ${devalue(Object.keys(resources).reduce((r, k) => {
-      r[k] = resources[k].data;
-      return r;
-    }, {}))};`;
-  }
-  return s + `</script>`;
+function generateHydrationScript({
+  eventNames = ["click", "input"],
+  nonce
+}) {
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>((e,t,o={})=>{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 n=o.composedPath&&o.composedPath()[0]||o.target,s=t(n);s&&!e.completed.has(s)&&e.events.push([s,o])})))),e.init=(e,t)=>{o[e]=[new Promise((e=>t=e)),t]},e.set=(e,t,n)=>{if(!(n=o[e]))return o[e]=[t];n[1](t)},e.unset=(e)=>{delete o[e]},e.load=(e,t)=>{if(t=o[e])return t[0]}})(window._$HY||(_$HY={events:[],completed:new WeakSet}))</script><!xs>`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -545,6 +671,26 @@ function injectAssets(assets, html) {
   }
   return html;
 }
+function injectScripts(html, scripts, nonce) {
+  const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
+  const index = html.indexOf("<!xs>");
+  if (index > -1) {
+    return html.slice(0, index) + tag + html.slice(index);
+  }
+  return html + tag;
+}
+function serializeError(error) {
+  return error.message ? `new Error(${devalue(error.message)})` : devalue(error);
+}
+function waitForFragments(registry, key) {
+  for (const k of [...registry.keys()].reverse()) {
+    if (key.startsWith(k)) {
+      registry.get(k).push(key);
+      return true;
+    }
+  }
+  return false;
+}
 
 const isServer = true;
 function spread() {}
@@ -634,6 +780,7 @@ exports.getHydrationKey = getHydrationKey;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;
+exports.renderToPipeableStream = renderToPipeableStream;
 exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;