create-waku 0.7.4 → 0.8.0-alpha.0

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "create-waku",
-  "version": "0.7.4",
+  "version": "0.8.0-alpha.0",
+  "publishConfig": {
+    "tag": "next"
+  },
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [

package/template/01_template/package.json

@@ -4,21 +4,21 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.17",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "autoprefixer": "10.4.18",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }

package/template/01_template/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/01_template/src/templates/root-layout.tsx

@@ -11,7 +11,7 @@ export const RootLayout = async ({ children }: RootLayoutProps) => {
   const data = await getData();
 
   return (
-    <div id="__waku" className="font-['Nunito']">
+    <div className="font-['Nunito']">
       <meta property="description" content={data.description} />
       <link rel="icon" type="image/png" href={data.icon} />
       <Header />

package/template/01_template/tsconfig.json

@@ -9,9 +9,6 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "types": ["react/experimental"],
-    "jsx": "react-jsx",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
+    "jsx": "react-jsx"
   }
 }

package/template/02_demo/package.json

@@ -4,21 +4,21 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.17",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "autoprefixer": "10.4.18",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }

package/template/02_demo/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/02_demo/src/templates/root-layout.tsx

@@ -11,7 +11,7 @@ export const RootLayout = async ({ children }: RootLayoutProps) => {
   const data = await getData();
 
   return (
-    <div id="__waku" className="font-nunito">
+    <div className="font-nunito">
       <meta property="description" content={data.description} />
       <link rel="icon" type="image/png" href={data.icon} />
       <Header />

package/template/02_demo/tsconfig.json

@@ -9,9 +9,6 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "types": ["react/experimental"],
-    "jsx": "react-jsx",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
+    "jsx": "react-jsx"
   }
 }

package/template/03_minimal/package.json

@@ -4,19 +4,19 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/03_minimal/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/04_promise/package.json

@@ -4,19 +4,19 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/04_promise/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/05_actions/package.json

@@ -4,20 +4,20 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
     "react-wrap-balancer": "1.1.0",
-    "waku": "0.19.4"
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/05_actions/src/components/funcs.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import type { RenderContext } from 'waku/server';
+import { rerender } from 'waku/server';
 
 export const greet = (name: string) => `Hello ${name} from server!`;
 
@@ -9,7 +9,7 @@ let counter = 0;
 
 export const getCounter = () => counter;
 
-export function increment(this: RenderContext) {
+export const increment = () => {
   counter += 1;
-  this.rerender('Waku');
-}
+  rerender('Waku');
+};

package/template/05_actions/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/06_nesting/package.json

@@ -4,19 +4,19 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/06_nesting/src/components/AppWithoutSsr.tsx

@@ -0,0 +1,14 @@
+import { CounterWithoutSsr } from './CounterWithoutSsr.js';
+
+const AppWithoutSsr = () => {
+  return (
+    <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+      <title>Waku</title>
+      <h1>Hello!!</h1>
+      <h3>This is a server component without SSR.</h3>
+      <CounterWithoutSsr />
+    </div>
+  );
+};
+
+export default AppWithoutSsr;

package/template/06_nesting/src/components/CounterWithoutSsr.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useState } from 'react';
+
+export const CounterWithoutSsr = () => {
+  if (typeof window === 'undefined') {
+    throw new Error('This component is for client only.');
+  }
+  const [count, setCount] = useState(0);
+  const handleClick = () => {
+    setCount((c) => c + 1);
+  };
+  return (
+    <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      <p>Count: {count}</p>
+      <button onClick={handleClick}>Increment</button>
+      <h3>This is a client component.</h3>
+    </div>
+  );
+};

package/template/06_nesting/src/entries.tsx

@@ -1,10 +1,10 @@
-import { lazy } from 'react';
 import type { ReactNode } from 'react';
 import { defineEntries } from 'waku/server';
 import { Slot } from 'waku/client';
 
