solid-js 1.2.2 → 1.3.0-beta.0

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,111 +229,162 @@ 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)}`;
+const SYNC_SCRIPT = `_$HY.sync=!0;for(let e=0;e<_$HY.queue.length;e++)_$HY.queue[e]()`;
 function renderToString(code, options = {}) {
-  sharedConfig.context = Object.assign({
+  sharedConfig.context = {
     id: "",
     count: 0,
-    assets: []
-  }, options);
+    suspense: {},
+    assets: [],
+    nonce: options.nonce
+  };
   let html = resolveSSRNode(escape(code()));
-  return injectAssets(sharedConfig.context.assets, html);
+  return injectAssets(sharedConfig.context.assets, html) + `<script${options.nonce ? ` nonce="${options.nonce}"` : ""}>${SYNC_SCRIPT}</script>`;
 }
 function renderToStringAsync(code, options = {}) {
-  options = {
-    timeoutMs: 30000,
-    ...options
-  };
-  const context = sharedConfig.context = Object.assign({
+  const {
+    nonce,
+    timeoutMs = 30000
+  } = options;
+  const context = 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([awaitSuspense(() => escape(code())), timeout]).then(res => {
+    async: true,
+    nonce
+  };
+  let scripts = "";
+  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 = resolveSSRNode(res);
+    html += `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts.length ? scripts + ";" : ""}${SYNC_SCRIPT}</script>`;
     return injectAssets(context.assets, 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);
     }
   };
-  sharedConfig.context = Object.assign({
+  sharedConfig.context = {
     id: "",
     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();
-    });
+    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;
+        Promise.resolve().then(() => {
+          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(sharedConfig.context.assets, html);
   buffer.write(html);
-  onReady(result);
+  Promise.resolve().then(() => {
+    writeInitialScript();
+    buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${SYNC_SCRIPT}</script>`);
+    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();
-  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);
     }
@@ -348,28 +399,62 @@ 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();
+  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;
+        Promise.resolve().then(() => {
+          buffer.write(encoder.encode(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`));
+          scriptFlushed = true;
+          checkEnd();
+        });
+      };
     }
   };
-  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(() => {
+    writeInitialScript();
+    buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>${SYNC_SCRIPT}</script>`));
+    onCompleteShell && onCompleteShell(result);
+  });
+}
+function pipeToNodeWritable(code, writable, options = {}) {
+  renderToPipeableStream(code, options).pipe(writable);
 }
 function Assets(props) {
   sharedConfig.context.assets.push(() => NoHydration({
@@ -379,15 +464,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) {
@@ -446,6 +537,8 @@ function ssrSpread(props, isSVG, skipChildren) {
       result += `class="${ssrClassList(value)}"`;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
+    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+      continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
     }
@@ -513,26 +606,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 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,queue:[]}));</script>`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -540,6 +620,33 @@ function injectAssets(assets, html) {
   }
   return html;
 }
+const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
+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 => {
+        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() {}
@@ -558,4 +665,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, renderToPipeableStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };

package/web/dist/web.cjs

@@ -202,60 +202,41 @@ function insert(parent, accessor, marker, initial) {
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}) {
-  let isCE, isProp, isChildProp;
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG);
+    }
+  }
   for (const prop in props) {
     if (prop === "children") {
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
     const value = props[prop];
-    if (value === prevProps[prop]) continue;
-    if (prop === "style") {
-      style(node, value, prevProps[prop]);
-    } else if (prop === "classList") {
-      classList(node, value, prevProps[prop]);
-    } else if (prop === "ref") {
-      value(node);
-    } else if (prop.slice(0, 3) === "on:") {
-      node.addEventListener(prop.slice(3), value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
-      node.addEventListener(prop.slice(10), value, true);
-    } else if (prop.slice(0, 2) === "on") {
-      const name = prop.slice(2).toLowerCase();
-      const delegate = DelegatedEvents.has(name);
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-      if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
-    } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-    }
-    prevProps[prop] = value;
+    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;
+  if (!globalThis._$HY.sync) {
+    let dispose;
+    globalThis._$HY.queue.push(() => dispose = hydrate(code, element));
+    return () => dispose();
+  }
+  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
+    count: 0
   };
-  solidJs.sharedConfig.registry = new Map();
   gatherHydratable(element);
   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()))) {
@@ -313,6 +294,30 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
+function assignProp(node, prop, value, prev, isSVG) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return prev;
+  if (prop === "ref") {
+    value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    node.addEventListener(prop.slice(3), value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    node.addEventListener(prop.slice(10), value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    addEventListener(node, name, value, delegate);
+    delegate && delegateEvents([name]);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+  return value;
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;
@@ -325,7 +330,7 @@ function eventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node;
+      return node || document;
     }
   });
   while (node !== null) {
@@ -380,7 +385,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; i < array.length; i++) {
+        if (array[i].parentNode) return array;
+      }
+      return current;
+    }
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
       if (multi) return current;
@@ -448,6 +458,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++}`;
@@ -622,7 +640,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;