create-waku 0.7.0 → 0.7.2

package/template/{05_mutation → 02_demo}/src/main.tsx

@@ -1,12 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import { Root, Slot } from 'waku/client';
+import { Router } from 'waku/router/client';
+
+import { ErrorBoundary } from './components/error-boundary.js';
 
 const rootElement = (
   <StrictMode>
-    <Root>
-      <Slot id="App" />
-    </Root>
+    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
+      <Router />
+    </ErrorBoundary>
   </StrictMode>
 );
 

package/template/02_demo/src/styles.css

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

package/template/02_demo/src/templates/home-page.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'waku';
+
+import { sql } from '../lib/index.js';
+
+export const HomePage = async () => {
+  const { rows } = await sql`SELECT * FROM pokemon ORDER BY RANDOM() LIMIT 9`;
+
+  return (
+    <>
+      <title>Waku Pokemon</title>
+      <ul className="grid h-full w-full max-w-xl grid-cols-2 gap-6 px-6 py-20 leading-none md:grid-cols-3 md:px-0">
+        {rows.map((row) => (
+          <li key={row.id}>
+            <Link
+              to={`/${row.slug}`}
+              className="flex aspect-square w-full flex-shrink-0 flex-col items-center justify-center rounded-xl bg-gray-50 p-3 text-gray-950 transition-colors duration-500 ease-in-out hover:bg-gray-200"
+            >
+              <img
+                src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${row.id}.png`}
+                alt={row.slug}
+                className="size-[96px]"
+              />
+              <div className="flex flex-col items-center justify-center gap-1 font-bold">
+                <span className="font-bold">{row.name.english}</span>
+                <span className="font-zen-maru-gothic text-[0.875em] font-bold opacity-40">
+                  {row.name.japanese}
+                </span>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

package/template/02_demo/src/templates/pokemon-page.tsx

@@ -0,0 +1,69 @@
+import { Link } from 'waku';
+import { pokemon } from '../lib/pokemon.js';
+
+type PokemonPageProps = { slug: string };
+
+export const PokemonPage = async ({ slug }: PokemonPageProps) => {
+  const pokemon = await getPokemon(slug);
+
+  if (!pokemon) return null;
+
+  const stats = Object.entries(pokemon.base);
+
+  return (
+    <>
+      <title>{`Waku ${pokemon.name.english}`}</title>
+      <div className="mx-auto flex w-1/2 flex-col items-center justify-center gap-6 leading-none md:w-full md:max-w-xl">
+        <div>
+          <ul className="flex items-center justify-center gap-1.5">
+            {pokemon.type.map((type) => (
+              <div
+                key={type}
+                className="rounded-full bg-gray-100 px-3 py-1 text-xs font-bold uppercase leading-none tracking-wide text-black/60"
+              >
+                {type}
+              </div>
+            ))}
+          </ul>
+        </div>
+        <div className="inline-flex aspect-square flex-col items-center justify-center">
+          <img
+            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+            alt={pokemon.slug}
+            className="size-[144px]"
+          />
+          <div className="flex flex-col items-center justify-center gap-1 text-2xl leading-none">
+            <span className="font-bold">{pokemon.name.english}</span>
+            <span className="font-zen-maru-gothic text-[0.875em] font-bold opacity-40">
+              {pokemon.name.japanese}
+            </span>
+          </div>
+        </div>
+        <div>
+          <ul className="mx-auto flex w-32 flex-col flex-wrap justify-center gap-1.5">
+            {stats.map(([stat, value]: any) => (
+              <li
+                key={stat}
+                className="inline-block rounded-sm bg-black px-1.5 py-1 text-[0.5rem] font-bold uppercase tracking-wider text-white"
+              >
+                {stat}: {value}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="mt-12">
+          <Link
+            to="/"
+            className="inline-block rounded-xl bg-gray-100 px-6 py-4 font-bold transition-colors duration-500 ease-in-out hover:bg-gray-200"
+          >
+            back
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const getPokemon = async (slug: string) => {
+  return pokemon.find((row) => row.slug === slug) ?? null;
+};

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

@@ -0,0 +1,33 @@
+import '../styles.css';
+
+import type { ReactNode } from 'react';
+
+import { Header } from '../components/header.js';
+import { Footer } from '../components/footer.js';
+
+type RootLayoutProps = { children: ReactNode };
+
+export const RootLayout = async ({ children }: RootLayoutProps) => {
+  const data = await getData();
+
+  return (
+    <div id="__waku" className="font-nunito">
+      <meta property="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="flex min-h-svh items-center justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};

package/template/02_demo/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    fontFamily: {
+      nunito: ['"Nunito"', 'sans-serif'],
+      'zen-maru-gothic': ['"Zen Maru Gothic"', 'serif'],
+    },
+  },
+};

package/template/{05_mutation → 02_demo}/tsconfig.json

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

package/template/{02_minimal → 03_minimal}/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/{03_promise → 04_promise}/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/{05_mutation → 05_actions}/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
     "react-wrap-balancer": "1.1.0",
-    "waku": "0.19.0"
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/{05_mutation → 05_actions}/src/components/App.tsx

@@ -1,7 +1,7 @@
 import { Balancer } from 'react-wrap-balancer';
 
-import { Counter } from './Counter.js';
-import { getCounter, increment } from './funcs.js';
+import Counter from './Counter.js';
+import { greet, getCounter, increment } from './funcs.js';
 
 type ServerFunction<T> = T extends (...args: infer A) => infer R
   ? (...args: A) => Promise<R>
@@ -15,6 +15,7 @@ const App = ({ name }: { name: string }) => {
       <h3>This is a server component.</h3>
       <p>Server counter: {getCounter()}</p>
       <Counter
+        greet={greet as unknown as ServerFunction<typeof greet>}
         increment={increment as unknown as ServerFunction<typeof increment>}
       />
       <Balancer>My Awesome Title</Balancer>

package/template/{04_callserver → 05_actions}/src/components/Counter.tsx

@@ -4,31 +4,37 @@ import { useState, useTransition } from 'react';
 
 import { TextBox } from './TextBox.js';
 
-export const Counter = ({
+const Counter = ({
   greet,
+  increment,
 }: {
   greet: (name: string) => Promise<string>;
+  increment: () => void;
 }) => {
+  const [isPending, startTransition] = useTransition();
   const [count, setCount] = useState(0);
   const [text, setText] = useState<string | Promise<string>>('');
-  const [isPending, startTransition] = useTransition();
-  const handleClick = () => {
+  const handleClick1 = () => {
     startTransition(() => {
       setText(greet('c=' + count));
     });
   };
+  const handleClick2 = () => {
+    startTransition(() => {
+      increment();
+    });
+  };
   return (
     <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
+      {isPending ? 'Pending...' : ''}
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
-      <p>
-        <button onClick={handleClick}>
-          greet(&quot;c=&quot; + count) = {text as string}
-        </button>{' '}
-        {isPending ? 'Pending...' : ''}
-      </p>
+      <button onClick={handleClick1}>{text || 'Click to greet'}</button>
+      <button onClick={handleClick2}>Increment server counter</button>{' '}
       <h3>This is a client component.</h3>
       <TextBox />
     </div>
   );
 };
+
+export default Counter;

package/template/{05_mutation → 05_actions}/src/components/funcs.ts

@@ -2,6 +2,8 @@
 
 import type { RenderContext } from 'waku/server';
 
+export const greet = (name: string) => `Hello ${name} from server!`;
+
 // module state on server
 let counter = 0;
 

package/template/05_actions/vite.config.ts

@@ -0,0 +1,6 @@
+/** @type {import('vite').UserConfig} */
+export default {
+  ssr: {
+    noExternal: ['react-wrap-balancer'],
+  },
+};

package/template/06_nesting/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/07_router/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "server-only": "0.0.1",
     "typescript": "5.3.3"

package/template/08_cookies/dev.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import cookieParser from 'cookie-parser';
-import { connectMiddleware } from 'waku/dev';
+import { unstable_connectMiddleware as connectMiddleware } from 'waku/dev';
 
 const withSsr = process.argv[2] === '--with-ssr';
 

package/template/08_cookies/package.json

@@ -11,14 +11,14 @@
   "dependencies": {
     "cookie-parser": "1.4.6",
     "express": "4.18.2",
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/node": "^20.10.6",
-    "@types/react": "18.2.46",
+    "@types/node": "20.11.16",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/08_cookies/start.js

@@ -2,7 +2,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import path from 'node:path';
 import express from 'express';
 import cookieParser from 'cookie-parser';
-import { connectMiddleware } from 'waku/prd';
+import { unstable_connectMiddleware as connectMiddleware } from 'waku/prd';
 
 const withSsr = process.argv[2] === '--with-ssr';
 
@@ -12,9 +12,8 @@ const app = express();
 app.use(cookieParser());
 app.use(
   connectMiddleware({
-    entries: import(
-      pathToFileURL(path.join(root, 'dist', 'entries.js')).toString()
-    ),
+    loadEntries: () =>
+      import(pathToFileURL(path.join(root, 'dist', 'entries.js')).toString()),
     unstable_prehook: (req) => {
       return { count: Number(req.orig.cookies.count) || 0 };
     },

package/template/09_cssmodules/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/09_cssmodules/src/components/Layout.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from 'react';
+import type { ReactNode } from 'react';
+
+import './styles.css';
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <div>
+      {children}
+      <Suspense fallback="Pending...">
+        <ServerMessage />
+      </Suspense>
+    </div>
+  );
+};
+
+const ServerMessage = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  return <p>Hello from server!</p>;
+};
+
+export default Layout;

package/template/09_cssmodules/src/components/styles.css

@@ -0,0 +1,3 @@
+body {
+  background-color: lightyellow;
+}

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

@@ -2,13 +2,18 @@ import { lazy } from 'react';
 import { defineEntries } from 'waku/server';
 import { Slot } from 'waku/client';
 
+const Layout = lazy(() => import('./components/Layout.js'));
 const App = lazy(() => import('./components/App.js'));
 
 export default defineEntries(
   // renderEntries
   async (input) => {
     return {
-      App: <App name={input || 'Waku'} />,
+      App: (
+        <Layout>
+          <App name={input || 'Waku'} />
+        </Layout>
+      ),
     };
   },
   // getBuildConfig

package/template/10_dynamicroute/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "glob": "10.3.10",
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/10_dynamicroute/src/entries.tsx

@@ -54,24 +54,27 @@ const getMappingAndItems = async (id: string) => {
   return { mapping, items };
 };
 
-const getStaticPaths = async () => {
+const getPathConfig = async () => {
   const files = await glob('**/page.{tsx,js}', { cwd: routesDir });
-  return files
-    .filter((file) => !/(^|\/)(\[\w+\]|_\w+_)\//.test(file))
-    .map((file) => '/' + file.slice(0, Math.max(0, file.lastIndexOf('/'))));
+  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(
-  // existsPath
-  async (path: string) => {
-    if ((await getStaticPaths()).includes(path)) {
-      return 'static';
-    }
-    if ((await getMappingAndItems(path + '/page')) !== null) {
-      return 'dynamic';
-    }
-    return null;
-  },
+  // getPathConfig
+  () => getPathConfig(),
   // getComponent (id is "**/layout" or "**/page")
   async (id, unstable_setShouldSkip) => {
     unstable_setShouldSkip({}); // always skip if possible
@@ -86,6 +89,4 @@ export default defineRouter(
     );
     return Component;
   },
-  // getPathsForBuild
-  () => getStaticPaths(),
 );

package/template/10_dynamicroute/vite.config.ts

@@ -7,9 +7,6 @@ const routeFiles = glob.sync('routes/**/*.{tsx,js}', { cwd: rootDir });
 
 /** @type {import('vite').UserConfig} */
 export default {
-  ssr: {
-    external: ['glob'],
-  },
   build: {
     rollupOptions: {
       input: Object.fromEntries(

package/template/11_form/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   }

package/template/12_css/package.json

@@ -9,20 +9,20 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@stylexjs/stylex": "0.4.1",
-    "@vanilla-extract/css": "1.14.0",
+    "@stylexjs/stylex": "0.5.1",
+    "@vanilla-extract/css": "1.14.1",
     "classnames": "2.3.2",
-    "react": "18.3.0-canary-c5b937576-20231219",
-    "react-dom": "18.3.0-canary-c5b937576-20231219",
-    "react-server-dom-webpack": "18.3.0-canary-c5b937576-20231219",
-    "waku": "0.19.0"
+    "react": "18.3.0-canary-4b2a1115a-20240202",
+    "react-dom": "18.3.0-canary-4b2a1115a-20240202",
+    "react-server-dom-webpack": "18.3.0-canary-4b2a1115a-20240202",
+    "waku": "0.19.2"
   },
   "devDependencies": {
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.54",
     "@types/react-dom": "18.2.18",
-    "@vanilla-extract/vite-plugin": "3.9.3",
+    "@vanilla-extract/vite-plugin": "3.9.5",
     "typescript": "5.3.3",
-    "vite": "5.0.10",
-    "vite-plugin-stylex-dev": "0.2.3"
+    "vite": "5.0.12",
+    "vite-plugin-stylex-dev": "0.3.0"
   }
 }

package/template/12_css/vite.config.ts

@@ -1,12 +1,7 @@
-import { defineConfig } from 'vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { stylexPlugin } from 'vite-plugin-stylex-dev';
 
-export default defineConfig(({ mode }) => ({
-  ...(mode === 'development' && {
-    ssr: {
-      external: ['@stylexjs/stylex', 'classnames'],
-    },
-  }),
+/** @type {import('vite').UserConfig} */
+export default {
   plugins: [vanillaExtractPlugin({ emitCssInSsr: true }), stylexPlugin()],
-}));
+};