-const App = lazy(() => import('./components/App.js'));
-const InnerApp = lazy(() => import('./components/InnerApp.js'));
+import App from './components/App.js';
+import InnerApp from './components/InnerApp.js';
+import AppWithoutSsr from './components/AppWithoutSsr.js';
 
 export default defineEntries(
   // renderEntries
@@ -17,6 +17,9 @@ export default defineEntries(
     if (params.has('InnerApp')) {
       result.InnerApp = <InnerApp count={Number(params.get('InnerApp'))} />;
     }
+    if (params.has('AppWithoutSsr')) {
+      result.AppWithoutSsr = <AppWithoutSsr />;
+    }
     return result;
   },
   // getBuildConfig
@@ -32,6 +35,11 @@ export default defineEntries(
         { input: 'InnerApp=5', skipPrefetch: true },
       ],
     },
+    {
+      pathname: '/no-ssr',
+      entries: [{ input: 'AppWithoutSsr' }],
+      isStatic: true,
+    },
   ],
   // getSsrConfig
   async (pathname) => {
@@ -41,6 +49,8 @@ export default defineEntries(
           input: '',
           body: <Slot id="App" />,
         };
+      case '/no-ssr':
+        return null;
       default:
         return null;
     }

package/template/06_nesting/src/main.tsx

@@ -2,15 +2,25 @@ import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Root, Slot } from 'waku/client';
 
+const pathname = window.location.pathname;
+
 const rootElement = (
   <StrictMode>
-    <Root>
-      <Slot id="App" />
-    </Root>
+    {pathname === '/' ? (
+      <Root>
+        <Slot id="App" />
+      </Root>
+    ) : pathname === '/no-ssr' ? (
+      <Root initialInput="AppWithoutSsr">
+        <Slot id="AppWithoutSsr" />
+      </Root>
+    ) : (
+      <h1>Not Found</h1>
+    )}
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/07_router/package.json

@@ -4,20 +4,20 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "server-only": "0.0.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }

package/template/07_router/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/08_cookies/package.json

@@ -4,22 +4,22 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "node dev.js --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "node start.js --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "cookie-parser": "1.4.6",
-    "express": "4.18.2",
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "cookie": "0.6.0",
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/node": "20.11.20",
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/cookie": "0.6.0",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/08_cookies/src/components/App.tsx

@@ -1,20 +1,15 @@
+import { getContext } from 'waku/server';
+
 import { Counter } from './Counter.js';
 
-const App = ({
-  name,
-  count,
-  items,
-}: {
-  name: string;
-  count: number;
-  items: unknown[];
-}) => {
+const App = ({ name, items }: { name: string; items: unknown[] }) => {
+  const context = getContext<{ count: number }>();
   return (
     <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <title>Waku</title>
       <h1>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
-      <p>Cookie count: {count}</p>
+      <p>Cookie count: {context.count}</p>
       <Counter />
       <p>Item count: {items.length}</p>
     </div>

package/template/08_cookies/src/entries.tsx

@@ -1,17 +1,16 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import fsPromises from 'node:fs/promises';
-import { lazy } from 'react';
-import { defineEntries } from 'waku/server';
+import { defineEntries, getContext } from 'waku/server';
 import { Slot } from 'waku/client';
 
-const App = lazy(() => import('./components/App.js'));
+import App from './components/App.js';
 
 export default defineEntries(
   // renderEntries
-  async function (input) {
-    const ctx = this.context as { count: number };
-    ++ctx.count;
+  async (input) => {
+    const context = getContext<{ count: number }>();
+    ++context.count;
     const items = JSON.parse(
       await fsPromises.readFile(
         path.join(
@@ -22,7 +21,7 @@ export default defineEntries(
       ),
     );
     return {
-      App: <App name={input || 'Waku'} count={ctx.count} items={items} />,
+      App: <App name={input || 'Waku'} items={items} />,
     };
   },
   // getBuildConfig

package/template/08_cookies/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/08_cookies/src/middleware/cookie.ts

@@ -0,0 +1,25 @@
+import * as cookie from 'cookie';
+
+import type { Middleware } from 'waku/config';
+
+// XXX we would probably like to extend config.
+const COOKIE_OPTS = {};
+
+const cookieMiddleware: Middleware = () => {
+  return async (ctx, next) => {
+    const cookies = cookie.parse(ctx.req.headers.cookie || '');
+    ctx.context.count = Number(cookies.count) || 0;
+    await next();
+    ctx.res.headers ||= {};
+    let origSetCookie = ctx.res.headers['set-cookie'] || ([] as string[]);
+    if (typeof origSetCookie === 'string') {
+      origSetCookie = [origSetCookie];
+    }
+    ctx.res.headers['set-cookie'] = [
+      ...origSetCookie,
+      cookie.serialize('count', String(ctx.context.count), COOKIE_OPTS),
+    ];
+  };
+};
+
+export default cookieMiddleware;

package/template/08_cookies/waku.config.ts

@@ -0,0 +1,17 @@
+const DO_NOT_BUNDLE = '';
+
+/** @type {import('waku/config').Config} */
+export default {
+  middleware: (cmd: 'dev' | 'start') => [
+    import('./src/middleware/cookie.js'),
+    ...(cmd === 'dev'
+      ? [
+          import(
+            /* @vite-ignore */ DO_NOT_BUNDLE + 'waku/middleware/dev-server'
+          ),
+        ]
+      : []),
+    import('waku/middleware/rsc'),
+    import('waku/middleware/fallback'),
+  ],
+};

package/template/09_cssmodules/package.json

@@ -4,19 +4,19 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/09_cssmodules/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/10_fs-router/package.json

@@ -4,20 +4,20 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
     "glob": "10.3.10",
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/10_fs-router/src/entries.tsx

@@ -1,92 +1,21 @@
-import { fileURLToPath } from 'node:url';
-import path from 'node:path';
-import { existsSync } from 'node:fs';
-import fsPromises from 'node:fs/promises';
-import { lazy } from 'react';
-import { glob } from 'glob';
-import { unstable_defineRouter as defineRouter } from 'waku/router/server';
+import { fsRouter } from 'waku/router/server';
 
-const routesDir = path.join(
-  path.dirname(fileURLToPath(import.meta.url)),
-  'routes',
-);
+export default fsRouter(import.meta.url, loader);
 
-const getRoute = (items: string[]) =>
-  lazy(() => {
-    // HACK: replace "_slug_" to "[slug]"
-    items = items.map((item) => item.replace(/^_(\w+)_$/, '[$1]'));
-    switch (items.length) {
-      case 1:
-        return import(`./routes/${items[0]}.tsx`);
-      case 2:
-        return import(`./routes/${items[0]}/${items[1]}.tsx`);
-      case 3:
-        return import(`./routes/${items[0]}/${items[1]}/${items[2]}.tsx`);
-      default:
-        throw new Error('too deep route');
-    }
-  });
-
-const getMappingAndItems = async (id: string) => {
-  const mapping: Record<string, string> = {};
-  const items = id.split('/');
-  for (let i = 0; i < items.length - 1; ++i) {
-    const dir = path.join(routesDir, ...items.slice(0, i));
-    if (!existsSync(dir)) {
-      return null;
-    }
-    const files = await fsPromises.readdir(dir);
-    if (!files.includes(items[i]!)) {
-      const slug = files.find((file) => file.match(/^(\[\w+\]|_\w+_)$/));
-      if (slug) {
-        mapping[slug.slice(1, -1)] = items[i]!;
-        items[i] = slug;
-      }
-    }
-  }
-  if (
-    !existsSync(path.join(routesDir, ...items) + '.js') &&
-    !existsSync(path.join(routesDir, ...items) + '.tsx')
-  ) {
-    return null;
+function loader(dir: string, file: string) {
+  const p = file.replace(/\.\w+$/, '').split('/');
+  switch (p.length) {
+    case 1:
+      return import(`./${dir}/${p[0]}.tsx`);
+    case 2:
+      return import(`./${dir}/${p[0]}/${p[1]}.tsx`);
+    case 3:
+      return import(`./${dir}/${p[0]}/${p[1]}/${p[2]}.tsx`);
+    case 4:
+      return import(`./${dir}/${p[0]}/${p[1]}/${p[2]}/${p[3]}.tsx`);
+    case 5:
+      return import(`./${dir}/${p[0]}/${p[1]}/${p[2]}/${p[3]}/${p[5]}.tsx`);
+    default:
+      throw new Error('too deep');
   }
-
-  return { mapping, items };
-};
-
-const getPathConfig = async () => {
-  const files = await glob('**/page.{tsx,js}', { cwd: routesDir });
-  return files.map((file) => {
-    const names = file.split('/').filter(Boolean).slice(0, -1);
-    const pathSpec = names.map((name) => {
-      const match = name.match(/^(\[\w+\]|_\w+_)$/);
-      if (match) {
-        return { type: 'group', name: match[1]!.slice(1, -1) } as const;
-      }
-      return { type: 'literal', name } as const;
-    });
-    return {
-      path: pathSpec,
-      isStatic: pathSpec.every(({ type }) => type === 'literal'),
-    };
-  });
-};
-
-export default defineRouter(
-  // getPathConfig
-  () => getPathConfig(),
-  // getComponent (id is "**/layout" or "**/page")
-  async (id, unstable_setShouldSkip) => {
-    unstable_setShouldSkip({}); // always skip if possible
-    const result = await getMappingAndItems(id);
-    if (result === null) {
-      return null;
-    }
-    const { mapping, items } = result;
-    const Route = getRoute(items);
-    const Component = (props: Record<string, unknown>) => (
-      <Route {...props} {...mapping} />
-    );
-    return Component;
-  },
-);
+}

package/template/10_fs-router/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/10_fs-router/src/{routes/bar/page.tsx → pages/bar.tsx}

@@ -1,4 +1,4 @@
-import { Counter } from '../../components/Counter.js';
+import { Counter } from '../components/Counter.js';
 
 const Bar = () => (
   <div>

package/template/11_form/package.json

@@ -4,19 +4,19 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2"
   }
 }

package/template/11_form/src/components/funcs.ts

@@ -1,15 +1,15 @@
 'use server';
 
-import type { RenderContext } from 'waku/server';
+import { rerender } from 'waku/server';
 
 // module state on server
 let message = '';
 
 export const getMessage = () => message;
 
-export function greet(this: RenderContext, formData: FormData) {
+export const greet = (formData: FormData) => {
   message = `Hello ${formData.get('name') || 'Anonymous'} from server!`;
-  this.rerender('');
-}
+  rerender('');
+};
 
 export const increment = (count: number) => count + 1;

package/template/11_form/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/12_css/package.json

@@ -4,25 +4,25 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
     "@stylexjs/stylex": "0.5.1",
     "@vanilla-extract/css": "1.14.1",
     "classnames": "2.3.2",
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "@vanilla-extract/vite-plugin": "3.9.5",
-    "typescript": "5.3.3",
-    "vite": "5.1.4",
+    "typescript": "5.4.2",
+    "vite": "5.1.5",
     "vite-plugin-stylex-dev": "0.3.0"
   }
 }

package/template/12_css/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/13_path-alias/package.json

@@ -4,21 +4,21 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
-    "waku": "0.19.4"
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "typescript": "5.3.3",
-    "vite": "5.1.4",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "typescript": "5.4.2",
+    "vite": "5.1.5",
     "vite-tsconfig-paths": "4.3.1"
   }
 }

package/template/13_path-alias/src/main.tsx

@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/14_react-tweet/package.json

@@ -4,22 +4,22 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
-    "build": "waku build --with-ssr",
-    "start": "waku start --with-ssr"
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
   },
   "dependencies": {
-    "react": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
-    "react-server-dom-webpack": "18.3.0-canary-6c3b8dbfe-20240226",
+    "react": "18.3.0-canary-0066e0b68-20240306",
+    "react-dom": "18.3.0-canary-0066e0b68-20240306",
+    "react-server-dom-webpack": "18.3.0-canary-0066e0b68-20240306",
     "react-tweet": "^3.2.0",
-    "waku": "0.19.4"
+    "waku": "0.20.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "autoprefixer": "10.4.17",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
+    "autoprefixer": "10.4.18",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.4.2"
   }
 }

package/template/14_react-tweet/src/main.tsx

@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_HYDRATE) {
+if (document.body.dataset.hydrate) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

package/template/14_react-tweet/src/templates/root-layout.tsx

@@ -11,7 +11,7 @@ export const RootLayout = async ({ children }: RootLayoutProps) => {
   const data = await getData();
 
   return (
-    <div id="__waku" className="font-['Nunito']">
+    <div className="font-['Nunito']">
       <meta property="description" content={data.description} />
       <link rel="icon" type="image/png" href={data.icon} />
       <Header />

package/template/14_react-tweet/tsconfig.json

@@ -9,9 +9,6 @@
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
     "types": ["react/experimental"],
-    "jsx": "react-jsx",
-    "paths": {
-      "~/*": ["./src/*"]
-    }
+    "jsx": "react-jsx"
   }
 }

package/template/14_react-tweet/vite.config.ts

@@ -1,15 +1,17 @@
 /** @type {import('vite').UserConfig} */
-export default ({ mode }: { mode: string }) => ({
-  ...(mode === 'development' && {
-    optimizeDeps: {
-      include: [
-        'react-dom/client',
-        'react-tweet > use-sync-external-store/shim/index.js',
-        'react-tweet > date-fns/format/index.js',
-      ],
-    },
-    ssr: {
-      noExternal: ['react-tweet'],
-    },
-  }),
-});
+export default ({ mode }: { mode: string }) => {
+  if (mode === 'development') {
+    return {
+      optimizeDeps: {
+        include: [
+          'react-tweet > use-sync-external-store/shim/index.js',
+          'react-tweet > date-fns/format/index.js',
+        ],
+      },
+      ssr: {
+        noExternal: ['react-tweet'],
+      },
+    };
+  }
+  return {};
+};

package/template/08_cookies/dev.js

@@ -1,24 +0,0 @@
-import express from 'express';
-import cookieParser from 'cookie-parser';
-import { unstable_connectMiddleware as connectMiddleware } from 'waku/dev';
-
-const withSsr = process.argv[2] === '--with-ssr';
-
-const app = express();
-app.use(cookieParser());
-app.use(
-  connectMiddleware({
-    unstable_prehook: (req) => {
-      return { count: Number(req.orig.cookies.count) || 0 };
-    },
-    unstable_posthook: (req, res, ctx) => {
-      res.orig.cookie('count', String(ctx.count));
-    },
-    ssr: withSsr,
-  }),
-);
-
-const port = process.env.PORT || 3000;
-app.listen(port, () => {
-  console.info('Listening on', port);
-});

package/template/08_cookies/start.js

@@ -1,32 +0,0 @@
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import path from 'node:path';
-import express from 'express';
-import cookieParser from 'cookie-parser';
-import { unstable_connectMiddleware as connectMiddleware } from 'waku/prd';
-
-const withSsr = process.argv[2] === '--with-ssr';
-
-const root = path.dirname(fileURLToPath(import.meta.url));
-
-const app = express();
-app.use(cookieParser());
-app.use(
-  connectMiddleware({
-    loadEntries: () =>
-      import(pathToFileURL(path.join(root, 'dist', 'entries.js')).toString()),
-    unstable_prehook: (req) => {
-      return { count: Number(req.orig.cookies.count) || 0 };
-    },
-    unstable_posthook: (req, res, ctx) => {
-      res.orig.cookie('count', String(ctx.count));
-    },
-    ssr: withSsr,
-  }),
-);
-app.use(express.static(path.join(root, 'dist', 'public')));
-express.static.mime.default_type = '';
-
-const port = process.env.PORT || 8080;
-app.listen(port, () => {
-  console.info('Listening on', port);
-});