feat: add middleware composition to loaders & actions

ChibiBlasphem · ChibiBlasphem · commit 09ea5243e507 · 2025-10-16T13:20:55.000+02:00
diff --git a/packages/app-builder/src/core/middleware-config.ts b/packages/app-builder/src/core/middleware-config.ts
@@ -0,0 +1,3 @@
+export interface MiddlewareConfig {
+  GlobalMiddlewares: readonly [];
+}
diff --git a/packages/app-builder/src/core/middleware-types.ts b/packages/app-builder/src/core/middleware-types.ts
@@ -0,0 +1,81 @@
+export type Expand<T> = T extends object
+  ? T extends infer O
+    ? O extends Function
+      ? O
+      : {
+          [K in keyof O]: O[K];
+        }
+    : never
+  : T;
+
+export type DataReturnType<Data, TContext> = {
+  data: Data;
+  __context: TContext;
+  __headers: HeaderEntry[];
+};
+
+export type HeaderEntry = [string, string];
+
+export type NextFunction = <TOutContext = undefined>(ctx?: {
+  context: TOutContext;
+  headers?: HeaderEntry[];
+}) => Promise<DataReturnType<any, TOutContext>>;
+
+export type DataFunctionArgs<TInContext> = {
+  request: Request;
+  params: Record<string, string>;
+  context: TInContext;
+};
+
+export type MiddlewareFunction<in out TInContext = any, TOutContext = any> = (
+  args: DataFunctionArgs<TInContext>,
+  next: NextFunction,
+) => Promise<DataReturnType<any, TOutContext>>;
+
+export type MiddlewareObject<
+  TDependencies extends readonly MiddlewareObject[] = any,
+  TOutContext = any,
+> = {
+  deps: readonly [...TDependencies];
+  fn: MiddlewareFunction<Expand<MergeMiddlewareContext<TDependencies>>, TOutContext>;
+};
+
+export type MergeMiddlewareContext<T extends readonly MiddlewareObject[]> = T extends readonly [
+  infer M,
+]
+  ? M extends MiddlewareObject<any, infer TOutContext>
+    ? TOutContext
+    : never
+  : T extends readonly [infer M, ...infer R extends readonly MiddlewareObject[]]
+    ? M extends MiddlewareObject<any, infer TOutContext>
+      ? TOutContext & MergeMiddlewareContext<R>
+      : never
+    : {};
+
+export type ExecutionEnvironmentQueueItem = {
+  data: { context: any } | undefined;
+};
+
+export type ExecutionEnvironment = {
+  queue: Map<Function, ExecutionEnvironmentQueueItem>;
+  ctx: {
+    request: Request;
+    params: Record<string, string>;
+    context: Record<string, unknown>;
+  };
+};
+
+export type DataWithOptions<Data> = {
+  __dataObject: true;
+  data: Data;
+  headers?: HeaderEntry[];
+};
+
+export type ServerFunction<TContext, Data> = (
+  args: DataFunctionArgs<TContext>,
+) => Promise<Data | DataWithOptions<Data>>;
+
+export type RemixDataFunctionArgs = {
+  request: Request;
+  params: Record<string, string>;
+};
diff --git a/packages/app-builder/src/core/requests.ts b/packages/app-builder/src/core/requests.ts
@@ -0,0 +1,153 @@
+export type GlobalMiddlewares =
+  import('@app-builder/core/middleware-config').MiddlewareConfig['GlobalMiddlewares'];
+
+import type {
+  DataReturnType,
+  ExecutionEnvironment,
+  ExecutionEnvironmentQueueItem,
+  Expand,
+  MergeMiddlewareContext,
+  MiddlewareFunction,
+  MiddlewareObject,
+  NextFunction,
+  RemixDataFunctionArgs,
+  ServerFunction,
+} from './middleware-types';
+
+let globalMiddlewares: readonly MiddlewareObject[] = [];
+
+function createMiddlewareCallbable(
+  object: MiddlewareObject,
+  env: ExecutionEnvironment,
+  globalEnv: ExecutionEnvironment | undefined,
+  next: NextFunction,
+) {
+  // Create a env specific to middleware queue to not pollute the global request one
+  const middlewareEnv = createExecutionEnvironment(env);
+  middlewareEnv.ctx.context = { ...globalEnv?.ctx.context };
+
+  const finalMiddleware: NextFunction = async (args): Promise<DataReturnType<any, any>> => {
+    middlewareEnv.ctx.context = { ...middlewareEnv.ctx.context, ...args?.context };
+    return object.fn(middlewareEnv.ctx, next);
+  };
+
+  return createMiddlewareChain(object.deps, middlewareEnv, globalEnv, finalMiddleware);
+}
+
+function createServerFunctionCallable(
+  middlewares: readonly MiddlewareObject[],
+  env: ExecutionEnvironment,
+  fn: ServerFunction<any, any>,
+) {
+  const final: NextFunction = async (args): Promise<DataReturnType<any, any>> => {
+    env.ctx.context = { ...env.ctx.context, ...args?.context };
+    const res = await fn(env.ctx);
+    const data =
+      res instanceof Object && '__dataObject' in res && res.__dataObject ? res.data : res;
+
+    return {
+      data,
+      __context: env.ctx.context,
+      __headers: [...(args?.headers ?? []), ...(res.headers ?? [])],
+    };
+  };
+
+  const globalEnv = createExecutionEnvironment(env);
+
+  const routeMiddlewareChain = createMiddlewareChain(middlewares, env, globalEnv, final);
+  const globalMiddlewareChain = createMiddlewareChain(
+    globalMiddlewares,
+    globalEnv,
+    undefined,
+    (nextArgs) => {
+      globalEnv.ctx.context = { ...globalEnv.ctx.context, ...nextArgs?.context };
+      return routeMiddlewareChain();
+    },
+  );
+
+  return globalMiddlewareChain;
+}
+
+function createMiddlewareChain(
+  middlewares: readonly MiddlewareObject[],
+  env: ExecutionEnvironment,
+  globalEnv: ExecutionEnvironment | undefined,
+  final: NextFunction,
+): NextFunction {
+  return middlewares.reduceRight<NextFunction>((nextFn, middleware) => {
+    return async (args) => {
+      env.ctx.context = { ...env.ctx.context, ...args?.context };
+
+      const queueItem = env.queue.get(middleware.fn);
+      if (queueItem) {
+        return nextFn(queueItem.data);
+      }
+
+      const callable = createMiddlewareCallbable(middleware, env, globalEnv, (nextArgs) => {
+        env.queue.set(middleware.fn, { data: nextArgs });
+        return nextFn(nextArgs);
+      });
+
+      return callable();
+    };
+  }, final);
+}
+
+function createExecutionEnvironment(
+  ...args: [ExecutionEnvironment] | [Request, Record<string, string>]
+): ExecutionEnvironment {
+  if (args[0] instanceof Request) {
+    return {
+      queue: new Map<Function, ExecutionEnvironmentQueueItem>(),
+      ctx: { context: {}, request: args[0], params: args[1] ?? {} },
+    };
+  }
+
+  return {
+    queue: args[0].queue,
+    ctx: { ...args[0].ctx, context: {} },
+  };
+}
+
+function buildResponse(ret: DataReturnType<any, any>) {
+  const headers = new Headers();
+  for (const [key, value] of ret.__headers) {
+    headers.append(key, value);
+  }
+  return Response.json(ret.data, { headers });
+}
+
+export function createServerFn<T extends readonly MiddlewareObject[], Ret>(
+  middlewares: readonly [...T],
+  fn: ServerFunction<Expand<MergeMiddlewareContext<[...GlobalMiddlewares, ...T]>>, Ret>,
+) {
+  return async (args: RemixDataFunctionArgs): Promise<Response> => {
+    const env = createExecutionEnvironment(args.request, args.params);
+    const middlewareChain = createServerFunctionCallable(middlewares, env, fn);
+
+    const ret = await middlewareChain();
+    return buildResponse(ret);
+  };
+}
+
+export function createMiddleware<T extends readonly MiddlewareObject[], TOutContext>(
+  middlewares: readonly [...T],
+  fn: MiddlewareFunction<Expand<MergeMiddlewareContext<T>>, TOutContext>,
+): MiddlewareObject<any, TOutContext> {
+  return { deps: middlewares, fn: fn as any };
+}
+
+export function createMiddlewareWithGlobalContext<
+  T extends readonly MiddlewareObject[],
+  TOutContext,
+>(
+  middlewares: readonly [...T],
+  fn: MiddlewareFunction<Expand<MergeMiddlewareContext<[...GlobalMiddlewares, ...T]>>, TOutContext>,
+): MiddlewareObject<any, TOutContext> {
+  return createMiddleware(middlewares, fn as any);
+}
+
+export function setGlobalMiddlewares<T extends readonly MiddlewareObject[]>(...middlewares: T) {
+  globalMiddlewares = middlewares;
+  return middlewares;
+}
diff --git a/packages/app-builder/src/entry.server.tsx b/packages/app-builder/src/entry.server.tsx
@@ -16,6 +16,7 @@ import { initServerServices } from './services/init.server';
 import { captureUnexpectedRemixError } from './services/monitoring';
 import { checkEnv, getClientEnvVars, getServerEnv } from './utils/environment';
 import { NonceProvider } from './utils/nonce';
