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}
);