Add clientAction support

packages/remix-dev/compiler/js/plugins/routes.ts

@@ -11,6 +11,7 @@ type Route = RemixConfig["routes"][string];
 // If you change this, make sure you update loadRouteModuleWithBlockingLinks in
 // remix-react/routes.ts
 const browserSafeRouteExports: { [name: string]: boolean } = {
+  clientAction: true,
   clientLoader: true,
   ErrorBoundary: true,
   HydrateFallback: true,

packages/remix-dev/compiler/manifest.ts

@@ -98,6 +98,7 @@ export async function create({
           imports: resolveImports(output.imports),
           hasAction: sourceExports.includes("action"),
           hasLoader: sourceExports.includes("loader"),
+          hasClientAction: sourceExports.includes("clientAction"),
           hasClientLoader: sourceExports.includes("clientLoader"),
           hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
         };

packages/remix-dev/manifest.ts

@@ -16,6 +16,7 @@ export type Manifest = {
       imports?: string[];
       hasAction: boolean;
       hasLoader: boolean;
+      hasClientAction: boolean;
       hasClientLoader: boolean;
       hasErrorBoundary: boolean;
     };

packages/remix-dev/vite/plugin.ts

@@ -381,6 +381,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         caseSensitive: route.caseSensitive,
         hasAction: sourceExports.includes("action"),
         hasLoader: sourceExports.includes("loader"),
+        hasClientAction: sourceExports.includes("clientAction"),
         hasClientLoader: sourceExports.includes("clientLoader"),
         hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
         ...resolveBuildAssetPaths(pluginConfig, viteManifest, routeFilePath),
@@ -431,6 +432,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         }`,
         hasAction: sourceExports.includes("action"),
         hasLoader: sourceExports.includes("loader"),
+        hasClientAction: sourceExports.includes("clientAction"),
         hasClientLoader: sourceExports.includes("clientLoader"),
         hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
         imports: [],

packages/remix-react/index.tsx

@@ -78,6 +78,8 @@ export {
 
 export type { HtmlLinkDescriptor } from "./links";
 export type {
+  ClientActionFunction,
+  ClientActionFunctionArgs,
   ClientLoaderFunction,
   ClientLoaderFunctionArgs,
   MetaArgs,

packages/remix-react/routeModules.ts

@@ -1,5 +1,7 @@
 import type { ComponentType } from "react";
 import type {
+  ActionFunction as RRActionFunction,
+  ActionFunctionArgs as RRActionFunctionArgs,
   LoaderFunction as RRLoaderFunction,
   LoaderFunctionArgs as RRLoaderFunctionArgs,
   DataRouteMatch,
@@ -18,6 +20,7 @@ export interface RouteModules {
 }
 
 export interface RouteModule {
+  clientAction?: ClientActionFunction;
   clientLoader?: ClientLoaderFunction;
   ErrorBoundary?: ErrorBoundaryComponent;
   HydrateFallback?: HydrateFallbackComponent;
@@ -28,6 +31,20 @@ export interface RouteModule {
   shouldRevalidate?: ShouldRevalidateFunction;
 }
 
+/**
+ * A function that handles data mutations for a route on the client
+ */
+export type ClientActionFunction = (
+  args: ClientActionFunctionArgs
+) => ReturnType<RRActionFunction>;
+
+/**
+ * Arguments passed to a route `clientAction` function
+ */
+export type ClientActionFunctionArgs = RRActionFunctionArgs<undefined> & {
+  serverAction: <T = AppData>() => Promise<SerializeFrom<T>>;
+};
+
 /**
  * A function that loads data for a route on the client
  */

packages/remix-react/routes.tsx

@@ -42,6 +42,7 @@ interface Route {
 export interface EntryRoute extends Route {
   hasAction: boolean;
   hasLoader: boolean;
+  hasClientAction: boolean;
   hasClientLoader: boolean;
   hasErrorBoundary: boolean;
   imports?: string[];
@@ -189,8 +190,6 @@ export function createClientRoutes(
       id: route.id,
       index: route.index,
       path: route.path,
-      action: ({ request }: ActionFunctionArgs) =>
-        prefetchStylesAndCallHandler(() => fetchServerAction(request)),
     };
 
     if (routeModule) {
@@ -262,6 +261,24 @@ export function createClientRoutes(
           });
         });
       };
+
+      dataRoute.action = ({ request, params }: ActionFunctionArgs) => {
+        return prefetchStylesAndCallHandler(async () => {
+          if (!routeModule.clientAction) {
+            return fetchServerAction(request);
+          }
+
+          return routeModule.clientAction({
+            request,
+            params,
+            async serverAction() {
+              let result = await fetchServerAction(request);
+              let unwrapped = await unwrapServerResponse(result);
+              return unwrapped;
+            },
+          });
+        });
+      };
     } else {
       // If the lazy route does not have a client loader/action we want to call
       // the server loader/action in parallel with the module load so we add
@@ -270,6 +287,10 @@ export function createClientRoutes(
         dataRoute.loader = ({ request }: LoaderFunctionArgs) =>
           prefetchStylesAndCallHandler(() => fetchServerLoader(request));
       }
+      if (!route.hasClientAction) {
+        dataRoute.action = ({ request }: ActionFunctionArgs) =>
+          prefetchStylesAndCallHandler(() => fetchServerAction(request));
+      }
 
       // Load all other modules via route.lazy()
       dataRoute.lazy = async () => {
@@ -292,6 +313,19 @@ export function createClientRoutes(
             });
         }
 
+        if (mod.clientAction) {
+          let clientAction = mod.clientAction;
+          lazyRoute.action = (args) =>
+            clientAction({
+              ...args,
+              async serverAction() {
+                let response = await fetchServerAction(args.request);
+                let result = await unwrapServerResponse(response);
+                return result;
+              },
+            });
+        }
+
         if (needsRevalidation) {
           lazyRoute.shouldRevalidate = wrapShouldRevalidateForHdr(
             route.id,
@@ -302,6 +336,7 @@ export function createClientRoutes(
 
         return {
           ...(lazyRoute.loader ? { loader: lazyRoute.loader } : {}),
+          ...(lazyRoute.action ? { action: lazyRoute.action } : {}),
           hasErrorBoundary: lazyRoute.hasErrorBoundary,
           shouldRevalidate: lazyRoute.shouldRevalidate,
           handle: lazyRoute.handle,
@@ -357,6 +392,7 @@ async function loadRouteModuleWithBlockingLinks(
   return {
     Component: getRouteModuleComponent(routeModule),
     ErrorBoundary: routeModule.ErrorBoundary,
+    clientAction: routeModule.clientAction,
     clientLoader: routeModule.clientLoader,
     handle: routeModule.handle,
     links: routeModule.links,

packages/remix-server-runtime/routeModules.ts

@@ -42,6 +42,22 @@ export type ActionFunctionArgs = RRActionFunctionArgs<AppLoadContext> & {
   context: AppLoadContext;
 };
 
+/**
+ * A function that handles data mutations for a route on the client
+ * @private Public API is exported from @remix-run/react
+ */
+type ClientActionFunction = (
+  args: ClientActionFunctionArgs
+) => ReturnType<RRActionFunction>;
+
+/**
+ * Arguments passed to a route `clientAction` function
+ * @private Public API is exported from @remix-run/react
+ */
+type ClientActionFunctionArgs = RRActionFunctionArgs<undefined> & {
+  serverAction: <T = AppData>() => Promise<SerializeFrom<T>>;
+};
+
 /**
  * A function that loads data for a route on the server
  */
@@ -233,6 +249,7 @@ type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
 export type RouteHandle = unknown;
 
 export interface EntryRouteModule {
+  clientAction?: ClientActionFunction;
   clientLoader?: ClientLoaderFunction;
   ErrorBoundary?: any; // Weakly typed because server-runtime is not React-aware
   HydrateFallback?: any; // Weakly typed because server-runtime is not React-aware

packages/remix-testing/create-remix-stub.tsx

@@ -182,6 +182,7 @@ function processRoutes(
       // When testing routes, you should just be stubbing loader/action, not
       // trying to re-implement the full loader/clientLoader/SSR/hydration flow.
       // That is better tested via E2E tests.
+      hasClientAction: false,
       hasClientLoader: false,
       hasErrorBoundary: route.ErrorBoundary != null,
       module: "build/stub-path-to-module.js", // any need for this?