solid-js 1.2.5 → 1.3.0-beta.10

package/web/dist/dev.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, createRenderEffect, sharedConfig, createSignal, onCleanup, splitProps, untrack } from 'solid-js';
+import { createMemo, createRoot, createRenderEffect, sharedConfig, enableHydration, createSignal, onCleanup, splitProps, untrack } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, mergeProps } from '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"];
@@ -95,7 +95,7 @@ function render(code, element, init) {
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
   });
   return () => {
     disposer();
@@ -215,28 +215,21 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
     prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
-function hydrate(code, element) {
-  sharedConfig.resources = globalThis._$HYDRATION.resources;
-  sharedConfig.completed = globalThis._$HYDRATION.completed;
-  sharedConfig.events = globalThis._$HYDRATION.events;
+function hydrate$1(code, element, options = {}) {
+  sharedConfig.completed = globalThis._$HY.completed;
+  sharedConfig.events = globalThis._$HY.events;
+  sharedConfig.load = globalThis._$HY.load;
+  sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.registry = new Map();
   sharedConfig.context = {
-    id: "",
-    count: 0,
-    loadResource: globalThis._$HYDRATION.loadResource
+    id: options.renderId || "",
+    count: 0
   };
-  sharedConfig.registry = new Map();
-  gatherHydratable(element);
+  gatherHydratable(element, options.renderId);
   const dispose = render(code, element, [...element.childNodes]);
   sharedConfig.context = null;
   return dispose;
 }
-function gatherHydratable(element) {
-  const templates = element.querySelectorAll(`*[data-hk]`);
-  for (let i = 0; i < templates.length; i++) {
-    const node = templates[i];
-    sharedConfig.registry.set(node.getAttribute("data-hk"), node);
-  }
-}
 function getNextElement(template) {
   let node, key;
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
@@ -330,7 +323,7 @@ function eventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node;
+      return node || document;
     }
   });
   while (node !== null) {
@@ -385,7 +378,12 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (sharedConfig.context && current && current.length) return current;
+    if (sharedConfig.context && current && current.length) {
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
+      }
+      return current;
+    }
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
       if (multi) return current;
@@ -402,6 +400,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value instanceof Node) {
+    if (sharedConfig.context) return current = value.parentNode ? value : current;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
       cleanChildren(parent, current, null, value);
@@ -453,6 +452,14 @@ function cleanChildren(parent, current, marker, replacement) {
   } else parent.insertBefore(node, marker);
   return [node];
 }
+function gatherHydratable(element, root) {
+  const templates = element.querySelectorAll(`*[data-hk]`);
+  for (let i = 0; i < templates.length; i++) {
+    const node = templates[i];
+    const key = node.getAttribute("data-hk");
+    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+  }
+}
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
@@ -466,8 +473,7 @@ function NoHydration(props) {
 
 function renderToString(fn, options) {}
 function renderToStringAsync(fn, options) {}
-function pipeToNodeWritable(fn, writable, options) {}
-function pipeToWritable(fn, writable, options) {}
+function renderToStream(fn, options) {}
 function ssr(template, ...nodes) {}
 function resolveSSRNode(node) {}
 function ssrClassList(value) {}
@@ -483,6 +489,10 @@ const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
 }
