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

package/dist/dev.cjs

@@ -230,6 +230,13 @@ function use(fn, element, arg) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
+  if (isHydrating(parent) && Array.isArray(initial)) {
+    let j = 0;
+    for (let i = 0; i < initial.length; i++) {
+      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+    }
+    initial.length = j;
+  }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
@@ -256,11 +263,29 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 function hydrate$1(code, element, options = {}) {
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
   options.renderId ||= "";
+  if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
+  if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
   solidJs.sharedConfig.completed = globalThis._$HY.completed;
   solidJs.sharedConfig.events = globalThis._$HY.events;
   solidJs.sharedConfig.load = id => globalThis._$HY.r[id];
   solidJs.sharedConfig.has = id => id in globalThis._$HY.r;
   solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.cleanupFragment = id => {
+    const tpl = document.getElementById("pl-" + id);
+    if (tpl) {
+      let node = tpl.nextSibling;
+      while (node) {
+        const next = node.nextSibling;
+        if (node.nodeType === 8 && node.nodeValue === "pl-" + id) {
+          node.remove();
+          break;
+        }
+        node.remove();
+        node = next;
+      }
+      tpl.remove();
+    }
+  };
   solidJs.sharedConfig.registry = new Map();
   solidJs.sharedConfig.hydrating = true;
   try {
@@ -276,7 +301,6 @@ function getNextElement(template) {
     hydrating = isHydrating();
   if (!hydrating || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
     if (hydrating) {
-      solidJs.sharedConfig.done = true;
       throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
     }
     return template();
@@ -332,7 +356,7 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return solidJs.sharedConfig.hydrating && !solidJs.sharedConfig.done && (!node || node.isConnected);
+  return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
@@ -414,7 +438,6 @@ function eventHandler(e) {
       return node || document;
     }
   });
-  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) solidJs.sharedConfig.done = _$HY.done = true;
   if (e.composedPath) {
     const path = e.composedPath();
     retarget(path[0]);

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, flatten, untrack, createRenderEffect, sharedConfig, enableHydration, $DEVCOMP, omit } from 'solid-js';
+import { createMemo, sharedConfig, createRenderEffect, createRoot, flatten, untrack, omit, $DEVCOMP, enableHydration } from 'solid-js';
 export { Errored, For, Loading, Match, Show, Switch, createComponent, createRenderEffect as effect, getOwner, merge as mergeProps, untrack } from 'solid-js';
 
 const Properties = /*#__PURE__*/new Set([
@@ -229,6 +229,13 @@ function use(fn, element, arg) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
+  if (isHydrating(parent) && Array.isArray(initial)) {
+    let j = 0;
+    for (let i = 0; i < initial.length; i++) {
+      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+    }
+    initial.length = j;
+  }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
@@ -255,11 +262,29 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 function hydrate$1(code, element, options = {}) {
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
   options.renderId ||= "";
+  if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
+  if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
   sharedConfig.completed = globalThis._$HY.completed;
   sharedConfig.events = globalThis._$HY.events;
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.cleanupFragment = id => {
+    const tpl = document.getElementById("pl-" + id);
+    if (tpl) {
+      let node = tpl.nextSibling;
+      while (node) {
+        const next = node.nextSibling;
+        if (node.nodeType === 8 && node.nodeValue === "pl-" + id) {
+          node.remove();
+          break;
+        }
+        node.remove();
+        node = next;
+      }
+      tpl.remove();
+    }
+  };
   sharedConfig.registry = new Map();
   sharedConfig.hydrating = true;
   try {
@@ -275,7 +300,6 @@ function getNextElement(template) {
     hydrating = isHydrating();
   if (!hydrating || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
     if (hydrating) {
-      sharedConfig.done = true;
       throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
     }
     return template();
@@ -331,7 +355,7 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return sharedConfig.hydrating && !sharedConfig.done && (!node || node.isConnected);
+  return sharedConfig.hydrating && (!node || node.isConnected);
 }
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
@@ -413,7 +437,6 @@ function eventHandler(e) {
       return node || document;
     }
   });
-  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
   if (e.composedPath) {
     const path = e.composedPath();
     retarget(path[0]);

package/dist/server.cjs

@@ -30,13 +30,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 +51,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 +156,7 @@ function renderToString(code, options = {}) {
     },
     onError: options.onError
   });
+  const tracking = createAssetTracking();
   solidJs.sharedConfig.context = {
     assets: [],
     nonce,
@@ -75,9 +164,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 +193,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 +203,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 +232,7 @@ function renderToStream(code, options = {}) {
   };
   const serializer = createSerializer({
     scopeId: options.renderId,
+    plugins: options.plugins,
     onData: pushTask,
     onDone,
     onError: options.onError
@@ -150,18 +259,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 +300,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 +336,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 +370,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 +461,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);
@@ -514,9 +685,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 +699,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 +831,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;
 }
 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>.");