From 9ac98920f2e33fa3cbc09b5b2ac1af8c9cf47856 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 5 Jul 2024 15:14:28 +0900
Subject: [PATCH 1/2] test: test action returning components

---
 .../basic/src/routes/test/action/_action2.tsx | 26 +++++++++++++++++++
 .../basic/src/routes/test/action/_client.tsx  | 20 ++++++++++++++
 .../basic/src/routes/test/action/_client2.tsx | 15 +++++++++++
 .../basic/src/routes/test/action/page.tsx     |  2 ++
 4 files changed, 63 insertions(+)
 create mode 100644 packages/react-server/examples/basic/src/routes/test/action/_action2.tsx
 create mode 100644 packages/react-server/examples/basic/src/routes/test/action/_client2.tsx

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 (
+    <>
+      <div>
+        <TestClientComponent />
+      </div>
+      <div className="border px-2">
+        [server]{" "}
+        <React.Suspense fallback={"Loading..."}>
+          <TestServerComponent />
+        </React.Suspense>
+      </div>
+    </>
+  );
+}
+
+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..78c48874f 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<typeof getMessages> }) {
   // cf. https://react.dev/reference/react/useOptimistic#optimistically-updating-with-forms
@@ -203,3 +204,22 @@ function formDataToJson(data: FormData) {
   });
   return result;
 }
+
+export function TestActionReturnComponent() {
+  const [node, setNode] = React.useState<React.ReactNode>(null);
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <h3 className="font-bold">TestActionReturnComponent</h3>
+      <div className="flex items-center gap-2">
+        <form
+          action={async () => {
+            setNode(await actionReturnComponent());
+          }}
+        >
+          <button className="antd-btn antd-btn-default px-2">Action</button>
+        </form>
+        Result: {node ?? "(none)"}
+      </div>
+    </div>
+  );
+}
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 (
+    <button
+      className="antd-btn antd-btn-default px-2"
+      onClick={() => setCount((c) => c + 1)}
+    >
+      [client] counter: {count}
+    </button>
+  );
+}
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() {
         <div data-testid="action-bind">{getActionBindResult()}</div>
       </div>
       <FormStateTest />
+      <TestActionReturnComponent />
     </div>
   );
 }

From 7b30580acce12c90e1c55c91464c31b195c16d1e Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 5 Jul 2024 15:28:20 +0900
Subject: [PATCH 2/2] test: add e2e

---
 .../react-server/examples/basic/e2e/basic.test.ts   | 13 +++++++++++++
 .../basic/src/routes/test/action/_client.tsx        |  5 ++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

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/_client.tsx b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
index 78c48874f..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
@@ -208,7 +208,10 @@ function formDataToJson(data: FormData) {
 export function TestActionReturnComponent() {
   const [node, setNode] = React.useState<React.ReactNode>(null);
   return (
-    <div className="flex flex-col gap-2 items-start">
+    <div
+      className="flex flex-col gap-2 items-start"
+      data-testid="action-return-component"
+    >
       <h3 className="font-bold">TestActionReturnComponent</h3>
       <div className="flex items-center gap-2">
         <form