waku 0.13.0 → 0.14.0

package/README.md

@@ -21,18 +21,12 @@ yarn create waku
 ```
 
 ```bash
-pnpm create waku # pnpm not working for now
+pnpm create waku
 ```
 
-## Work in progress
+## Roadmap
 
-- [x] `waku dev` (development server)
-- [x] `waku build` (build for production)
-- [x] `waku start` (production server)
-- [x] Exportable build
-- [x] Static site generation
-- [x] Opt-in router (reference implementation)
-- [x] Opt-in SSR (HTML generation only)
+https://github.com/dai-shi/waku/issues/24
 
 ## Tweets
 
@@ -75,6 +69,7 @@ pnpm create waku # pnpm not working for now
 - https://twitter.com/dai_shi/status/1667545252654366721
 - https://twitter.com/dai_shi/status/1670650381762961408
 - https://twitter.com/dai_shi/status/1671161795061628930
+- https://twitter.com/dai_shi/status/1676793637282394112
 
 </details>
 

package/dist/cjs/lib/builder.js

@@ -47,18 +47,10 @@ const analyzeEntries = async (entriesFile)=>{
     const clientEntryFileSet = new Set();
     const serverEntryFileSet = new Set();
     await (0, _vite.build)({
-        ..._config.configFileConfig,
+        ...(0, _config.configFileConfig)(),
         plugins: [
             (0, _rscanalyzeplugin.rscAnalyzePlugin)((id)=>clientEntryFileSet.add(id), (id)=>serverEntryFileSet.add(id))
         ],
-        ssr: {
-            noExternal: /^(?!node:)/,
-            // FIXME this is very adhoc.
-            external: [
-                "react",
-                "minimatch"
-            ]
-        },
         resolve: {
             conditions: [
                 "react-server"
@@ -90,11 +82,7 @@ const analyzeEntries = async (entriesFile)=>{
 };
 const buildServerBundle = async (config, entriesFile, clientEntryFiles, serverEntryFiles)=>{
     const serverBuildOutput = await (0, _vite.build)({
-        ..._config.configFileConfig,
-        ssr: {
-            noExternal: Object.values(clientEntryFiles).map(// FIXME this might not work with pnpm
-            (fname)=>_nodepath.default.relative(_nodepath.default.join(config.root, "node_modules"), fname).split("/")[0])
-        },
+        ...(0, _config.configFileConfig)(),
         resolve: {
             conditions: [
                 "react-server"
@@ -103,7 +91,8 @@ const buildServerBundle = async (config, entriesFile, clientEntryFiles, serverEn
         publicDir: false,
         build: {
             ssr: true,
-            outDir: config.framework.distDir,
+            ssrEmitAssets: true,
+            outDir: _nodepath.default.join(config.root, config.framework.distDir),
             rollupOptions: {
                 onwarn,
                 input: {
@@ -138,16 +127,19 @@ const buildServerBundle = async (config, entriesFile, clientEntryFiles, serverEn
     }
     return serverBuildOutput;
 };
-const buildClientBundle = async (config, clientEntryFiles)=>{
+const buildClientBundle = async (config, clientEntryFiles, serverBuildOutput)=>{
     const indexHtmlFile = _nodepath.default.join(config.root, config.framework.srcDir, config.framework.indexHtml);
+    const cssAssets = serverBuildOutput.output.flatMap(({ type, fileName })=>type === "asset" && fileName.endsWith(".css") ? [
+            fileName
+        ] : []);
     const clientBuildOutput = await (0, _vite.build)({
-        ..._config.configFileConfig,
+        ...(0, _config.configFileConfig)(),
+        root: _nodepath.default.join(config.root, config.framework.srcDir),
         plugins: [
             // @ts-expect-error This expression is not callable.
             (0, _pluginreact.default)(),
-            (0, _rscindexplugin.rscIndexPlugin)()
+            (0, _rscindexplugin.rscIndexPlugin)(cssAssets)
         ],
-        root: _nodepath.default.join(config.root, config.framework.srcDir),
         build: {
             outDir: _nodepath.default.join(config.root, config.framework.distDir, config.framework.publicDir),
             rollupOptions: {
@@ -171,6 +163,11 @@ const buildClientBundle = async (config, clientEntryFiles)=>{
     if (!("output" in clientBuildOutput)) {
         throw new Error("Unexpected vite client build output");
     }
+    for (const cssAsset of cssAssets){
+        const from = _nodepath.default.join(config.root, config.framework.distDir, cssAsset);
+        const to = _nodepath.default.join(config.root, config.framework.distDir, config.framework.publicDir, cssAsset);
+        _nodefs.default.renameSync(from, to);
+    }
     return clientBuildOutput;
 };
 const emitRscFiles = async (config)=>{
@@ -197,7 +194,8 @@ const emitRscFiles = async (config)=>{
             const serializedProps = JSON.stringify(props);
             const searchParams = new URLSearchParams();
             searchParams.set("props", serializedProps);
-            const destFile = _nodepath.default.join(config.root, config.framework.distDir, config.framework.publicDir, config.framework.rscPrefix + decodeURIComponent(rscId), decodeURIComponent(`${searchParams}`));
+            const destFile = _nodepath.default.join(config.root, config.framework.distDir, config.framework.publicDir, // HACK to support windows filesystem
+            config.framework.rscPrefix.replaceAll("/", _nodepath.default.sep) + decodeURIComponent(rscId), decodeURIComponent(`${searchParams}`));
             if (!rscFileSet.has(destFile)) {
                 rscFileSet.add(destFile);
                 _nodefs.default.mkdirSync(_nodepath.default.dirname(destFile), {
@@ -358,8 +356,8 @@ async function build() {
     const config = await (0, _config.resolveConfig)("build");
     const entriesFile = resolveFileName(_nodepath.default.join(config.root, config.framework.srcDir, config.framework.entriesJs));
     const { clientEntryFiles, serverEntryFiles } = await analyzeEntries(entriesFile);
-    await buildServerBundle(config, entriesFile, clientEntryFiles, serverEntryFiles);
-    const clientBuildOutput = await buildClientBundle(config, clientEntryFiles);
+    const serverBuildOutput = await buildServerBundle(config, entriesFile, clientEntryFiles, serverEntryFiles);
+    const clientBuildOutput = await buildClientBundle(config, clientEntryFiles, serverBuildOutput);
     const { buildConfig, getClientModules, rscFiles } = await emitRscFiles(config);
     const { htmlFiles } = await emitHtmlFiles(config, buildConfig, getClientModules);
     // https://vercel.com/docs/build-output-api/v3

package/dist/cjs/lib/config.js

@@ -16,7 +16,14 @@ _export(exports, {
         return resolveConfig;
     }
 });
+const _nodefs = /*#__PURE__*/ _interop_require_default(require("node:fs"));
+const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
 const _vite = require("vite");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const splitHTML = (htmlStr)=>{
     const P1 = [
         "<!--placeholder1-->\\s*<div[^>]*>",
@@ -40,11 +47,26 @@ const getFallback = (id)=>{
     }
     return "waku/server#ClientFallback";
 };
-const configFileConfig = process.env.CONFIG_FILE ? {
-    configFile: process.env.CONFIG_FILE
-} : {};
+const configFileConfig = ()=>{
+    if (process.env.CONFIG_FILE) {
+        return {
+            configFile: _nodepath.default.resolve(process.env.CONFIG_FILE)
+        };
+    }
+    for (const file of [
+        "vite.config.ts",
+        "vite.config.js"
+    ]){
+        if (_nodefs.default.existsSync(file)) {
+            return {
+                configFile: _nodepath.default.resolve(file)
+            };
+        }
+    }
+    return {};
+};
 async function resolveConfig(command) {
-    const origConfig = await (0, _vite.resolveConfig)(configFileConfig, command);
+    const origConfig = await (0, _vite.resolveConfig)(configFileConfig(), command);
     const origFramework = origConfig.framework;
     const framework = {
         srcDir: "src",

package/dist/cjs/lib/middleware/devServer.js

@@ -14,6 +14,7 @@ const _pluginreact = /*#__PURE__*/ _interop_require_default(require("@vitejs/plu
 const _config = require("../config.js");
 const _workerapi = require("./rsc/worker-api.js");
 const _rscindexplugin = require("../vite-plugin/rsc-index-plugin.js");
+const _rschmrplugin = require("../vite-plugin/rsc-hmr-plugin.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -22,7 +23,7 @@ function _interop_require_default(obj) {
 function devServer() {
     const configPromise = (0, _config.resolveConfig)("serve");
     const vitePromise = configPromise.then((config)=>(0, _vite.createServer)({
-            ..._config.configFileConfig,
+            ...(0, _config.configFileConfig)(),
             root: _nodepath.default.join(config.root, config.framework.srcDir),
             optimizeDeps: {
                 include: [
@@ -37,7 +38,8 @@ function devServer() {
             plugins: [
                 // @ts-expect-error This expression is not callable.
                 (0, _pluginreact.default)(),
-                (0, _rscindexplugin.rscIndexPlugin)()
+                (0, _rscindexplugin.rscIndexPlugin)([]),
+                (0, _rschmrplugin.rscHmrPlugin)()
             ],
             server: {
                 middlewareMode: true
@@ -47,6 +49,7 @@ function devServer() {
         (0, _workerapi.registerReloadCallback)((type)=>vite.ws.send({
                 type
             }));
+        (0, _workerapi.registerImportCallback)((source)=>(0, _rschmrplugin.hotImport)(vite, source));
     });
     return async (req, res, next)=>{
         const vite = await vitePromise;

package/dist/cjs/lib/middleware/rsc/worker-api.js

@@ -12,6 +12,9 @@ _export(exports, {
     registerReloadCallback: function() {
         return registerReloadCallback;
     },
+    registerImportCallback: function() {
+        return registerImportCallback;
+    },
     shutdown: function() {
         return shutdown;
     },
@@ -29,6 +32,10 @@ const _nodestream = require("node:stream");
 const _nodeworker_threads = require("node:worker_threads");
 const worker = new _nodeworker_threads.Worker(new URL("worker-impl.js", require("url").pathToFileURL(__filename).toString()), {
     execArgv: [
+        "--experimental-loader",
+        "waku/node-loader",
+        "--experimental-loader",
+        "react-server-dom-webpack/node-loader",
         "--conditions",
         "react-server"
     ]
@@ -48,6 +55,15 @@ function registerReloadCallback(fn) {
     worker.on("message", listener);
     return ()=>worker.off("message", listener);
 }
+function registerImportCallback(fn) {
+    const listener = (mesg)=>{
+        if (mesg.type === "hot-import") {
+            fn(mesg.source);
+        }
+    };
+    worker.on("message", listener);
+    return ()=>worker.off("message", listener);
+}
 function shutdown() {
     return new Promise((resolve)=>{
         worker.on("close", resolve);

package/dist/cjs/lib/middleware/rsc/worker-impl.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
 const _nodeworker_threads = require("node:worker_threads");
 const _nodestream = require("node:stream");
+const _nodehttp = require("node:http");
 const _vite = require("vite");
 const _react = require("react");
 const _server = /*#__PURE__*/ _interop_require_default(require("react-server-dom-webpack/server"));
@@ -12,6 +13,7 @@ const _config = require("../../config.js");
 const _utils = require("./utils.js");
 const _rsctransformplugin = require("../../vite-plugin/rsc-transform-plugin.js");
 const _rscreloadplugin = require("../../vite-plugin/rsc-reload-plugin.js");
+const _rscdelegateplugin = require("../../vite-plugin/rsc-delegate-plugin.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -34,7 +36,7 @@ const handleRender = async (mesg)=>{
                 _nodeworker_threads.parentPort.postMessage(mesg);
             };
         }
-        const { runWithContext } = await loadServerFile("waku/server");
+        const { runWithContext } = await loadServerFile("waku/server", command);
         const pipeable = await runWithContext(ctx, ()=>renderRSC(input, options));
         const mesg = {
             id,
@@ -121,40 +123,62 @@ const handleGetSsrConfig = async (mesg)=>{
         _nodeworker_threads.parentPort.postMessage(mesg);
     }
 };
-const vitePromise = (0, _vite.createServer)({
-    ..._config.configFileConfig,
-    plugins: [
-        (0, _rsctransformplugin.rscTransformPlugin)(),
-        (0, _rscreloadplugin.rscReloadPlugin)((type)=>{
-            const mesg = {
-                type
-            };
-            _nodeworker_threads.parentPort.postMessage(mesg);
-        })
-    ],
-    ssr: {
-        noExternal: /^(?!node:)/,
-        // FIXME this is very adhoc.
-        external: [
-            "react",
-            "minimatch",
-            "react-server-dom-webpack"
-        ]
-    },
-    resolve: {
-        conditions: [
-            "react-server"
-        ]
-    },
-    appType: "custom"
-});
+const dummyServer = new _nodehttp.Server();
+let lastViteServer;
+const getViteServer = async (command)=>{
+    if (lastViteServer) {
+        if (lastViteServer[1] === command) {
+            return lastViteServer[0];
+        }
+        console.warn("Restarting Vite server with different command");
+        await lastViteServer[0].close();
+    }
+    const viteServer = await (0, _vite.createServer)({
+        ...(0, _config.configFileConfig)(),
+        plugins: [
+            (0, _rsctransformplugin.rscTransformPlugin)(),
+            (0, _rscreloadplugin.rscReloadPlugin)((type)=>{
+                const mesg = {
+                    type
+                };
+                _nodeworker_threads.parentPort.postMessage(mesg);
+            }),
+            (0, _rscdelegateplugin.rscDelegatePlugin)((source)=>{
+                const mesg = {
+                    type: "hot-import",
+                    source
+                };
+                _nodeworker_threads.parentPort.postMessage(mesg);
+            })
+        ],
+        resolve: {
+            conditions: [
+                "react-server"
+            ]
+        },
+        appType: "custom",
+        server: {
+            middlewareMode: true,
+            hmr: {
+                server: dummyServer
+            }
+        }
+    });
+    lastViteServer = [
+        viteServer,
+        command
+    ];
+    return viteServer;
+};
 const shutdown = async ()=>{
-    const vite = await vitePromise;
-    await vite.close();
+    if (lastViteServer) {
+        await lastViteServer[0].close();
+        lastViteServer = undefined;
+    }
     _nodeworker_threads.parentPort.close();
 };
-const loadServerFile = async (fname)=>{
-    const vite = await vitePromise;
+const loadServerFile = async (fname, command)=>{
+    const vite = await getViteServer(command);
     return vite.ssrLoadModule(fname);
 };
 _nodeworker_threads.parentPort.on("message", (mesg)=>{
@@ -172,20 +196,24 @@ const getEntriesFile = async (config, command)=>{
     return _nodepath.default.join(config.root, command === "dev" ? config.framework.srcDir : config.framework.distDir, config.framework.entriesJs);
 };
 const resolveClientEntry = (filePath, config, command)=>{
-    const root = _nodepath.default.join(config.root, command === "dev" ? config.framework.srcDir : config.framework.distDir);
+    let root = _nodepath.default.join(config.root, command === "dev" ? config.framework.srcDir : config.framework.distDir);
+    if (_nodepath.default.sep !== "/") {
+        // HACK to support windows filesystem
+        root = root.replaceAll(_nodepath.default.sep, "/");
+    }
     if (command === "dev" && !filePath.startsWith(root)) {
         // HACK this relies on Vite's internal implementation detail.
-        return config.base + "@fs" + filePath;
+        return config.base + "@fs/" + filePath.replace(/^\//, "");
     }
     return config.base + _nodepath.default.relative(root, filePath);
 };
 async function renderRSC(input, options) {
     const config = await (0, _config.resolveConfig)(options.command === "build" ? "build" : "serve");
-    const { unstable_setRootDir } = await loadServerFile("waku/config");
+    const { unstable_setRootDir } = await loadServerFile("waku/config", options.command);
     unstable_setRootDir(config.root);
     const getFunctionComponent = async (rscId)=>{
         const entriesFile = await getEntriesFile(config, options.command);
-        const { default: { getEntry } } = await loadServerFile(entriesFile);
+        const { default: { getEntry } } = await loadServerFile(entriesFile, options.command);
         const mod = await getEntry(rscId);
         if (typeof mod === "function") {
             return mod;
@@ -215,7 +243,7 @@ async function renderRSC(input, options) {
     if ("rsfId" in input) {
         const [fileId, name] = input.rsfId.split("#");
         const fname = _nodepath.default.join(config.root, fileId);
-        const mod = await loadServerFile(fname);
+        const mod = await loadServerFile(fname, options.command);
         const data = await (mod[name] || mod)(...input.args);
         if (!("rscId" in input)) {
             return renderToPipeableStream(data, bundlerConfig);
@@ -230,10 +258,10 @@ async function renderRSC(input, options) {
 }
 async function getBuildConfigRSC() {
     const config = await (0, _config.resolveConfig)("build");
-    const { unstable_setRootDir } = await loadServerFile("waku/config");
+    const { unstable_setRootDir } = await loadServerFile("waku/config", "build");
     unstable_setRootDir(config.root);
     const entriesFile = await getEntriesFile(config, "build");
-    const { default: { getBuildConfig } } = await loadServerFile(entriesFile);
+    const { default: { getBuildConfig } } = await loadServerFile(entriesFile, "build");
     if (!getBuildConfig) {
         console.warn("getBuildConfig is undefined. It's recommended for optimization and sometimes required.");
         return {};
@@ -246,10 +274,10 @@ async function getBuildConfigRSC() {
 }
 async function getSsrConfigRSC(pathStr, command) {
     const config = await (0, _config.resolveConfig)(command === "build" ? "build" : "serve");
-    const { unstable_setRootDir } = await loadServerFile("waku/config");
+    const { unstable_setRootDir } = await loadServerFile("waku/config", command);
     unstable_setRootDir(config.root);
     const entriesFile = await getEntriesFile(config, command);
-    const { default: { getSsrConfig } } = await loadServerFile(entriesFile);
+    const { default: { getSsrConfig } } = await loadServerFile(entriesFile, command);
     if (!getSsrConfig) {
         return null;
     }

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

@@ -60,7 +60,7 @@ const renderHTML = async (pathStr, rscServer, config, ssrConfig)=>{
 function ssr(options) {
     const configPromise = (0, _config.resolveConfig)("serve");
     const vitePromise = (0, _vite.createServer)({
-        ..._config.configFileConfig,
+        ...(0, _config.configFileConfig)(),
         plugins: [
             ...options.command === "dev" ? [
                 (0, _nonjsresolveplugin.nonjsResolvePlugin)()

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

@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function rscAnalyzePlugin(clientEntryCallback, serverEntryCallback) {
     return {
-        name: "rsc-bundle-plugin",
+        name: "rsc-analyze-plugin",
         transform (code, id) {
             const ext = _nodepath.default.extname(id);
             if ([

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "rscDelegatePlugin", {
+    enumerable: true,
+    get: function() {
+        return rscDelegatePlugin;
+    }
+});
+const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
+const _core = /*#__PURE__*/ _interop_require_wildcard(require("@swc/core"));
+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;
+}
+// import { CSS_LANGS_RE } from "vite/dist/node/constants.js";
+const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
+function rscDelegatePlugin(importCallback) {
+    let mode = "development";
+    let base = "/";
+    return {
+        name: "rsc-delegate-plugin",
+        configResolved (config) {
+            mode = config.mode;
+            base = config.base;
+        },
+        transform (code, id) {
+            const ext = _nodepath.default.extname(id);
+            if (mode === "development" && [
+                ".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 === "ImportDeclaration") {
+                        if (item.source.value.startsWith("virtual:")) {
+                            // HACK this relies on Vite's internal implementation detail.
+                            const source = base + "@id/__x00__" + item.source.value;
+                            importCallback(source);
+                        } else if (CSS_LANGS_RE.test(item.source.value)) {
+                            const filePath = _nodepath.default.join(_nodepath.default.dirname(id), item.source.value);
+                            // HACK this relies on Vite's internal implementation detail.
+                            const source = base + "@fs/" + filePath.replace(/^\//, "");
+                            importCallback(source);
+                        }
+                    }
+                }
+            }
+            return code;
+        }
+    };
+}

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

@@ -0,0 +1,70 @@
+"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, {
+    rscHmrPlugin: function() {
+        return rscHmrPlugin;
+    },
+    hotImport: function() {
+        return hotImport;
+    }
+});
+const _nodepath = /*#__PURE__*/ _interop_require_default(require("node:path"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const customCode = `
+if (import.meta.hot && !globalThis.__WAKU_HMR_CONFIGURED__) {
+  globalThis.__WAKU_HMR_CONFIGURED__ = true;
+  import.meta.hot.on('hot-import', (data) => import(/* @vite-ignore */ data));
+}
+`;
+function rscHmrPlugin() {
+    return {
+        name: "rsc-hmr-plugin",
+        async transform (code, id) {
+            const ext = _nodepath.default.extname(id);
+            if ([
+                ".ts",
+                ".tsx",
+                ".js",
+                ".jsx"
+            ].includes(ext)) {
+                return code + customCode;
+            }
+            return code;
+        }
+    };
+}
+const pendingMap = new WeakMap();
+function hotImport(vite, source) {
+    let sourceSet = pendingMap.get(vite);
+    if (!sourceSet) {
+        sourceSet = new Set();
+        pendingMap.set(vite, sourceSet);
+        vite.ws.on("connection", ()=>{
+            for (const source of sourceSet){
+                vite.ws.send({
+                    type: "custom",
+                    event: "hot-import",
+                    data: source
+                });
+            }
+        });
+    }
+    sourceSet.add(source);
+    vite.ws.send({
+        type: "custom",
+        event: "hot-import",
+        data: source
+    });
+}

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

@@ -9,16 +9,27 @@ Object.defineProperty(exports, "rscIndexPlugin", {
     }
 });
 const _utils = require("../middleware/rsc/utils.js");
-function rscIndexPlugin() {
+function rscIndexPlugin(cssAssets) {
     return {
         name: "rsc-index-plugin",
         async transformIndexHtml () {
             return [
                 {
                     tag: "script",
+                    attrs: {
+                        type: "module"
+                    },
                     children: _utils.codeToInject,
                     injectTo: "head"
-                }
+                },
+                ...cssAssets.map((href)=>({
+                        tag: "link",
+                        attrs: {
+                            rel: "stylesheet",
+                            href
+                        },
+                        injectTo: "head"
+                    }))
             ];
         }
     };

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

@@ -77,7 +77,7 @@ function rscReloadPlugin(fn) {
         return false;
     };
     return {
-        name: "reload-plugin",
+        name: "rsc-reload-plugin",
         configResolved (config) {
             if (config.mode === "development") {
                 enabled = true;