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

package/dist/server.js

@@ -1,6 +1,6 @@
-import { createMemo, sharedConfig, createRoot, ssrHandleError, omit } from 'solid-js';
-export { Errored, For, Loading, Match, Repeat, Show, Switch, createComponent, createRenderEffect as effect, getOwner, ssrRunInScope, untrack } from 'solid-js';
-import { Feature, Serializer, getCrossReferenceHeader } from 'seroval';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
+export { Errored, For, Loading, Match, Repeat, 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([
@@ -20,6 +20,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 const ES2017FLAG = Feature.AggregateError
@@ -29,13 +32,16 @@ function createSerializer({
   onData,
   onDone,
   scopeId,
-  onError
+  onError,
+  plugins: customPlugins
 }) {
+  const defaultPlugins = [AbortSignalPlugin,
+  CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
+  FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin];
+  const allPlugins = customPlugins ? [...customPlugins, ...defaultPlugins] : defaultPlugins;
   return new Serializer({
     scopeId,
-    plugins: [AbortSignalPlugin,
-    CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
-    FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin],
+    plugins: allPlugins,
     globalIdentifier: GLOBAL_IDENTIFIER,
     disabledFeatures: ES2017FLAG,
     onData,
@@ -47,17 +53,102 @@ function getLocalHeaderScript(id) {
   return 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 = 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) {
@@ -67,6 +158,7 @@ function renderToString(code, options = {}) {
     },
     onError: options.onError
   });
+  const tracking = createAssetTracking();
   sharedConfig.context = {
     assets: [],
     nonce,
@@ -74,9 +166,26 @@ function renderToString(code, options = {}) {
     resolve: resolveSSRNode,
     ssr: ssr,
     serialize(id, p) {
-      !sharedConfig.context.noHydrate && serializer.write(id, p);
+      if (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(sharedConfig.context, tracking, manifest);
+  registerEntryAssets(manifest);
   let html = createRoot(d => {
     setTimeout(d);
     return resolveSSRSync(escape(code()));
@@ -86,6 +195,7 @@ function renderToString(code, options = {}) {
   sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(sharedConfig.context.assets, html);
+  html = injectPreloadLinks(tracking.emittedAssets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
 }
@@ -95,10 +205,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) {
@@ -123,6 +234,7 @@ function renderToStream(code, options = {}) {
   };
   const serializer = createSerializer({
     scopeId: options.renderId,
+    plugins: options.plugins,
     onData: pushTask,
     onDone,
     onError: options.onError
@@ -149,18 +261,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();
   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;
@@ -170,16 +302,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 = 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 (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,
@@ -210,18 +338,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;
             }
           }
         }
@@ -229,16 +372,47 @@ function renderToStream(code, options = {}) {
       };
     }
   };
+  applyAssetTracking(context, tracking, manifest);
+  registerEntryAssets(manifest);
   let html = 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;
+    }
     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 = "";
@@ -289,13 +463,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);
@@ -473,6 +647,9 @@ function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return hydrate && !hydrate.noHydrate && sharedConfig.getNextContextId();
 }
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
 function useAssets(fn) {
   sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
@@ -513,9 +690,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;
   });
 }
@@ -527,6 +704,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-->");
@@ -617,14 +836,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() || sharedConfig.context && 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() || sharedConfig.context && 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>.");
@@ -633,13 +852,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 = 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);
+      }
     }
-  }
+  });
 }
 function Dynamic(props) {
   const others = omit(props, "component");
@@ -649,4 +873,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, 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, Hydration, HydrationScript, NoHydration, 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 };