npm - create-waku - Versions diffs - 0.10.0 → 0.10.2 - Mend

create-waku 0.10.0 → 0.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-waku",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "author": "Daishi Kato",
   "type": "module",
   "contributors": [
@@ -22,7 +22,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/prompts": "^2.4.9",
     "@types/tar": "^6.1.13",
-    "@vercel/ncc": "^0.38.2",
+    "@vercel/ncc": "0.38.2",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
     "prompts": "^2.4.2",

package/template/01_template/package.json CHANGED Viewed

@@ -9,16 +9,16 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.13",
-    "typescript": "5.6.2"
+    "tailwindcss": "3.4.14",
+    "typescript": "5.6.3"
   }
 }

package/template/01_template/src/pages/_layout.tsx CHANGED Viewed

@@ -11,20 +11,15 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
   return (
-    <html>
-      <head></head>
-      <body>
-        <div className="font-['Nunito']">
-          <meta property="description" content={data.description} />
-          <link rel="icon" type="image/png" href={data.icon} />
-          <Header />
-          <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </body>
-    </html>
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
   );
 }

package/template/01_template/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./src/components/counter.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/pages/_layout.tsx","./src/pages/about.tsx","./src/pages/index.tsx"],"version":"5.6.3"}

package/template/02_template_js/package.json CHANGED Viewed

@@ -9,13 +9,13 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.13"
+    "tailwindcss": "3.4.14"
   }
 }

package/template/02_template_js/src/pages/_layout.jsx CHANGED Viewed

@@ -7,20 +7,15 @@ export default async function RootLayout({ children }) {
   const data = await getData();
   return (
-    <html>
-      <head></head>
-      <body>
-        <div className="font-['Nunito']">
-          <meta property="description" content={data.description} />
-          <link rel="icon" type="image/png" href={data.icon} />
-          <Header />
-          <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </body>
-    </html>
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
   );
 }

package/template/03_demo/package.json CHANGED Viewed

@@ -9,16 +9,16 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.13",
-    "typescript": "5.6.2"
+    "tailwindcss": "3.4.14",
+    "typescript": "5.6.3"
   }
 }

package/template/03_demo/src/pages/[slug].tsx CHANGED Viewed

@@ -8,7 +8,9 @@ type PokemonPageProps = { slug: string };
 export default async function PokemonPage({ slug }: PokemonPageProps) {
   const pokemon = await getPokemon(slug);
-  if (!pokemon) return null;
+  if (!pokemon) {
+    return null;
+  }
   const stats = Object.entries(pokemon.base);

package/template/03_demo/src/pages/_layout.tsx CHANGED Viewed

@@ -11,20 +11,15 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
   return (
-    <html>
-      <head></head>
-      <body>
-        <div className="font-nunito">
-          <meta property="description" content={data.description} />
-          <link rel="icon" type="image/png" href={data.icon} />
-          <Header />
-          <main className="flex items-center justify-center lg:min-h-svh">
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </body>
-    </html>
+    <div className="font-nunito">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="flex items-center justify-center lg:min-h-svh">
+        {children}
+      </main>
+      <Footer />
+    </div>
   );
 }

package/template/03_demo/tsconfig.json CHANGED Viewed

@@ -9,7 +9,7 @@
     "skipLibCheck": true,
     "noUncheckedIndexedAccess": true,
     "exactOptionalPropertyTypes": true,
-    "types": ["react/experimental"],
+    "types": ["node", "react/experimental"],
     "jsx": "react-jsx"
   }
 }

package/template/03_demo/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./src/components/footer.tsx","./src/components/header.tsx","./src/components/reload.tsx","./src/lib/index.ts","./src/lib/pokemon.ts","./src/pages/[slug].tsx","./src/pages/_layout.tsx","./src/pages/index.tsx"],"version":"5.6.3"}

package/template/04_cssmodules/package.json CHANGED Viewed

@@ -9,14 +9,14 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
-    "typescript": "5.6.2"
+    "@types/react-dom": "18.3.1",
+    "typescript": "5.6.3"
   }
 }

package/template/04_cssmodules/src/pages/_layout.tsx CHANGED Viewed

