Add actions and semi-splittable routes to playgrounds

playground/split-route-modules-spa/app/routes.ts

@@ -4,4 +4,5 @@ export default [
   index("routes/_index.tsx"),
   route("splittable", "routes/splittable.tsx"),
   route("unsplittable", "routes/unsplittable.tsx"),
+  route("semi-splittable", "routes/semi-splittable.tsx"),
 ] satisfies RouteConfig;

playground/split-route-modules-spa/app/routes/_index.tsx

@@ -17,6 +17,9 @@ export default function Index() {
         <li>
           <Link to="/unsplittable">Unsplittable route</Link>
         </li>
+        <li>
+          <Link to="/semi-splittable">Semi-splittable route</Link>
+        </li>
       </ul>
     </div>
   );

playground/split-route-modules-spa/app/routes/semi-splittable.tsx

@@ -0,0 +1,30 @@
+import { Form, useLoaderData, useActionData } from "react-router";
+
+// Dummy variable to prevent route exports from being split
+let shared: null = null;
+
+export const clientLoader = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return shared ?? "Hello from unsplittable client loader";
+};
+
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Hello from splittable client action";
+};
+
+export default function Hello() {
+  const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
+}

playground/split-route-modules-spa/app/routes/splittable.tsx

@@ -1,15 +1,27 @@
-import { useLoaderData } from "react-router";
+import { Form, useLoaderData, useActionData } from "react-router";
 
 export const clientLoader = async () => {
   await new Promise((resolve) => setTimeout(resolve, 1000));
   return "Hello from splittable client loader";
 };
 
-// Uncomment the following line to see an error message since HydrateFallback is
-// not a valid export outside of the root route in SPA mode:
-// export function HydrateFallback() {}
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Hello from splittable client action";
+};
 
 export default function Hello() {
   const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
-  return <div>{message}</div>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
 }

playground/split-route-modules-spa/app/routes/unsplittable.tsx

@@ -1,14 +1,30 @@
-import { useLoaderData } from "react-router";
+import { Form, useLoaderData, useActionData } from "react-router";
 
 // Dummy variable to prevent route exports from being split
 let shared: null = null;
 
 export const clientLoader = async () => {
   await new Promise((resolve) => setTimeout(resolve, 1000));
-  return shared ?? "Hello from splittable client loader";
+  return shared ?? "Hello from unsplittable client loader";
+};
+
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return shared ?? "Hello from unsplittable client action";
 };
 
 export default function Hello() {
   const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
-  return shared ?? <div>{message}</div>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
 }

playground/split-route-modules/app/routes.ts

@@ -4,4 +4,5 @@ export default [
   index("routes/_index.tsx"),
   route("splittable", "routes/splittable.tsx"),
   route("unsplittable", "routes/unsplittable.tsx"),
+  route("semi-splittable", "routes/semi-splittable.tsx"),
 ] satisfies RouteConfig;

playground/split-route-modules/app/routes/_index.tsx

@@ -17,6 +17,9 @@ export default function Index() {
         <li>
           <Link to="/unsplittable">Unsplittable route</Link>
         </li>
+        <li>
+          <Link to="/semi-splittable">Semi-splittable route</Link>
+        </li>
       </ul>
     </div>
   );

playground/split-route-modules/app/routes/semi-splittable.tsx

@@ -0,0 +1,34 @@
+import { Form, useLoaderData, useActionData } from "react-router";
+
+// Dummy variable to prevent route exports from being split
+let shared: null = null;
+
+export const clientLoader = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return shared ?? "Hello from unsplittable client loader";
+};
+
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Hello from splittable client action";
+};
+
+export function HydrateFallback() {
+  return shared ?? <div>Loading...</div>;
+}
+
+export default function Hello() {
+  const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
+}

playground/split-route-modules/app/routes/splittable.tsx

@@ -1,15 +1,31 @@
-import { useLoaderData } from "react-router";
+import { Form, useLoaderData, useActionData } from "react-router";
 
 export const clientLoader = async () => {
   await new Promise((resolve) => setTimeout(resolve, 1000));
   return "Hello from splittable client loader";
 };
 
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Hello from splittable client action";
+};
+
 export function HydrateFallback() {
   return <div>Loading...</div>;
 }
 
 export default function Hello() {
   const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
-  return <div>{message}</div>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
 }

playground/split-route-modules/app/routes/unsplittable.tsx

@@ -1,4 +1,4 @@
-import { useLoaderData } from "react-router";
+import { Form, useLoaderData, useActionData } from "react-router";
 
 // Dummy variable to prevent route exports from being split
 let shared: null = null;
@@ -8,11 +8,27 @@ export const clientLoader = async () => {
   return shared ?? "Hello from unsplittable client loader";
 };
 
+export const clientAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return shared ?? "Hello from unsplittable client action";
+};
+
 export function HydrateFallback() {
   return shared ?? <div>Loading...</div>;
 }
 
 export default function Hello() {
   const message = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>;
-  return shared ?? <div>{message}</div>;
+  const actionData = useActionData() as Awaited<
+    ReturnType<typeof clientAction>
+  >;
+  return (
+    <>
+      <p>{message}</p>
+      <p>{actionData}</p>
+      <Form method="post">
+        <button>Submit</button>
+      </Form>
+    </>
+  );
 }