solid-js 1.4.0-beta.1 → 1.4.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -27,6 +27,8 @@
     "web/types",
     "h/dist",
     "h/types",
+    "h/jsx-runtime/dist",
+    "h/jsx-runtime/types",
     "html/dist",
     "html/types",
     "universal/dist",
@@ -111,6 +113,10 @@
       "import": "./h/dist/h.js",
       "require": "./h/dist/h.cjs"
     },
+    "./h/jsx-runtime": {
+      "import": "./h/dist/jsx.js",
+      "require": "./h/dist/jsx.cjs"
+    },
     "./h/dist/*": "./h/dist/*",
     "./html": {
       "import": "./html/dist/html.js",
@@ -120,15 +126,16 @@
   },
   "scripts": {
     "prebuild": "npm run clean",
-    "clean": "rimraf dist/ types/ coverage/ store/dist/ store/types/ web/dist/ web/types/ h/dist/ h/types/ html/dist/ html/types/",
+    "clean": "rimraf dist/ types/ coverage/ store/dist/ store/types/ web/dist/ web/types/ h/dist/ h/types/ h/jsx-runtime/dist h/jsx-runtime/types html/dist/ html/types/",
     "build": "npm-run-all -cnl build:*",
     "build:link": "symlink-dir . node_modules/solid-js",
-    "build:js": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts && rollup -c",
+    "build:js": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/dom-expressions/src/jsx-standard.d.ts ./h/jsx-runtime/src/jsx.d.ts && rollup -c",
     "build:types": "tsc --project ./tsconfig.build.json",
     "build:types-store": "tsc --project ./store/tsconfig.build.json && tsconfig-replace-paths --project ./store/tsconfig.types.json",
     "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 ./h/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 +151,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "34628200f7c8e0a329905688a455848096a3e429"
+  "gitHead": "c569a8d57962e99a906ed170716055ac6fe929ef"
 }

package/store/dist/dev.cjs

@@ -384,30 +384,6 @@ function produce(fn) {
     return state;
   };
 }
-function splice(start, deleteCount = 0, ...items) {
-  return state => {
-    if (Array.isArray(state)) {
-      if (start < 0) start = start + state.length;
-      if (deleteCount < 0) deleteCount = 0;
-      const stop = start + deleteCount;
-      if (deleteCount >= items.length) {
-        for (let i = stop; i < state.length; i++) {
-          setProperty(state, start + i - stop, state[i]);
-        }
-      } else {
-        const offset = items.length - deleteCount;
-        for (let i = state.length - 1; i >= stop; i--) {
-          setProperty(state, i + offset, state[i]);
-        }
-      }
-      for (let i = 0; i < items.length; i++) {
-        setProperty(state, start + i, items[i]);
-      }
-      setProperty(state, "length", state.length + items.length - deleteCount);
-    }
-    return state;
-  };
-}
 
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
@@ -415,5 +391,4 @@ exports.createStore = createStore;
 exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
-exports.splice = splice;
 exports.unwrap = unwrap;

package/store/dist/dev.js

@@ -380,29 +380,5 @@ function produce(fn) {
     return state;
   };
 }
-function splice(start, deleteCount = 0, ...items) {
-  return state => {
-    if (Array.isArray(state)) {
-      if (start < 0) start = start + state.length;
-      if (deleteCount < 0) deleteCount = 0;
-      const stop = start + deleteCount;
-      if (deleteCount >= items.length) {
-        for (let i = stop; i < state.length; i++) {
-          setProperty(state, start + i - stop, state[i]);
-        }
-      } else {
-        const offset = items.length - deleteCount;
-        for (let i = state.length - 1; i >= stop; i--) {
-          setProperty(state, i + offset, state[i]);
-        }
-      }
-      for (let i = 0; i < items.length; i++) {
-        setProperty(state, start + i, items[i]);
-      }
-      setProperty(state, "length", state.length + items.length - deleteCount);
-    }
-    return state;
-  };
-}
 
-export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, splice, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

package/store/dist/store.cjs

@@ -362,30 +362,6 @@ function produce(fn) {
     return state;
   };
 }
-function splice(start, deleteCount = 0, ...items) {
-  return state => {
-    if (Array.isArray(state)) {
-      if (start < 0) start = start + state.length;
-      if (deleteCount < 0) deleteCount = 0;
-      const stop = start + deleteCount;
-      if (deleteCount >= items.length) {
-        for (let i = stop; i < state.length; i++) {
-          setProperty(state, start + i - stop, state[i]);
-        }
-      } else {
-        const offset = items.length - deleteCount;
-        for (let i = state.length - 1; i >= stop; i--) {
-          setProperty(state, i + offset, state[i]);
-        }
-      }
-      for (let i = 0; i < items.length; i++) {
-        setProperty(state, start + i, items[i]);
-      }
-      setProperty(state, "length", state.length + items.length - deleteCount);
-    }
-    return state;
-  };
-}
 
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
@@ -393,5 +369,4 @@ exports.createStore = createStore;
 exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
-exports.splice = splice;
 exports.unwrap = unwrap;

package/store/dist/store.js

@@ -358,29 +358,5 @@ function produce(fn) {
     return state;
   };
 }
-function splice(start, deleteCount = 0, ...items) {
-  return state => {
-    if (Array.isArray(state)) {
-      if (start < 0) start = start + state.length;
-      if (deleteCount < 0) deleteCount = 0;
-      const stop = start + deleteCount;
-      if (deleteCount >= items.length) {
-        for (let i = stop; i < state.length; i++) {
-          setProperty(state, start + i - stop, state[i]);
-        }
-      } else {
-        const offset = items.length - deleteCount;
-        for (let i = state.length - 1; i >= stop; i--) {
-          setProperty(state, i + offset, state[i]);
-        }
-      }
-      for (let i = 0; i < items.length; i++) {
-        setProperty(state, start + i, items[i]);
-      }
-      setProperty(state, "length", state.length + items.length - deleteCount);
-    }
-    return state;
-  };
-}
 
-export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, splice, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

package/store/types/modifiers.d.ts

@@ -5,4 +5,3 @@ export declare type ReconcileOptions = {
 };
 export declare function reconcile<T extends U, U>(value: T, options?: ReconcileOptions): (state: U) => T;
 export declare function produce<T>(fn: (state: DeepMutable<T>) => void): (state: T) => T;
-export declare function splice<T extends U, U>(start: number, deleteCount?: number, ...items: T[]): (state: readonly U[]) => T[];

package/store/types/mutable.d.ts

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

package/types/reactive/signal.d.ts

@@ -216,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;
 };
 /**

package/types/server/rendering.d.ts

@@ -92,10 +92,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;
 };
 export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;
@@ -116,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;

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) {