diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts index f405af892..78630c13b 100644 --- a/packages/react-server/examples/basic/e2e/basic.test.ts +++ b/packages/react-server/examples/basic/e2e/basic.test.ts @@ -1221,3 +1221,29 @@ test("loading @js", async ({ page }) => { await expect(page.getByTestId("/test/loading")).toBeVisible(); await page.getByText('params {"id":"1"}').click(); }); + +test("template @js", async ({ page }) => { + await page.goto("/test/template"); + await page.getByText("template.tsx [mount: 1]").click(); + await waitForHydration(page); + + await page + .getByRole("link", { name: "• /test/template/x", exact: true }) + .click(); + await page.getByText("template.tsx [mount: 2]").click(); + await page.getByText("[p1]/template.tsx [mount: 1]").click(); + + await page.getByRole("link", { name: "• /test/template/x/a" }).click(); + await page.getByText("template.tsx [mount: 2]", { exact: true }).click(); + await page.getByText("[p1]/template.tsx [mount: 2]").click(); + + await page.getByRole("link", { name: "• /test/template/x/b" }).click(); + await page.getByText("template.tsx [mount: 2]", { exact: true }).click(); + await page.getByText("[p1]/template.tsx [mount: 3]").click(); + + await page + .getByRole("link", { name: "• /test/template/y", exact: true }) + .click(); + await page.getByText("template.tsx [mount: 3]").click(); + await page.getByText("[p1]/template.tsx [mount: 4]").click(); +}); diff --git a/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx index 6395a8f62..f81edbc1c 100644 --- a/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx +++ b/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx @@ -1,11 +1,9 @@ -import { ClientTime } from "../../_client"; +import { MountCount } from "../../_client"; export default function Template(props: React.PropsWithChildren) { return (
-
- [p1]/[p2]/template.tsx -
+ {props.children}
); diff --git a/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx index 0871dc153..7595a4a10 100644 --- a/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx +++ b/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx @@ -1,11 +1,9 @@ -import { ClientTime } from "../_client"; +import { MountCount } from "../_client"; export default function Template(props: React.PropsWithChildren) { return (
-
- [p1]/template.tsx -
+ {props.children}
); diff --git a/packages/react-server/examples/basic/src/routes/test/template/_client.tsx b/packages/react-server/examples/basic/src/routes/test/template/_client.tsx index 071eb4192..7313d90a0 100644 --- a/packages/react-server/examples/basic/src/routes/test/template/_client.tsx +++ b/packages/react-server/examples/basic/src/routes/test/template/_client.tsx @@ -1,12 +1,24 @@ "use client"; +import { defaultDict, once, tinyassert } from "@hiogawa/utils"; import React from "react"; -export function ClientTime() { - const now = React.useSyncExternalStore( - React.useCallback(() => () => {}, []), - () => Date.now(), - () => null, +const countMap = defaultDict(() => 0); + +export function MountCount(props: { name: string }) { + const elRef = React.useRef(null); + + React.useEffect( + once(() => { + tinyassert(elRef.current); + elRef.current.textContent = String(++countMap[props.name]); + }), + [], + ); + + return ( +
+ {props.name} [mount: ] +
); - return <>[now: {now}]; } diff --git a/packages/react-server/examples/basic/src/routes/test/template/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/template.tsx index a9638adf9..c13b8cb4f 100644 --- a/packages/react-server/examples/basic/src/routes/test/template/template.tsx +++ b/packages/react-server/examples/basic/src/routes/test/template/template.tsx @@ -1,11 +1,9 @@ -import { ClientTime } from "./_client"; +import { MountCount } from "./_client"; export default function Template(props: React.PropsWithChildren) { return (
-
- template.tsx -
+ {props.children}
);