@@ -11,18 +11,13 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
   return (
-    <html>
-      <head></head>
-      <body>
-        <div className={styles.div}>
-          <meta property="description" content={data.description} />
-          <link rel="icon" type="image/png" href={data.icon} />
-          <Header />
-          <main className={styles.main}>{children}</main>
-          <Footer />
-        </div>
-      </body>
-    </html>
+    <div className={styles.div}>
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className={styles.main}>{children}</main>
+      <Footer />
+    </div>
   );
 }

package/template/04_cssmodules/src/types.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ declare module '*.module.css';

package/template/04_cssmodules/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./src/types.d.ts","./src/components/counter.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/pages/_layout.tsx","./src/pages/about.tsx","./src/pages/index.tsx"],"version":"5.6.3"}

package/template/{11_form → 11_fs-router}/package.json RENAMED Viewed

@@ -9,14 +9,14 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
-    "typescript": "5.6.2"
+    "@types/react-dom": "18.3.1",
+    "typescript": "5.6.3"
   }
 }

package/template/11_fs-router/src/pages/_layout.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import { Link } from 'waku/router/client';
+const Pending = ({ isPending }: { isPending: boolean }) => (
+  <span
+    style={{
+      marginLeft: 5,
+      transition: 'opacity 75ms 100ms',
+      opacity: isPending ? 1 : 0,
+    }}
+  >
+    Pending...
+  </span>
+);
+const HomeLayout = ({ children }: { children: ReactNode }) => (
+  <div>
+    <title>Waku</title>
+    <ul>
+      <li>
+        <Link
+          to="/"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Home
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/foo"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Foo
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/bar"
+          unstable_prefetchOnEnter
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Bar
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/nested/baz"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Nested / Baz
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/nested/qux"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Nested / Qux
+        </Link>
+      </li>
+    </ul>
+    {children}
+  </div>
+);
+export default HomeLayout;

package/template/11_fs-router/src/pages/_root.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <head></head>
+      <body
+        data-dynamic-root={`Random Number ${Math.round(Math.random() * 100)}`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
+export const getConfig = async () => {
+  return {
+    render: 'dynamic',
+  };
+};

package/template/11_fs-router/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./src/entries.tsx","./src/main.tsx","./src/components/Counter.tsx","./src/pages/_layout.tsx","./src/pages/_root.tsx","./src/pages/bar.tsx","./src/pages/index.tsx","./src/pages/foo/index.tsx","./src/pages/nested/[name].tsx"],"version":"5.6.3"}

package/template/{05_nossr → 12_nossr}/package.json RENAMED Viewed

@@ -9,17 +9,17 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.13",
-    "typescript": "5.6.2",
-    "vite": "5.4.8"
+    "tailwindcss": "3.4.14",
+    "typescript": "5.6.3",
+    "vite": "5.4.9"
   }
 }

package/template/{05_nossr → 12_nossr}/src/pages/_layout.tsx RENAMED Viewed

@@ -11,20 +11,15 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
   return (
-    <html>
-      <head></head>
-      <body>
-        <div className="font-['Nunito']">
-          <meta property="description" content={data.description} />
-          <link rel="icon" type="image/png" href={data.icon} />
-          <Header />
-          <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </body>
-    </html>
+    <div className="font-['Nunito']">
+      <meta name="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+        {children}
+      </main>
+      <Footer />
+    </div>
   );
 }

package/template/12_nossr/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./waku.config.ts","./src/entries.ts","./src/components/counter.tsx","./src/components/footer.tsx","./src/components/header.tsx","./src/pages/_layout.tsx","./src/pages/about.tsx","./src/pages/index.tsx"],"version":"5.6.3"}

package/template/{05_nossr → 12_nossr}/waku.config.ts RENAMED Viewed

@@ -1,6 +1,7 @@
 /** @type {import('waku/config').Config} */
 export default {
   middleware: () => [
+    import('waku/middleware/context'),
     import('waku/middleware/dev-server'),
     import('waku/middleware/rsc'),
     import('waku/middleware/fallback'),

package/template/{25_weave_render → 21_create-pages}/package.json RENAMED Viewed

@@ -9,15 +9,15 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "server-only": "0.0.1",
-    "typescript": "5.6.2"
+    "typescript": "5.6.3"
   }
 }

