@solidjs/web 2.0.0-experimental.14 → 2.0.0-experimental.16

package/dist/server.cjs

@@ -21,6 +21,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 const ES2017FLAG = seroval.Feature.AggregateError
@@ -30,13 +33,16 @@ function createSerializer({
   onData,
   onDone,
   scopeId,
-  onError
+  onError,
+  plugins: customPlugins
 }) {
+  const defaultPlugins = [web.AbortSignalPlugin,
+  web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
+  web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin];
+  const allPlugins = customPlugins ? [...customPlugins, ...defaultPlugins] : defaultPlugins;
   return new seroval.Serializer({
     scopeId,
-    plugins: [web.AbortSignalPlugin,
-    web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
-    web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin],
+    plugins: allPlugins,
     globalIdentifier: GLOBAL_IDENTIFIER,
     disabledFeatures: ES2017FLAG,
     onData,
@@ -48,17 +54,102 @@ function getLocalHeaderScript(id) {
   return seroval.getCrossReferenceHeader(id) + ';';
 }
 
+function resolveAssets(moduleUrl, manifest) {
+  if (!manifest) return null;
+  const entry = manifest[moduleUrl];
+  if (!entry) return null;
+  const css = [];
+  const js = [];
+  const visited = new Set();
+  const walk = key => {
+    if (visited.has(key)) return;
+    visited.add(key);
+    const e = manifest[key];
+    if (!e) return;
+    js.push(e.file);
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(e.css[i]);
+    if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
+  };
+  walk(moduleUrl);
+  return {
+    js,
+    css
+  };
+}
+function registerEntryAssets(manifest) {
+  if (!manifest) return;
+  const ctx = solidJs.sharedConfig.context;
+  if (!ctx?.registerAsset) return;
+  for (const key in manifest) {
+    if (manifest[key].isEntry) {
+      const assets = resolveAssets(key, manifest);
+      if (assets) {
+        for (let i = 0; i < assets.css.length; i++) ctx.registerAsset("style", assets.css[i]);
+      }
+      return;
+    }
+  }
+}
+function createAssetTracking() {
+  const boundaryModules = new Map();
+  const boundaryStyles = new Map();
+  const emittedAssets = new Set();
+  let currentBoundaryId = null;
+  return {
+    boundaryModules,
+    boundaryStyles,
+    emittedAssets,
+    get currentBoundaryId() {
+      return currentBoundaryId;
+    },
+    set currentBoundaryId(v) {
+      currentBoundaryId = v;
+    },
+    registerModule(moduleUrl, entryUrl) {
+      if (!currentBoundaryId) return;
+      let map = boundaryModules.get(currentBoundaryId);
+      if (!map) {
+        map = {};
+        boundaryModules.set(currentBoundaryId, map);
+      }
+      map[moduleUrl] = entryUrl;
+    },
+    getBoundaryModules(id) {
+      return boundaryModules.get(id) || null;
+    },
+    getBoundaryStyles(id) {
+      return boundaryStyles.get(id) || null;
+    }
+  };
+}
+function applyAssetTracking(context, tracking, manifest) {
+  Object.defineProperty(context, "_currentBoundaryId", {
+    get() {
+      return tracking.currentBoundaryId;
+    },
+    set(v) {
+      tracking.currentBoundaryId = v;
+    },
+    configurable: true,
+    enumerable: true
+  });
+  context.registerModule = tracking.registerModule;
+  context.getBoundaryModules = tracking.getBoundaryModules;
+  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)}`;
+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)}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
     nonce,
-    noScripts
+    noScripts,
+    manifest
   } = options;
   let scripts = "";
   const serializer = createSerializer({
     scopeId: renderId,
+    plugins: options.plugins,
     onData(script) {
       if (noScripts) return;
       if (!scripts) {
@@ -68,6 +159,7 @@ function renderToString(code, options = {}) {
     },
     onError: options.onError
   });
+  const tracking = createAssetTracking();
   solidJs.sharedConfig.context = {
     assets: [],
     nonce,
@@ -75,9 +167,26 @@ function renderToString(code, options = {}) {
     resolve: resolveSSRNode,
     ssr: ssr,
     serialize(id, p) {
-      !solidJs.sharedConfig.context.noHydrate && serializer.write(id, p);
+      if (solidJs.sharedConfig.context.noHydrate) return;
+      if (p != null && typeof p === "object" && (typeof p.then === "function" || typeof p[Symbol.asyncIterator] === "function")) {
+        throw new Error("Cannot serialize async value in renderToString (id: " + id + "). " + "Use renderToStream for async data.");
+      }
+      serializer.write(id, p);
+    },
+    registerAsset(type, url) {
+      if (tracking.currentBoundaryId && type === "style") {
+        let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
+        if (!styles) {
+          styles = new Set();
+          tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
+        }
+        styles.add(url);
+      }
+      tracking.emittedAssets.add(url);
     }
   };
+  applyAssetTracking(solidJs.sharedConfig.context, tracking, manifest);
+  registerEntryAssets(manifest);
   let html = solidJs.createRoot(d => {
     setTimeout(d);
     return resolveSSRSync(escape(code()));
@@ -87,6 +196,7 @@ function renderToString(code, options = {}) {
   solidJs.sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
+  html = injectPreloadLinks(tracking.emittedAssets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
 }
@@ -96,10 +206,11 @@ function renderToStream(code, options = {}) {
     onCompleteShell,
     onCompleteAll,
     renderId = "",
-    noScripts
+    noScripts,
+    manifest
   } = options;
   let dispose;
-  const blockingPromises = [];
+  const blockingPromises = new Set();
   const pushTask = task => {
     if (noScripts) return;
     if (!tasks && !firstFlushed) {
@@ -124,6 +235,7 @@ function renderToStream(code, options = {}) {
   };
   const serializer = createSerializer({
     scopeId: options.renderId,
+    plugins: options.plugins,
     onData: pushTask,
     onDone,
     onError: options.onError
@@ -150,18 +262,38 @@ function renderToStream(code, options = {}) {
   let completed = false;
   let shellCompleted = false;
   let scriptFlushed = false;
+  let headStyles;
   let timer = null;
+  let rootHoles = null;
+  let nextHoleId = 0;
   let buffer = {
     write(payload) {
       tmp += payload;
     }
   };
+  const tracking = createAssetTracking();
   solidJs.sharedConfig.context = context = {
     async: true,
     assets: [],
     nonce,
+    registerAsset(type, url) {
+      if (tracking.currentBoundaryId && type === "style") {
+        let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
+        if (!styles) {
+          styles = new Set();
+          tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
+        }
+        styles.add(url);
+      }
+      if (!tracking.emittedAssets.has(url)) {
+        tracking.emittedAssets.add(url);
+        if (firstFlushed && type === "module") {
+          buffer.write(`<link rel="modulepreload" href="${url}">`);
+        }
+      }
+    },
     block(p) {
-      if (!firstFlushed) blockingPromises.push(p);
+      if (!firstFlushed) blockingPromises.add(p);
     },
     replace(id, payloadFn) {
       if (firstFlushed) return;
@@ -171,16 +303,12 @@ function renderToStream(code, options = {}) {
       const last = html.indexOf(`<!--!$/${id}-->`, first + placeholder.length);
       html = html.slice(0, first) + resolveSSRSync(escape(payloadFn())) + html.slice(last + placeholder.length + 1);
     },
-    serialize(id, p, wait) {
-      const serverOnly = solidJs.sharedConfig.context.noHydrate;
-      if (!firstFlushed && wait && typeof p === "object" && "then" in p) {
-        blockingPromises.push(p);
-        !serverOnly && p.then(d => {
-          serializer.write(id, d);
-        }).catch(e => {
-          serializer.write(id, e);
-        });
-      } else if (!serverOnly) serializer.write(id, p);
+    serialize(id, p, deferStream) {
+      if (solidJs.sharedConfig.context.noHydrate) return;
+      if (!firstFlushed && deferStream && typeof p === "object" && "then" in p) {
+        blockingPromises.add(p);
+        p.then(d => serializer.write(id, d)).catch(e => serializer.write(id, e));
+      } else serializer.write(id, p);
     },
     escape: escape,
     resolve: resolveSSRNode,
@@ -211,18 +339,33 @@ function renderToStream(code, options = {}) {
             const parent = registry.get(parentKey);
             parent.children ||= {};
             parent.children[key] = value !== undefined ? value : "";
+            serializeFragmentAssets(key, tracking.boundaryModules, context);
+            propagateBoundaryStyles(key, parentKey, tracking);
             item.resolve();
             return;
           }
           if (!completed) {
             if (!firstFlushed) {
               queue(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              serializeFragmentAssets(key, tracking.boundaryModules, context);
               item.resolve(error);
             } else {
-              buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-              pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              serializeFragmentAssets(key, tracking.boundaryModules, context);
+              const styles = collectStreamStyles(key, tracking, headStyles);
+              if (styles.length) {
+                pushTask(`$dfs("${key}",${styles.length})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+                scriptFlushed = true;
+                writeTasks();
+                for (const url of styles) {
+                  buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
+                }
+                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;
+              }
               item.resolve(error);
-              scriptFlushed = true;
             }
           }
         }
