05_compiler and fixes

examples/05_compiler/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env*
+*.tsbuildinfo
+.cache
+.DS_Store
+*.pem

examples/05_compiler/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "05_compiler",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-server-dom-webpack": "19.0.0",
+    "waku": "0.21.11"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "@vitejs/plugin-react": "4.3.4",
+    "autoprefixer": "10.4.20",
+    "babel-plugin-react-compiler": "19.0.0-beta-b2e8e9c-20241220",
+    "tailwindcss": "3.4.17",
+    "typescript": "5.7.2"
+  }
+}

examples/05_compiler/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/05_compiler/src/components/counter.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useState } from 'react';
+
+const Hello = () => {
+  return <p suppressHydrationWarning>Hello (now={Date.now()})</p>;
+};
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
+      <div>Count: {count}</div>
+      <button
+        onClick={handleIncrement}
+        className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
+      >
+        Increment
+      </button>
+      <Hello />
+    </section>
+  );
+};

examples/05_compiler/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

examples/05_compiler/src/components/header.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};

examples/05_compiler/src/pages/_layout.tsx

@@ -0,0 +1,39 @@
+import '../styles.css';
+
+import type { ReactNode } from 'react';
+
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+
+type RootLayoutProps = { children: ReactNode };
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const data = await getData();
+
+  return (
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

examples/05_compiler/src/pages/about.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'waku';
+
+export default async function AboutPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Link to="/" className="mt-4 inline-block underline">
+        Return home
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'About',
+    headline: 'About Waku',
+    body: 'The minimal React framework',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

examples/05_compiler/src/pages/index.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'waku';
+
+import { Counter } from '../components/counter';
+
+export default async function HomePage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Counter />
+      <Link to="/about" className="mt-4 inline-block underline">
+        About page
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+    body: 'Hello world!',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

examples/05_compiler/src/styles.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/05_compiler/tailwind.config.js

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

examples/05_compiler/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx"
+  }
+}

examples/05_compiler/waku.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'waku/config';
+import react from '@vitejs/plugin-react';
+
+const ReactCompilerConfig = {};
+
+const getConfig = () => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+      },
+    }),
+  ],
+});
+
+export default defineConfig({
+  unstable_viteConfigs: {
+    'dev-main': getConfig,
+    'build-client': getConfig,
+  },
+});

packages/waku/src/lib/builder/build.ts

@@ -1,11 +1,7 @@
 import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
 
-import {
-  build as buildVite,
-  resolveConfig as resolveViteConfig,
-  mergeConfig as mergeViteConfig,
-} from 'vite';
+import { build as buildVite, resolveConfig as resolveViteConfig } from 'vite';
 import viteReact from '@vitejs/plugin-react';
 import type { LoggingFunction, RollupLog } from 'rollup';
 import type { ReactNode } from 'react';
@@ -24,6 +20,7 @@ import {
   fileURLToFilePath,
   joinPath,
 } from '../utils/path.js';
+import { extendViteConfig } from '../utils/vite-config.js';
 import {
   appendFile,
   createWriteStream,
@@ -124,7 +121,7 @@ const analyzeEntries = async (rootDir: string, config: ResolvedConfig) => {
     }
   }
   await buildVite(
-    mergeViteConfig(
+    extendViteConfig(
       {
         mode: 'production',
         plugins: [
@@ -155,10 +152,8 @@ const analyzeEntries = async (rootDir: string, config: ResolvedConfig) => {
           },
         },
       },
-      {
-        ...config.unstable_viteConfigs?.['common']?.(),
-        ...config.unstable_viteConfigs?.['build-analyze']?.(),
-      },
+      config,
+      'build-analyze',
     ),
   );
   const clientEntryFiles = Object.fromEntries(
@@ -168,7 +163,7 @@ const analyzeEntries = async (rootDir: string, config: ResolvedConfig) => {
     ]),
   );
   await buildVite(
-    mergeViteConfig(
+    extendViteConfig(
       {
         mode: 'production',
         plugins: [
@@ -190,10 +185,8 @@ const analyzeEntries = async (rootDir: string, config: ResolvedConfig) => {
           },
         },
       },
-      {
-        ...config.unstable_viteConfigs?.['common']?.(),
-        ...config.unstable_viteConfigs?.['build-analyze']?.(),
-      },
+      config,
+      'build-analyze',
     ),
   );
   const serverEntryFiles = Object.fromEntries(
@@ -221,7 +214,7 @@ const buildServerBundle = async (
   partial: boolean,
 ) => {
   const serverBuildOutput = await buildVite(
-    mergeViteConfig(
+    extendViteConfig(
       {
         mode: 'production',
         plugins: [
@@ -302,10 +295,8 @@ const buildServerBundle = async (
           },
         },
       },
-      {
-        ...config.unstable_viteConfigs?.['common']?.(),
-        ...config.unstable_viteConfigs?.['build-server']?.(),
-      },
+      config,
+      'build-server',
     ),
   );
   if (!('output' in serverBuildOutput)) {
@@ -328,7 +319,7 @@ const buildSsrBundle = async (
     type === 'asset' && fileName.endsWith('.css') ? [fileName] : [],
   );
   await buildVite(
-    mergeViteConfig(
+    extendViteConfig(
       {
         mode: 'production',
         base: config.basePath,
@@ -382,10 +373,8 @@ const buildSsrBundle = async (
           },
         },
       },
-      {
-        ...config.unstable_viteConfigs?.['common']?.(),
-        ...config.unstable_viteConfigs?.['build-ssr']?.(),
-      },
+      config,
+      'build-ssr',
     ),
   );
 };
@@ -405,7 +394,7 @@ const buildClientBundle = async (
   );
   const cssAssets = nonJsAssets.filter((asset) => asset.endsWith('.css'));
   const clientBuildOutput = await buildVite(
-    mergeViteConfig(
+    extendViteConfig(
       {
         mode: 'production',
         base: config.basePath,
@@ -442,10 +431,8 @@ const buildClientBundle = async (
           },
         },
       },
-      {
-        ...config.unstable_viteConfigs?.['common']?.(),
-        ...config.unstable_viteConfigs?.['build-client']?.(),
-      },
+      config,
+      'build-client',
     ),
   );
   if (!('output' in clientBuildOutput)) {