docs: add example of dynamic layout with static page

you can see the time change as navigating the site which shows that the layout is indeed dynamic The rest of the home page stays unchanged and can be cached Example for dai-shi#885
tylersayshi · Sep 30, 2024 · 23c60c3 · 23c60c3
1 parent 8b38ceb
commit 23c60c3
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 0 deletions.
diff --git a/examples/25_weave_render/package.json b/examples/25_weave_render/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "waku-example",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0-rc-d6cb4e77-20240911",
+    "react-dom": "19.0.0-rc-d6cb4e77-20240911",
+    "react-server-dom-webpack": "19.0.0-rc-d6cb4e77-20240911",
+    "waku": "0.21.2"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
+    "server-only": "0.0.1",
+    "typescript": "5.6.2"
+  }
+}
diff --git a/examples/25_weave_render/src/components/Counter.tsx b/examples/25_weave_render/src/components/Counter.tsx
@@ -0,0 +1,19 @@
+'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>
+      <Link to="/">Go to Home</Link>
+    </div>
+  );
+};
diff --git a/examples/25_weave_render/src/components/FooPage.tsx b/examples/25_weave_render/src/components/FooPage.tsx
@@ -0,0 +1,12 @@
+import 'server-only';
+
+import { Counter } from './Counter';
+
+const Foo = () => (
+  <div>
+    <h2>Foo</h2>
+    <Counter />
+  </div>
+);
+
+export default Foo;
diff --git a/examples/25_weave_render/src/components/HomeLayout.tsx b/examples/25_weave_render/src/components/HomeLayout.tsx
@@ -0,0 +1,58 @@
+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 getCurrentTime = () => new Date();
+
+const HomeLayout = ({ children }: { children: ReactNode }) => {
+  const currentTime = getCurrentTime();
+  return (
+    <html>
+      <head>
+        <title>Waku</title>
+      </head>
+      <body>
+        <div>
+          <p>Last render time: {currentTime.toISOString()}</p>
+          <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>
+          </ul>
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+};
+
+export default HomeLayout;
diff --git a/examples/25_weave_render/src/components/HomePage.tsx b/examples/25_weave_render/src/components/HomePage.tsx
@@ -0,0 +1,8 @@
+const Home = () => (
+  <div>
+    <h2>Home</h2>
+    <p>This is the home page.</p>
+  </div>
+);
+
+export default Home;
diff --git a/examples/25_weave_render/src/entries.tsx b/examples/25_weave_render/src/entries.tsx
@@ -0,0 +1,36 @@
+import { lazy } from 'react';
+import { createPages } from 'waku';
+import type { PathsForPages } from 'waku/router';
+import FooPage from './components/FooPage';
+
+// 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 pages = createPages(async ({ createPage, createLayout }) => [
+  createLayout({
+    render: 'dynamic',
+    path: '/',
+    component: HomeLayout,
+  }),
+
+  createPage({
+    render: 'static',
+    path: '/',
+    component: HomePage,
+  }),
+
+  createPage({
+    render: 'static',
+    path: '/foo',
+    component: FooPage,
+  }),
+]);
+
+declare module 'waku/router' {
+  interface RouteConfig {
+    paths: PathsForPages<typeof pages>;
+  }
+}
+
+export default pages;
diff --git a/examples/25_weave_render/src/main.tsx b/examples/25_weave_render/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Router } from 'waku/router/client';
+
+const rootElement = (
+  <StrictMode>
+    <Router />
+  </StrictMode>
+);
+
+if ((globalThis as any).__WAKU_HYDRATE__) {
+  hydrateRoot(document, rootElement);
+} else {
+  createRoot(document as any).render(rootElement);
+}
diff --git a/examples/25_weave_render/src/styles.css b/examples/25_weave_render/src/styles.css
@@ -0,0 +1,3 @@
+body {
+  background-color: #fefefe;
+}
diff --git a/examples/25_weave_render/tsconfig.json b/examples/25_weave_render/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml