feat(router): support js/jsx extensions

examples/02_template_js/.gitignore

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

examples/02_template_js/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "waku-starter",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "18.3.0-canary-670811593-20240322",
+    "react-dom": "18.3.0-canary-670811593-20240322",
+    "react-server-dom-webpack": "18.3.0-canary-670811593-20240322",
+    "waku": "0.20.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.19",
+    "tailwindcss": "3.4.1"
+  }
+}

examples/02_template_js/postcss.config.js

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

examples/02_template_js/src/components/counter.jsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+
+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>
+    </section>
+  );
+};

examples/02_template_js/src/components/footer.jsx

@@ -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/02_template_js/src/components/header.jsx

@@ -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/02_template_js/src/pages/_layout.jsx

@@ -0,0 +1,35 @@
+import '../styles.css';
+
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+
+export default async function RootLayout({ children }) {
+  const data = await getData();
+
+  return (
+    <div className="font-['Nunito']">
+      <meta property="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',
+  };
+};

examples/02_template_js/src/pages/about.jsx

@@ -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',
+  };
+};

examples/02_template_js/src/pages/index.jsx

@@ -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',
+  };
+};

examples/02_template_js/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/02_template_js/tailwind.config.js

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

examples/10_fs-router/src/entries.tsx

@@ -1,15 +1,11 @@
 import { fsRouter } from 'waku/router/server';
 
-export default fsRouter(import.meta.url, loader);
-
 declare global {
   interface ImportMeta {
     readonly glob: any;
   }
 }
 
-function loader(dir: string, file: string) {
-  const fname = `./${dir}/${file.replace(/\.\w+$/, '')}.tsx`;
-  const modules = import.meta.glob('./pages/**/*.tsx');
-  return modules[fname]();
-}
+export default fsRouter(import.meta.url, (file: string) =>
+  import.meta.glob('./pages/**/*.tsx')[`./pages/${file}`]?.(),
+);

package.json

@@ -12,6 +12,7 @@
     "e2e": "playwright test",
     "examples:dev": "(cd ./examples/${NAME} && pnpm run dev)",
     "examples:dev:01_template": "NAME=01_template pnpm run examples:dev",
+    "examples:dev:02_template_js": "NAME=02_template_js pnpm run examples:dev",
     "examples:dev:03_demo": "NAME=03_demo pnpm run examples:dev",
     "examples:dev:07_router": "NAME=07_router pnpm run examples:dev",
     "examples:dev:08_cookies": "NAME=08_cookies pnpm run examples:dev",
@@ -29,6 +30,7 @@
     "examples:build": "(cd ./examples/${NAME} && pnpm run build)",
     "examples:prd": "pnpm run examples:build && (cd ./examples/${NAME} && pnpm start)",
     "examples:prd:01_template": "NAME=01_template pnpm run examples:prd",
+    "examples:prd:02_template_js": "NAME=02_template_js pnpm run examples:prd",
     "examples:prd:03_demo": "NAME=03_demo pnpm run examples:prd",
     "examples:prd:07_router": "NAME=07_router pnpm run examples:prd",
     "examples:prd:08_cookies": "NAME=08_cookies pnpm run examples:prd",

packages/waku/src/lib/plugins/vite-plugin-rsc-managed.ts

@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite';
 
+import { EXTENSIONS } from '../config.js';
 import { joinPath } from '../utils/path.js';
 
 const getManagedMain = () => `
@@ -41,13 +42,12 @@ if (document.body.dataset.hydrate) {
 const getManagedEntries = () => `
 import { fsRouter } from 'waku/router/server';
 
-export default fsRouter(import.meta.url, loader);
-
-function loader(dir, file) {
-  const fname = \`./\${dir}/\${file.replace(/\\.\\w+$/, '')}.tsx\`;
-  const modules = import.meta.glob('./pages/**/*.tsx');
-  return modules[fname]();
-}
+export default fsRouter(
+  import.meta.url,
+  (file) => import.meta.glob('./pages/**/*.{${EXTENSIONS.map((ext) =>
+    ext.replace(/^\./, ''),
+  ).join(',')}}')[\`./pages/\${file}\`]?.(),
+);
 `;
 
 const addSuffixX = (fname: string | undefined) => {

packages/waku/src/router/fs-router.ts

@@ -1,10 +1,12 @@
 import { createPages } from './create-pages.js';
 
+import { EXTENSIONS } from '../lib/config.js';
+
 const DO_NOT_BUNDLE = '';
 
 export function fsRouter(
   importMetaUrl: string,
-  loader: (dir: string, file: string) => Promise<any>,
+  loadPage: (file: string) => Promise<any> | undefined,
   pages = 'pages',
 ) {
   return createPages(
@@ -33,20 +35,29 @@ export function fsRouter(
           recursive: true,
         });
         files = files.flatMap((file) => {
-          if (!['.tsx', '.js'].includes(extname(file))) {
+          const myExt = extname(file);
+          const myExtIndex = EXTENSIONS.indexOf(myExt);
+          if (myExtIndex === -1) {
             return [];
           }
-          // HACK: replace "_slug_" to "[slug]"
+          // HACK: replace "_slug_" to "[slug]" for build
           file = file.replace(/(^|\/|\\)_(\w+)_(\/|\\|\.)/g, '$1[$2]$3');
-          if (sep === '/') {
-            return [file];
-          }
           // For Windows
-          return [file.replace(/\\/g, '/')];
+          file = sep === '/' ? file : file.replace(/\\/g, '/');
+          // HACK: resolve different extensions for build
+          const exts = [myExt, ...EXTENSIONS];
+          exts.splice(myExtIndex + 1, 1); // remove the second myExt
+          for (const ext of exts) {
+            const f = file.slice(0, -myExt.length) + ext;
+            if (loadPage(f)) {
+              return [f];
+            }
+          }
+          throw new Error('Failed to resolve ' + file);
         });
       }
       for (const file of files) {
-        const mod = await loader(pages, file);
+        const mod = await loadPage(file);
         const config = await mod.getConfig?.();
         const pathItems = file
           .replace(/\.\w+$/, '')