@@ -230,16 +373,47 @@ function renderToStream(code, options = {}) {
       };
     }
   };
+  applyAssetTracking(context, tracking, manifest);
+  registerEntryAssets(manifest);
   let html = solidJs.createRoot(d => {
     dispose = d;
-    return resolveSSRSync(escape(code()));
+    const res = resolveSSRNode(escape(code()));
+    if (!res.h.length) return res.t[0];
+    rootHoles = [];
+    let out = res.t[0];
+    for (let i = 0; i < res.h.length; i++) {
+      const id = nextHoleId++;
+      rootHoles.push({
+        id,
+        fn: res.h[i]
+      });
+      out += `<!--rh${id}-->` + res.t[i + 1];
+    }
+    for (const p of res.p) blockingPromises.add(p);
+    return out;
   }, {
     id: renderId
   });
   function doShell() {
     if (shellCompleted) return;
+    if (rootHoles) {
+      for (const {
+        id,
+        fn
+      } of rootHoles) {
+        const marker = `<!--rh${id}-->`;
+        const res = resolveSSRNode(fn);
+        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+      }
+      rootHoles = null;
+    }
     solidJs.sharedConfig.context = context;
     html = injectAssets(context.assets, html);
+    headStyles = new Set();
+    for (const url of tracking.emittedAssets) {
+      if (url.endsWith(".css")) headStyles.add(url);
+    }
+    html = injectPreloadLinks(tracking.emittedAssets, html);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -290,13 +464,13 @@ function renderToStream(code, options = {}) {
           writable = {
             end() {
               writer.releaseLock();
-              w.close();
+              w.close().catch(() => {});
               resolve();
             }
           };
           buffer = {
             write(payload) {
-              writer.write(encoder.encode(payload));
+              writer.write(encoder.encode(payload)).catch(() => {});
             }
           };
           buffer.write(tmp);
@@ -474,6 +648,9 @@ function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return hydrate && !hydrate.noHydrate && solidJs.sharedConfig.getNextContextId();
 }
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
 function useAssets(fn) {
   solidJs.sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
@@ -514,9 +691,9 @@ function queue(fn) {
   return Promise.resolve().then(fn);
 }
 function allSettled(promises) {
-  let length = promises.length;
+  let size = promises.size;
   return Promise.allSettled(promises).then(() => {
-    if (promises.length !== length) return allSettled(promises);
+    if (promises.size !== size) return allSettled(promises);
     return;
   });
 }
@@ -528,6 +705,48 @@ function injectAssets(assets, html) {
   if (index === -1) return html;
   return html.slice(0, index) + out + html.slice(index);
 }
+function injectPreloadLinks(emittedAssets, html, nonce) {
+  if (!emittedAssets.size) return html;
+  let links = "";
+  for (const url of emittedAssets) {
+    if (url.endsWith(".css")) {
+      links += `<link rel="stylesheet" href="${url}">`;
+    } else {
+      links += `<link rel="modulepreload" href="${url}">`;
+    }
+  }
+  const index = html.indexOf("</head>");
+  if (index === -1) return html;
+  return html.slice(0, index) + links + html.slice(index);
+}
+function serializeFragmentAssets(key, boundaryModules, context) {
+  const map = boundaryModules.get(key);
+  if (!map || !Object.keys(map).length) return;
+  context.serialize(key + "_assets", map);
+}
+function propagateBoundaryStyles(childKey, parentKey, tracking) {
+  const childStyles = tracking.getBoundaryStyles(childKey);
+  if (!childStyles) return;
+  let parentStyles = tracking.boundaryStyles.get(parentKey);
+  if (!parentStyles) {
+    parentStyles = new Set();
+    tracking.boundaryStyles.set(parentKey, parentStyles);
+  }
+  for (const url of childStyles) {
+    parentStyles.add(url);
+  }
+}
+function collectStreamStyles(key, tracking, headStyles) {
+  const styles = tracking.getBoundaryStyles(key);
+  if (!styles) return [];
+  const result = [];
+  for (const url of styles) {
+    if (!headStyles || !headStyles.has(url)) {
+      result.push(url);
+    }
+  }
+  return result;
+}
 function injectScripts(html, scripts, nonce) {
   const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
   const index = html.indexOf("<!--xs-->");
@@ -618,14 +837,14 @@ function resolveSSRNode(node, result = {
 function resolveSSRSync(node) {
   const res = resolveSSRNode(node);
   if (!res.h.length) return res.t[0];
-  throw new Error("This value cannot be rendered synchronously. Are you missing a Suspsense boundary?");
+  throw new Error("This value cannot be rendered synchronously. Are you missing a boundary?");
 }
 const RequestContext = Symbol();
 function getRequestEvent() {
-  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
+  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.warn("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
 }
 function renderToStringAsync(code, options = {}) {
-  return renderToStream(code, options).then(html => html);
+  return new Promise(resolve => renderToStream(code, options).then(resolve));
 }
 function notSup() {
   throw new Error("Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.");
@@ -634,13 +853,18 @@ function notSup() {
 const isServer = true;
 const isDev = false;
 function createDynamic(component, props) {
-  const comp = component(),
-    t = typeof comp;
-  if (comp) {
-    if (t === "function") return comp(props);else if (t === "string") {
-      return ssrElement(comp, props, undefined, true);
+  const o = solidJs.getOwner();
+  if (o?.id != null) solidJs.getNextChildId(o);
+  const memoOwner = solidJs.createOwner();
+  return solidJs.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);
+      }
     }
-  }
+  });
 }
 function Dynamic(props) {
   const others = solidJs.omit(props, "component");
@@ -682,10 +906,6 @@ Object.defineProperty(exports, "createComponent", {
   enumerable: true,
   get: function () { return solidJs.createComponent; }
 });
-Object.defineProperty(exports, "effect", {
-  enumerable: true,
-  get: function () { return solidJs.createRenderEffect; }
-});
 Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
@@ -711,11 +931,13 @@ exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = notSup;
+exports.applyRef = applyRef;
 exports.assign = notSup;
 exports.className = notSup;
 exports.createDynamic = createDynamic;
 exports.delegateEvents = notSup;
 exports.dynamicProperty = notSup;
+exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = generateHydrationScript;
 exports.getAssets = getAssets;