waku 0.12.0 → 0.12.1

package/README.md

@@ -29,9 +29,8 @@ pnpm create waku # pnpm not working for now
 - [x] `waku start` (production server)
 - [x] Exportable build
 - [x] Static site generation
-- [ ] Client rendering fallback
 - [x] Opt-in router (reference implementation)
-- [ ] Opt-in SSR (HTML generation & hydration)
+- [x] Opt-in SSR (HTML generation only)
 
 ## Tweets
 
@@ -72,6 +71,7 @@ pnpm create waku # pnpm not working for now
 - https://twitter.com/dai_shi/status/1664286329763684353
 - https://twitter.com/dai_shi/status/1664989534889861123
 - https://twitter.com/dai_shi/status/1667545252654366721
+- https://twitter.com/dai_shi/status/1670650381762961408
 
 </details>
 

package/dist/cjs/lib/builder.js

@@ -272,7 +272,7 @@ const emitHtmlFiles = async (config, buildConfig, getClientModules)=>{
         const code = (0, _utils.generatePrefetchCode)(basePrefix, elementsForPrefetch, moduleIdsForPrefetch) + (customCode || "");
         if (code) {
             // HACK is this too naive to inject script code?
-            data = data.replace(/<\/body>/, `<script>${code}</script></body>`);
+            data = data.replace(/<\/head>/, `<script>${code}</script></head>`);
         }
         const htmlReadable = !skipSsr && await renderHtml(config, pathStr, data);
         if (htmlReadable) {

package/dist/cjs/lib/config.js

@@ -18,16 +18,21 @@ _export(exports, {
 });
 const _vite = require("vite");
 const splitHTML = (htmlStr)=>{
-    const startStr = "<!--placeholder-->";
-    const endStr = "<!--/placeholder-->";
-    const splitted = htmlStr.split(new RegExp(startStr + "[\\s\\S]*" + endStr));
-    if (splitted.length !== 2) {
+    const P1 = [
+        "<!--placeholder1-->\\s*<div[^>]*>",
+        "</div>\\s*<!--/placeholder1-->"
+    ];
+    const P2 = [
+        "<!--placeholder2-->",
+        "<!--/placeholder2-->"
+    ];
+    const anyRE = "[\\s\\S]*";
+    const match = htmlStr.match(new RegExp(// prettier-ignore
+    "^(" + anyRE + P1[0] + ")" + anyRE + "(" + P1[1] + anyRE + P2[0] + ")" + anyRE + "(" + P2[1] + anyRE + ")$"));
+    if (match?.length !== 1 + 3) {
         throw new Error("Failed to split HTML");
     }
-    return [
-        splitted[0] + startStr,
-        endStr + splitted[1]
-    ];
+    return match.slice(1);
 };
 const getFallback = (id)=>{
     if (id.endsWith("#Waku_SSR_Capable_Link")) {

package/dist/cjs/lib/middleware/ssr/utils.js

@@ -19,6 +19,27 @@ function _interop_require_default(obj) {
 // eslint-disable-next-line import/no-named-as-default-member
 const { renderToPipeableStream } = _server.default;
 const { createFromNodeStream } = _clientnodeunbundled.default;
+const interleaveHtmlSnippets = (preamble, intermediate, postamble)=>{
+    let initialized = false;
+    return new _nodestream.Transform({
+        transform (chunk, encoding, callback) {
+            if (encoding !== "buffer") {
+                throw new Error("Unknown encoding");
+            }
+            if (!initialized) {
+                initialized = true;
+                const data = chunk.toString();
+                callback(null, preamble + data + intermediate);
+            } else {
+                callback(null, chunk);
+            }
+        },
+        final (callback) {
+            this.push(postamble);
+            callback();
+        }
+    });
+};
 const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)=>{
     const bundlerConfig = new Proxy({}, {
         get (_target, filePath) {
@@ -34,16 +55,8 @@ const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)=>{
             });
         }
     });
-    const passthrough = new _nodestream.PassThrough();
-    const [preamble, postamble] = splitHTML(htmlStr);
-    passthrough.write(preamble, "utf8");
     const data = createFromNodeStream(rscStream, bundlerConfig);
-    const origEnd = passthrough.end;
-    passthrough.end = (...args)=>{
-        passthrough.write(postamble, "utf8");
-        return origEnd.apply(passthrough, args); // FIXME how to avoid any?
-    };
-    renderToPipeableStream(data, {
+    return renderToPipeableStream(data, {
         onError (err) {
             if (err instanceof Error && err.message.startsWith("Client-only component")) {
                 // ignore
@@ -51,6 +64,5 @@ const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)=>{
             }
             console.error(err);
         }
-    }).pipe(passthrough);
-    return passthrough;
+    }).pipe(interleaveHtmlSnippets(...splitHTML(htmlStr)));
 };

package/dist/cjs/lib/vite-plugin/rsc-index-plugin.js

@@ -17,7 +17,7 @@ function rscIndexPlugin() {
                 {
                     tag: "script",
                     children: _utils.codeToInject,
-                    injectTo: "body"
+                    injectTo: "head"
                 }
             ];
         }

package/dist/config.d.ts

@@ -6,7 +6,7 @@ export interface FrameworkConfig {
     rscPrefix?: string;
     ssr?: {
         rscServer?: string;
-        splitHTML?: (htmlStr: string) => readonly [string, string];
+        splitHTML?: (htmlStr: string) => readonly [string, string, string];
         getFallback?: (id: string) => string;
     };
 }

package/dist/lib/builder.js

@@ -257,7 +257,7 @@ const emitHtmlFiles = async (config, buildConfig, getClientModules)=>{
         const code = generatePrefetchCode(basePrefix, elementsForPrefetch, moduleIdsForPrefetch) + (customCode || "");
         if (code) {
             // HACK is this too naive to inject script code?
-            data = data.replace(/<\/body>/, `<script>${code}</script></body>`);
+            data = data.replace(/<\/head>/, `<script>${code}</script></head>`);
         }
         const htmlReadable = !skipSsr && await renderHtml(config, pathStr, data);
         if (htmlReadable) {

package/dist/lib/config.d.ts

@@ -11,7 +11,7 @@ export declare function resolveConfig(command: "build" | "serve"): Promise<{
         rscPrefix: string;
         ssr: {
             rscServer: string;
-            splitHTML: (htmlStr: string) => readonly [string, string];
+            splitHTML: (htmlStr: string) => readonly [string, string, string];
             getFallback: (id: string) => string;
         };
     };

package/dist/lib/config.js

@@ -1,15 +1,20 @@
 import { resolveConfig as viteResolveConfig } from "vite";
 const splitHTML = (htmlStr)=>{
-    const startStr = "<!--placeholder-->";
-    const endStr = "<!--/placeholder-->";
-    const splitted = htmlStr.split(new RegExp(startStr + "[\\s\\S]*" + endStr));
-    if (splitted.length !== 2) {
+    const P1 = [
+        "<!--placeholder1-->\\s*<div[^>]*>",
+        "</div>\\s*<!--/placeholder1-->"
+    ];
+    const P2 = [
+        "<!--placeholder2-->",
+        "<!--/placeholder2-->"
+    ];
+    const anyRE = "[\\s\\S]*";
+    const match = htmlStr.match(new RegExp(// prettier-ignore
+    "^(" + anyRE + P1[0] + ")" + anyRE + "(" + P1[1] + anyRE + P2[0] + ")" + anyRE + "(" + P2[1] + anyRE + ")$"));
+    if (match?.length !== 1 + 3) {
         throw new Error("Failed to split HTML");
     }
-    return [
-        splitted[0] + startStr,
-        endStr + splitted[1]
-    ];
+    return match.slice(1);
 };
 const getFallback = (id)=>{
     if (id.endsWith("#Waku_SSR_Capable_Link")) {

package/dist/lib/middleware/ssr/utils.d.ts

@@ -1,2 +1,2 @@
 import type { Readable } from "node:stream";
-export declare const renderHtmlToReadable: (htmlStr: string, rscStream: Readable, splitHTML: (htmlStr: string) => readonly [string, string], getFallback: (id: string) => string) => Readable;
+export declare const renderHtmlToReadable: (htmlStr: string, rscStream: Readable, splitHTML: (htmlStr: string) => readonly [string, string, string], getFallback: (id: string) => string) => Readable;

package/dist/lib/middleware/ssr/utils.js

@@ -1,9 +1,30 @@
-import { PassThrough } from "node:stream";
+import { Transform } from "node:stream";
 import RDServer from "react-dom/server";
 import RSDWClient from "react-server-dom-webpack/client.node.unbundled";
 // eslint-disable-next-line import/no-named-as-default-member
 const { renderToPipeableStream } = RDServer;
 const { createFromNodeStream } = RSDWClient;
+const interleaveHtmlSnippets = (preamble, intermediate, postamble)=>{
+    let initialized = false;
+    return new Transform({
+        transform (chunk, encoding, callback) {
+            if (encoding !== "buffer") {
+                throw new Error("Unknown encoding");
+            }
+            if (!initialized) {
+                initialized = true;
+                const data = chunk.toString();
+                callback(null, preamble + data + intermediate);
+            } else {
+                callback(null, chunk);
+            }
+        },
+        final (callback) {
+            this.push(postamble);
+            callback();
+        }
+    });
+};
 export const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)=>{
     const bundlerConfig = new Proxy({}, {
         get (_target, filePath) {
@@ -19,16 +40,8 @@ export const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)
             });
         }
     });
-    const passthrough = new PassThrough();
-    const [preamble, postamble] = splitHTML(htmlStr);
-    passthrough.write(preamble, "utf8");
     const data = createFromNodeStream(rscStream, bundlerConfig);
-    const origEnd = passthrough.end;
-    passthrough.end = (...args)=>{
-        passthrough.write(postamble, "utf8");
-        return origEnd.apply(passthrough, args); // FIXME how to avoid any?
-    };
-    renderToPipeableStream(data, {
+    return renderToPipeableStream(data, {
         onError (err) {
             if (err instanceof Error && err.message.startsWith("Client-only component")) {
                 // ignore
@@ -36,6 +49,5 @@ export const renderHtmlToReadable = (htmlStr, rscStream, splitHTML, getFallback)
             }
             console.error(err);
         }
-    }).pipe(passthrough);
-    return passthrough;
+    }).pipe(interleaveHtmlSnippets(...splitHTML(htmlStr)));
 };

package/dist/lib/vite-plugin/rsc-index-plugin.js

@@ -8,7 +8,7 @@ export function rscIndexPlugin() {
                 {
                     tag: "script",
                     children: codeToInject,
-                    injectTo: "body"
+                    injectTo: "head"
                 }
             ];
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "waku",
   "description": "Minimalistic React Framework",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "type": "module",
   "author": "Daishi Kato",
   "repository": {

package/src/config.ts

@@ -7,7 +7,7 @@ export interface FrameworkConfig {
   rscPrefix?: string; // defaults to "RSC/"
   ssr?: {
     rscServer?: string;
-    splitHTML?: (htmlStr: string) => readonly [string, string];
+    splitHTML?: (htmlStr: string) => readonly [string, string, string];
     getFallback?: (id: string) => string;
   };
 }

package/src/lib/builder.ts

@@ -332,7 +332,7 @@ const emitHtmlFiles = async (
           ) + (customCode || "");
         if (code) {
           // HACK is this too naive to inject script code?
-          data = data.replace(/<\/body>/, `<script>${code}</script></body>`);
+          data = data.replace(/<\/head>/, `<script>${code}</script></head>`);
         }
         const htmlReadable =
           !skipSsr && (await renderHtml(config, pathStr, data));

package/src/lib/config.ts

@@ -8,14 +8,23 @@ type DeepRequired<T> = T extends (...args: any[]) => any
   ? { [P in keyof T]-?: DeepRequired<T[P]> }
   : T;
 
-const splitHTML = (htmlStr: string): readonly [string, string] => {
-  const startStr = "<!--placeholder-->";
-  const endStr = "<!--/placeholder-->";
-  const splitted = htmlStr.split(new RegExp(startStr + "[\\s\\S]*" + endStr));
-  if (splitted.length !== 2) {
+const splitHTML = (htmlStr: string): readonly [string, string, string] => {
+  const P1 = [
+    "<!--placeholder1-->\\s*<div[^>]*>",
+    "</div>\\s*<!--/placeholder1-->",
+  ] as const;
+  const P2 = ["<!--placeholder2-->", "<!--/placeholder2-->"] as const;
+  const anyRE = "[\\s\\S]*";
+  const match = htmlStr.match(
+    new RegExp(
+      // prettier-ignore
+      "^(" + anyRE + P1[0] + ")" + anyRE + "(" + P1[1] + anyRE + P2[0] + ")" + anyRE + "(" + P2[1] + anyRE + ")$"
+    )
+  );
+  if (match?.length !== 1 + 3) {
     throw new Error("Failed to split HTML");
   }
-  return [splitted[0] + startStr, endStr + splitted[1]];
+  return match.slice(1) as [string, string, string];
 };
 
 const getFallback = (id: string) => {

package/src/lib/middleware/ssr/utils.ts

@@ -1,4 +1,4 @@
-import { PassThrough } from "node:stream";
+import { Transform } from "node:stream";
 import type { Readable } from "node:stream";
 
 import RDServer from "react-dom/server";
@@ -8,10 +8,36 @@ import RSDWClient from "react-server-dom-webpack/client.node.unbundled";
 const { renderToPipeableStream } = RDServer;
 const { createFromNodeStream } = RSDWClient;
 
+const interleaveHtmlSnippets = (
+  preamble: string,
+  intermediate: string,
+  postamble: string
+) => {
+  let initialized = false;
+  return new Transform({
+    transform(chunk, encoding, callback) {
+      if (encoding !== ("buffer" as any)) {
+        throw new Error("Unknown encoding");
+      }
+      if (!initialized) {
+        initialized = true;
+        const data = chunk.toString();
+        callback(null, preamble + data + intermediate);
+      } else {
+        callback(null, chunk);
+      }
+    },
+    final(callback) {
+      this.push(postamble);
+      callback();
+    },
+  });
+};
+
 export const renderHtmlToReadable = (
   htmlStr: string, // Hope stream works, but it'd be too tricky
   rscStream: Readable,
-  splitHTML: (htmlStr: string) => readonly [string, string],
+  splitHTML: (htmlStr: string) => readonly [string, string, string],
   getFallback: (id: string) => string
 ): Readable => {
   const bundlerConfig = new Proxy(
@@ -31,16 +57,8 @@ export const renderHtmlToReadable = (
       },
     }
   );
-  const passthrough = new PassThrough();
-  const [preamble, postamble] = splitHTML(htmlStr);
-  passthrough.write(preamble, "utf8");
   const data = createFromNodeStream(rscStream, bundlerConfig);
-  const origEnd = passthrough.end;
-  passthrough.end = (...args) => {
-    passthrough.write(postamble, "utf8");
-    return origEnd.apply(passthrough, args as any); // FIXME how to avoid any?
-  };
-  renderToPipeableStream(data, {
+  return renderToPipeableStream(data, {
     onError(err) {
       if (
         err instanceof Error &&
@@ -51,6 +69,5 @@ export const renderHtmlToReadable = (
       }
       console.error(err);
     },
-  }).pipe(passthrough);
-  return passthrough;
+  }).pipe(interleaveHtmlSnippets(...splitHTML(htmlStr)));
 };

package/src/lib/middleware/ssr.ts

@@ -26,7 +26,7 @@ const renderHTML = async (
   rscServer: URL,
   config: Awaited<ReturnType<typeof resolveConfig>>,
   ssrConfig: NonNullable<Awaited<ReturnType<GetSsrConfig>>>
-): Promise<Readable> => {
+) => {
   const rscPrefix = config.framework.rscPrefix;
   const { splitHTML, getFallback } = config.framework.ssr;
   const htmlResPromise = fetch(rscServer + pathStr.slice(1), {

package/src/lib/vite-plugin/rsc-index-plugin.ts

@@ -11,7 +11,7 @@ export function rscIndexPlugin(): Plugin {
         {
           tag: "script",
           children: codeToInject,
-          injectTo: "body",
+          injectTo: "head",
         },
       ];
     },