Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add example of dynamic layout with static page #922

Merged
merged 4 commits into from
Oct 3, 2024
Merged

docs: add example of dynamic layout with static page #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23c60c3
docs: add example of dynamic layout with static page
tylersayshi Sep 30, 2024
142b622
docs: add nested page
tylersayshi Sep 30, 2024
5705f52
docs: add nested layout
tylersayshi Oct 2, 2024
255db0b
docs: Foo and bar
tylersayshi Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions examples/25_weave_render/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
64 changes: 64 additions & 0 deletions examples/25_weave_render/src/components/BarLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
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 BarLayout = ({ children }: { children: ReactNode }) => {
return (
<html>
<head>
<title>Waku</title>
</head>
<body>
<div>
<p>This Layout is expected to be static</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>
<li>
<Link
to="/nested/bar"
pending={<Pending isPending />}
notPending={<Pending isPending={false} />}
>
Nested / Bar
</Link>
</li>
</ul>
{children}
</div>
</body>
</html>
);
};

export default BarLayout;
10 changes: 10 additions & 0 deletions examples/25_weave_render/src/components/BarPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Counter } from './Counter';

const Bar = () => (
<div>
<h2>Bar</h2>
<Counter />
</div>
);

export default Bar;
19 changes: 19 additions & 0 deletions examples/25_weave_render/src/components/Counter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
16 changes: 16 additions & 0 deletions examples/25_weave_render/src/components/FooLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { ReactNode } from 'react';

const FooLayout = ({ children }: { children: ReactNode }) => {
return (
<html>
<body>
<div>
<h1>FOO layout</h1>
{children}
</div>
</body>
</html>
);
};

export default FooLayout;
12 changes: 12 additions & 0 deletions examples/25_weave_render/src/components/FooPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import 'server-only';

import { Counter } from './Counter';

const Foo = () => (
<div>
<h2>Foo</h2>
<Counter />
</div>
);

export default Foo;
68 changes: 68 additions & 0 deletions examples/25_weave_render/src/components/HomeLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
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>
<h1>Home layout</h1>
<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>
<li>
<Link
to="/nested/bar"
pending={<Pending isPending />}
notPending={<Pending isPending={false} />}
>
Nested / Bar
</Link>
</li>
</ul>
{children}
</div>
</body>
</html>
);
};

export default HomeLayout;
8 changes: 8 additions & 0 deletions examples/25_weave_render/src/components/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const Home = () => (
<div>
<h2>Home</h2>
<p>This is the home page.</p>
</div>
);

export default Home;
57 changes: 57 additions & 0 deletions examples/25_weave_render/src/entries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { lazy } from 'react';
import { createPages } from 'waku';
import type { PathsForPages } from 'waku/router';
import FooPage from './components/FooPage';
import BarPage from './components/BarPage';
import BarLayout from './components/BarLayout';
import FooLayout from './components/FooLayout';

// The use of `lazy` is optional and you can use import statements too.
tylersayshi marked this conversation as resolved.
Show resolved Hide resolved
const HomeLayout = lazy(() => import('./components/HomeLayout'));
const HomePage = lazy(() => import('./components/HomePage'));

const pages = createPages(async ({ createPage, createLayout }) => [
createLayout({
render: 'static',
path: '/',
component: HomeLayout,
}),

createPage({
render: 'static',
path: '/',
component: HomePage,
}),

createLayout({
render: 'static',
path: '/foo',
component: FooLayout,
}),

createPage({
render: 'dynamic',
path: '/foo',
component: FooPage,
}),

createLayout({
render: 'dynamic',
path: '/bar',
component: BarLayout,
}),

createPage({
render: 'static',
path: '/bar',
component: BarPage,
}),
]);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about adding another route like /nested/bar which has static layout and dynamic page?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added... there is weird behavior though

When I nav to /nested/bar then click the link to go back to home or foo, I get a white screen with no content. Is this a bug? Or did I make a mistake?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it happen both in DEV and PRD? Can be a bug.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait, /nested/bar still has a dynamic root layout?

I think we should make:

  • /foo: static layout + dynamic page
  • /nested/bar: static layout + dynamic layout + static page

what do you think?

Copy link
Contributor Author

@tylersayshi tylersayshi Oct 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it happen both in DEV and PRD? Can be a bug.

Yes it happens both

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

static layout + dynamic layout + static page

How do I make two layouts on a route?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/nested/_layout.tsx

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, I changed it. let me know if that's what you meant though. I'm not super confident with it yet.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks different. Okay, we may not need nested. How about this?

  createLayout({
    render: 'static',
    path: '/',
    component: HomeLayout,
  }),

  createPage({
    render: 'static',
    path: '/',
    component: HomePage,
  }),

  createLayout({
    render: 'static',
    path: '/foo',
    component: FooLayout,
  }),

  createPage({
    render: 'dynamic',
    path: '/foo',
    component: FooPage,
  }),

  createLayout({
    render: 'dynamic',
    path: '/bar',
    component: BarLayout,
  }),

  createPage({
    render: 'static',
    path: '/bar',
    component: BarPage,
  }),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, makes sense ! lgtm - changed


declare module 'waku/router' {
interface RouteConfig {
paths: PathsForPages<typeof pages>;
}
}

export default pages;
15 changes: 15 additions & 0 deletions examples/25_weave_render/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
3 changes: 3 additions & 0 deletions examples/25_weave_render/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background-color: #fefefe;
}
15 changes: 15 additions & 0 deletions examples/25_weave_render/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
28 changes: 28 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading