@solidjs/web 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/server.js

@@ -1,10 +1,8 @@
-import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, createComponent, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -12,22 +10,31 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = fn => createMemo(() => fn());
 
-const ES2017FLAG = Feature.AggregateError
-| Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = '_$HY.r';
+const ES2017FLAG = Feature.AggregateError |
+Feature.BigIntTypedArray;
+const GLOBAL_IDENTIFIER = "_$HY.r";
 function createSerializer({
   onData,
   onDone,
@@ -50,7 +57,7 @@ function createSerializer({
   });
 }
 function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id) + ';';
+  return getCrossReferenceHeader(id) + ";";
 }
 
 function resolveAssets(moduleUrl, manifest) {
@@ -106,11 +113,11 @@ function createAssetTracking() {
       currentBoundaryId = v;
     },
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
       map[moduleUrl] = entryUrl;
     },
@@ -138,7 +145,7 @@ function applyAssetTracking(context, tracking, manifest) {
   if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
 }
 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,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 $dfs(e,c){(_$HY.sc=_$HY.sc||{})[e]=c}function $dfc(e){if(--_$HY.sc[e]<=0)delete _$HY.sc[e],$df(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;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);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -193,6 +200,7 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, sharedConfig.context);
   sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(sharedConfig.context.assets, html);
@@ -211,10 +219,12 @@ function renderToStream(code, options = {}) {
   } = options;
   let dispose;
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
@@ -240,8 +250,15 @@ function renderToStream(code, options = {}) {
     onDone,
     onError: options.onError
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
     }
   };
@@ -263,7 +280,29 @@ function renderToStream(code, options = {}) {
   let shellCompleted = false;
   let scriptFlushed = false;
   let headStyles;
+  const revealGroups = new Map();
   let timer = null;
+  const emitTask = task => {
+    pushTask(`${task}${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+    scriptFlushed = true;
+  };
+  function resolveRevealKeys(groupOrKeys, release, consume) {
+    if (Array.isArray(groupOrKeys)) return groupOrKeys.slice();
+    let group = revealGroups.get(groupOrKeys);
+    if (!group) {
+      if (!release) return;
+      group = {
+        order: [],
+        keys: new Set(),
+        released: true
+      };
+      revealGroups.set(groupOrKeys, group);
+    } else if (release) group.released = true;
+    if (!group.order.length) return;
+    const keys = group.order.slice();
+    if (consume) revealGroups.delete(groupOrKeys);
+    return keys;
+  }
   let rootHoles = null;
   let nextHoleId = 0;
   let buffer = {
@@ -313,7 +352,26 @@ function renderToStream(code, options = {}) {
     escape: escape,
     resolve: resolveSSRNode,
     ssr: ssr,
-    registerFragment(key) {
+    registerFragment(key, options) {
+      const revealGroup = options && options.revealGroup;
+      if (revealGroup) {
+        let group = revealGroups.get(revealGroup);
+        if (!group) {
+          group = {
+            order: [],
+            keys: new Set(),
+            released: false
+          };
+          revealGroups.set(revealGroup, group);
+        }
+        if (!group.keys.has(key)) {
+          group.keys.add(key);
+          group.order.push(key);
+        }
+        if (group.released) {
+          throw new Error("registerFragment() for reveal group '" + revealGroup + "' was called after revealFragments(). Ensure template payload is emitted before grouped reveal.");
+        }
+      }
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
@@ -323,7 +381,7 @@ function renderToStream(code, options = {}) {
             queue(flushEnd);
           }))
         });
-        serializer.write(key, p);
+        serializer.write(key + "_fr", p);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -352,9 +410,9 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
+              const deferActivation = !!revealGroup;
               if (styles.length) {
-                pushTask(`$dfs("${key}",${styles.length})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                emitTask(`$dfs("${key}",${styles.length},${deferActivation ? 1 : 0})`);
                 writeTasks();
                 for (const url of styles) {
                   buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
@@ -362,8 +420,9 @@ function renderToStream(code, options = {}) {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               } else {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-                pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                if (!deferActivation) {
+                  emitTask(`$df("${key}")`);
+                }
               }
               item.resolve(error);
             }
@@ -371,6 +430,16 @@ function renderToStream(code, options = {}) {
         }
         return firstFlushed;
       };
+    },
+    revealFragments(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, true, true);
+      if (!keys) return;
+      emitTask(`$dfj(${JSON.stringify(keys)})`);
+    },
+    revealFallbacks(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, false, false);
+      if (!keys) return;
+      emitTask(`$dflj(${JSON.stringify(keys)})`);
     }
   };
   applyAssetTracking(context, tracking, manifest);
@@ -397,13 +466,32 @@ function renderToStream(code, options = {}) {
   function doShell() {
     if (shellCompleted) return;
     if (rootHoles) {
+      const pending = [];
       for (const {
         id,
         fn
       } of rootHoles) {
         const marker = `<!--rh${id}-->`;
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        if (!res.h.length) {
+          html = html.replace(marker, res.t[0]);
+        } else {
+          let out = res.t[0];
+          for (let j = 0; j < res.h.length; j++) {
+            const newId = nextHoleId++;
+            pending.push({
+              id: newId,
+              fn: res.h[j]
+            });
+            out += `<!--rh${newId}-->` + res.t[j + 1];
+          }
+          html = html.replace(marker, out);
+          for (const p of res.p) blockingPromises.add(p);
+        }
+      }
+      if (pending.length) {
+        rootHoles = pending;
+        return;
       }
       rootHoles = null;
     }
@@ -414,6 +502,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -440,48 +529,56 @@ function renderToStream(code, options = {}) {
       queue(flushEnd);
     },
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
   };
 }
@@ -511,7 +608,7 @@ function ssrClassName(value) {
       classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
-    result += escape(key);
+    result += escape(key, true);
   }
   return result;
 }
@@ -521,8 +618,8 @@ function ssrStyle(value) {
   let result = "";
   const k = Object.keys(value);
   for (let i = 0; i < k.length; i++) {
-    const s = k[i];
-    const v = value[s];
+    const s = escape(k[i], true);
+    const v = value[k[i]];
     if (v != undefined) {
       if (i) result += ";";
       const r = escape(v, true);
@@ -664,7 +761,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
 function queue(fn) {
   return Promise.resolve().then(fn);
@@ -831,26 +928,28 @@ function notSup() {
 
 const isServer = true;
 const isDev = false;
-function createDynamic(component, props) {
+function dynamic(source) {
   const o = getOwner();
   if (o?.id != null) getNextChildId(o);
-  const memoOwner = createOwner();
-  return runWithOwner(memoOwner, () => {
-    const comp = component(),
-      t = typeof comp;
-    if (comp) {
-      if (t === "function") return comp(props);else if (t === "string") {
-        return ssrElement(comp, props, undefined, true);
+  return props => {
+    const memoOwner = createOwner();
+    return runWithOwner(memoOwner, () => {
+      const comp = source(),
+        t = typeof comp;
+      if (comp) {
+        if (t === "function") return comp(props);else if (t === "string") {
+          return ssrElement(comp, props, undefined, true);
+        }
       }
-    }
-  });
+    });
+  };
 }
 function Dynamic(props) {
-  const others = omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
 }
 function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };