feat: use @vitejs/plugin-rsc

e2e/fixtures/rsc-asset/waku.config.ts

@@ -11,6 +11,15 @@ export default defineConfig({
       plugins: [importMetaUrlServerPlugin()],
     }),
   },
+  vite: {
+    plugins: [
+      {
+        ...importMetaUrlServerPlugin(),
+        apply: 'build',
+        applyToEnvironment: (environment) => environment.name === 'rsc',
+      },
+    ],
+  },
 });
 
 // emit asset and rewrite `new URL("./xxx", import.meta.url)` syntax for build.

e2e/fixtures/ssr-swr/waku.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'waku/config';
+
+export default defineConfig({
+  vite: {
+    environments: {
+      ssr: {
+        optimizeDeps: {
+          include: ['swr'],
+        },
+      },
+    },
+  },
+});

e2e/hot-reload.spec.ts

@@ -178,8 +178,7 @@ test.describe('hot reload', () => {
     expect(bgColor3).toBe('rgb(0, 0, 255)');
   });
 
-  // https://github.com/wakujs/waku/pull/1493 will fix this
-  test.skip('indirect client components (#1491)', async ({ page }) => {
+  test('indirect client components (#1491)', async ({ page }) => {
     const errors: string[] = [];
     page.on('pageerror', (err) => errors.push(err.message));
     await page.goto(`http://localhost:${port}/`);

eslint.config.ts

@@ -67,6 +67,7 @@ export default tseslint.config(
   {
     files: [
       'packages/waku/cli.js',
+      'packages/waku/src/vite-rsc/**/*',
       'packages/create-waku/cli.js',
       'examples/41_path-alias/**/*.tsx',
     ],

examples/05_compiler/waku.config.ts

@@ -18,4 +18,16 @@ export default defineConfig({
     'dev-main': getConfig,
     'build-client': getConfig,
   },
+  vite: {
+    plugins: [
+      // cf. https://github.com/vitejs/vite-plugin-react/pull/537
+      react({ babel: { plugins: ['babel-plugin-react-compiler'] } }).map(
+        (p) =>
+          ({
+            ...p,
+            applyToEnvironment: (e: any) => e.name === 'client',
+          }) as any,
+      ),
+    ],
+  },
 });

examples/37_css-stylex/waku.config.ts

@@ -49,4 +49,7 @@ export default defineConfig({
       plugins: [react({ babel: babelConfig })],
     }),
   },
+  vite: {
+    plugins: [react({ babel: babelConfig })],
+  },
 });

examples/37_css-vanilla-extract/waku.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'waku/config';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+export default defineConfig({
+  vite: {
+    plugins: [vanillaExtractPlugin()],
+  },
+});

examples/41_path-alias/waku.config.ts

@@ -10,4 +10,7 @@ export default defineConfig({
       ],
     }),
   },
+  vite: {
+    plugins: [tsconfigPaths()],
+  },
 });

packages/waku/.swcrc

@@ -4,6 +4,11 @@
     "parser": {
       "syntax": "typescript"
     },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
     "target": "esnext"
   },
   "sourceMaps": true

packages/waku/package.json

@@ -89,6 +89,7 @@
     "@hono/node-server": "1.17.1",
     "@swc/core": "1.13.3",
     "@vitejs/plugin-react": "4.7.0",
+    "@vitejs/plugin-rsc": "0.4.16",
     "dotenv": "17.2.1",
     "hono": "4.8.10",
     "html-react-parser": "5.2.6",

packages/waku/src/cli.ts

