solid-js 1.5.0-beta.1 → 1.5.0-beta.2

package/web/dist/server.cjs

@@ -233,7 +233,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||"$$$")}`;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   solidJs.sharedConfig.context = {
@@ -271,8 +271,6 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
-  const tmp = [];
-  const tasks = [];
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -289,7 +287,7 @@ function renderToStream(code, options = {}) {
     }
   };
   const pushTask = task => {
-    tasks.push(task);
+    tasks += task + ";";
     if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
@@ -297,22 +295,25 @@ function renderToStream(code, options = {}) {
   };
   const writeTasks = () => {
     if (tasks.length && !completed && firstFlushed) {
-      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
-      tasks.length = 0;
+      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
+      tasks = "";
     }
     scheduled = false;
   };
+  let context;
   let writable;
+  let tmp = "";
+  let tasks = "";
   let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
   let buffer = {
     write(payload) {
-      tmp.push(payload);
+      tmp += payload;
     }
   };
-  solidJs.sharedConfig.context = {
+  solidJs.sharedConfig.context = context = {
     id: renderId || "",
     count: 0,
     async: true,
@@ -320,10 +321,18 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
+    replace(id, payloadFn) {
+      if (firstFlushed) return;
+      const placeholder = `<!${id}>`;
+      const first = html.indexOf(placeholder);
+      if (first === -1) return;
+      const last = html.indexOf(`<!/${id}>`, first + placeholder.length);
+      html = html.replace(html.slice(first, last + placeholder.length + 1), resolveSSRNode(payloadFn()));
+    },
     writeResource(id, p, error, wait) {
-      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (error) return pushTask(serializeSet(dedupe, id, p, serializeError));
       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}")`);
+      if (!firstFlushed) wait && blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
         !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
@@ -333,7 +342,7 @@ function renderToStream(code, options = {}) {
     registerFragment(key) {
       if (!registry.has(key)) {
         registry.set(key, []);
-        pushTask(`_$HY.init("${key}")`);
+        firstFlushed && pushTask(`_$HY.init("${key}")`);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -343,7 +352,7 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             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) : '"$$$"'})`);
+              error && pushTask(serializeSet(dedupe, key, error, serializeError));
             } 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 : ""}`);
@@ -352,16 +361,20 @@ function renderToStream(code, options = {}) {
           }
         }
         Promise.resolve().then(checkEnd);
