Utility for custom route handles

[paulzhng]

Hi!

In a few Remix projects, I added custom route handles for some features (such as breadcrumbs, custom back navigations, ...). While implementing these, I noticed significant boilerplate for adding custom route handles.

After playing around, I came to a (more or less) generic solution which can look something like this:

import { useMemo } from "react";
import {
	type Params,
	type RouterState,
	type useLoaderData,
	useLocation,
	useMatches,
} from "react-router";
import { HandleConventionArguments } from "remix-utils";

export type RouteHandle<Key extends string, Return, Loader = unknown> = {
	[K in Key]: (
		args: HandleConventionArguments<ReturnType<typeof useLoaderData<Loader>>>,
	) => Return;
};

export type RouteHandleData<Return> = {
	id: string;
	location: ReturnType<typeof useLocation>;
	data: Return;
};

type HandleKey<T> = T extends RouteHandle<
	infer Key,
	infer _Return,
	infer _Loader
>
	? Key
	: never;

type HandleReturn<T> = T extends RouteHandle<
	infer _Key,
	infer Return,
	infer _Loader
>
	? Return
	: never;

export function useHandle<
	Handle,
	Key extends HandleKey<Handle> = HandleKey<Handle>,
	Return extends HandleReturn<Handle> = HandleReturn<Handle>,
>(key: Key): RouteHandleData<Return>[] {
	const matches = useMatches();
	const location = useLocation();

	return useMemo(() => {
		// initialize with configuration
		let handleDataOfRoutes: RouteHandleData<Return>[] = [];

		// walk through all matches, prioritizing leaf nodes (i.e., they run last)
		for (let i = 0; i < matches.length; i++) {
			const match = matches[i];
			const routeModule = match.handle as RouteHandle<Key, Return> | undefined;
			if (!routeModule) {
				continue;
			}

			const fn = routeModule[key];
			if (!fn) {
				continue;
			}

			const handleData = fn({
				id: match.id,
				data: match.data,
				params: match.params,
				location,
				parentsData: matches.slice(0, i).map((match) => match.data),
				matches,
			});

			handleDataOfRoutes = [
				...handleDataOfRoutes,
				{
					id: match.id,
					location,
					data: handleData,
				},
			];
		}

		return handleDataOfRoutes;
	}, [key, matches, location]);
}

Example use case:

export interface NavigationConfiguration {
	back?: {
		url: string;
		text: string;
	};
}

export type NavigationRouteHandle<Loader = unknown> = RouteHandle<
	"navigation",
	Partial<NavigationConfiguration>,
	Loader
>;

export function Navigation({ children }: PropsWithChildren) {
	const handleData = useHandle<NavigationRouteHandle>("navigation");
	const navigationConfiguration = useMemo(() => {
		let mergedNavigationConfiguration: NavigationConfiguration = {};

		for (const data of handleData) {
			mergedNavigationConfiguration = {
				...mergedNavigationConfiguration,
				...data.data,
			};
		}

		return mergedNavigationConfiguration;
	}, [handleData]);

	return (
		<NavigationContext.Provider value={navigationConfiguration}>
			{children}
		</NavigationContext.Provider>
	);
}

... and in routes:

export const handle: NavigationRouteHandle = {
  navigation: () => ({
    back: {
        url: "Home",
        link: "/"
    }
  }),
};

Would you consider adding such a utility to remix-utils?