@@ -55,6 +55,9 @@ const { values, positionals } = parseArgs({
     'experimental-compress': {
       type: 'boolean',
     },
+    'experimental-legacy-cli': {
+      type: 'boolean',
+    },
     port: {
       type: 'string',
       short: 'p',
@@ -77,6 +80,13 @@ if (values.version) {
   console.log(version);
 } else if (values.help) {
   displayUsage();
+} else if (
+  !values['experimental-legacy-cli'] &&
+  cmd &&
+  ['dev', 'build', 'start'].includes(cmd)
+) {
+  const { cli } = await import('./vite-rsc/cli.js');
+  await cli(cmd, values);
 } else {
   switch (cmd) {
     case 'dev':
@@ -242,7 +252,9 @@ async function loadConfig(): Promise<Config> {
   return (await loadServerModule<{ default: Config }>(file)).default;
 }
 
-type HonoEnhancer = <Hono>(fn: (app: Hono) => Hono) => (app: Hono) => Hono;
+export type HonoEnhancer = <Hono>(
+  fn: (app: Hono) => Hono,
+) => (app: Hono) => Hono;
 
 async function loadHonoEnhancer(file: string): Promise<HonoEnhancer> {
   const { loadServerModule } = await import('./lib/utils/vite-loader.js');

packages/waku/src/config.ts

@@ -59,6 +59,7 @@ export interface Config {
    */
   unstable_honoEnhancer?: string | undefined;
   /**
+   * @deprecated use `vite` instead.
    * Vite configuration options.
    * `common` can contains shared configs that are shallowly merged with other configs.
    * Defaults to `undefined` if not provided.
@@ -75,6 +76,12 @@ export interface Config {
         'build-deploy'?: () => UserConfig;
       }
     | undefined;
+  /**
+   * Vite configuration options.
+   * See https://vite.dev/guide/api-environment-plugins.html#environment-api-for-plugins
+   * for how to configure or enable plugins per environment.
+   */
+  vite?: UserConfig | undefined;
 }
 
 export function defineConfig(config: Config) {

packages/waku/src/lib/config.ts

@@ -26,6 +26,7 @@ export async function resolveConfigDev(config: Config) {
     middleware: DEFAULT_MIDDLEWARE,
     unstable_honoEnhancer: undefined,
     unstable_viteConfigs: undefined,
+    vite: undefined,
     ...config,
   };
   return configDev;

packages/waku/src/vite-rsc/cli.ts

@@ -0,0 +1,56 @@
+import * as vite from 'vite';
+import { mainPlugin, type MainPluginOptions } from './plugin.js';
+import type { Config } from '../config.js';
+import { existsSync } from 'node:fs';
+
+export async function cli(cmd: string, flags: Record<string, any>) {
+  // set NODE_ENV before runnerImport https://github.com/vitejs/vite/issues/20299
+  process.env.NODE_ENV ??= cmd === 'dev' ? 'development' : 'production';
+
+  // TODO: reload during dev
+  let config: Config | undefined;
+  if (existsSync('waku.config.ts') || existsSync('waku.config.js')) {
+    const imported = await vite.runnerImport<{ default: Config }>(
+      '/waku.config',
+    );
+    config = imported.module.default;
+  }
+
+  const mainPluginOptions: MainPluginOptions = {
+    flags,
+    config,
+  };
+
+  if (cmd === 'dev') {
+    const server = await vite.createServer({
+      configFile: false,
+      plugins: [mainPlugin(mainPluginOptions)],
+      server: {
+        port: parseInt(flags.port || '3000', 10),
+      },
+    });
+    await server.listen();
+    const url = server.resolvedUrls!['local'];
+    console.log(`ready: Listening on ${url}`);
+  }
+
+  if (cmd === 'build') {
+    const builder = await vite.createBuilder({
+      configFile: false,
+      plugins: [mainPlugin(mainPluginOptions)],
+    });
+    await builder.buildApp();
+  }
+
+  if (cmd === 'start') {
+    const server = await vite.preview({
+      configFile: false,
+      plugins: [mainPlugin(mainPluginOptions)],
+      preview: {
+        port: parseInt(flags.port || '8080', 10),
+      },
+    });
+    const url = server.resolvedUrls!['local'];
+    console.log(`ready: Listening on ${url}`);
+  }
+}

packages/waku/src/vite-rsc/deploy/aws-lambda/entry.ts

@@ -0,0 +1,32 @@
+import { Hono } from 'hono';
+import * as honoAwsLambda from 'hono/aws-lambda';
+import { createHonoHandler } from '../../lib/engine.js';
+import { honoEnhancer } from 'virtual:vite-rsc-waku/hono-enhancer';
+import { config } from 'virtual:vite-rsc-waku/config';
+import { serveStatic } from '@hono/node-server/serve-static';
+import path from 'node:path';
+import fs from 'node:fs';
+import { DIST_PUBLIC } from '../../../lib/builder/constants.js';
+import { INTERNAL_setAllEnv } from '../../../server.js';
+
+function createApp(app: Hono) {
+  INTERNAL_setAllEnv(process.env as any);
+  app.use(serveStatic({ root: path.join(config.distDir, DIST_PUBLIC) }));
+  app.use(createHonoHandler());
+  app.notFound((c) => {
+    const file = path.join(config.distDir, DIST_PUBLIC, '404.html');
+    if (fs.existsSync(file)) {
+      return c.html(fs.readFileSync(file, 'utf8'), 404);
+    }
+    return c.text('404 Not Found', 404);
+  });
+  return app;
+}
+
+const app = honoEnhancer(createApp)(new Hono());
+
+export const handler: any = import.meta.env.WAKU_AWS_LAMBDA_STREAMING
+  ? honoAwsLambda.streamHandle(app)
+  : honoAwsLambda.handle(app);
+
+export { handleBuild } from '../../lib/build.js';

packages/waku/src/vite-rsc/deploy/aws-lambda/plugin.ts

@@ -0,0 +1,63 @@
+import { type Plugin, type ResolvedConfig } from 'vite';
+import { writeFileSync } from 'node:fs';
+import path from 'node:path';
+import type { Config } from '../../../config.js';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const SERVER_ENTRY = path.join(__dirname, 'entry.js');
+const SERVE_JS = 'serve-aws-lambda.js';
+
+export function deployAwsLambdaPlugin(deployOptions: {
+  config: Required<Config>;
+  streaming: boolean;
+}): Plugin {
+  return {
+    name: 'waku:deploy-aws-lambda',
+    config() {
+      return {
+        environments: {
+          rsc: {
+            build: {
+              rollupOptions: {
+                input: {
+                  index: SERVER_ENTRY,
+                },
+              },
+            },
+            define: {
+              'import.meta.env.WAKU_AWS_LAMBDA_STREAMING': JSON.stringify(
+                deployOptions.streaming,
+              ),
+            },
+          },
+        },
+      };
+    },
+    buildApp: {
+      order: 'post',
+      async handler(builder) {
+        await build({
+          config: builder.config,
+          opts: deployOptions.config,
+        });
+      },
+    },
+  };
+}
+
+async function build({
+  opts,
+}: {
+  config: ResolvedConfig;
+  opts: Required<Config>;
+}) {
+  writeFileSync(
+    path.join(opts.distDir, SERVE_JS),
+    `export { handler } from './rsc/index.js';\n`,
+  );
+  writeFileSync(
+    path.join(opts.distDir, 'package.json'),
+    JSON.stringify({ type: 'module' }, null, 2),
+  );
+}

packages/waku/src/vite-rsc/deploy/cloudflare/entry.ts

@@ -0,0 +1,38 @@
+import { Hono } from 'hono';
+import { createHonoHandler } from '../../lib/engine.js';
+import { honoEnhancer } from 'virtual:vite-rsc-waku/hono-enhancer';
+import { INTERNAL_setAllEnv } from '../../../server.js';
+
+function createApp(app: Hono) {
+  app.use(createHonoHandler());
+  app.notFound(async (c) => {
+    const assetsFetcher = (c.env as any).ASSETS;
+    const url = new URL(c.req.raw.url);
+    const errorHtmlUrl = url.origin + '/404.html';
+    const notFoundStaticAssetResponse = await assetsFetcher.fetch(
+      new URL(errorHtmlUrl),
+    );
+    if (
+      notFoundStaticAssetResponse &&
+      notFoundStaticAssetResponse.status < 400
+    ) {
+      return c.body(notFoundStaticAssetResponse.body, 404);
+    }
+    return c.text('404 Not Found', 404);
+  });
+  return app;
+}
+
+let app: Hono | undefined;
+
+export default {
+  fetch: (request: Request, env: any, ctx: any) => {
+    if (!app) {
+      INTERNAL_setAllEnv(env);
+      app = honoEnhancer(createApp)(new Hono());
+    }
+    return app.fetch(request, env, ctx);
+  },
+};
+
+export { handleBuild } from '../../lib/build.js';