package/template/21_create-pages/src/components/HomeLayout.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { Link } from 'waku/router/client';
+import '../styles.css';
+const Pending = ({ isPending }: { isPending: boolean }) => (
+  <span
+    style={{
+      marginLeft: 5,
+      transition: 'opacity 75ms 100ms',
+      opacity: isPending ? 1 : 0,
+    }}
+  >
+    Pending...
+  </span>
+);
+const HomeLayout = ({ children }: { children: ReactNode }) => (
+  <div>
+    <ul>
+      <li>
+        <Link
+          to="/"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Home
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/foo"
+          pending={<Pending isPending />}
+          notPending={<Pending isPending={false} />}
+        >
+          Foo
+        </Link>
+      </li>
+      <li>
+        <Link to="/bar" unstable_prefetchOnEnter>
+          Bar
+        </Link>
+      </li>
+      <li>
+        <Link to="/baz">Baz</Link>
+      </li>
+      <li>
+        <Link to="/nested/foo">Nested / Foo</Link>
+      </li>
+      <li>
+        <Link to="/nested/bar">Nested / Bar</Link>
+      </li>
+      <li>
+        <Link to="/nested/baz">Nested / Baz</Link>
+      </li>
+      <li>
+        <Link to="/nested/qux">Nested / Qux</Link>
+      </li>
+    </ul>
+    {children}
+  </div>
+);
+export default HomeLayout;

package/template/21_create-pages/src/components/Root.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <head>
+        <title>Waku</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/template/{07_router → 21_create-pages}/src/entries.tsx RENAMED Viewed

@@ -1,17 +1,20 @@
-import { lazy } from 'react';
 import { createPages } from 'waku';
 import type { PathsForPages } from 'waku/router';
 import FooPage from './components/FooPage';
+import HomeLayout from './components/HomeLayout';
+import HomePage from './components/HomePage';
+import BarPage from './components/BarPage';
+import NestedBazPage from './components/NestedBazPage';
+import NestedQuxPage from './components/NestedQuxPage';
+import Root from './components/Root';
-// The use of `lazy` is optional and you can use import statements too.
-const HomeLayout = lazy(() => import('./components/HomeLayout'));
-const HomePage = lazy(() => import('./components/HomePage'));
-const BarPage = lazy(() => import('./components/BarPage'));
-const NestedBazPage = lazy(() => import('./components/NestedBazPage'));
-const NestedQuxPage = lazy(() => import('./components/NestedQuxPage'));
+const pages = createPages(async ({ createPage, createLayout, createRoot }) => [
+  createRoot({
+    render: 'static',
+    component: Root,
+  }),
-const pages = createPages(async ({ createPage, createLayout }) => [
   createLayout({
     render: 'static',
     path: '/',

package/template/21_create-pages/tsconfig.tsbuildinfo ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"root":["./src/entries.tsx","./src/main.tsx","./src/components/BarPage.tsx","./src/components/Counter.tsx","./src/components/FooPage.tsx","./src/components/HomeLayout.tsx","./src/components/HomePage.tsx","./src/components/NestedBazPage.tsx","./src/components/NestedQuxPage.tsx","./src/components/Root.tsx","./src/components/funcs.ts"],"version":"5.6.3"}

package/template/{10_fs-router → 22_define-router}/package.json RENAMED Viewed

@@ -9,14 +9,14 @@
     "start": "waku start"
   },
   "dependencies": {
-    "react": "19.0.0-rc-2d16326d-20240930",
-    "react-dom": "19.0.0-rc-2d16326d-20240930",
-    "react-server-dom-webpack": "19.0.0-rc-2d16326d-20240930",
-    "waku": "0.21.3"
+    "react": "19.0.0-rc-bf7e210c-20241017",
+    "react-dom": "19.0.0-rc-bf7e210c-20241017",
+    "react-server-dom-webpack": "19.0.0-rc-bf7e210c-20241017",
+    "waku": "0.21.4"
   },
   "devDependencies": {
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
-    "typescript": "5.6.2"
+    "@types/react-dom": "18.3.1",
+    "typescript": "5.6.3"
   }
 }

package/template/22_define-router/src/components/Counter.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+'use client';
+import { useState } from 'react';
+import { Link, useRouter_UNSTABLE as useRouter } from 'waku/router/client';
+export const Counter = () => {
+  const { path } = useRouter();
+  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>
+      <p>
+        <Link to="/">Go to Home</Link>
+      </p>
+    </div>
+  );
+};