waku 0.10.0 → 0.11.0

package/README.md

@@ -65,6 +65,9 @@ pnpm create waku # pnpm not working for now
 - https://twitter.com/dai_shi/status/1643224085755998210
 - https://twitter.com/dai_shi/status/1647132330543419392
 - https://twitter.com/dai_shi/status/1654755487391559680
+- https://twitter.com/dai_shi/status/1660306318140542976
+- https://twitter.com/dai_shi/status/1660537733201248257
+- https://twitter.com/dai_shi/status/1660660331528728578
 
 </details>
 

package/dist/cjs/cli.js

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _nodefs = /*#__PURE__*/ _interop_require_default(require("node:fs"));
+const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const cmd = process.argv[2];
+for(let i = 3; i < process.argv.length; ++i){
+    if (process.argv[i] === "--config") {
+        const fname = process.argv[i + 1];
+        if (fname && _nodefs.default.existsSync(fname)) {
+            process.env.CONFIG_FILE = fname;
+        } else {
+            throw new Error("config file does not exist");
+        }
+        ++i;
+    }
+}
+switch(cmd){
+    case "dev":
+        runDev();
+        break;
+    case "build":
+        runBuild();
+        break;
+    case "start":
+        runStart();
+        break;
+    default:
+        throw Error("unknown cmd: " + cmd);
+}
+async function runDev() {
+    const { default: express  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("express")));
+    const { rsc , devServer  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./lib/middleware.js")));
+    const app = express();
+    app.use(rsc({
+        mode: "development"
+    }));
+    app.use(devServer());
+    const port = process.env.PORT || 3000;
+    app.listen(port, ()=>{
+        console.info("Listening on", port);
+    });
+}
+async function runBuild() {
+    const { build  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./lib/builder.js")));
+    await build();
+}
+async function runStart() {
+    const { default: express  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("express")));
+    const { resolveConfig  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./lib/config.js")));
+    const config = await resolveConfig("serve");
+    const { rsc  } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./lib/middleware.js")));
+    const app = express();
+    app.use(rsc({
+        mode: "production"
+    }));
+    app.use(express.static(_nodepath.default.join(config.root, config.framework.outPublic)));
+    express.static.mime.default_type = "";
+    const port = process.env.PORT || 8080;
+    app.listen(port, ()=>{
+        console.info("Listening on", port);
+    });
+}

package/dist/cjs/client.js

@@ -19,9 +19,7 @@ _export(exports, {
 });
 const _react = require("react");
 const _client = require("react-server-dom-webpack/client");
-// FIXME only works with basePath="/"
-const basePath = "/";
-function serve(rscId) {
+function serve(rscId, basePath = "/RSC/") {
     const fetchRSC = (0, _react.cache)((serializedProps)=>{
         let rerender;
         const setRerender = (fn)=>{
@@ -37,14 +35,14 @@ function serve(rscId) {
                 const isMutating = !!mutationMode;
                 const searchParams = new URLSearchParams();
                 searchParams.set("action_id", rsfId);
-                let rscPath = "RSC/";
+                let id;
                 if (isMutating) {
-                    rscPath += rscId;
+                    id = rscId;
                     searchParams.set("props", serializedProps);
                 } else {
-                    rscPath += "_";
+                    id = "_";
                 }
-                const response = fetch(basePath + rscPath + "/" + searchParams, {
+                const response = fetch(basePath + id + "/" + searchParams, {
                     method: "POST",
                     body: await (0, _client.encodeReply)(args)
                 });
@@ -59,8 +57,7 @@ function serve(rscId) {
             }
         };
         const prefetched = globalThis.__WAKU_PREFETCHED__?.[rscId]?.[serializedProps];
-        const rscPath = "RSC/" + rscId;
-        const data = (0, _client.createFromFetch)(prefetched || fetch(basePath + rscPath + "/" + searchParams), options);
+        const data = (0, _client.createFromFetch)(prefetched || fetch(basePath + rscId + "/" + searchParams), options);
         return [
             data,
             setRerender

package/dist/cjs/config.js

@@ -2,3 +2,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "defineConfig", {
+    enumerable: true,
+    get: function() {
+        return defineConfig;
+    }
+});
+function defineConfig(config) {
+    return config;
+}

package/dist/cjs/{builder.js → lib/builder.js}

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "runBuild", {
+Object.defineProperty(exports, "build", {
     enumerable: true,
     get: function() {
-        return runBuild;
+        return build;
     }
 });
 const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
@@ -13,105 +13,19 @@ const _nodefs = /*#__PURE__*/ _interop_require_default(require("node:fs"));
 const _nodemodule = require("node:module");
 const _vite = require("vite");
 const _pluginreact = /*#__PURE__*/ _interop_require_default(require("@vitejs/plugin-react"));
-const _core = /*#__PURE__*/ _interop_require_wildcard(require("@swc/core"));
-const _rscutils = require("./middleware/lib/rsc-utils.js");
-const _rschandler = require("./middleware/lib/rsc-handler.js");
+const _config = require("./config.js");
+const _rschandler = require("./rsc-handler.js");
+const _vitepluginrsc = require("./vite-plugin-rsc.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-// FIXME we could do this without plugin anyway
-const rscIndexPlugin = ()=>{
-    return {
-        name: "rsc-index-plugin",
-        async transformIndexHtml () {
-            return [
-                {
-                    tag: "script",
-                    children: _rscutils.codeToInject,
-                    injectTo: "body"
-                }
-            ];
-        }
-    };
-};
-const rscAnalyzePlugin = (clientEntryCallback, serverEntryCallback)=>{
-    return {
-        name: "rsc-bundle-plugin",
-        transform (code, id) {
-            const ext = _nodepath.default.extname(id);
-            if ([
-                ".ts",
-                ".tsx",
-                ".js",
-                ".jsx"
-            ].includes(ext)) {
-                const mod = _core.parseSync(code, {
-                    syntax: ext === ".ts" || ext === ".tsx" ? "typescript" : "ecmascript",
-                    tsx: ext === ".tsx"
-                });
-                for (const item of mod.body){
-                    if (item.type === "ExpressionStatement" && item.expression.type === "StringLiteral") {
-                        if (item.expression.value === "use client") {
-                            clientEntryCallback(id);
-                        } else if (item.expression.value === "use server") {
-                            serverEntryCallback(id);
-                        }
-                    }
-                }
-            }
-            return code;
-        }
-    };
-};
-async function runBuild(config = {}) {
-    const dir = _nodepath.default.resolve(config.build?.dir || ".");
-    const basePath = config.build?.basePath || "/";
-    const distPath = config.files?.dist || "dist";
-    const publicPath = _nodepath.default.join(distPath, config.files?.public || "public");
-    const indexHtmlFile = _nodepath.default.join(dir, config.files?.indexHtml || "index.html");
-    const distEntriesFile = _nodepath.default.join(dir, distPath, config.files?.entriesJs || "entries.js");
-    let entriesFile = _nodepath.default.join(dir, config.files?.entriesJs || "entries.js");
+async function build() {
+    const config = await (0, _config.resolveConfig)("build");
+    const indexHtmlFile = _nodepath.default.join(config.root, config.framework.indexHtml);
+    const distEntriesFile = _nodepath.default.join(config.root, config.build.outDir, config.framework.entriesJs);
+    let entriesFile = _nodepath.default.join(config.root, config.framework.entriesJs);
     if (entriesFile.endsWith(".js")) {
         for (const ext of [
             ".js",
@@ -131,10 +45,9 @@ async function runBuild(config = {}) {
     const clientEntryFileSet = new Set();
     const serverEntryFileSet = new Set();
     await (0, _vite.build)({
-        root: dir,
-        base: basePath,
+        ..._config.configFileConfig,
         plugins: [
-            rscAnalyzePlugin((id)=>clientEntryFileSet.add(id), (id)=>serverEntryFileSet.add(id))
+            (0, _vitepluginrsc.rscAnalyzePlugin)((id)=>clientEntryFileSet.add(id), (id)=>serverEntryFileSet.add(id))
         ],
         ssr: {
             // FIXME Without this, waku/router isn't considered to have client
@@ -146,7 +59,6 @@ async function runBuild(config = {}) {
             ]
         },
         build: {
-            outDir: distPath,
             write: false,
             ssr: true,
             rollupOptions: {
@@ -166,13 +78,12 @@ async function runBuild(config = {}) {
             fname
         ]));
     const serverBuildOutput = await (0, _vite.build)({
-        root: dir,
-        base: basePath,
+        ..._config.configFileConfig,
         ssr: {
-            noExternal: Array.from(clientEntryFileSet).map((fname)=>_nodepath.default.relative(_nodepath.default.join(dir, "node_modules"), fname).split("/")[0])
+            noExternal: Array.from(clientEntryFileSet).map(// FIXME this might not work with pnpm
+            (fname)=>_nodepath.default.relative(_nodepath.default.join(config.root, "node_modules"), fname).split("/")[0])
         },
         build: {
-            outDir: distPath,
             ssr: true,
             rollupOptions: {
                 input: {
@@ -207,15 +118,14 @@ async function runBuild(config = {}) {
         throw new Error("Unexpected vite server build output");
     }
     const clientBuildOutput = await (0, _vite.build)({
-        root: dir,
-        base: basePath,
+        ..._config.configFileConfig,
         plugins: [
             // @ts-ignore
             (0, _pluginreact.default)(),
-            rscIndexPlugin()
+            (0, _vitepluginrsc.rscIndexPlugin)()
         ],
         build: {
-            outDir: publicPath,
+            outDir: _nodepath.default.join(config.build.outDir, config.framework.outPublic),
             rollupOptions: {
                 input: {
                     main: indexHtmlFile,
@@ -239,12 +149,12 @@ async function runBuild(config = {}) {
     console.log("clientEntries", clientEntries);
     _nodefs.default.appendFileSync(distEntriesFile, `export const clientEntries=${JSON.stringify(clientEntries)};`);
     const absoluteClientEntries = Object.fromEntries(Object.entries(clientEntries).map(([key, val])=>[
-            _nodepath.default.join(_nodepath.default.dirname(entriesFile), distPath, key),
-            basePath + val
+            _nodepath.default.join(_nodepath.default.dirname(entriesFile), config.build.outDir, key),
+            config.base + val
         ]));
     await (0, _rschandler.setClientEntries)(absoluteClientEntries);
     await (0, _rschandler.buildRSC)();
-    const origPackageJson = require1(_nodepath.default.join(dir, "package.json"));
+    const origPackageJson = require1(_nodepath.default.join(config.root, "package.json"));
     const packageJson = {
         name: origPackageJson.name,
         version: origPackageJson.version,
@@ -255,6 +165,6 @@ async function runBuild(config = {}) {
         },
         dependencies: origPackageJson.dependencies
     };
-    _nodefs.default.writeFileSync(_nodepath.default.join(dir, distPath, "package.json"), JSON.stringify(packageJson, null, 2));
+    _nodefs.default.writeFileSync(_nodepath.default.join(config.root, config.build.outDir, "package.json"), JSON.stringify(packageJson, null, 2));
     await (0, _rschandler.shutdown)();
 }

package/dist/cjs/lib/config.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    configFileConfig: function() {
+        return configFileConfig;
+    },
+    resolveConfig: function() {
+        return resolveConfig;
+    }
+});
+const _vite = require("vite");
+const configFileConfig = process.env.CONFIG_FILE ? {
+    configFile: process.env.CONFIG_FILE
+} : {};
+async function resolveConfig(command) {
+    const origConfig = await (0, _vite.resolveConfig)(configFileConfig, command);
+    const framework = {
+        indexHtml: "index.html",
+        entriesJs: "entries.js",
+        outPublic: "public",
+        rscPrefix: "RSC/",
+        ...origConfig.framework
+    };
+    const config = {
+        ...origConfig,
+        framework
+    };
+    return config;
+}

package/dist/cjs/lib/middleware.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    rsc: function() {
+        return rsc;
+    },
+    devServer: function() {
+        return devServer;
+    }
+});
+const _vite = require("vite");
+const _pluginreact = /*#__PURE__*/ _interop_require_default(require("@vitejs/plugin-react"));
+const _servernodeunbundled = /*#__PURE__*/ _interop_require_default(require("react-server-dom-webpack/server.node.unbundled"));
+const _busboy = /*#__PURE__*/ _interop_require_default(require("busboy"));
+const _config = require("./config.js");
+const _rschandler = require("./rsc-handler.js");
+const _vitepluginrsc = require("./vite-plugin-rsc.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const { decodeReply , decodeReplyFromBusboy  } = _servernodeunbundled.default;
+function rsc(options) {
+    const promise = options.mode === "production" ? (0, _rschandler.setClientEntries)("load") : Promise.resolve();
+    const configPromise = (0, _config.resolveConfig)("serve");
+    return async (req, res, next)=>{
+        await promise;
+        const config = await configPromise;
+        const basePath = config.base + config.framework.rscPrefix;
+        const url = new URL(req.url || "", "http://" + req.headers.host);
+        let rscId;
+        let props = {};
+        let rsfId;
+        let args = [];
+        if (url.pathname.startsWith(basePath)) {
+            const index = url.pathname.lastIndexOf("/");
+            rscId = url.pathname.slice(basePath.length, index);
+            const params = new URLSearchParams(url.pathname.slice(index + 1));
+            if (rscId && rscId !== "_") {
+                res.setHeader("Content-Type", "text/x-component");
+                props = JSON.parse(params.get("props") || "{}");
+            } else {
+                rscId = undefined;
+            }
+            rsfId = params.get("action_id") || undefined;
+            if (rsfId) {
+                if (req.headers["content-type"]?.startsWith("multipart/form-data")) {
+                    const bb = (0, _busboy.default)({
+                        headers: req.headers
+                    });
+                    const reply = decodeReplyFromBusboy(bb);
+                    req.pipe(bb);
+                    args = await reply;
+                } else {
+                    let body = "";
+                    for await (const chunk of req){
+                        body += chunk;
+                    }
+                    if (body) {
+                        args = await decodeReply(body);
+                    }
+                }
+            }
+        }
+        if (rscId || rsfId) {
+            const pipeable = (0, _rschandler.renderRSC)({
+                rscId,
+                props,
+                rsfId,
+                args
+            });
+            pipeable.on("error", (err)=>{
+                console.info("Cannot render RSC", err);
+                res.statusCode = 500;
+                if (options.mode === "development") {
+                    res.end(String(err));
+                } else {
+                    res.end();
+                }
+            });
+            pipeable.pipe(res);
+            return;
+        }
+        next();
+    };
+}
+function devServer() {
+    const vitePromise = (0, _vite.createServer)({
+        ..._config.configFileConfig,
+        optimizeDeps: {
+            include: [
+                "react-server-dom-webpack/client"
+            ],
+            // FIXME without this, waku router has dual module hazard,
+            // and "Uncaught Error: Missing Router" happens.
+            exclude: [
+                "waku"
+            ]
+        },
+        plugins: [
+            // @ts-ignore
+            (0, _pluginreact.default)(),
+            (0, _vitepluginrsc.rscIndexPlugin)()
+        ],
+        server: {
+            middlewareMode: true
+        }
+    });
+    vitePromise.then((vite)=>{
+        (0, _rschandler.registerReloadCallback)((type)=>vite.ws.send({
+                type
+            }));
+    });
+    return async (req, res, next)=>{
+        const vite = await vitePromise;
+        const absoluteClientEntries = Object.fromEntries(Array.from(vite.moduleGraph.idToModuleMap.values()).map(({ file , url  })=>[
+                file,
+                url
+            ]));
+        absoluteClientEntries["*"] = "*"; // HACK to use fallback resolver
+        // FIXME this is bad in performance, let's revisit it
+        await (0, _rschandler.setClientEntries)(absoluteClientEntries);
+        vite.middlewares(req, res, next);
+    };
+}