create-waku 0.7.3 → 0.7.4

package/template/03_minimal/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }

package/template/05_actions/package.json

@@ -9,14 +9,14 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
+    "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.3"
+    "waku": "0.19.4"
   },
   "devDependencies": {
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }

package/template/06_nesting/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
     "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-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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/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/08_cookies/package.json

@@ -11,14 +11,14 @@
   "dependencies": {
     "cookie-parser": "1.4.6",
     "express": "4.18.2",
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.17",
-    "@types/react": "18.2.55",
+    "@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,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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,13 +10,13 @@
   },
   "dependencies": {
     "glob": "10.3.10",
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
     "typescript": "5.3.3"
   }

package/template/11_form/package.json

@@ -9,13 +9,13 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
-    "waku": "0.19.3"
+    "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.55",
+    "@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>;

package/template/14_react-tweet/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="fixed bottom-0 left-0 p-6">
+      <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>
+  );
+};

package/template/14_react-tweet/src/components/header.tsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header className="fixed left-0 top-0 p-6">
+      <h2 className="text-lg font-bold tracking-tight">Waku starter</h2>
+    </header>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { createPages } from 'waku';
+
+import { RootLayout } from './templates/root-layout.js';
+import { HomePage } from './templates/home-page.js';
+
+export default createPages(async ({ createPage, createLayout }) => {
+  createLayout({
+    render: 'static',
+    path: '/',
+    component: RootLayout,
+  });
+
+  createPage({
+    render: 'static',
+    path: '/',
+    component: HomePage,
+  });
+});

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

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Router } from 'waku/router/client';
+
+import { ErrorBoundary } from './components/error-boundary.js';
+
+const rootElement = (
+  <StrictMode>
+    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
+      <Router />
+    </ErrorBoundary>
+  </StrictMode>
+);
+
+if (import.meta.env.WAKU_HYDRATE) {
+  hydrateRoot(document.body, rootElement);
+} else {
+  createRoot(document.body).render(rootElement);
+}

package/template/14_react-tweet/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;

package/template/14_react-tweet/src/templates/home-page.tsx

@@ -0,0 +1,22 @@
+import { Tweet } from 'react-tweet';
+
+export const HomePage = async () => {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <Tweet id="1735308967880823082" />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+  };
+
+  return data;
+};

package/template/14_react-tweet/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 *:min-h-64 *:min-w-64">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};

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

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

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

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+/** @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'],
+    },
+  }),
+});

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

@@ -1,20 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import path from 'node:path';
-import { glob } from 'glob';
-
-const rootDir = path.join(path.dirname(fileURLToPath(import.meta.url)), 'src');
-const routeFiles = glob.sync('routes/**/*.{tsx,js}', { cwd: rootDir });
-
-/** @type {import('vite').UserConfig} */
-export default {
-  build: {
-    rollupOptions: {
-      input: Object.fromEntries(
-        routeFiles.map((fname) => [
-          fname.replace(/\.\w+$/, ''),
-          path.join(rootDir, fname),
-        ]),
-      ),
-    },
-  },
-};