feat: new create pages to use new defineRouter (#963)

examples/21_create-pages/src/components/NestedBazPage.tsx

@@ -2,6 +2,7 @@ const Baz = () => (
   <div>
     <h2>Nested</h2>
     <h3>Baz</h3>
+    <p>{new Date().toISOString()}</p>
   </div>
 );
 

examples/21_create-pages/src/entries.tsx

@@ -1,4 +1,4 @@
-import { createPages } from 'waku';
+import { new_createPages } from 'waku';
 import type { PathsForPages } from 'waku/router';
 
 import FooPage from './components/FooPage';
@@ -9,93 +9,93 @@ import NestedBazPage from './components/NestedBazPage';
 import NestedQuxPage from './components/NestedQuxPage';
 import Root from './components/Root';
 
-const pages = createPages(async ({ createPage, createLayout, createRoot }) => [
-  createRoot({
-    render: 'static',
-    component: Root,
-  }),
+const pages = new_createPages(
+  async ({ createPage, createLayout, createRoot }) => [
+    createRoot({
+      render: 'static',
+      component: Root,
+    }),
 
-  createLayout({
-    render: 'static',
-    path: '/',
-    component: HomeLayout,
-  }),
+    createLayout({
+      render: 'static',
+      path: '/',
+      component: HomeLayout,
+    }),
 
-  createPage({
-    render: 'static',
-    // render: 'dynamic',
-    path: '/',
-    component: HomePage,
-  }),
+    createPage({
+      render: 'static',
+      path: '/',
+      component: HomePage,
+    }),
 
-  createPage({
-    render: 'static',
-    // render: 'dynamic',
-    path: '/foo',
-    component: FooPage,
-  }),
+    createPage({
+      render: 'static',
+      path: '/foo',
+      component: FooPage,
+    }),
 
-  createPage({
-    render: 'static',
-    path: '/bar',
-    component: BarPage,
-  }),
+    createPage({
+      render: 'static',
+      path: '/bar',
+      component: BarPage,
+    }),
 
-  createPage({
-    render: 'dynamic',
-    path: '/baz',
-    // Inline component is also possible.
-    component: () => <h2>Dynamic: Baz</h2>,
-  }),
+    createPage({
+      render: 'dynamic',
+      path: '/baz',
+      // Inline component is also possible.
+      component: () => <h2>Dynamic: Baz</h2>,
+    }),
 
-  createPage({
-    render: 'static',
-    path: '/nested/baz',
-    component: NestedBazPage,
-  }),
+    createPage({
+      render: 'dynamic',
+      path: '/nested/baz',
+      component: NestedBazPage,
+    }),
 
-  createPage({
-    render: 'static',
-    path: '/nested/qux',
-    component: NestedQuxPage,
-  }),
+    createPage({
+      render: 'static',
+      path: '/nested/qux',
+      component: NestedQuxPage,
+    }),
 
-  createPage({
-    render: 'static',
-    path: '/nested/[id]',
-    staticPaths: ['foo', 'bar'],
-    component: ({ id }) => (
-      <>
-        <h2>Nested</h2>
-        <h3>Static: {id}</h3>
-      </>
-    ),
-  }),
+    createPage({
+      render: 'static',
+      path: '/nested/[id]',
+      staticPaths: ['foo', 'bar'],
+      component: ({ id }) => (
+        <>
+          <h2>Nested</h2>
+          <h3>Static: {id}</h3>
+        </>
+      ),
+    }),
 
-  createPage({
-    render: 'dynamic',
-    path: '/nested/[id]',
-    component: ({ id }) => (
-      <>
-        <h2>Nested</h2>
-        <h3>Dynamic: {id}</h3>
-      </>
-    ),
-  }),
+    createPage({
+      render: 'dynamic',
+      path: '/nested/[id]',
+      component: ({ id }) => (
+        <>
+          <h2>Nested</h2>
+          <h3>Dynamic: {id}</h3>
+        </>
+      ),
+    }),
 
-  createPage({
-    render: 'dynamic',
-    path: '/any/[...all]',
-    component: ({ all }) => <h2>Catch-all: {all.join('/')}</h2>,
-  }),
+    createPage({
+      render: 'dynamic',
+      path: '/any/[...all]',
+      component: ({ all }) => <h2>Catch-all: {all.join('/')}</h2>,
+    }),
 
-  // Custom Not Found page
-  createPage({
-    render: 'static',
-    path: '/404',
-    component: () => <h2>Not Found</h2>,
-  }),
-]);
+    // Custom Not Found page
+    createPage({
+      render: 'static',
+      path: '/404',
+      component: () => <h2>Not Found</h2>,
+    }),
+  ],
+);
 
 declare module 'waku/router' {
   interface RouteConfig {

examples/21_create-pages/src/main.tsx

@@ -1,10 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import { Router } from 'waku/router/client';
+import { NewRouter } from 'waku/router/client';
 
 const rootElement = (
   <StrictMode>
-    <Router />
+    <NewRouter />
   </StrictMode>
 );
 

packages/waku/src/main.react-server.ts

@@ -1,5 +1,5 @@
 export { Link, useRouter_UNSTABLE } from 'waku/router/client';
 
-export { createPages } from 'waku/router/server';
+export { createPages, new_createPages } from 'waku/router/server';
 
 export { getEnv } from 'waku/server';

packages/waku/src/main.ts

@@ -2,6 +2,7 @@ export { Link, useRouter_UNSTABLE } from 'waku/router/client';
 
 import type {
   createPages as createPagesType,
+  new_createPages as new_createPagesType,
   getEnv as getEnvType,
 } from './main.react-server.js';
 
@@ -11,6 +12,12 @@ export const createPages: typeof createPagesType = () => {
   );
 };
 
+export const new_createPages: typeof new_createPagesType = () => {
+  throw new Error(
+    '`new_createPagesType` is only available in react-server environment',
+  );
+};
+
 export const getEnv: typeof getEnvType = () => {
   throw new Error('`getEnv` is only available in react-server environment');
 };