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

package/dist/server.js

@@ -1,6 +1,6 @@
 import { createMemo, sharedConfig, createRoot, ssrHandleError, omit } from 'solid-js';
-export { ErrorBoundary, For, Match, Repeat, Show, Suspense, Switch, createComponent, createRenderEffect as effect, getOwner, ssrRunInScope, untrack } from 'solid-js';
-import { Feature, Serializer, getCrossReferenceHeader } from 'seroval';
+export { Errored, For, Loading, Match, Repeat, Show, Switch, createComponent, createRenderEffect as effect, 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([
@@ -29,13 +29,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 +50,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 +155,7 @@ function renderToString(code, options = {}) {
     },
     onError: options.onError
   });
+  const tracking = createAssetTracking();
   sharedConfig.context = {
     assets: [],
     nonce,
@@ -74,9 +163,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 +192,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 +202,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 +231,7 @@ function renderToStream(code, options = {}) {
   };
   const serializer = createSerializer({
     scopeId: options.renderId,
+    plugins: options.plugins,
     onData: pushTask,
     onDone,
     onError: options.onError
@@ -149,18 +258,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 +299,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 +335,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 +369,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 +460,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);
@@ -513,9 +684,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 +698,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 +830,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;
 }
 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>.");

package/dist/web.cjs

@@ -226,6 +226,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);
@@ -252,11 +259,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 {
@@ -324,7 +349,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+/);
@@ -406,7 +431,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/web.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, flatten, untrack, createRenderEffect, sharedConfig, enableHydration, omit } from 'solid-js';
+import { createMemo, sharedConfig, createRenderEffect, createRoot, flatten, untrack, omit, 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([
@@ -225,6 +225,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);
@@ -251,11 +258,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 {
@@ -323,7 +348,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+/);
@@ -405,7 +430,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-experimental.13",
+  "version": "2.0.0-experimental.15",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.13"
+    "solid-js": "^2.0.0-experimental.15"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.13"
+    "solid-js": "2.0.0-experimental.15"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
@@ -90,7 +90,8 @@
     "types:web": "tsc --project ./tsconfig.build.json",
     "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts",
     "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
-    "test": "vitest run",
+    "test": "vitest run && vitest run --config vite.config.server.mjs",
+    "test:server": "vitest run --config vite.config.server.mjs",
     "coverage": "vitest run --coverage",
     "test-types": "tsc --project tsconfig.test.json"
   }

package/storage/types/src/client.d.ts

@@ -0,0 +1 @@
+export * from "dom-expressions/src/client.js";

package/storage/types/src/index.d.ts

@@ -0,0 +1,45 @@
+import { hydrate as hydrateCore } from "./client.js";
+import { JSX, ComponentProps, ValidComponent } from "solid-js";
+export * from "./client.js";
+export { For, Show, Switch, Match, Errored, Loading, merge as mergeProps } from "solid-js";
+export * from "./server-mock.js";
+export declare const isServer: boolean;
+export declare const isDev: boolean;
+export declare const hydrate: typeof hydrateCore;
+/**
+ * Renders components somewhere else in the DOM
+ *
+ * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ *
+ * @description https://docs.solidjs.com/reference/components/portal
+ */
+export declare function Portal<T extends boolean = false, S extends boolean = false>(props: {
+    mount?: Element;
+    children: JSX.Element;
+}): Text;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders an arbitrary component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * Renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;