here is a good way to use koa-like middlewares

[Envov]

It looks like this， ctx.return will return data early

import compose from '@utils/compose';
export default function Index() {
	const ctx = useLoaderData();
	return <div>{ctx.name}</div>;
}

type DefaultCtx = {
	name: string;
};
export const loader = compose<DefaultCtx & Request>(
	async (ctx, next) => {
		ctx.name = '111';
		await next();
		ctx.name = '666';
	},
	async (ctx, next) => {
		ctx.name = '222';
		await next();
		ctx.name = '555';
		ctx.return(ctx);
	},
	async (ctx, next) => {
		ctx.name = '333';
		await next();
		ctx.name = '444';
	}
);

Implementation

type Next = () => Promise<void>;
type Context = {};
type Middle<T = {}> = (ctx: Context & T, next: Next) => void;
const compose = <T>(...middlewares: Middle<T>[]) => {
	return middlewares.reverse().reduce(
		(dispatch, middleware) => {
			return async ctx =>
				middleware(ctx, async () => dispatch(ctx, async () => {}));
		},
		async () => {}
	);
};
export type Middleware<T = {}, P = unknown> = (
	ctx: Context & T & { return: (param: P) => void },
	next: Next
) => void;
const returnEarly: Middleware = async (ctx, next) => {
	return new Promise<any>(async resolve => {
		ctx.return = resolve;
		await next();
	});
};

const componseWithReturn = <T>(...middlewares: Middleware<T>[]) =>
	compose(returnEarly, ...middlewares) as (ctx: T) => void;

export default componseWithReturn;

[Envov]

https://github.com/Envov/remix-compose

[kiliman]

Looks nice, but unfortunately you can't use a HoF without breaking tree-shaking. You'd have to call it with something like this and make sure you pass in the arguments.

export const loader: LoaderFunction = async({request, params, context}) => compose(...)