solid-js 1.7.12 → 1.8.0-beta.1

package/web/dist/server.cjs

@@ -14,27 +14,52 @@ const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
 const ES2017FLAG = seroval.Feature.AggregateError
 | seroval.Feature.BigInt
 | seroval.Feature.BigIntTypedArray;
-function stringify(data) {
-  return seroval.serialize(data, {
-    disabledFeatures: ES2017FLAG
+const GLOBAL_IDENTIFIER = '_$HY.r';
+function createSerializer({
+  onData,
+  onDone,
+  scopeId
+}) {
+  return new seroval.Serializer({
+    scopeId,
+    globalIdentifier: GLOBAL_IDENTIFIER,
+    disabledFeatures: ES2017FLAG,
+    onData,
+    onDone
   });
 }
+function getGlobalHeaderScript() {
+  return seroval.GLOBAL_CONTEXT_API_SCRIPT;
+}
+function getLocalHeaderScript(id) {
+  return seroval.getCrossReferenceHeader(id);
+}
 
 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,t,o,d){if(t=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;_$HY.done?o.remove():o.replaceWith(t.content)}t.remove(),_$HY.set(e,n),_$HY.fe(e)}`;
+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;
   let scripts = "";
+  const serializer = createSerializer({
+    scopeId: renderId,
+    onData(script) {
+      if (!scripts) {
+        scripts = getLocalHeaderScript(renderId);
+      }
+      scripts += script;
+    }
+  });
   solidJs.sharedConfig.context = {
-    id: options.renderId || "",
+    id: renderId || "",
     count: 0,
     suspense: {},
     lazy: {},
     assets: [],
     nonce: options.nonce,
-    writeResource(id, p, error) {
-      if (solidJs.sharedConfig.context.noHydrate) return;
-      if (error) return scripts += `_$HY.set("${id}", ${stringify(p)});`;
-      scripts += `_$HY.set("${id}", ${stringify(p)});`;
+    serialize(id, p) {
+      !solidJs.sharedConfig.context.noHydrate && serializer.write(id, p);
     }
   };
   let html = solidJs.createRoot(d => {
@@ -42,6 +67,7 @@ function renderToString(code, options = {}) {
     return resolveSSRNode(escape(code()));
   });
   solidJs.sharedConfig.context.noHydrate = true;
+  serializer.close();
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
@@ -67,9 +93,16 @@ function renderToStream(code, options = {}) {
     renderId
   } = options;
   let dispose;
-  const blockingResources = [];
-  const registry = new Map();
-  const dedupe = new WeakMap();
+  const blockingPromises = [];
+  const pushTask = task => {
+    if (!tasks && !firstFlushed) {
+      tasks = getLocalHeaderScript(renderId);
+    }
+    tasks += task + ";";
+    if (!timer && firstFlushed) {
+      timer = setTimeout(writeTasks);
+    }
+  };
   const checkEnd = () => {
     if (!registry.size && !completed) {
       writeTasks();
@@ -83,19 +116,24 @@ function renderToStream(code, options = {}) {
       setTimeout(dispose);
     }
   };
-  const pushTask = task => {
-    tasks += task + ";";
-    if (!scheduled && firstFlushed) {
-      Promise.resolve().then(writeTasks);
-      scheduled = true;
+  const serializer = createSerializer({
+    scopeId: options.renderId,
+    onData: pushTask,
+    onDone: checkEnd
+  });
+  const flushEnd = () => {
+    if (!registry.size) {
+      serializer.flush();
     }
   };
+  const registry = new Map();
   const writeTasks = () => {
     if (tasks.length && !completed && firstFlushed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
       tasks = "";
     }
-    scheduled = false;
+    timer && clearTimeout(timer);
+    timer = null;
   };
   let context;
   let writable;
@@ -104,7 +142,7 @@ function renderToStream(code, options = {}) {
   let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
-  let scheduled = true;
+  let timer = null;
   let buffer = {
     write(payload) {
       tmp += payload;
@@ -120,7 +158,7 @@ function renderToStream(code, options = {}) {
     assets: [],
     nonce,
     block(p) {
-      if (!firstFlushed) blockingResources.push(p);
+      if (!firstFlushed) blockingPromises.push(p);
     },
     replace(id, payloadFn) {
       if (firstFlushed) return;
@@ -130,40 +168,51 @@ function renderToStream(code, options = {}) {
       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) {
+    serialize(id, p, wait) {
       const serverOnly = solidJs.sharedConfig.context.noHydrate;
-      if (error) return !serverOnly && pushTask(serializeSet(dedupe, id, p));
-      if (!p || typeof p !== "object" || !("then" in p)) return !serverOnly && pushTask(serializeSet(dedupe, id, p));
-      if (!firstFlushed) wait && blockingResources.push(p);else !serverOnly && pushTask(`_$HY.init("${id}")`);
-      if (serverOnly) return;
-      p.then(d => {
-        !completed && pushTask(serializeSet(dedupe, id, d));
-      }).catch(() => {
-        !completed && pushTask(`_$HY.set("${id}", {})`);
-      });
+      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);
+        });
+      } else if (!serverOnly) serializer.write(id, p);
     },
     registerFragment(key) {
       if (!registry.has(key)) {
-        registry.set(key, []);
-        firstFlushed && pushTask(`_$HY.init("${key}")`);
+        let resolve, reject;
+        const p = new Promise((r, rej) => (resolve = r, reject = rej));
+        registry.set(key, {
+          resolve,
+          reject
+        });
+        serializer.write(key, p);
       }
       return (value, error) => {
         if (registry.has(key)) {
-          const keys = registry.get(key);
+          const {
+            resolve,
+            reject
+          } = registry.get(key);
           registry.delete(key);
-          if (waitForFragments(registry, key)) return;
+          if (waitForFragments(registry, key)) {
+            resolve(true);
+            return;
+          }
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              error && pushTask(serializeSet(dedupe, key, error));
+              error ? reject(error) : resolve(true);
             } else {
               buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + stringify(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              resolve(true);
               scriptFlushed = true;
             }
           }
         }
-        if (!registry.size) Promise.resolve().then(checkEnd);
+        if (!registry.size) Promise.resolve().then(flushEnd);
         return firstFlushed;
       };
     }
@@ -176,14 +225,9 @@ function renderToStream(code, options = {}) {
     solidJs.sharedConfig.context = context;
     context.noHydrate = true;
     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 = "";
-    scheduled = false;
     onCompleteShell && onCompleteShell({
       write(v) {
         !completed && buffer.write(v);
@@ -203,19 +247,19 @@ function renderToStream(code, options = {}) {
           complete();
         };
       } else onCompleteAll = complete;
-      if (!registry.size) Promise.resolve().then(checkEnd);
+      if (!registry.size) Promise.resolve().then(flushEnd);
     },
     pipe(w) {
-      Promise.allSettled(blockingResources).then(() => {
+      Promise.allSettled(blockingPromises).then(() => {
         doShell();
         buffer = writable = w;
         buffer.write(tmp);
         firstFlushed = true;
-        if (completed) writable.end();else setTimeout(checkEnd);
+        if (completed) writable.end();else setTimeout(flushEnd);
       });
     },
     pipeTo(w) {
-      return Promise.allSettled(blockingResources).then(() => {
+      return Promise.allSettled(blockingPromises).then(() => {
         doShell();
         const encoder = new TextEncoder();
         const writer = w.getWriter();
@@ -235,7 +279,7 @@ function renderToStream(code, options = {}) {
         };
         buffer.write(tmp);
         firstFlushed = true;
-        if (completed) writable.end();else setTimeout(checkEnd);
+        if (completed) writable.end();else setTimeout(flushEnd);
         return p;
       });
     }
@@ -416,7 +460,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>(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=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))))})(window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise((e=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}));</script><!--xs-->`;
+  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=>{let a=o.composedPath&&o.composedPath()[0]||o.target,s=t(a);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});${getGlobalHeaderScript()}</script><!--xs-->`;
 }
 function Hydration(props) {
   if (!solidJs.sharedConfig.context.noHydrate) return props.children;
@@ -451,19 +495,10 @@ function injectScripts(html, scripts, nonce) {
 }
 function waitForFragments(registry, key) {
   for (const k of [...registry.keys()].reverse()) {
-    if (key.startsWith(k)) {
-      registry.get(k).push(key);
-      return true;
-    }
+    if (key.startsWith(k)) return true;
   }
   return false;
 }
-function serializeSet(registry, key, value) {
-  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}", ${stringify(value)})`;
-}
 function replacePlaceholder(html, key, value) {
   const marker = `<template id="pl-${key}">`;
   const close = `<!--pl-${key}-->`;
@@ -633,5 +668,4 @@ exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
-exports.stringify = stringify;
 exports.useAssets = useAssets;