+const hydrate = (...args) => {
+  enableHydration();
+  return hydrate$1(...args);
+};
 function Portal(props) {
   const {
     useShadow
@@ -536,4 +546,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, gatherHydratable, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, insert, isServer, memo, pipeToNodeWritable, pipeToWritable, render, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/dist/server.cjs

@@ -232,147 +232,191 @@ 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({
-    id: "",
+  let scripts = "";
+  solidJs.sharedConfig.context = {
+    id: options.renderId || "",
     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) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+      scripts += `_$HY.set("${id}", ${devalue(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({
-    id: "",
+  let scripts = "";
+  const {
+    nonce,
+    renderId,
+    timeoutMs = 30000
+  } = options;
+  const context = solidJs.sharedConfig.context = {
+    id: renderId || "",
     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,
+    writeResource(id, p, error) {
+      if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+      if (typeof p !== "object" || !("then" in p)) return scripts += `_$HY.set("${id}", ${devalue(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)}));`;
+          scripts += `_$HY.set("${key}", true);`;
+          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 renderToStream(code, options = {}) {
   const {
     nonce,
-    onReady = ({
-      startWriting
-    }) => startWriting(),
-    onComplete
+    onCompleteShell,
+    onCompleteAll,
+    renderId
   } = 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({
-    id: "",
+  solidJs.sharedConfig.context = {
+    id: renderId || "",
     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();
-    });
-  };
-  let html = resolveSSRNode(escape(code()));
-  html = injectAssets(solidJs.sharedConfig.context.assets, html);
-  buffer.write(html);
-  onReady(result);
-}
-function pipeToWritable(code, writable, options = {}) {
-  const {
+    assets: [],
     nonce,
-    onReady = ({
-      startWriting
-    }) => startWriting(),
-    onComplete
-  } = options;
-  const tmp = [];
-  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 = {
-    write(payload) {
-      tmp.push(payload);
-    }
-  };
-  const result = {
-    startWriting() {
-      buffer = writer;
-      tmp.forEach(chunk => writer.write(chunk));
-      setTimeout(checkEnd);
-    },
-    write(c) {
-      writer.write(encoder.encode(c));
+    writeResource(id, p, error) {
+      if (!scheduled) {
+        Promise.resolve().then(writeInitialScript);
+        scheduled = true;
+      }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (typeof p !== "object" || !("then" in p)) return tasks.push(`_$HY.set("${id}", ${devalue(p)})`);
+      tasks.push(`_$HY.init("${id}")`);
+      p.then(d => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+      }).catch(err => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null, ${serializeError(err)})</script>`);
+      });
     },
-    abort() {
-      completed = count;
-      checkEnd();
-    }
-  };
-  const checkEnd = () => {
-    if (completed === count) {
-      onComplete && onComplete(result);
-      writable.close();
+    registerFragment(key) {
+      registry.set(key, []);
+      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;
+      };
     }
   };
-  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(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);
+    },
+    pipeTo(w) {
+      const encoder = new TextEncoder();
+      const writer = w.getWriter();
+      writable = {
+        end() {
+          writer.releaseLock();
+          w.close();
+        }
+      };
+      buffer = {
+        write(payload) {
+          writer.write(encoder.encode(payload));
+        }
+      };
+      tmp.forEach(chunk => buffer.write(chunk));
+      if (completed) writable.end();else setTimeout(checkEnd);
+    }
+  };
 }
 function Assets(props) {
   solidJs.sharedConfig.context.assets.push(() => NoHydration({
@@ -382,15 +426,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 +568,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 s=o.composedPath&&o.composedPath()[0]||o.target,n=t(s);n&&!e.completed.has(n)&&e.events.push([n,o])})))),e.init=(e,t,s)=>{o[e]=[new Promise(((e,o)=>(t=e,s=o))),t,s]},e.set=(e,t,s,n)=>{(n=o[e])&&(s?n[2](s):n[1](t)),o[e]=[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 +582,52 @@ 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;
+}
+function pipeToNodeWritable(code, writable, options = {}) {
+  if (options.onReady) {
+    options.onCompleteShell = () => {
+      options.onReady({
+        startWriting() {
+          stream.pipe(writable);
+        }
+      });
+    };
+  }
+  const stream = renderToStream(code, options);
+  if (!options.onReady) stream.pipe(writable);
+}
+function pipeToWritable(code, writable, options = {}) {
+  if (options.onReady) {
+    options.onCompleteShell = () => {
+      options.onReady({
+        startWriting() {
+          stream.pipeTo(writable);
+        }
+      });
+    };
+  }
+  const stream = renderToStream(code, options);
+  if (!options.onReady) stream.pipeTo(writable);
+}
 
 const isServer = true;
 function spread() {}
@@ -634,6 +717,7 @@ exports.getHydrationKey = getHydrationKey;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;
+exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;