+import './global-middlewares';
 
 const ABORT_DELAY = 70000;
 
diff --git a/packages/app-builder/src/global-middlewares.ts b/packages/app-builder/src/global-middlewares.ts
@@ -0,0 +1,4 @@
+import { setGlobalMiddlewares } from '@app-builder/core/requests';
+import { servicesMiddleware } from './middlewares/services-middleware';
+
+export const globalMiddlewares = setGlobalMiddlewares(servicesMiddleware);
diff --git a/packages/app-builder/src/middlewares/services-middleware.ts b/packages/app-builder/src/middlewares/services-middleware.ts
@@ -0,0 +1,10 @@
+import { createMiddleware } from '@app-builder/core/requests';
+import { initServerServices } from '@app-builder/services/init.server';
+
+export const servicesMiddleware = createMiddleware(
+  [],
+  async function servicesMiddleware({ request }, next) {
+    const services = initServerServices(request);
+    return next({ context: { services } });
+  },
+);
diff --git a/packages/app-builder/src/routes/_builder+/lists+/_index.tsx b/packages/app-builder/src/routes/_builder+/lists+/_index.tsx
@@ -1,12 +1,11 @@
 import { ErrorComponent, Page } from '@app-builder/components';
 import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { CreateListModal } from '@app-builder/components/Lists/CreateListModal';
