create-waku 0.7.2 → 0.7.4

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

@@ -1,5 +1,6 @@
 import { Link } from 'waku';
 
+import { Reload } from '../components/reload.js';
 import { sql } from '../lib/index.js';
 
 export const HomePage = async () => {
@@ -7,29 +8,42 @@ export const HomePage = async () => {
 
   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>
+      <title>Waku pokemon</title>
+      <div className="flex h-full w-full flex-col items-center justify-center p-6">
+        <div className="px-6">
+          <a
+            href="https://github.com/dai-shi/waku/tree/main/examples/02_demo/src"
+            target="_blank"
+            rel="noreferrer"
+            className="whitespace-nowrap text-xs font-bold hover:underline sm:text-base"
+          >{`SELECT * FROM pokemon ORDER BY RANDOM() LIMIT 9`}</a>
+        </div>
+        <ul className="relative mt-6 grid h-full w-full max-w-xl flex-shrink-0 grid-cols-2 gap-6 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>
+          ))}
+          <div className="absolute bottom-0 right-0 md:translate-x-full md:translate-y-full md:p-3">
+            <Reload />
+          </div>
+        </ul>
+      </div>
     </>
   );
 };

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

@@ -13,51 +13,53 @@ export const PokemonPage = async ({ slug }: PokemonPageProps) => {
   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 className="w-full p-6">
+        <div className="mx-auto flex w-full flex-shrink-0 flex-col items-center justify-center gap-6 rounded-xl bg-gray-50 p-12 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-200 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="block size-[144px] flex-shrink-0"
+            />
+            <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 className="hidden lg:block">
+            <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-flex aspect-square size-16 items-center justify-center rounded-full bg-black text-sm font-bold text-white"
+            >
+              <span>back</span>
+            </Link>
           </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>
     </>

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

@@ -15,7 +15,7 @@ export const RootLayout = async ({ children }: RootLayoutProps) => {
       <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">
+      <main className="flex items-center justify-center lg:min-h-svh">
         {children}
       </main>
       <Footer />

package/template/03_minimal/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/03_minimal/public/404.html

@@ -0,0 +1 @@
+<h1>Custom Not Found Page</h1>

package/template/04_promise/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/04_promise/src/components/Counter.tsx

@@ -3,6 +3,8 @@
 
 import { Suspense, useState, use } from 'react';
 
+import { Hello } from './Hello.js';
+
 export const Counter = ({
   delayedMessage,
 }: {
@@ -17,6 +19,7 @@ export const Counter = ({
       <Suspense fallback="Pending...">
         <Message count={count} delayedMessage={delayedMessage} />
       </Suspense>
+      <Hello />
     </div>
   );
 };

package/template/04_promise/src/components/Hello.tsx

@@ -0,0 +1,7 @@
+export const Hello = () => {
+  return (
+    <div style={{ border: '3px gray dashed', margin: '1em', padding: '1em' }}>
+      This is a component without {'"use client"'}.
+    </div>
+  );
+};

package/template/05_actions/package.json

@@ -9,15 +9,15 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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": "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-wrap-balancer": "1.1.0",
-    "waku": "0.19.2"
+    "waku": "0.19.4"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/06_nesting/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/07_router/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "server-only": "0.0.1",
     "typescript": "5.3.3"
   }

package/template/07_router/src/components/Counter.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 
-import { Link } from 'waku/router/client';
+import { Link, useLocation } from 'waku/router/client';
 
 export const Counter = () => {
+  const { path } = useLocation();
   const [count, setCount] = useState(0);
   return (
     <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
+      <span>path: {path}</span>
       <Link to="/">Go to Home</Link>
     </div>
   );

package/template/07_router/src/components/HomeLayout.tsx

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 
 import { Link } from 'waku/router/client';
 
+import '../styles.css';
+
 const Pending = ({ isPending }: { isPending: boolean }) => (
   <span
     style={{

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

@@ -81,9 +81,16 @@ export default createPages(async ({ createPage, createLayout }) => {
 
   createPage({
     render: 'dynamic',
-    path: '/any/[...all]', // `/[...all]` is impossible.
+    path: '/any/[...all]',
     component: ({ all }: { all: string[] }) => (
       <h2>Catch-all: {all.join('/')}</h2>
     ),
   });
+
+  // Custom Not Found page
+  createPage({
+    render: 'static',
+    path: '/404',
+    component: () => <h2>Not Found</h2>,
+  });
 });

package/template/07_router/src/styles.css

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

package/template/08_cookies/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "cookie-parser": "1.4.6",
     "express": "4.18.2",
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/node": "20.11.16",
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/node": "20.11.20",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

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

@@ -16,7 +16,7 @@ export default defineEntries(
       await fsPromises.readFile(
         path.join(
           path.dirname(fileURLToPath(import.meta.url)),
-          '../db/items.json',
+          '../private/items.json',
         ),
         'utf8',
       ),

package/template/09_cssmodules/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/{10_dynamicroute → 10_fs-router}/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "glob": "10.3.10",
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/11_form/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }
 }

package/template/12_css/package.json

@@ -12,17 +12,17 @@
     "@stylexjs/stylex": "0.5.1",
     "@vanilla-extract/css": "1.14.1",
     "classnames": "2.3.2",
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "@vanilla-extract/vite-plugin": "3.9.5",
     "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "vite": "5.1.4",
     "vite-plugin-stylex-dev": "0.3.0"
   }
 }

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

@@ -9,16 +9,16 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "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"
+    "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"
   },
   "devDependencies": {
-    "@types/react": "18.2.54",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
     "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "vite": "5.1.4",
     "vite-tsconfig-paths": "4.3.1"
   }
 }

package/template/13_path-alias/src/components/App.tsx

@@ -1,10 +1,13 @@
 import { Counter } from '@/components/Counter.js';
+import { MyFragment } from '@/components/MyFragment.js';
 
 const App = ({ name }: { name: string }) => {
   return (
     <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
       <title>Waku</title>
-      <h1>Hello {name}!!</h1>
+      <MyFragment>
+        <h1>Hello {name}!!</h1>
+      </MyFragment>
       <h3>This is a server component.</h3>
       <Counter />
       <div>{new Date().toISOString()}</div>

package/template/13_path-alias/src/components/Counter.tsx

@@ -2,11 +2,15 @@
 
 import { useState } from 'react';
 
+import { MyFragment } from '@/components/MyFragment.js';
+
 export const Counter = () => {
   const [count, setCount] = useState(0);
   return (
     <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
-      <p>Count: {count}</p>
+      <MyFragment>
+        <p>Count: {count}</p>
+      </MyFragment>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
     </div>

package/template/13_path-alias/src/components/MyFragment.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+export const MyFragment = ({ children }: { children: ReactNode }) => (
+  <>{children}</>
+);

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

@@ -0,0 +1,25 @@
+{
+  "name": "waku-starter",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev --with-ssr",
+    "build": "waku build --with-ssr",
+    "start": "waku start --with-ssr"
+  },
+  "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-tweet": "^3.2.0",
+    "waku": "0.19.4"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
+    "autoprefixer": "10.4.17",
+    "tailwindcss": "3.4.1",
+    "typescript": "5.3.3"
+  }
+}

package/template/14_react-tweet/postcss.config.js

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

package/template/14_react-tweet/src/components/error-boundary.tsx

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import type { ReactNode, FunctionComponent } from 'react';
+
+interface Props {
+  fallback: (error: unknown) => ReactNode;
+  children: ReactNode;
+}
+
+class ErrorBoundaryClass extends Component<Props, { error?: unknown }> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  render() {
+    if ('error' in this.state) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}
+
+export const ErrorBoundary =
+  ErrorBoundaryClass as unknown as FunctionComponent<Props>;