solid-js 1.4.0-beta.0 → 1.4.0-beta.3

package/dist/dev.cjs

@@ -263,6 +263,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -271,9 +272,10 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
-      if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
+      resolved = true;
+      if (initP && (p === initP || v === initP) && options.onHydrated) queueMicrotask(() => options.onHydrated(key, {
         value: v
-      });
+      }));
       initP = null;
       setError(err = e);
       if (Transition && p && loadedUnderTransition) {
@@ -357,6 +359,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1229,12 +1232,12 @@ function createComponent(Comp, props) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
       setHydrateContext(nextHydrateContext());
-      const r = devComponent(Comp, props) ;
+      const r = devComponent(Comp, props || {}) ;
       setHydrateContext(c);
       return r;
     }
   }
-  return devComponent(Comp, props);
+  return devComponent(Comp, props || {});
 }
 function trueFn() {
   return true;
@@ -1265,7 +1268,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/dev.js

@@ -259,6 +259,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -267,9 +268,10 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
-      if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
+      resolved = true;
+      if (initP && (p === initP || v === initP) && options.onHydrated) queueMicrotask(() => options.onHydrated(key, {
         value: v
-      });
+      }));
       initP = null;
       setError(err = e);
       if (Transition && p && loadedUnderTransition) {
@@ -353,6 +355,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1225,12 +1228,12 @@ function createComponent(Comp, props) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
       setHydrateContext(nextHydrateContext());
-      const r = devComponent(Comp, props) ;
+      const r = devComponent(Comp, props || {}) ;
       setHydrateContext(c);
       return r;
     }
   }
-  return devComponent(Comp, props);
+  return devComponent(Comp, props || {});
 }
 function trueFn() {
   return true;
@@ -1261,7 +1264,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/server.cjs

@@ -249,11 +249,11 @@ function createComponent(Comp, props) {
   if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
-    const r = Comp(props);
+    const r = Comp(props || {});
     setHydrateContext(c);
     return r;
   }
-  return Comp(props);
+  return Comp(props || {});
 }
 function mergeProps(...sources) {
   const target = {};
@@ -372,6 +372,11 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
+  Object.defineProperty(read, "latest", {
+    get() {
+      return read();
+    }
+  });
   function load() {
     const ctx = sharedConfig.context;
     if (!ctx.async) return read.loading = !!(typeof source === "function" ? source() : source);
@@ -395,7 +400,7 @@ function createResource(source, fetcher, options = {}) {
     }
     if (p && "then" in p) {
       read.loading = true;
-      if (ctx.writeResource) ctx.writeResource(id, p);
+      if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
         ctx.resources[id].data = res;

package/dist/server.js

@@ -245,11 +245,11 @@ function createComponent(Comp, props) {
   if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
-    const r = Comp(props);
+    const r = Comp(props || {});
     setHydrateContext(c);
     return r;
   }
-  return Comp(props);
+  return Comp(props || {});
 }
 function mergeProps(...sources) {
   const target = {};
@@ -368,6 +368,11 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
+  Object.defineProperty(read, "latest", {
+    get() {
+      return read();
+    }
+  });
   function load() {
     const ctx = sharedConfig.context;
     if (!ctx.async) return read.loading = !!(typeof source === "function" ? source() : source);
@@ -391,7 +396,7 @@ function createResource(source, fetcher, options = {}) {
     }
     if (p && "then" in p) {
       read.loading = true;
-      if (ctx.writeResource) ctx.writeResource(id, p);
+      if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
         ctx.resources[id].data = res;

package/dist/solid.cjs

@@ -260,6 +260,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -268,9 +269,10 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
-      if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
+      resolved = true;
+      if (initP && (p === initP || v === initP) && options.onHydrated) queueMicrotask(() => options.onHydrated(key, {
         value: v
-      });
+      }));
       initP = null;
       setError(err = e);
       if (Transition && p && loadedUnderTransition) {
@@ -354,6 +356,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1148,12 +1151,12 @@ function createComponent(Comp, props) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
       setHydrateContext(nextHydrateContext());
-      const r = untrack(() => Comp(props));
+      const r = untrack(() => Comp(props || {}));
       setHydrateContext(c);
       return r;
     }
   }
-  return untrack(() => Comp(props));
+  return untrack(() => Comp(props || {}));
 }
 function trueFn() {
   return true;
@@ -1184,7 +1187,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/solid.js

@@ -256,6 +256,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -264,9 +265,10 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
-      if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
+      resolved = true;
+      if (initP && (p === initP || v === initP) && options.onHydrated) queueMicrotask(() => options.onHydrated(key, {
         value: v
-      });
+      }));
       initP = null;
       setError(err = e);
       if (Transition && p && loadedUnderTransition) {
@@ -350,6 +352,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1144,12 +1147,12 @@ function createComponent(Comp, props) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
       setHydrateContext(nextHydrateContext());
-      const r = untrack(() => Comp(props));
+      const r = untrack(() => Comp(props || {}));
       setHydrateContext(c);
       return r;
     }
   }
