How do I type loader/action factories in order to retain their generated type?

[GabenGar]

I have a factory like this:

import {
  data,
  type ActionFunction,
} from "react-router";

export function createServerAction(actionFunc: ActionFunction) {
  async function serverAction(...args: Parameters<typeof actionFunc>) {
    try {
      return await actionFunc(...args);
    } catch (error) {
      return data({ error: String(error)}, {
        headers: new Headers([["Content-Type", "application/json"]]),
        status: 500,
      });
    }
  }

  return serverAction;
}

But obviously the page doesn't like its signature when used like this:

import type { Route } from "./+types/path";
export const action = createServerAction(async ({ request }: Route.ActionArgs) => {...});

But it's not obvious how is Route.ActionArgs constructing itself.

Looking at generated types it uses CreateServerActionArgs<Info> from "react-router/route-module", but the Info is a bare type not extending a specific interface, so do I have to pass it as a generic parameter?

[GabenGar]

So far I ended up with this:

import { data } from "react-router";

export function createServerAction<
  ActionFunc extends (...args: any[]) => Promise<any>,
>(actionFunc: ActionFunc) {
  async function serverAction(
    ...args: Parameters<typeof actionFunc>
  ): Promise<Awaited<ReturnType<typeof actionFunc> | ReturnType<typeof data>>> {
    try {
      const data = await actionFunc(...args);

      return data;
    } catch (error) {
      return data(error, {
        headers: new Headers([["Content-Type", "application/json"]]),
        status: 500,
      });
    }
  }

  return serverAction;
}

However another issue is I need to apply some transformation to data returned from the function, but it can also be DataWithResponseInit (aka a result of data() function) . How do I tell them apart?