solid-js 1.2.4 → 1.3.0-beta.2

package/web/dist/server.cjs

@@ -232,111 +232,160 @@ function stringifyString(str) {
   return result;
 }
 
+const REPLACE_SCRIPT = `function $df(e,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e)}`;
 function renderToString(code, options = {}) {
-  solidJs.sharedConfig.context = Object.assign({
+  solidJs.sharedConfig.context = {
     id: "",
     count: 0,
-    assets: []
-  }, options);
+    suspense: {},
+    assets: [],
+    nonce: options.nonce
+  };
   let html = resolveSSRNode(escape(code()));
   return injectAssets(solidJs.sharedConfig.context.assets, 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) => p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`);
+  const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  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
   } = options;
   const tmp = [];
-  let count = 0,
-      completed = 0,
-      buffer = {
-    write(payload) {
-      tmp.push(payload);
+  const tasks = [];
+  const registry = new Set();
+  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) {
+      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,
+    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) {
+      if (!scheduled) {
+        Promise.resolve().then(writeInitialScript);
+        scheduled = true;
+      }
+      tasks.push(`_$HY.init("${id}")`);
+      p.then(d => {
+        buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+      });
+    },
+    registerFragment(key) {
+      registry.add(key);
+      Promise.resolve().then(() => {
+        if (registry.has(key)) {
+          if (!scheduled) {
+            Promise.resolve().then(writeInitialScript);
+            scheduled = true;
+          }
+          tasks.push(`_$HY.init("${key}")`);
+        }
+      });
+      return value => {
+        registry.delete(key);
+        if (!value) return;
+        buffer.write(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`);
+        scriptFlushed = true;
+        checkEnd();
+      };
+    }
   };
   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
   } = 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 Set();
+  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 +400,61 @@ 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,
+    resources: {},
+    suspense: {},
+    assets: [],
+    nonce,
+    writeResource(id, p) {
+      if (!scheduled) {
+        Promise.resolve().then(writeInitialScript);
+        scheduled = true;
+      }
+      tasks.push(`_$HY.init("${id}")`);
+      p.then(d => {
+        buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+      });
+    },
+    registerFragment(key) {
+      registry.add(key);
+      Promise.resolve().then(() => {
+        if (registry.has(key)) {
+          if (!scheduled) {
+            Promise.resolve().then(writeInitialScript);
+            scheduled = true;
+          }
+          tasks.push(`_$HY.init("${key}")`);
+        }
+      });
+      return value => {
+        registry.delete(key);
+        if (!value) return;
+        buffer.write(encoder.encode(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`));
+        scriptFlushed = true;
+        checkEnd();
+      };
     }
   };
-  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 +464,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 +606,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.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 +620,41 @@ 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;
+}
+const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
+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 => {
+        if (value) cache[key] = value;
+        registry.delete(key);
+        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);
+        });
+      };
+    }
+  });
+}
 
 const isServer = true;
 function spread() {}
@@ -634,6 +744,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;