-        return true;
+        return firstFlushed;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
   function doShell() {
-    html = injectAssets(solidJs.sharedConfig.context.assets, html);
-    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    html = injectAssets(context.assets, html);
+    for (const key in context.resources) {
+      if (!("data" in context.resources[key] || context.resources[key].ref[0].error)) pushTask(`_$HY.init("${key}")`);
+    }
+    for (const key of registry.keys()) pushTask(`_$HY.init("${key}")`);
+    if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
-    tasks.length = 0;
+    tasks = "";
     scheduled = false;
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -373,9 +386,7 @@ function renderToStream(code, options = {}) {
     then(fn) {
       function complete() {
         doShell();
-        let mapped = "";
-        for (let i = 0, len = tmp.length; i < len; i++) mapped += tmp[i];
-        fn(mapped);
+        fn(tmp);
       }
       if (onCompleteAll) {
         ogComplete = onCompleteAll;
@@ -390,7 +401,7 @@ function renderToStream(code, options = {}) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
         buffer = writable = w;
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -411,7 +422,7 @@ function renderToStream(code, options = {}) {
             writer.write(encoder.encode(payload));
           }
         };
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -446,12 +457,12 @@ function NoHydration(props) {
 function ssr(t, ...nodes) {
   if (nodes.length) {
     let result = "";
-    for (let i = 0; i < t.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
       result += t[i];
       const node = nodes[i];
       if (node !== undefined) result += resolveSSRNode(node);
     }
-    t = result;
+    t = result + t[nodes.length];
   }
   return {
     t
@@ -572,7 +583,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -624,11 +635,11 @@ function waitForFragments(registry, key) {
   }
   return false;
 }
-function serializeSet(registry, key, value) {
+function serializeSet(registry, key, value, serializer = devalue) {
   const exist = registry.get(value);
   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}", ${serializer(value)})`;
 }
 function replacePlaceholder(html, key, value) {
   const nextRegex = /(<[/]?span[^>]*>)/g;

package/web/dist/server.js

@@ -230,7 +230,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||"$$$")}`;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -268,8 +268,6 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
-  const tmp = [];
-  const tasks = [];
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -286,7 +284,7 @@ function renderToStream(code, options = {}) {
     }
   };
   const pushTask = task => {
-    tasks.push(task);
+    tasks += task + ";";
     if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
@@ -294,22 +292,25 @@ function renderToStream(code, options = {}) {
   };
   const writeTasks = () => {
     if (tasks.length && !completed && firstFlushed) {
-      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
-      tasks.length = 0;
+      buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
+      tasks = "";
     }
     scheduled = false;
   };
+  let context;
   let writable;
+  let tmp = "";
+  let tasks = "";
   let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
   let buffer = {
     write(payload) {
-      tmp.push(payload);
+      tmp += payload;
     }
   };
-  sharedConfig.context = {
+  sharedConfig.context = context = {
     id: renderId || "",
     count: 0,
     async: true,
@@ -317,10 +318,18 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
+    replace(id, payloadFn) {
+      if (firstFlushed) return;
+      const placeholder = `<!${id}>`;
+      const first = html.indexOf(placeholder);
+      if (first === -1) return;
+      const last = html.indexOf(`<!/${id}>`, first + placeholder.length);
+      html = html.replace(html.slice(first, last + placeholder.length + 1), resolveSSRNode(payloadFn()));
+    },
     writeResource(id, p, error, wait) {
-      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (error) return pushTask(serializeSet(dedupe, id, p, serializeError));
       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}")`);
+      if (!firstFlushed) wait && blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
         !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
@@ -330,7 +339,7 @@ function renderToStream(code, options = {}) {
     registerFragment(key) {
       if (!registry.has(key)) {
         registry.set(key, []);
-        pushTask(`_$HY.init("${key}")`);
+        firstFlushed && pushTask(`_$HY.init("${key}")`);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -340,7 +349,7 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             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) : '"$$$"'})`);
+              error && pushTask(serializeSet(dedupe, key, error, serializeError));
             } 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 : ""}`);
@@ -349,16 +358,20 @@ function renderToStream(code, options = {}) {
           }
         }
         Promise.resolve().then(checkEnd);
-        return true;
+        return firstFlushed;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
   function doShell() {
-    html = injectAssets(sharedConfig.context.assets, html);
-    if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
+    html = injectAssets(context.assets, html);
+    for (const key in context.resources) {
+      if (!("data" in context.resources[key] || context.resources[key].ref[0].error)) pushTask(`_$HY.init("${key}")`);
+    }
+    for (const key of registry.keys()) pushTask(`_$HY.init("${key}")`);
+    if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
-    tasks.length = 0;
+    tasks = "";
     scheduled = false;
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -370,9 +383,7 @@ function renderToStream(code, options = {}) {
     then(fn) {
       function complete() {
         doShell();
-        let mapped = "";
-        for (let i = 0, len = tmp.length; i < len; i++) mapped += tmp[i];
-        fn(mapped);
+        fn(tmp);
       }
       if (onCompleteAll) {
         ogComplete = onCompleteAll;
@@ -387,7 +398,7 @@ function renderToStream(code, options = {}) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
         buffer = writable = w;
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -408,7 +419,7 @@ function renderToStream(code, options = {}) {
             writer.write(encoder.encode(payload));
           }
         };
-        tmp.forEach(chunk => buffer.write(chunk));
+        buffer.write(tmp);
         firstFlushed = true;
         if (completed) writable.end();else setTimeout(checkEnd);
       });
@@ -443,12 +454,12 @@ function NoHydration(props) {
 function ssr(t, ...nodes) {
   if (nodes.length) {
     let result = "";
-    for (let i = 0; i < t.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
       result += t[i];
       const node = nodes[i];
       if (node !== undefined) result += resolveSSRNode(node);
     }
-    t = result;
+    t = result + t[nodes.length];
   }
   return {
     t
@@ -569,7 +580,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -621,11 +632,11 @@ function waitForFragments(registry, key) {
   }
   return false;
 }
-function serializeSet(registry, key, value) {
+function serializeSet(registry, key, value, serializer = devalue) {
   const exist = registry.get(value);
   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}", ${serializer(value)})`;
 }
 function replacePlaceholder(html, key, value) {
   const nextRegex = /(<[/]?span[^>]*>)/g;

package/web/types/client.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "./jsx";
+import { JSX } from "./jsx.js";
 export const Aliases: Record<string, string>;
 export const PropAliases: Record<string, string>;
 export const Properties: Set<string>;

package/web/types/core.d.ts

@@ -1,3 +1,3 @@
-import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig } from "solid-js";
+import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig, untrack } from "solid-js";
 declare function memo<T>(fn: () => T, equals: boolean): import("solid-js").Accessor<T>;
-export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, memo, sharedConfig };
+export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, memo, sharedConfig, untrack };

package/web/types/index.d.ts

@@ -1,8 +1,8 @@
-import { hydrate as hydrateCore } from "./client";
+import { hydrate as hydrateCore } from "./client.js";
 import { JSX, Accessor, ComponentProps, ValidComponent } from "solid-js";
-export * from "./client";
+export * from "./client.js";
 export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "solid-js";
-export * from "./server-mock";
+export * from "./server-mock.js";
 export declare const isServer = false;
 export declare const hydrate: typeof hydrateCore;
 /**

package/web/types/jsx.d.ts

@@ -1 +1 @@
-export { JSX } from "../..";
+export type { JSX } from "../../types/jsx.js";