-  return untrack(() => Comp(props));
+  return untrack(() => Comp(props || {}));
 }
 function trueFn() {
   return true;
@@ -1180,7 +1183,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/jsx-runtime/dist/jsx.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var h = require('solid-js/h');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var h__default = /*#__PURE__*/_interopDefaultLegacy(h);
+
+function Fragment(props) {
+  return props.children;
+}
+
+Object.defineProperty(exports, 'jsx', {
+  enumerable: true,
+  get: function () { return h__default["default"]; }
+});
+Object.defineProperty(exports, 'jsxDEV', {
+  enumerable: true,
+  get: function () { return h__default["default"]; }
+});
+Object.defineProperty(exports, 'jsxs', {
+  enumerable: true,
+  get: function () { return h__default["default"]; }
+});
+exports.Fragment = Fragment;

package/jsx-runtime/dist/jsx.js

@@ -0,0 +1,7 @@
+export { default as jsx, default as jsxDEV, default as jsxs } from 'solid-js/h';
+
+function Fragment(props) {
+  return props.children;
+}
+
+export { Fragment };

package/jsx-runtime/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "solid-js/jsx-runtime",
+  "main": "./dist/jsx.cjs",
+  "module": "./dist/jsx.js",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false
+}

package/jsx-runtime/types/index.d.ts

@@ -0,0 +1,7 @@
+import h from "solid-js/h";
+export type { JSX } from "solid-js";
+import type { JSX } from "solid-js";
+declare function Fragment(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export { h as jsx, h as jsxs, h as jsxDEV, Fragment };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.4.0-beta.0",
+  "version": "1.4.0-beta.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -32,7 +32,8 @@
     "universal/dist",
     "universal/types",
     "types",
-    "jsx-runtime.d.ts"
+    "jsx-runtime/dist",
+    "jsx-runtime/types"
   ],
   "exports": {
     ".": {
@@ -116,7 +117,11 @@
       "import": "./html/dist/html.js",
       "require": "./html/dist/html.cjs"
     },
-    "./html/dist/*": "./html/dist/*"
+    "./html/dist/*": "./html/dist/*",
+    "./jsx-runtime": {
+      "import": "./html/dist/jsx.js",
+      "require": "./html/dist/jsx.cjs"
+    }
   },
   "scripts": {
     "prebuild": "npm run clean",
@@ -129,6 +134,7 @@
     "build:types-web": "tsc --project ./web/tsconfig.build.json && tsconfig-replace-paths --project ./web/tsconfig.types.json",
     "build:types-html": "tsc --project ./html/tsconfig.json",
     "build:types-h": "tsc --project ./h/tsconfig.json",
+    "build:types-jsx": "tsc --project ./jsx-runtime/tsconfig.json",
     "build:types-universal": "tsc --project ./universal/tsconfig.json",
     "bench": "node --allow-natives-syntax bench/bench.cjs",
     "test": "jest && npm run test:types",
@@ -144,5 +150,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "c47bee46d775574c4eebd94ea207f4e679f08d60"
+  "gitHead": "0919e999b84569a9d1d3b5cf4948f34952960784"
 }