+import { createMiddlewareWithGlobalContext, createServerFn } from '@app-builder/core/requests';
 import { type CustomList } from '@app-builder/models/custom-list';
 import { isCreateListAvailable } from '@app-builder/services/feature-access';
-import { initServerServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
-import { type LoaderFunctionArgs } from '@remix-run/node';
 import { Link, useLoaderData, useRouteError } from '@remix-run/react';
 import { captureRemixErrorBoundaryError } from '@sentry/remix';
 import { createColumnHelper, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
@@ -15,18 +14,25 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Table, useVirtualTable } from 'ui-design-system';
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const { authService } = initServerServices(request);
-  const { user, customListsRepository } = await authService.isAuthenticated(request, {
-    failureRedirect: getRoute('/sign-in'),
-  });
+const authMiddleware = createMiddlewareWithGlobalContext(
+  [],
+  async function authMiddleware({ request, context }, next) {
+    console.log('authMiddleware', [context]);
+    const repositories = await context.services.authService.isAuthenticated(request, {
+      failureRedirect: getRoute('/sign-in'),
+    });
+
+    return next({ context: { repositories } });
+  },
+);
+
+export const loader = createServerFn([authMiddleware], async ({ request, context }) => {
+  const { user, customListsRepository } = context.repositories;
+
   const customLists = await customListsRepository.listCustomLists();
 
-  return Response.json({
-    customLists,
-    isCreateListAvailable: isCreateListAvailable(user),
-  });
-}
+  return { customLists, isCreateListAvailable: isCreateListAvailable(user) };
+});
 
 export const handle = {
   i18n: ['lists', 'navigation'] satisfies Namespace,
diff --git a/packages/app-builder/types/middleware.d.ts b/packages/app-builder/types/middleware.d.ts
@@ -0,0 +1,5 @@
+declare module '@app-builder/core/middleware-config' {
+  interface MiddlewareConfig {
+    GlobalMiddlewares: typeof import('../src/global-middlewares').globalMiddlewares;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface MiddlewareConfig {`
	`2`	`+ GlobalMiddlewares: readonly [];`
	`3`	`+}`