createIsomorphicFn - Creating different implementations for the same function based on environment

[EskiMojo14]

Copying over a feature idea discussed in a Discord thread.

This would be a new API similar to serverOnly but allowing for a client implementation to be provided too.

Basic example:

import { getRequestURL } from "vinxi/http"

const getIsomorphicUrl = createIsomorphicFn()
  .server(() => getRequestURL())
  .client(() => new URL(window.location.href));
  
const url = await getIsomorphicUrl()

Each implementation should accept the same arguments, however can return a different result - the result type will be a union of the possible results.

Each implementation is optional, if not provided it should default to a no-op (and its result type would be undefined).

For example a server only function could look like

const serverOnlyFn = createIsomorphicFn().server(() => "foo");

const test = serverOnlyFn();
//    ^? string | undefined
// string on server, undefined on client

I've created a Typescript playground (alternate approach) for how this could be achieved type-wise.

The transformer for this should be fairly simple, just extracting the correct implementation for the environment (or supplying a no-op if none is provided).

e.g.

import { getRequestURL } from "vinxi/http"

const getIsomorphicUrl = createIsomorphicFn()
  .server(() => getRequestURL())
  .client(() => new URL(window.location.href));
  
const serverOnlyFn = createIsomorphicFn().server(() => "foo");

// server
import { getRequestURL } from "vinxi/http"

const getIsomorphicUrl = () => getRequestURL()

const serverOnlyFn = () => "foo"

// client
const getIsomorphicUrl = () => new URL(window.location.href)

const serverOnlyFn = () => {}

The transformer might also want to warn if no implementations are provided (i.e. const fn = createIsomorphicFn()) as this seems like a mistake - it could still provide a no-op to avoid runtime errors.

[schiller-manuel]

released in https://github.com/TanStack/router/releases/tag/v1.87.0

[ebramanti]

This really should be documented, it is a very useful feature!