Skip to content

Commit ff0cfd3

Browse files
dai-shidai-shi
authored
fix(router): avoid default startTransition (#1257)
close #1255 - [x] add failing test - [x] fix it
1 parent 0f09d95 commit ff0cfd3

File tree

12 files changed

+127
-71
lines changed

12 files changed

+127
-71
lines changed

‎e2e/create-pages.spec.ts

+13
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,19 @@ for (const mode of ['DEV', 'PRD'] as const) {
127127
({ port, stopApp } = await startApp(mode));
128128
});
129129

130+
// https://github.com/dai-shi/waku/issues/1255
131+
test('long suspense', async ({ page }) => {
132+
await page.goto(`http://localhost:${port}/long-suspense/1`);
133+
await expect(
134+
page.getByRole('heading', { name: 'Long Suspense Page 1' }),
135+
).toBeVisible();
136+
await page.click("a[href='/long-suspense/2']");
137+
await expect(page.getByTestId('long-suspense')).toHaveText('Loading...');
138+
await expect(
139+
page.getByRole('heading', { name: 'Long Suspense Page 2' }),
140+
).toBeVisible();
141+
});
142+
130143
test('api hi', async () => {
131144
const res = await fetch(`http://localhost:${port}/api/hi`);
132145
expect(res.status).toBe(200);

‎e2e/fixtures/create-pages/src/components/HomeLayout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2323
<li>
2424
<Link
2525
to="/"
26-
pending={<Pending isPending />}
27-
notPending={<Pending isPending={false} />}
26+
unstable_pending={<Pending isPending />}
27+
unstable_notPending={<Pending isPending={false} />}
2828
>
2929
Home
3030
</Link>
3131
</li>
3232
<li>
3333
<Link
3434
to="/foo"
35-
pending={<Pending isPending />}
36-
notPending={<Pending isPending={false} />}
35+
unstable_pending={<Pending isPending />}
36+
unstable_notPending={<Pending isPending={false} />}
3737
>
3838
Foo
3939
</Link>

‎e2e/fixtures/create-pages/src/components/LongSuspenseLayout.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Suspense } from 'react';
2+
import type { ReactNode } from 'react';
3+
import { Link } from 'waku';
4+
5+
const SlowComponent = async () => {
6+
await new Promise((resolve) => setTimeout(resolve, 1000));
7+
return <div>Slow Component</div>;
8+
};
9+
10+
const LongSuspenseLayout = ({ children }: { children: ReactNode }) => {
11+
return (
12+
<div>
13+
<h2>Long Suspense Layout</h2>
14+
<Link to="/long-suspense/2">Click Me</Link>
15+
<Suspense fallback={<div data-testid="long-suspense">Loading...</div>}>
16+
<SlowComponent />
17+
</Suspense>
18+
{children}
19+
</div>
20+
);
21+
};
22+
23+
export default LongSuspenseLayout;

‎e2e/fixtures/create-pages/src/entries.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import NestedBazPage from './components/NestedBazPage.js';
99
import NestedLayout from './components/NestedLayout.js';
1010
import { DeeplyNestedLayout } from './components/DeeplyNestedLayout.js';
1111
import ErrorPage from './components/ErrorPage.js';
12+
import LongSuspenseLayout from './components/LongSuspenseLayout.js';
1213
import { readFile } from 'node:fs/promises';
1314

1415
const pages: ReturnType<typeof createPages> = createPages(
@@ -89,6 +90,24 @@ const pages: ReturnType<typeof createPages> = createPages(
8990
component: ErrorPage,
9091
}),
9192

93+
createLayout({
94+
render: 'dynamic',
95+
path: '/long-suspense',
96+
component: LongSuspenseLayout,
97+
}),
98+
99+
createPage({
100+
render: 'static',
101+
path: '/long-suspense/1',
102+
component: () => <h3>Long Suspense Page 1</h3>,
103+
}),
104+
105+
createPage({
106+
render: 'static',
107+
path: '/long-suspense/2',
108+
component: () => <h3>Long Suspense Page 2</h3>,
109+
}),
110+
92111
createPage({
93112
render: 'dynamic',
94113
path: '/any/[...all]',

‎e2e/fixtures/define-router/src/routes/layout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2020
<li>
2121
<Link
2222
to="/"
23-
pending={<Pending isPending />}
24-
notPending={<Pending isPending={false} />}
23+
unstable_pending={<Pending isPending />}
24+
unstable_notPending={<Pending isPending={false} />}
2525
>
2626
Home
2727
</Link>
2828
</li>
2929
<li>
3030
<Link
3131
to="/foo"
32-
pending={<Pending isPending />}
33-
notPending={<Pending isPending={false} />}
32+
unstable_pending={<Pending isPending />}
33+
unstable_notPending={<Pending isPending={false} />}
3434
>
3535
Foo
3636
</Link>

‎e2e/fixtures/fs-router/src/pages/_layout.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2121
<li>
2222
<Link
2323
to="/"
24-
pending={<Pending isPending />}
25-
notPending={<Pending isPending={false} />}
24+
unstable_pending={<Pending isPending />}
25+
unstable_notPending={<Pending isPending={false} />}
2626
>
2727
Home
2828
</Link>
2929
</li>
3030
<li>
3131
<Link
3232
to="/foo"
33-
pending={<Pending isPending />}
34-
notPending={<Pending isPending={false} />}
33+
unstable_pending={<Pending isPending />}
34+
unstable_notPending={<Pending isPending={false} />}
3535
>
3636
Foo
3737
</Link>
@@ -40,26 +40,26 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
4040
<Link
4141
to="/bar"
4242
unstable_prefetchOnEnter
43-
pending={<Pending isPending />}
44-
notPending={<Pending isPending={false} />}
43+
unstable_pending={<Pending isPending />}
44+
unstable_notPending={<Pending isPending={false} />}
4545
>
4646
Bar
4747
</Link>
4848
</li>
4949
<li>
5050
<Link
5151
to="/nested/baz"
52-
pending={<Pending isPending />}
53-
notPending={<Pending isPending={false} />}
52+
unstable_pending={<Pending isPending />}
53+
unstable_notPending={<Pending isPending={false} />}
5454
>
5555
Nested / Baz
5656
</Link>
5757
</li>
5858
<li>
5959
<Link
6060
to="/nested/qux"
61-
pending={<Pending isPending />}
62-
notPending={<Pending isPending={false} />}
61+
unstable_pending={<Pending isPending />}
62+
unstable_notPending={<Pending isPending={false} />}
6363
>
6464
Nested / Qux
6565
</Link>

‎examples/11_fs-router/src/pages/_layout.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2121
<li>
2222
<Link
2323
to="/"
24-
pending={<Pending isPending />}
25-
notPending={<Pending isPending={false} />}
24+
unstable_pending={<Pending isPending />}
25+
unstable_notPending={<Pending isPending={false} />}
2626
>
2727
Home
2828
</Link>
2929
</li>
3030
<li>
3131
<Link
3232
to="/foo"
33-
pending={<Pending isPending />}
34-
notPending={<Pending isPending={false} />}
33+
unstable_pending={<Pending isPending />}
34+
unstable_notPending={<Pending isPending={false} />}
3535
>
3636
Foo
3737
</Link>
@@ -40,26 +40,26 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
4040
<Link
4141
to="/bar"
4242
unstable_prefetchOnEnter
43-
pending={<Pending isPending />}
44-
notPending={<Pending isPending={false} />}
43+
unstable_pending={<Pending isPending />}
44+
unstable_notPending={<Pending isPending={false} />}
4545
>
4646
Bar
4747
</Link>
4848
</li>
4949
<li>
5050
<Link
5151
to="/nested/baz"
52-
pending={<Pending isPending />}
53-
notPending={<Pending isPending={false} />}
52+
unstable_pending={<Pending isPending />}
53+
unstable_notPending={<Pending isPending={false} />}
5454
>
5555
Nested / Baz
5656
</Link>
5757
</li>
5858
<li>
5959
<Link
6060
to="/nested/qux"
61-
pending={<Pending isPending />}
62-
notPending={<Pending isPending={false} />}
61+
unstable_pending={<Pending isPending />}
62+
unstable_notPending={<Pending isPending={false} />}
6363
>
6464
Nested / Qux
6565
</Link>

‎examples/21_create-pages/src/components/HomeLayout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2222
<li>
2323
<Link
2424
to="/"
25-
pending={<Pending isPending />}
26-
notPending={<Pending isPending={false} />}
25+
unstable_pending={<Pending isPending />}
26+
unstable_notPending={<Pending isPending={false} />}
2727
>
2828
Home
2929
</Link>
3030
</li>
3131
<li>
3232
<Link
3333
to="/foo"
34-
pending={<Pending isPending />}
35-
notPending={<Pending isPending={false} />}
34+
unstable_pending={<Pending isPending />}
35+
unstable_notPending={<Pending isPending={false} />}
3636
>
3737
Foo
3838
</Link>

‎examples/22_define-router/src/components/HomeLayout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
2222
<li>
2323
<Link
2424
to="/"
25-
pending={<Pending isPending />}
26-
notPending={<Pending isPending={false} />}
25+
unstable_pending={<Pending isPending />}
26+
unstable_notPending={<Pending isPending={false} />}
2727
>
2828
Home
2929
</Link>
3030
</li>
3131
<li>
3232
<Link
3333
to="/foo"
34-
pending={<Pending isPending />}
35-
notPending={<Pending isPending={false} />}
34+
unstable_pending={<Pending isPending />}
35+
unstable_notPending={<Pending isPending={false} />}
3636
>
3737
Foo
3838
</Link>

‎examples/43_weave-render/src/components/BarLayout.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,26 @@ const BarLayout = ({ children }: { children: ReactNode }) => {
2424
<li>
2525
<Link
2626
to="/"
27-
pending={<Pending isPending />}
28-
notPending={<Pending isPending={false} />}
27+
unstable_pending={<Pending isPending />}
28+
unstable_notPending={<Pending isPending={false} />}
2929
>
3030
Home
3131
</Link>
3232
</li>
3333
<li>
3434
<Link
3535
to="/foo"
36-
pending={<Pending isPending />}
37-
notPending={<Pending isPending={false} />}
36+
unstable_pending={<Pending isPending />}
37+
unstable_notPending={<Pending isPending={false} />}
3838
>
3939
Foo
4040
</Link>
4141
</li>
4242
<li>
4343
<Link
4444
to={'/nested/bar' as never}
45-
pending={<Pending isPending />}
46-
notPending={<Pending isPending={false} />}
45+
unstable_pending={<Pending isPending />}
46+
unstable_notPending={<Pending isPending={false} />}
4747
>
4848
Link to 404
4949
</Link>

‎examples/43_weave-render/src/components/HomeLayout.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -31,26 +31,26 @@ const HomeLayout = ({ children }: { children: ReactNode }) => {
3131
<li>
3232
<Link
3333
to="/"
34-
pending={<Pending isPending />}
35-
notPending={<Pending isPending={false} />}
34+
unstable_pending={<Pending isPending />}
35+
unstable_notPending={<Pending isPending={false} />}
3636
>
3737
Home
3838
</Link>
3939
</li>
4040
<li>
4141
<Link
4242
to="/foo"
43-
pending={<Pending isPending />}
44-
notPending={<Pending isPending={false} />}
43+
unstable_pending={<Pending isPending />}
44+
unstable_notPending={<Pending isPending={false} />}
4545
>
4646
Foo
4747
</Link>
4848
</li>
4949
<li>
5050
<Link
5151
to="/bar"
52-
pending={<Pending isPending />}
53-
notPending={<Pending isPending={false} />}
52+
unstable_pending={<Pending isPending />}
53+
unstable_notPending={<Pending isPending={false} />}
5454
>
5555
Bar
5656
</Link>

0 commit comments

Comments
 (0)