solid-js 1.2.2 → 1.3.0-beta.0

package/web/dist/dev.js

@@ -200,60 +200,41 @@ function insert(parent, accessor, marker, initial) {
   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) {
-  sharedConfig.resources = globalThis._$HYDRATION.resources;
-  sharedConfig.completed = globalThis._$HYDRATION.completed;
-  sharedConfig.events = globalThis._$HYDRATION.events;
+  if (!globalThis._$HY.sync) {
+    let dispose;
+    globalThis._$HY.queue.push(() => dispose = hydrate(code, element));
+    return () => dispose();
+  }
+  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
+    count: 0
   };
-  sharedConfig.registry = new Map();
   gatherHydratable(element);
   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()))) {
@@ -311,6 +292,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;
@@ -323,7 +328,7 @@ function eventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node;
+      return node || document;
     }
   });
   while (node !== null) {
@@ -378,7 +383,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; 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;
@@ -446,6 +456,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++}`;
@@ -529,4 +547,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, pipeToNodeWritable, pipeToWritable, render, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/dist/server.cjs

@@ -232,111 +232,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 = {}) {
-  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);
+  return injectAssets(solidJs.sharedConfig.context.assets, html) + `<script${options.nonce ? ` nonce="${options.nonce}"` : ""}>${SYNC_SCRIPT}</script>`;
 }
 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 => {
+    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 = 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);
     }
   };
-  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;
+        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(solidJs.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();
-  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 +402,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();
+  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;
+        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();
+        });
+      };
     }
   };
-  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(() => {
+    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) {
   solidJs.sharedConfig.context.assets.push(() => NoHydration({
@@ -382,15 +467,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) {
@@ -449,6 +540,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)}"`;
     }
@@ -516,26 +609,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,queue:[]}));</script>`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -543,6 +623,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);
+    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() {}
@@ -632,6 +739,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;