solid-js 1.2.5 → 1.3.0-beta.10

package/web/dist/server.js

@@ -1,4 +1,4 @@
-import { sharedConfig, awaitSuspense, splitProps } from 'solid-js';
+import { sharedConfig, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, 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"];
@@ -229,147 +229,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 = {}) {
-  sharedConfig.context = Object.assign({
-    id: "",
+  let scripts = "";
+  sharedConfig.context = {
+    id: options.renderId || "",
     count: 0,
-    assets: []
-  }, options);
-  let html = resolveSSRNode(escape(code()));
-  return injectAssets(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(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 = sharedConfig.context = Object.assign({
-    id: "",
+  let scripts = "";
+  const {
+    nonce,
+    renderId,
+    timeoutMs = 30000
+  } = options;
+  const context = 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([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);
+      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);
     }
   };
-  sharedConfig.context = Object.assign({
-    id: "",
+  sharedConfig.context = {
+    id: renderId || "",
     count: 0,
+    async: true,
     streaming: true,
+    resources: {},
     suspense: {},
-    assets: []
-  }, options);
-  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(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();
-  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;
+      };
     }
   };
-  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(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) {
   sharedConfig.context.assets.push(() => NoHydration({
@@ -379,15 +423,21 @@ function Assets(props) {
   }));
   return ssr(`%%$${sharedConfig.context.assets.length - 1}%%`);
 }
-function HydrationScript() {
-  sharedConfig.context.assets.push(generateHydrationScript);
+function HydrationScript(props) {
+  const {
+    nonce
+  } = sharedConfig.context;
+  sharedConfig.context.assets.push(() => generateHydrationScript({
+    nonce,
+    ...props
+  }));
   return ssr(`%%$${sharedConfig.context.assets.length - 1}%%`);
 }
 function NoHydration(props) {
   const c = sharedConfig.context;
-  delete sharedConfig.context;
+  c.noHydrate = true;
   const children = props.children;
-  sharedConfig.context = c;
+  c.noHydrate = false;
   return children;
 }
 function ssr(t, ...nodes) {
@@ -515,26 +565,13 @@ function resolveSSRNode(node) {
 }
 function getHydrationKey() {
   const hydrate = 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"]
-  } = 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++) {
@@ -542,6 +579,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() {}
@@ -560,4 +643,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };

package/web/dist/web.cjs

@@ -98,7 +98,7 @@ function render(code, element, init) {
   let disposer;
   solidJs.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();
@@ -217,28 +217,21 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
     prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
-function hydrate(code, element) {
-  solidJs.sharedConfig.resources = globalThis._$HYDRATION.resources;
-  solidJs.sharedConfig.completed = globalThis._$HYDRATION.completed;
-  solidJs.sharedConfig.events = globalThis._$HYDRATION.events;
+function hydrate$1(code, element, options = {}) {
+  solidJs.sharedConfig.completed = globalThis._$HY.completed;
+  solidJs.sharedConfig.events = globalThis._$HY.events;
+  solidJs.sharedConfig.load = globalThis._$HY.load;
+  solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.registry = new Map();
   solidJs.sharedConfig.context = {
-    id: "",
-    count: 0,
-    loadResource: globalThis._$HYDRATION.loadResource
+    id: options.renderId || "",
+    count: 0
   };
-  solidJs.sharedConfig.registry = new Map();
-  gatherHydratable(element);
+  gatherHydratable(element, options.renderId);
   const dispose = render(code, element, [...element.childNodes]);
   solidJs.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];
-    solidJs.sharedConfig.registry.set(node.getAttribute("data-hk"), node);
-  }
-}
 function getNextElement(template) {
   let node, key;
   if (!solidJs.sharedConfig.context || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
@@ -332,7 +325,7 @@ function eventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node;
+      return node || document;
     }
   });
   while (node !== null) {
@@ -387,7 +380,12 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (solidJs.sharedConfig.context && current && current.length) return current;
+    if (solidJs.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;
@@ -404,6 +402,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value instanceof Node) {
+    if (solidJs.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);
@@ -455,6 +454,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)) solidJs.sharedConfig.registry.set(key, node);
+  }
+}
 function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
@@ -468,8 +475,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) {}
@@ -485,6 +491,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) => {
+  solidJs.enableHydration();
+  return hydrate$1(...args);
+};
 function Portal(props) {
   const {
     useShadow
@@ -629,7 +639,6 @@ exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;
-exports.gatherHydratable = gatherHydratable;
 exports.generateHydrationScript = generateHydrationScript;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
@@ -639,9 +648,8 @@ exports.hydrate = hydrate;
 exports.insert = insert;
 exports.isServer = isServer;
 exports.memo = memo;
-exports.pipeToNodeWritable = pipeToNodeWritable;
-exports.pipeToWritable = pipeToWritable;
 exports.render = render;
+exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;