diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index ee6dd6456..9ffa845b2 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -671,6 +671,19 @@ test("ReactDom.useFormStatus", async ({ page }) => {
await page.getByText("pending: false").click();
});
+test("action returning component", async ({ page }) => {
+ await page.goto("/test/action");
+ await waitForHydration(page);
+ await page
+ .getByTestId("action-return-component")
+ .getByRole("button", { name: "Action" })
+ .click();
+ await page.getByText("[server] Loading...").click();
+ await page.getByRole("button", { name: "[client] counter: 0" }).click();
+ await page.getByRole("button", { name: "[client] counter: 1" }).click();
+ await page.getByText("[server] OK!").click();
+});
+
test("use client > virtual module", async ({ page }) => {
await page.goto("/test/deps");
await page.getByText("TestVirtualUseClient").click();
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_action2.tsx b/packages/react-server/examples/basic/src/routes/test/action/_action2.tsx
new file mode 100644
index 000000000..c4860549b
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/action/_action2.tsx
@@ -0,0 +1,26 @@
+"use server";
+
+import { sleep } from "@hiogawa/utils";
+import React from "react";
+import { TestClientComponent } from "./_client2";
+
+export async function actionReturnComponent() {
+ return (
+ <>
+
+
+
+
+ [server]{" "}
+
+
+
+
+ >
+ );
+}
+
+async function TestServerComponent() {
+ await sleep(1000);
+ return <>OK!>;
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_client.tsx b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
index c7f925fd0..44293c573 100644
--- a/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
@@ -12,6 +12,7 @@ import {
nonFormAction,
slowAction,
} from "./_action";
+import { actionReturnComponent } from "./_action2";
export function Chat(props: { messages: ReturnType }) {
// cf. https://react.dev/reference/react/useOptimistic#optimistically-updating-with-forms
@@ -203,3 +204,25 @@ function formDataToJson(data: FormData) {
});
return result;
}
+
+export function TestActionReturnComponent() {
+ const [node, setNode] = React.useState(null);
+ return (
+
+
TestActionReturnComponent
+
+
+ Result: {node ?? "(none)"}
+
+
+ );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_client2.tsx b/packages/react-server/examples/basic/src/routes/test/action/_client2.tsx
new file mode 100644
index 000000000..76cc44779
--- /dev/null
+++ b/packages/react-server/examples/basic/src/routes/test/action/_client2.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+export function TestClientComponent() {
+ const [count, setCount] = React.useState(0);
+ return (
+
+ );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/action/page.tsx b/packages/react-server/examples/basic/src/routes/test/action/page.tsx
index dceeedac6..00ff11920 100644
--- a/packages/react-server/examples/basic/src/routes/test/action/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/action/page.tsx
@@ -11,6 +11,7 @@ import {
ClientActionBindTest,
FormStateTest,
NonFormActionTest,
+ TestActionReturnComponent,
} from "./_client";
export default async function Page() {
@@ -29,6 +30,7 @@ export default async function Page() {
{getActionBindResult()}
+
);
}