package/store/dist/dev.cjs

@@ -134,6 +134,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -200,7 +203,7 @@ function createStore(store, options) {
   }
   function setStore(...args) {
     solidJs.batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -216,8 +219,8 @@ const proxyTraps = {
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => solidJs.batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
@@ -274,6 +277,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -382,6 +388,7 @@ function produce(fn) {
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
 exports.unwrap = unwrap;

package/store/dist/dev.js

@@ -130,6 +130,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -196,7 +199,7 @@ function createStore(store, options) {
   }
   function setStore(...args) {
     batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -212,8 +215,8 @@ const proxyTraps = {
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
@@ -270,6 +273,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -375,4 +381,4 @@ function produce(fn) {
   };
 }
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

package/store/dist/store.cjs

@@ -129,6 +129,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -188,7 +191,7 @@ function createStore(store, options) {
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
     solidJs.batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -204,8 +207,8 @@ const proxyTraps = {
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => solidJs.batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value) : value;
   },
@@ -252,6 +255,9 @@ function createMutable(state, options) {
   const wrappedStore = wrap(unwrappedStore);
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -360,6 +366,7 @@ function produce(fn) {
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
 exports.unwrap = unwrap;

package/store/dist/store.js

@@ -125,6 +125,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -184,7 +187,7 @@ function createStore(store, options) {
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
     batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -200,8 +203,8 @@ const proxyTraps = {
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value) : value;
   },
@@ -248,6 +251,9 @@ function createMutable(state, options) {
   const wrappedStore = wrap(unwrappedStore);
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -353,4 +359,4 @@ function produce(fn) {
   };
 }
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

package/store/types/mutable.d.ts

@@ -2,3 +2,4 @@ import { StoreNode } from "./store";
 export declare function createMutable<T extends StoreNode>(state: T, options?: {
     name?: string;
 }): T;
+export declare function modifyMutable<T>(state: T, modifier: (state: T) => T): void;

package/types/reactive/signal.d.ts

@@ -1,5 +1,6 @@
 import { requestCallback } from "./scheduler";
 import type { JSX } from "../jsx";
+import type { FlowComponent } from "../render";
 export declare const equalFn: <T>(a: T, b: T) => boolean;
 export declare const $PROXY: unique symbol;
 export declare const $TRACK: unique symbol;
@@ -123,8 +124,8 @@ export declare type EffectFunction<Prev, Next extends Prev = Prev> = (v: Prev) =
  *
  * @description https://www.solidjs.com/docs/latest/api#createcomputed
  */
+export declare function createComputed<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createComputed<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createComputed<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs during the render phase as DOM elements are created and updated but not necessarily connected
  * ```typescript
@@ -140,8 +141,8 @@ export declare function createComputed<Next, Init = undefined>(..._: undefined e
  *
  * @description https://www.solidjs.com/docs/latest/api#createrendereffect
  */
+export declare function createRenderEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createRenderEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createRenderEffect<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs after the render phase
  * ```typescript
@@ -157,8 +158,8 @@ export declare function createRenderEffect<Next, Init = undefined>(..._: undefin
  *
  * @description https://www.solidjs.com/docs/latest/api#createeffect
  */
+export declare function createEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createEffect<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs after the render phase with flexible tracking
  * ```typescript
@@ -194,8 +195,8 @@ export interface MemoOptions<T> extends EffectOptions {
  *
  * @description https://www.solidjs.com/docs/latest/api#creatememo
  */
-export declare function createMemo<Next extends _Next, Init = Next, _Next = Next>(fn: EffectFunction<Init | _Next, Next>, value: Init, options?: MemoOptions<Next>): Accessor<Next>;
-export declare function createMemo<Next extends _Next, Init = undefined, _Next = Next>(..._: undefined extends Init ? [fn: EffectFunction<Init | _Next, Next>, value?: Init, options?: MemoOptions<Next>] : [fn: EffectFunction<Init | _Next, Next>, value: Init, options?: MemoOptions<Next>]): Accessor<Next>;
+export declare function createMemo<Next extends Prev, Prev = Next>(fn: EffectFunction<undefined | NoInfer<Prev>, Next>): Accessor<Next>;
+export declare function createMemo<Next extends Prev, Init = Next, Prev = Next>(fn: EffectFunction<Init | Prev, Next>, value: Init, options?: MemoOptions<Next>): Accessor<Next>;
 export interface Resource<T> extends Accessor<T> {
     loading: boolean;
     error: any;
@@ -215,10 +216,12 @@ export declare type ResourceFetcherInfo<T> = {
 export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
 /**
@@ -401,10 +404,9 @@ interface GraphRecord {
     [k: string]: GraphRecord | unknown;
 }
 export declare function serializeGraph(owner?: Owner | null): GraphRecord;
-export declare type ContextProviderComponent<T> = (props: {
+export declare type ContextProviderComponent<T> = FlowComponent<{
     value: T;
-    children: any;
-}) => any;
+}>;
 export interface Context<T> {
     id: symbol;
     Provider: ContextProviderComponent<T>;
@@ -415,7 +417,7 @@ export interface Context<T> {
  * ```typescript
  * interface Context<T> {
  *   id: symbol;
- *   Provider: (props: { value: T; children: any }) => any;
+ *   Provider: FlowComponent<{ value: T }>;
  *   defaultValue: T;
  * }
  * export function createContext<T>(defaultValue?: T): Context<T | undefined>;

package/types/render/component.d.ts

@@ -1,9 +1,56 @@
 import type { JSX } from "../jsx";
 export declare function enableHydration(): void;
-export declare type PropsWithChildren<P = {}> = P & {
+/**
+ * A general `Component` has no implicit `children` prop.  If desired, you can
+ * specify one as in `Component<{name: String, children: JSX.Element>}`.
+ */
+export declare type Component<P = {}> = (props: P) => JSX.Element;
+/**
+ * Extend props to forbid the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export declare type VoidProps<P = {}> = P & {
+    children?: never;
+};
+/**
+ * `VoidComponent` forbids the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export declare type VoidComponent<P = {}> = Component<VoidProps<P>>;
+/**
+ * Extend props to allow an optional `children` prop with the usual
+ * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
+ * Use this for components that you want to accept children.
+ */
+export declare type ParentProps<P = {}> = P & {
     children?: JSX.Element;
 };
-export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Element;
+/**
+ * `ParentComponent` allows an optional `children` prop with the usual
+ * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
+ * Use this for components that you want to accept children.
+ */
+export declare type ParentComponent<P = {}> = Component<ParentProps<P>>;
+/**
+ * Extend props to require a `children` prop with the specified type.
+ * Use this for components where you need a specific child type,
+ * typically a function that receives specific argument types.
+ * Note that all JSX <Elements> are of the type `JSX.Element`.
+ */
+export declare type FlowProps<P = {}, C = JSX.Element> = P & {
+    children: C;
+};
+/**
+ * `FlowComponent` requires a `children` prop with the specified type.
+ * Use this for components where you need a specific child type,
+ * typically a function that receives specific argument types.
+ * Note that all JSX <Elements> are of the type `JSX.Element`.
+ */
+export declare type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
+/** @deprecated: use `ParentProps` instead */
+export declare type PropsWithChildren<P = {}> = ParentProps<P>;
 /**
  * Takes the props of the passed component and returns its type
  *
@@ -12,7 +59,13 @@ export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Ele
  * ComponentProps<'div'> // JSX.HTMLAttributes<HTMLDivElement>
  */
 export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Component<any>> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {};
-export declare function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
+/**
+ * Type of `props.ref`, for use in `Component` or `props` typing.
+ *
+ * @example Component<{ref: Ref<Element>}>
+ */
+export declare type Ref<T> = T | ((val: T) => void);
+export declare function createComponent<T>(Comp: Component<T>, props: T): JSX.Element;
 declare type UnboxLazy<T> = T extends () => infer U ? U : T;
 declare type BoxedTupleTypes<T extends any[]> = {
     [P in keyof T]: [UnboxLazy<T[P]>];

package/types/server/reactive.d.ts

@@ -42,7 +42,7 @@ export declare function createContext<T>(defaultValue?: T): Context<T>;
 export declare function useContext<T>(context: Context<T>): T;
 export declare function getOwner(): Owner | null;
 export declare function children(fn: () => any): () => unknown;
-export declare function runWithOwner(o: Owner, fn: () => any): any;
+export declare function runWithOwner<T>(o: Owner, fn: () => T): T;
 export declare function lookup(owner: Owner | null, key: symbol | string): any;
 export interface Task {
     id: number;

package/types/server/rendering.d.ts

@@ -1,18 +1,26 @@
 import { Setter } from "./reactive";
 import type { JSX } from "../jsx";
-declare type PropsWithChildren<P> = P & {
+export declare type Component<P = {}> = (props: P) => JSX.Element;
+export declare type VoidProps<P = {}> = P & {
+    children?: never;
+};
+export declare type VoidComponent<P = {}> = Component<VoidProps<P>>;
+export declare type ParentProps<P = {}> = P & {
     children?: JSX.Element;
 };
-export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Element;
-declare type PossiblyWrapped<T> = {
-    [P in keyof T]: T[P] | (() => T[P]);
+export declare type ParentComponent<P = {}> = Component<ParentProps<P>>;
+export declare type FlowProps<P = {}, C = JSX.Element> = P & {
+    children: C;
 };
+export declare type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
+export declare type Ref<T> = T | ((val: T) => void);
+export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Component> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {};
 declare type SharedConfig = {
     context?: HydrationContext;
 };
 export declare const sharedConfig: SharedConfig;
 export declare function createUniqueId(): string;
-export declare function createComponent<T>(Comp: (props: T) => JSX.Element, props: PossiblyWrapped<T>): JSX.Element;
+export declare function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export declare function mergeProps<T, U>(source: T, source1: U): T & U;
 export declare function mergeProps<T, U, V>(source: T, source1: U, source2: V): T & U & V;
 export declare function mergeProps<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;
@@ -84,19 +92,25 @@ export declare type ResourceFetcherInfo<T> = {
 export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
 export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;
 export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T>;
 export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;
 export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T>;
-export declare function lazy(fn: () => Promise<{
-    default: any;
-}>): (props: any) => string;
+export declare function lazy<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>): T & {
+    preload: () => Promise<{
+        default: T;
+    }>;
+};
 export declare function enableScheduling(): void;
 export declare function enableHydration(): void;
 export declare function startTransition(fn: () => any): void;
@@ -104,7 +118,7 @@ export declare function useTransition(): [() => boolean, (fn: () => any) => void
 declare type HydrationContext = {
     id: string;
     count: number;
-    writeResource?: (id: string, v: Promise<any> | any, error?: boolean) => void;
+    writeResource?: (id: string, v: Promise<any> | any, error?: boolean, deferStream?: boolean) => void;
     resources: Record<string, any>;
     suspense: Record<string, SuspenseContextType>;
     registerFragment: (v: string) => (v?: string, err?: any) => boolean;
@@ -120,5 +134,7 @@ export declare function SuspenseList(props: {
 export declare function Suspense(props: {
     fallback?: string;
     children: string;
-}): any;
+}): string | number | boolean | Node | JSX.ArrayElement | JSX.FunctionElement | {
+    t: string;
+} | null | undefined;
 export {};

package/web/dist/server.cjs

@@ -269,8 +269,8 @@ function renderToStringAsync(code, options = {}) {
     nonce,
     writeResource(id, p, error) {
       if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p);
-      p.then(d => scripts += serializeSet(dedupe, id, d)).catch(() => scripts += `_$HY.set("${id}", {});`);
+      if (!p || typeof p !== "object" || !("then" in p)) return (scripts += serializeSet(dedupe, id, p)) + ";";
+      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
@@ -318,6 +318,7 @@ function renderToStream(code, options = {}) {
   } = options;
   const tmp = [];
   const tasks = [];
+  const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
   const checkEnd = () => {
@@ -332,6 +333,13 @@ function renderToStream(code, options = {}) {
       completed = true;
     }
   };
+  const pushTask = task => {
+    tasks.push(task);
+    if (!scheduled) {
+      Promise.resolve().then(writeTasks);
+      scheduled = true;
+    }
+  };
   const writeTasks = () => {
     if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
@@ -340,6 +348,7 @@ function renderToStream(code, options = {}) {
     scheduled = false;
   };
   let writable;
+  let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
@@ -357,45 +366,45 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p, error) {
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
-      }
-      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
-      if (!p || typeof p !== "object" || !("then" in p)) return tasks.push(serializeSet(dedupe, id, p));
-      tasks.push(`_$HY.init("${id}")`);
+    writeResource(id, p, error, wait) {
+      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
+      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${serializeSet(dedupe, id, d)}</script>`);
+        !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", {})</script>`);
+        !completed && pushTask(`_$HY.set("${id}", {})`);
       });
     },
     registerFragment(key) {
-      registry.set(key, []);
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
+      if (!registry.has(key)) {
+        registry.set(key, []);
+        pushTask(`_$HY.init("${key}")`);
       }
-      tasks.push(`_$HY.init("${key}")`);
       return (value, error) => {
         if (registry.has(key)) {
           const keys = registry.get(key);
           registry.delete(key);
           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;
+            if (!firstFlushed) {
+              Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+            } else {
+              buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              scriptFlushed = true;
+            }
           }
         }
-        checkEnd();
+        if (firstFlushed) checkEnd();
         return true;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
-  html = injectAssets(solidJs.sharedConfig.context.assets, html);
-  Promise.resolve().then(() => {
+  function doShell() {
+    html = injectAssets(solidJs.sharedConfig.context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
     buffer.write(html);
     tasks.length = 0;
@@ -405,29 +414,37 @@ function renderToStream(code, options = {}) {
         !completed && buffer.write(v);
       }
     });
-  });
+  }
   return {
     pipe(w) {
-      buffer = writable = w;
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        buffer = writable = w;
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     },
     pipeTo(w) {
-      const encoder = new TextEncoder();
-      const writer = w.getWriter();
-      writable = {
-        end() {
-          writer.releaseLock();
-          w.close();
-        }
-      };
-      buffer = {
-        write(payload) {
-          writer.write(encoder.encode(payload));
-        }
-      };
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        const encoder = new TextEncoder();
+        const writer = w.getWriter();
+        writable = {
+          end() {
+            writer.releaseLock();
+            w.close();
+          }
+        };
+        buffer = {
+          write(payload) {
+            writer.write(encoder.encode(payload));
+          }
+        };
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     }
   };
 }
@@ -638,9 +655,26 @@ function waitForFragments(registry, key) {
 }
 function serializeSet(registry, key, value) {
   const exist = registry.get(value);
-  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0]);`;
+  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)});`;
+  return `_$HY.set("${key}", ${devalue(value)})`;
+}
+function replacePlaceholder(html, key, value) {
+  const nextRegex = /(<[/]?span[^>]*>)/g;
+  const marker = `<span id="pl-${key}">`;
+  const first = html.indexOf(marker);
+  if (first === -1) return html;
+  nextRegex.lastIndex = first + marker.length;
+  let match;
+  let open = 0,
+      close = 0;
+  while (match = nextRegex.exec(html)) {
+    if (match[0][1] === "/") {
+      close++;
+      if (close > open) break;
+    } else open++;
+  }
+  return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
 }
 function pipeToNodeWritable(code, writable, options = {}) {
   if (options.onReady) {

package/web/dist/server.js

@@ -266,8 +266,8 @@ function renderToStringAsync(code, options = {}) {
     nonce,
     writeResource(id, p, error) {
       if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p);
-      p.then(d => scripts += serializeSet(dedupe, id, d)).catch(() => scripts += `_$HY.set("${id}", {});`);
+      if (!p || typeof p !== "object" || !("then" in p)) return (scripts += serializeSet(dedupe, id, p)) + ";";
+      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
@@ -315,6 +315,7 @@ function renderToStream(code, options = {}) {
   } = options;
   const tmp = [];
   const tasks = [];
+  const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
   const checkEnd = () => {
@@ -329,6 +330,13 @@ function renderToStream(code, options = {}) {
       completed = true;
     }
   };
+  const pushTask = task => {
+    tasks.push(task);
+    if (!scheduled) {
+      Promise.resolve().then(writeTasks);
+      scheduled = true;
+    }
+  };
   const writeTasks = () => {
     if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
@@ -337,6 +345,7 @@ function renderToStream(code, options = {}) {
     scheduled = false;
   };
   let writable;
+  let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
@@ -354,45 +363,45 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p, error) {
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
-      }
-      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
-      if (!p || typeof p !== "object" || !("then" in p)) return tasks.push(serializeSet(dedupe, id, p));
-      tasks.push(`_$HY.init("${id}")`);
+    writeResource(id, p, error, wait) {
+      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
+      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${serializeSet(dedupe, id, d)}</script>`);
+        !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", {})</script>`);
+        !completed && pushTask(`_$HY.set("${id}", {})`);
       });
     },
     registerFragment(key) {
-      registry.set(key, []);
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
+      if (!registry.has(key)) {
+        registry.set(key, []);
+        pushTask(`_$HY.init("${key}")`);
       }
-      tasks.push(`_$HY.init("${key}")`);
       return (value, error) => {
         if (registry.has(key)) {
           const keys = registry.get(key);
           registry.delete(key);
           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;
+            if (!firstFlushed) {
+              Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+            } else {
+              buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              scriptFlushed = true;
+            }
           }
         }
-        checkEnd();
+        if (firstFlushed) checkEnd();
         return true;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
-  html = injectAssets(sharedConfig.context.assets, html);
-  Promise.resolve().then(() => {
+  function doShell() {
+    html = injectAssets(sharedConfig.context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
     buffer.write(html);
     tasks.length = 0;
@@ -402,29 +411,37 @@ function renderToStream(code, options = {}) {
         !completed && buffer.write(v);
       }
     });
-  });
+  }
   return {
     pipe(w) {
-      buffer = writable = w;
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        buffer = writable = w;
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     },
     pipeTo(w) {
-      const encoder = new TextEncoder();
-      const writer = w.getWriter();
-      writable = {
-        end() {
-          writer.releaseLock();
-          w.close();
-        }
-      };
-      buffer = {
-        write(payload) {
-          writer.write(encoder.encode(payload));
-        }
-      };
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        const encoder = new TextEncoder();
+        const writer = w.getWriter();
+        writable = {
+          end() {
+            writer.releaseLock();
+            w.close();
+          }
+        };
+        buffer = {
+          write(payload) {
+            writer.write(encoder.encode(payload));
+          }
+        };
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     }
   };
 }
@@ -635,9 +652,26 @@ function waitForFragments(registry, key) {
 }
 function serializeSet(registry, key, value) {
   const exist = registry.get(value);
-  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0]);`;
+  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)});`;
+  return `_$HY.set("${key}", ${devalue(value)})`;
+}
+function replacePlaceholder(html, key, value) {
+  const nextRegex = /(<[/]?span[^>]*>)/g;
+  const marker = `<span id="pl-${key}">`;
+  const first = html.indexOf(marker);
+  if (first === -1) return html;
+  nextRegex.lastIndex = first + marker.length;
+  let match;
+  let open = 0,
+      close = 0;
+  while (match = nextRegex.exec(html)) {
+    if (match[0][1] === "/") {
+      close++;
+      if (close > open) break;
+    } else open++;
+  }
+  return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
 }
 function pipeToNodeWritable(code, writable, options = {}) {
   if (options.onReady) {

package/jsx-runtime.d.ts

@@ -1 +0,0 @@
-export * from "./types/jsx"