solid-js 1.3.0-beta.2 → 1.3.0-beta.3

package/README.md

@@ -1,4 +1,6 @@
-## <img src="https://raw.githubusercontent.com/solidjs/solid/main/assets/logo.png" alt="Solid" width="350"/><br>
+<p>
+  <img width="100%" src="https://raw.githubusercontent.com/solidjs/solid/master/banner.png" alt="SolidJS">
+</p>
 
 [![Build Status](https://github.com/solidjs/solid/workflows/Solid%20CI/badge.svg)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
 [![Coverage Status](https://img.shields.io/coveralls/github/solidjs/solid.svg?style=flat)](https://coveralls.io/github/solidjs/solid?branch=main)

package/dist/dev.cjs

@@ -1322,7 +1322,11 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  const [errored, setErrored] = createSignal();
+  let err = undefined;
+  if (sharedConfig.context && sharedConfig.load) {
+    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
+  }
+  const [errored, setErrored] = createSignal(err);
   let e;
   return createMemo(() => {
     if ((e = errored()) != null) {
@@ -1406,7 +1410,8 @@ function Suspense(props) {
       showFallback,
       ctx,
       waitingHydration,
-      flicker;
+      flicker,
+      error;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1421,7 +1426,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context && sharedConfig.load) {
+  if (sharedConfig.context) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     const p = sharedConfig.load(key);
     if (p) {
@@ -1429,7 +1434,8 @@ function Suspense(props) {
         equals: false
       });
       flicker = s;
-      p.then(() => {
+      p.then(err => {
+        if (error = err) return set();
         sharedConfig.gather(key);
         waitingHydration = true;
         setHydrateContext(ctx);
@@ -1447,6 +1453,7 @@ function Suspense(props) {
     value: store,
     get children() {
       return createMemo(() => {
+        if (error) throw error;
         if (flicker) {
           ctx = sharedConfig.context;
           flicker();

package/dist/dev.js

@@ -1318,7 +1318,11 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  const [errored, setErrored] = createSignal();
+  let err = undefined;
+  if (sharedConfig.context && sharedConfig.load) {
+    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
+  }
+  const [errored, setErrored] = createSignal(err);
   let e;
   return createMemo(() => {
     if ((e = errored()) != null) {
@@ -1402,7 +1406,8 @@ function Suspense(props) {
       showFallback,
       ctx,
       waitingHydration,
-      flicker;
+      flicker,
+      error;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1417,7 +1422,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context && sharedConfig.load) {
+  if (sharedConfig.context) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     const p = sharedConfig.load(key);
     if (p) {
@@ -1425,7 +1430,8 @@ function Suspense(props) {
         equals: false
       });
       flicker = s;
-      p.then(() => {
+      p.then(err => {
+        if (error = err) return set();
         sharedConfig.gather(key);
         waitingHydration = true;
         setHydrateContext(ctx);
@@ -1443,6 +1449,7 @@ function Suspense(props) {
     value: store,
     get children() {
       return createMemo(() => {
+        if (error) throw error;
         if (flicker) {
           ctx = sharedConfig.context;
           flicker();

package/dist/server.cjs

@@ -41,8 +41,15 @@ function createComputed(fn, value) {
     owner: Owner,
     context: null
   };
-  fn(value);
-  Owner = Owner.owner;
+  try {
+    fn(value);
+  } catch (err) {
+    const fns = lookup(Owner, ERROR);
+    if (!fns) throw err;
+    fns.forEach(f => f(err));
+  } finally {
+    Owner = Owner.owner;
+  }
 }
 const createRenderEffect = createComputed;
 function createEffect(fn, value) {}
@@ -51,8 +58,16 @@ function createMemo(fn, value) {
     owner: Owner,
     context: null
   };
-  const v = fn(value);
-  Owner = Owner.owner;
+  let v;
+  try {
+    v = fn(value);
+  } catch (err) {
+    const fns = lookup(Owner, ERROR);
+    if (!fns) throw err;
+    fns.forEach(f => f(err));
+  } finally {
+    Owner = Owner.owner;
+  }
   return () => v;
 }
 function createDeferred(source) {
@@ -290,7 +305,20 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  return props.children;
+  let error, res;
+  const ctx = sharedConfig.context;
+  const id = ctx.id + ctx.count;
+  onError(err => error = err);
+  createMemo(() => res = props.children);
+  if (error) {
+    ctx.writeResource(id, error, true);
+    setHydrateContext({ ...ctx,
+      count: 0
+    });
+    const f = props.fallback;
+    return typeof f === "function" && f.length ? f(error, () => {}) : f;
+  }
+  return res;
 }
 const SuspenseContext = createContext();
 let resourceContext = null;
@@ -310,6 +338,7 @@ function createResource(fn, fetcher, options = {}) {
   let resource = {};
   let value = options.initialValue;
   let p;
+  let error;
   if (sharedConfig.context.async) {
     resource = sharedConfig.context.resources[id] || (sharedConfig.context.resources[id] = {});
     if (resource.ref) {
@@ -318,6 +347,7 @@ function createResource(fn, fetcher, options = {}) {
     }
   }
   const read = () => {
+    if (error) throw error;
     if (resourceContext && p) resourceContext.push(p);
     const resolved = sharedConfig.context.async && sharedConfig.context.resources[id].data;
     if (!resolved) {
@@ -356,6 +386,11 @@ function createResource(fn, fetcher, options = {}) {
         p = null;
         notifySuspense(contexts);
         return res;
+      }).catch(err => {
+        read.loading = false;
+        error = err;
+        p = null;
+        notifySuspense(contexts);
       });
       return;
     }
@@ -418,13 +453,14 @@ function SuspenseList(props) {
   return props.children;
 }
 function Suspense(props) {
+  let done;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
-  const done = ctx.async ? ctx.registerFragment(id) : () => {};
   const o = Owner;
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
+      if (ctx.dataOnly) return done();
       const res = runSuspense();
       if (suspenseComplete(value)) {
         done(resolveSSRNode(res));
@@ -445,12 +481,13 @@ function Suspense(props) {
     });
   }
   const res = runSuspense();
-  if (suspenseComplete(value)) {
-    done();
-    return res;
-  }
-  if (sharedConfig.context.async) {
-    if (sharedConfig.context.streaming) {
+  if (suspenseComplete(value)) return res;
+  onError(err => {
+    if (!done || !done(undefined, err)) throw err;
+  });
+  done = ctx.async ? ctx.registerFragment(id) : undefined;
+  if (ctx.streaming) {
+    if (!ctx.dataOnly) {
       setHydrateContext(undefined);
       const res = {
         t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
@@ -458,6 +495,7 @@ function Suspense(props) {
       setHydrateContext(ctx);
       return res;
     }
+  } else if (ctx.async) {
     return {
       t: `<![${id}]>`
     };

package/dist/server.js

@@ -37,8 +37,15 @@ function createComputed(fn, value) {
     owner: Owner,
     context: null
   };
-  fn(value);
-  Owner = Owner.owner;
+  try {
+    fn(value);
+  } catch (err) {
+    const fns = lookup(Owner, ERROR);
+    if (!fns) throw err;
+    fns.forEach(f => f(err));
+  } finally {
+    Owner = Owner.owner;
+  }
 }
 const createRenderEffect = createComputed;
 function createEffect(fn, value) {}
@@ -47,8 +54,16 @@ function createMemo(fn, value) {
     owner: Owner,
     context: null
   };
-  const v = fn(value);
-  Owner = Owner.owner;
+  let v;
+  try {
+    v = fn(value);
+  } catch (err) {
+    const fns = lookup(Owner, ERROR);
+    if (!fns) throw err;
+    fns.forEach(f => f(err));
+  } finally {
+    Owner = Owner.owner;
+  }
   return () => v;
 }
 function createDeferred(source) {
@@ -286,7 +301,20 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  return props.children;
+  let error, res;
+  const ctx = sharedConfig.context;
+  const id = ctx.id + ctx.count;
+  onError(err => error = err);
+  createMemo(() => res = props.children);
+  if (error) {
+    ctx.writeResource(id, error, true);
+    setHydrateContext({ ...ctx,
+      count: 0
+    });
+    const f = props.fallback;
+    return typeof f === "function" && f.length ? f(error, () => {}) : f;
+  }
+  return res;
 }
 const SuspenseContext = createContext();
 let resourceContext = null;
@@ -306,6 +334,7 @@ function createResource(fn, fetcher, options = {}) {
   let resource = {};
   let value = options.initialValue;
   let p;
+  let error;
   if (sharedConfig.context.async) {
     resource = sharedConfig.context.resources[id] || (sharedConfig.context.resources[id] = {});
     if (resource.ref) {
@@ -314,6 +343,7 @@ function createResource(fn, fetcher, options = {}) {
     }
   }
   const read = () => {
+    if (error) throw error;
     if (resourceContext && p) resourceContext.push(p);
     const resolved = sharedConfig.context.async && sharedConfig.context.resources[id].data;
     if (!resolved) {
@@ -352,6 +382,11 @@ function createResource(fn, fetcher, options = {}) {
         p = null;
         notifySuspense(contexts);
         return res;
+      }).catch(err => {
+        read.loading = false;
+        error = err;
+        p = null;
+        notifySuspense(contexts);
       });
       return;
     }
@@ -414,13 +449,14 @@ function SuspenseList(props) {
   return props.children;
 }
 function Suspense(props) {
+  let done;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
-  const done = ctx.async ? ctx.registerFragment(id) : () => {};
   const o = Owner;
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
+      if (ctx.dataOnly) return done();
       const res = runSuspense();
       if (suspenseComplete(value)) {
         done(resolveSSRNode(res));
@@ -441,12 +477,13 @@ function Suspense(props) {
     });
   }
   const res = runSuspense();
-  if (suspenseComplete(value)) {
-    done();
-    return res;
-  }
-  if (sharedConfig.context.async) {
-    if (sharedConfig.context.streaming) {
+  if (suspenseComplete(value)) return res;
+  onError(err => {
+    if (!done || !done(undefined, err)) throw err;
+  });
+  done = ctx.async ? ctx.registerFragment(id) : undefined;
+  if (ctx.streaming) {
+    if (!ctx.dataOnly) {
       setHydrateContext(undefined);
       const res = {
         t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
@@ -454,6 +491,7 @@ function Suspense(props) {
       setHydrateContext(ctx);
       return res;
     }
+  } else if (ctx.async) {
     return {
       t: `<![${id}]>`
     };

package/dist/solid.cjs

@@ -1246,7 +1246,11 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  const [errored, setErrored] = createSignal();
+  let err = undefined;
+  if (sharedConfig.context && sharedConfig.load) {
+    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
+  }
+  const [errored, setErrored] = createSignal(err);
   let e;
   return createMemo(() => {
     if ((e = errored()) != null) {
@@ -1330,7 +1334,8 @@ function Suspense(props) {
       showFallback,
       ctx,
       waitingHydration,
-      flicker;
+      flicker,
+      error;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1345,7 +1350,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context && sharedConfig.load) {
+  if (sharedConfig.context) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     const p = sharedConfig.load(key);
     if (p) {
@@ -1353,7 +1358,8 @@ function Suspense(props) {
         equals: false
       });
       flicker = s;
-      p.then(() => {
+      p.then(err => {
+        if (error = err) return set();
         sharedConfig.gather(key);
         waitingHydration = true;
         setHydrateContext(ctx);
@@ -1371,6 +1377,7 @@ function Suspense(props) {
     value: store,
     get children() {
       return createMemo(() => {
+        if (error) throw error;
         if (flicker) {
           ctx = sharedConfig.context;
           flicker();

package/dist/solid.js

@@ -1242,7 +1242,11 @@ function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  const [errored, setErrored] = createSignal();
+  let err = undefined;
+  if (sharedConfig.context && sharedConfig.load) {
+    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
+  }
+  const [errored, setErrored] = createSignal(err);
   let e;
   return createMemo(() => {
     if ((e = errored()) != null) {
@@ -1326,7 +1330,8 @@ function Suspense(props) {
       showFallback,
       ctx,
       waitingHydration,
-      flicker;
+      flicker,
+      error;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1341,7 +1346,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context && sharedConfig.load) {
+  if (sharedConfig.context) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     const p = sharedConfig.load(key);
     if (p) {
@@ -1349,7 +1354,8 @@ function Suspense(props) {
         equals: false
       });
       flicker = s;
-      p.then(() => {
+      p.then(err => {
+        if (error = err) return set();
         sharedConfig.gather(key);
         waitingHydration = true;
         setHydrateContext(ctx);
@@ -1367,6 +1373,7 @@ function Suspense(props) {
     value: store,
     get children() {
       return createMemo(() => {
+        if (error) throw error;
         if (flicker) {
           ctx = sharedConfig.context;
           flicker();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.3",
   "author": "Ryan Carniato",
   "license": "MIT",
-  "homepage": "https://github.com/solidjs/solid#readme",
+  "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/solidjs/solid"
@@ -36,10 +36,6 @@
   ],
   "exports": {
     ".": {
-      "development": {
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
-      },
       "browser": {
         "import": "./dist/solid.js",
         "require": "./dist/solid.cjs"
@@ -48,15 +44,15 @@
         "import": "./dist/server.js",
         "require": "./dist/server.cjs"
       },
+      "development": {
+        "import": "./dist/dev.js",
+        "require": "./dist/dev.cjs"
+      },
       "import": "./dist/solid.js",
       "require": "./dist/solid.cjs"
     },
     "./dist/*": "./dist/*",
     "./store": {
-      "development": {
-        "import": "./store/dist/dev.js",
-        "require": "./store/dist/dev.cjs"
-      },
       "browser": {
         "import": "./store/dist/store.js",
         "require": "./store/dist/store.cjs"
@@ -65,15 +61,15 @@
         "import": "./store/dist/server.js",
         "require": "./store/dist/server.cjs"
       },
+      "development": {
+        "import": "./store/dist/dev.js",
+        "require": "./store/dist/dev.cjs"
+      },
       "import": "./store/dist/store.js",
       "require": "./store/dist/store.cjs"
     },
     "./store/dist/*": "./store/dist/*",
     "./web": {
-      "development": {
-        "import": "./web/dist/dev.js",
-        "require": "./web/dist/dev.cjs"
-      },
       "browser": {
         "import": "./web/dist/web.js",
         "require": "./web/dist/web.cjs"
@@ -82,6 +78,10 @@
         "import": "./web/dist/server.js",
         "require": "./web/dist/server.cjs"
       },
+      "development": {
+        "import": "./web/dist/dev.js",
+        "require": "./web/dist/dev.cjs"
+      },
       "import": "./web/dist/web.js",
       "require": "./web/dist/web.cjs"
     },
@@ -132,5 +132,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "afe407af6463d4956c2c283370895b4d02b205e8"
+  "gitHead": "cc2f8e5d0a8916ee1d4512de541268d8dcd45032"
 }

package/types/server/rendering.d.ts

@@ -56,9 +56,9 @@ declare type MatchProps<T> = {
 };
 export declare function Match<T>(props: MatchProps<T>): MatchProps<T>;
 export declare function ErrorBoundary(props: {
-    fallback: string | ((err: any) => string);
+    fallback: string | ((err: any, reset: () => void) => string);
     children: string;
-}): string;
+}): any;
 export interface Resource<T> {
     (): T | undefined;
     loading: boolean;
@@ -91,12 +91,13 @@ export declare function useTransition(): [() => boolean, (fn: () => any) => void
 declare type HydrationContext = {
     id: string;
     count: number;
-    writeResource?: (id: string, v: Promise<any>) => void;
+    writeResource?: (id: string, v: Promise<any> | any, error?: boolean) => void;
     resources: Record<string, any>;
     suspense: Record<string, SuspenseContextType>;
-    registerFragment: (v: string) => (v?: string) => void;
+    registerFragment: (v: string) => (v?: string, err?: any) => boolean;
     async?: boolean;
     streaming?: boolean;
+    dataOnly?: boolean;
     noHydrate: boolean;
 };
 export declare function SuspenseList(props: {
@@ -105,7 +106,7 @@ export declare function SuspenseList(props: {
     tail?: "collapsed" | "hidden";
 }): string;
 export declare function Suspense(props: {
-    fallback: string;
+    fallback?: string;
     children: string;
 }): any;
 export {};

package/web/dist/dev.cjs

@@ -382,8 +382,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       return () => current;
     }
     if (solidJs.sharedConfig.context && current && current.length) {
-      for (let i; i < array.length; i++) {
-        if (array[i].parentNode) return array;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
       }
       return current;
     }

package/web/dist/dev.js

@@ -379,8 +379,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       return () => current;
     }
     if (sharedConfig.context && current && current.length) {
-      for (let i; i < array.length; i++) {
-        if (array[i].parentNode) return array;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
       }
       return current;
     }

package/web/dist/server.cjs

@@ -232,17 +232,23 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e)}`;
+const REPLACE_SCRIPT = `function $df(e,y,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e,y)}`;
+const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
 function renderToString(code, options = {}) {
+  let scripts = "";
   solidJs.sharedConfig.context = {
     id: "",
     count: 0,
     suspense: {},
     assets: [],
-    nonce: options.nonce
+    nonce: options.nonce,
+    writeResource(id, p, error) {
+      if (error) scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    }
   };
-  let html = resolveSSRNode(escape(code()));
-  return injectAssets(solidJs.sharedConfig.context.assets, html);
+  let html = injectAssets(solidJs.sharedConfig.context.assets, resolveSSRNode(escape(code())));
+  if (scripts.length) html = injectScripts(html, scripts, options.nonce);
+  return html;
 }
 function renderToStringAsync(code, options = {}) {
   const {
@@ -259,23 +265,55 @@ function renderToStringAsync(code, options = {}) {
     nonce
   };
   let scripts = "";
-  solidJs.sharedConfig.context.writeResource = (id, p) => p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`);
+  solidJs.sharedConfig.context.writeResource = (id, p, error) => {
+    if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`).catch(() => scripts += `_$HY.set("${id}", null);`);
+  };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  function asyncWrap(fn) {
+    return new Promise(resolve => {
+      const registry = new Set();
+      const cache = Object.create(null);
+      solidJs.sharedConfig.context.registerFragment = register;
+      const rendered = fn();
+      if (!registry.size) resolve(rendered);
+      function register(key) {
+        registry.add(key);
+        return (value = "", error) => {
+          cache[key] = value;
+          registry.delete(key);
+          if (error) return scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;
+          if (!registry.size) Promise.resolve().then(() => {
+            let source = resolveSSRNode(rendered);
+            let final = "";
+            let match;
+            while (match = source.match(FRAGMENT_REPLACE)) {
+              final += source.substring(0, match.index);
+              source = cache[match[1]] + source.substring(match.index + match[0].length);
+            }
+            resolve(final + source);
+          });
+          return true;
+        };
+      }
+    });
+  }
   return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
     let html = injectAssets(context.assets, resolveSSRNode(res));
     if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
-function renderToPipeableStream(code, options) {
+function renderToPipeableStream(code, options = {}) {
   const {
     nonce,
     onCompleteShell,
-    onCompleteAll
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
   const tasks = [];
-  const registry = new Set();
+  const registry = new Map();
   const checkEnd = () => {
     if (!registry.size && !completed) {
       onCompleteAll && onCompleteAll(result);
@@ -284,7 +322,7 @@ function renderToPipeableStream(code, options) {
     }
   };
   const writeInitialScript = () => {
-    if (tasks.length) {
+    if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
       tasks.length = 0;
     }
@@ -304,37 +342,43 @@ function renderToPipeableStream(code, options) {
     count: 0,
     async: true,
     streaming: true,
+    dataOnly,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p) {
+    writeResource(id, p, error) {
       if (!scheduled) {
         Promise.resolve().then(writeInitialScript);
         scheduled = true;
       }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
       tasks.push(`_$HY.init("${id}")`);
       p.then(d => {
-        buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+      }).catch(() => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`);
       });
     },
     registerFragment(key) {
-      registry.add(key);
-      Promise.resolve().then(() => {
-        if (registry.has(key)) {
-          if (!scheduled) {
-            Promise.resolve().then(writeInitialScript);
-            scheduled = true;
-          }
-          tasks.push(`_$HY.init("${key}")`);
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
         }
-      });
-      return value => {
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
         registry.delete(key);
-        if (!value) return;
-        buffer.write(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`);
-        scriptFlushed = true;
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`);
+          scriptFlushed = true;
+        }
         checkEnd();
+        return true;
       };
     }
   };
@@ -361,13 +405,14 @@ function pipeToWritable(code, writable, options = {}) {
     onCompleteShell = ({
       startWriting
     }) => startWriting(),
-    onCompleteAll
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
   const tasks = [];
   const writer = writable.getWriter();
   const encoder = new TextEncoder();
-  const registry = new Set();
+  const registry = new Map();
   const checkEnd = () => {
     if (!registry.size && !completed) {
       onCompleteAll && onCompleteAll(result);
@@ -409,37 +454,43 @@ function pipeToWritable(code, writable, options = {}) {
     count: 0,
     async: true,
     streaming: true,
+    dataOnly,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p) {
+    writeResource(id, p, error) {
       if (!scheduled) {
         Promise.resolve().then(writeInitialScript);
         scheduled = true;
       }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
       tasks.push(`_$HY.init("${id}")`);
       p.then(d => {
-        buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+      }).catch(() => {
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`));
       });
     },
     registerFragment(key) {
-      registry.add(key);
-      Promise.resolve().then(() => {
-        if (registry.has(key)) {
-          if (!scheduled) {
-            Promise.resolve().then(writeInitialScript);
-            scheduled = true;
-          }
-          tasks.push(`_$HY.init("${key}")`);
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
         }
-      });
-      return value => {
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
         registry.delete(key);
-        if (!value) return;
-        buffer.write(encoder.encode(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`));
-        scriptFlushed = true;
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(encoder.encode(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`));
+          scriptFlushed = true;
+        }
         checkEnd();
+        return true;
       };
     }
   };
@@ -612,7 +663,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 }) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>((e,t,o={})=>{t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let n=o.composedPath&&o.composedPath()[0]||o.target,s=t(n);s&&!e.completed.has(s)&&e.events.push([s,o])})))),e.init=(e,t)=>{o[e]=[new Promise((e=>t=e)),t]},e.set=(e,t,n)=>{if(!(n=o[e]))return o[e]=[t];n[1](t)},e.load=(e,t)=>{if(t=o[e])return t[0]}})(window._$HY||(_$HY={events:[],completed:new WeakSet}));</script><!xs>`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>((e,t,o={})=>{t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let n=o.composedPath&&o.composedPath()[0]||o.target,s=t(n);s&&!e.completed.has(s)&&e.events.push([s,o])})))),e.init=(e,t)=>{o[e]=[new Promise((e=>t=e)),t]},e.set=(e,t,n)=>{if(!(n=o[e]))return o[e]=[t];n[1](t)},e.unset=(e)=>{delete o[e]},e.load=(e,t)=>{if(t=o[e])return t[0]}})(window._$HY||(_$HY={events:[],completed:new WeakSet}))</script><!xs>`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -628,32 +679,17 @@ function injectScripts(html, scripts, nonce) {
   }
   return html + tag;
 }
-const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
-function asyncWrap(fn) {
-  return new Promise(resolve => {
-    const registry = new Set();
-    const cache = Object.create(null);
-    solidJs.sharedConfig.context.registerFragment = register;
-    const rendered = fn();
-    if (!registry.size) resolve(rendered);
-    function register(key) {
-      registry.add(key);
-      return value => {
-        if (value) cache[key] = value;
-        registry.delete(key);
-        if (!registry.size) Promise.resolve().then(() => {
-          let source = resolveSSRNode(rendered);
-          let final = "";
-          let match;
-          while (match = source.match(FRAGMENT_REPLACE)) {
-            final += source.substring(0, match.index);
-            source = cache[match[1]] + source.substring(match.index + match[0].length);
-          }
-          resolve(final + source);
-        });
-      };
+function serializeError(error) {
+  return error.message ? `new Error(${devalue(error.message)})` : devalue(error);
+}
+function waitForFragments(registry, key) {
+  for (const k of [...registry.keys()].reverse()) {
+    if (key.startsWith(k)) {
+      registry.get(k).push(key);
+      return true;
     }
-  });
+  }
+  return false;
 }
 
 const isServer = true;

package/web/dist/server.js

@@ -229,17 +229,23 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e)}`;
+const REPLACE_SCRIPT = `function $df(e,y,t){t=document.getElementById(e),document.getElementById("pl"+e).replaceWith(...t.childNodes),_$HY.set(e,y)}`;
+const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
 function renderToString(code, options = {}) {
+  let scripts = "";
   sharedConfig.context = {
     id: "",
     count: 0,
     suspense: {},
     assets: [],
-    nonce: options.nonce
+    nonce: options.nonce,
+    writeResource(id, p, error) {
+      if (error) scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    }
   };
-  let html = resolveSSRNode(escape(code()));
-  return injectAssets(sharedConfig.context.assets, html);
+  let html = injectAssets(sharedConfig.context.assets, resolveSSRNode(escape(code())));
+  if (scripts.length) html = injectScripts(html, scripts, options.nonce);
+  return html;
 }
 function renderToStringAsync(code, options = {}) {
   const {
@@ -256,23 +262,55 @@ function renderToStringAsync(code, options = {}) {
     nonce
   };
   let scripts = "";
-  sharedConfig.context.writeResource = (id, p) => p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`);
+  sharedConfig.context.writeResource = (id, p, error) => {
+    if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
+    p.then(d => scripts += `_$HY.set("${id}", ${devalue(d)});`).catch(() => scripts += `_$HY.set("${id}", null);`);
+  };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  function asyncWrap(fn) {
+    return new Promise(resolve => {
+      const registry = new Set();
+      const cache = Object.create(null);
+      sharedConfig.context.registerFragment = register;
+      const rendered = fn();
+      if (!registry.size) resolve(rendered);
+      function register(key) {
+        registry.add(key);
+        return (value = "", error) => {
+          cache[key] = value;
+          registry.delete(key);
+          if (error) return scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;
+          if (!registry.size) Promise.resolve().then(() => {
+            let source = resolveSSRNode(rendered);
+            let final = "";
+            let match;
+            while (match = source.match(FRAGMENT_REPLACE)) {
+              final += source.substring(0, match.index);
+              source = cache[match[1]] + source.substring(match.index + match[0].length);
+            }
+            resolve(final + source);
+          });
+          return true;
+        };
+      }
+    });
+  }
   return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
     let html = injectAssets(context.assets, resolveSSRNode(res));
     if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
-function renderToPipeableStream(code, options) {
+function renderToPipeableStream(code, options = {}) {
   const {
     nonce,
     onCompleteShell,
-    onCompleteAll
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
   const tasks = [];
-  const registry = new Set();
+  const registry = new Map();
   const checkEnd = () => {
     if (!registry.size && !completed) {
       onCompleteAll && onCompleteAll(result);
@@ -281,7 +319,7 @@ function renderToPipeableStream(code, options) {
     }
   };
   const writeInitialScript = () => {
-    if (tasks.length) {
+    if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
       tasks.length = 0;
     }
@@ -301,37 +339,43 @@ function renderToPipeableStream(code, options) {
     count: 0,
     async: true,
     streaming: true,
+    dataOnly,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p) {
+    writeResource(id, p, error) {
       if (!scheduled) {
         Promise.resolve().then(writeInitialScript);
         scheduled = true;
       }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
       tasks.push(`_$HY.init("${id}")`);
       p.then(d => {
-        buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`);
+      }).catch(() => {
+        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`);
       });
     },
     registerFragment(key) {
-      registry.add(key);
-      Promise.resolve().then(() => {
-        if (registry.has(key)) {
-          if (!scheduled) {
-            Promise.resolve().then(writeInitialScript);
-            scheduled = true;
-          }
-          tasks.push(`_$HY.init("${key}")`);
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
         }
-      });
-      return value => {
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
         registry.delete(key);
-        if (!value) return;
-        buffer.write(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`);
-        scriptFlushed = true;
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`);
+          scriptFlushed = true;
+        }
         checkEnd();
+        return true;
       };
     }
   };
@@ -358,13 +402,14 @@ function pipeToWritable(code, writable, options = {}) {
     onCompleteShell = ({
       startWriting
     }) => startWriting(),
-    onCompleteAll
+    onCompleteAll,
+    dataOnly
   } = options;
   const tmp = [];
   const tasks = [];
   const writer = writable.getWriter();
   const encoder = new TextEncoder();
-  const registry = new Set();
+  const registry = new Map();
   const checkEnd = () => {
     if (!registry.size && !completed) {
       onCompleteAll && onCompleteAll(result);
@@ -406,37 +451,43 @@ function pipeToWritable(code, writable, options = {}) {
     count: 0,
     async: true,
     streaming: true,
+    dataOnly,
     resources: {},
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p) {
+    writeResource(id, p, error) {
       if (!scheduled) {
         Promise.resolve().then(writeInitialScript);
         scheduled = true;
       }
+      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
       tasks.push(`_$HY.init("${id}")`);
       p.then(d => {
-        buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", ${devalue(d)})</script>`));
+      }).catch(() => {
+        !completed && buffer.write(encoder.encode(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", null)</script>`));
       });
     },
     registerFragment(key) {
-      registry.add(key);
-      Promise.resolve().then(() => {
-        if (registry.has(key)) {
-          if (!scheduled) {
-            Promise.resolve().then(writeInitialScript);
-            scheduled = true;
-          }
-          tasks.push(`_$HY.init("${key}")`);
+      registry.set(key, []);
+      if (!dataOnly) {
+        if (!scheduled) {
+          Promise.resolve().then(writeInitialScript);
+          scheduled = true;
         }
-      });
-      return value => {
+        tasks.push(`_$HY.init("${key}")`);
+      }
+      return (value, error) => {
+        const keys = registry.get(key);
         registry.delete(key);
-        if (!value) return;
-        buffer.write(encoder.encode(`<div hidden id="${key}">${value}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}$df("${key}")</script>`));
-        scriptFlushed = true;
+        if (waitForFragments(registry, key)) return;
+        if ((value !== undefined || error) && !completed) {
+          buffer.write(encoder.encode(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`));
+          scriptFlushed = true;
+        }
         checkEnd();
+        return true;
       };
     }
   };
@@ -609,7 +660,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 }) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>((e,t,o={})=>{t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let n=o.composedPath&&o.composedPath()[0]||o.target,s=t(n);s&&!e.completed.has(s)&&e.events.push([s,o])})))),e.init=(e,t)=>{o[e]=[new Promise((e=>t=e)),t]},e.set=(e,t,n)=>{if(!(n=o[e]))return o[e]=[t];n[1](t)},e.load=(e,t)=>{if(t=o[e])return t[0]}})(window._$HY||(_$HY={events:[],completed:new WeakSet}));</script><!xs>`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>((e,t,o={})=>{t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let n=o.composedPath&&o.composedPath()[0]||o.target,s=t(n);s&&!e.completed.has(s)&&e.events.push([s,o])})))),e.init=(e,t)=>{o[e]=[new Promise((e=>t=e)),t]},e.set=(e,t,n)=>{if(!(n=o[e]))return o[e]=[t];n[1](t)},e.unset=(e)=>{delete o[e]},e.load=(e,t)=>{if(t=o[e])return t[0]}})(window._$HY||(_$HY={events:[],completed:new WeakSet}))</script><!xs>`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -625,32 +676,17 @@ function injectScripts(html, scripts, nonce) {
   }
   return html + tag;
 }
-const FRAGMENT_REPLACE = /<!\[([\d.]+)\]>/;
-function asyncWrap(fn) {
-  return new Promise(resolve => {
-    const registry = new Set();
-    const cache = Object.create(null);
-    sharedConfig.context.registerFragment = register;
-    const rendered = fn();
-    if (!registry.size) resolve(rendered);
-    function register(key) {
-      registry.add(key);
-      return value => {
-        if (value) cache[key] = value;
-        registry.delete(key);
-        if (!registry.size) Promise.resolve().then(() => {
-          let source = resolveSSRNode(rendered);
-          let final = "";
-          let match;
-          while (match = source.match(FRAGMENT_REPLACE)) {
-            final += source.substring(0, match.index);
-            source = cache[match[1]] + source.substring(match.index + match[0].length);
-          }
-          resolve(final + source);
-        });
-      };
+function serializeError(error) {
+  return error.message ? `new Error(${devalue(error.message)})` : devalue(error);
+}
+function waitForFragments(registry, key) {
+  for (const k of [...registry.keys()].reverse()) {
+    if (key.startsWith(k)) {
+      registry.get(k).push(key);
+      return true;
     }
-  });
+  }
+  return false;
 }
 
 const isServer = true;

package/web/dist/web.cjs

@@ -381,8 +381,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       return () => current;
     }
     if (solidJs.sharedConfig.context && current && current.length) {
-      for (let i; i < array.length; i++) {
-        if (array[i].parentNode) return array;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
       }
       return current;
     }

package/web/dist/web.js

@@ -378,8 +378,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       return () => current;
     }
     if (sharedConfig.context && current && current.length) {
-      for (let i; i < array.length; i++) {
-        if (array[i].parentNode) return array;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
       }
       return current;
     }