Support react router middleware

packages/adapter/index.ts

@@ -1,2 +1,3 @@
 export { configure } from './configure.js'
+export { adonisContext } from './src/context.js'
 export { stubsRoot } from './stubs/index.js'

packages/adapter/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matstack/remix-adonisjs",
   "description": "An adapter for using Remix with AdonisJS",
-  "version": "1.0.1",
+  "version": "1.0.2-middleware.0",
   "engines": {
     "node": ">=20.10.0"
   },

packages/adapter/providers/remix_provider.ts

@@ -4,6 +4,7 @@ import type { RequestHandler } from '../src/remix_adapter.js'
 
 import { HttpContext } from '@adonisjs/core/http'
 import type { ApplicationService } from '@adonisjs/core/types'
+import { adonisContext } from '../src/context.js'
 import '../src/types/main.js'
 
 declare module '@adonisjs/core/types' {
@@ -42,10 +43,14 @@ export default class RemixProvider {
 
     const requestHandler = createRequestHandler({
       build,
-      getLoadContext: (context) => ({
-        http: context.http,
-        make: context.container.make.bind(context.container),
-      }),
+      getLoadContext: ({ container, http }) => {
+        const map = new Map()
+        map.set(adonisContext, {
+          http,
+          make: container.make.bind(container),
+        })
+        return map as any // TODO: don't use any here
+      },
     })
     const app = this.app
     HttpContext.getter(

packages/adapter/src/context.ts

@@ -0,0 +1,4 @@
+import { unstable_createContext } from 'react-router'
+import { AdonisApplicationContext } from './remix_adapter.js'
+
+export const adonisContext = unstable_createContext<AdonisApplicationContext>()

packages/adapter/src/remix_adapter.ts

@@ -7,15 +7,17 @@ import type { Request as AdonisRequest, Response as AdonisResponse } from '@adon
 
 import {
   AppLoadContext,
+  UNSAFE_MiddlewareEnabled as MiddlewareEnabled,
   ServerBuild,
   createRequestHandler as createRemixRequestHandler,
+  unstable_InitialContext,
 } from 'react-router'
 
 import { createReadableStreamFromReadable } from '@react-router/node'
 import debug from './debug.js'
 import { ReadableWebToNodeStream } from './stream_conversion.js'
 
-export type HandlerContext = {
+export type AdonisAdapterContext = {
   http: HttpContext
   container: Container<ContainerBindings>
 }
@@ -25,9 +27,15 @@ export type AdonisApplicationContext = {
   make: Container<ContainerBindings>['make']
 }
 
-export type GetLoadContextFunction = (context: HandlerContext) => AppLoadContext
+export type MaybePromise<T> = T | Promise<T>
 
-export type RequestHandler = (context: HandlerContext) => Promise<void>
+export type GetLoadContextFunction = (
+  context: AdonisAdapterContext
+) => MiddlewareEnabled extends true
+  ? MaybePromise<unstable_InitialContext>
+  : MaybePromise<AppLoadContext>
+
+export type RequestHandler = (context: AdonisAdapterContext) => Promise<void>
 
 /**
  * Returns a request handler for AdonisJS that serves the response using Remix.
@@ -37,20 +45,20 @@ export function createRequestHandler({
   getLoadContext,
   mode = process.env.NODE_ENV,
 }: {
-  build: ServerBuild
-  getLoadContext: GetLoadContextFunction
+  build: ServerBuild | (() => Promise<ServerBuild>)
+  getLoadContext?: GetLoadContextFunction
   mode?: string
 }): RequestHandler {
   let handleRequest = createRemixRequestHandler(build, mode)
 
-  return async (context: HandlerContext) => {
+  return async (context: AdonisAdapterContext) => {
     debug(`Creating remix request for ${context.http.request.parsedUrl}`)
     const request = createRemixRequest(context.http.request, context.http.response)
-    const loadContext = getLoadContext(context)
+    const loadContext = await getLoadContext?.(context)
 
     const response = await handleRequest(request, loadContext)
 
-    sendRemixResponse(context.http, response)
+    await sendRemixResponse(context.http, response)
   }
 }
 

packages/reference-app/react-router.config.ts

@@ -1,7 +1,17 @@
-import type { Config } from '@react-router/dev/config'
+import type { Config } from '@react-router/dev/config';
+
+declare module "react-router" {
+  interface Future {
+    unstable_middleware: true;
+  }
+}
+
 export default {
   ssr: true,
   appDirectory: 'resources/remix_app',
   buildDirectory: 'build/remix',
   serverBuildFile: 'server.js',
+  future: {
+    unstable_middleware: true
+  }
 } satisfies Config

packages/reference-app/resources/remix_app/root.tsx

@@ -1,4 +1,22 @@
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
+import { adonisContext } from '@matstack/remix-adonisjs';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
+import { Route } from './+types/root.js';
+
+const serverLogger: Route.unstable_MiddlewareFunction = async (
+  { request, context },
+  next
+) => {
+  const { http } = context.get(adonisContext)
+  let start = performance.now();
+
+  let res = await next();
+
+  let duration = performance.now() - start;
+  http.logger.info(`Navigated to ${request.url} (${duration}ms)`);
+
+  return res;
+};
+export const unstable_middleware = [serverLogger]
 
 export default function App() {
   return (

packages/reference-app/resources/remix_app/routes/adonis_redirect.tsx

@@ -1,7 +1,8 @@
+import { adonisContext } from "@matstack/remix-adonisjs"
 import type { Route } from "./+types/adonis_redirect.js"
 
 export const loader = async ({ context }: Route.LoaderArgs) => {
-  const { http } = context
+  const { http } = context.get(adonisContext)
 
   http.response.redirect('/login')
 

packages/reference-app/resources/remix_app/routes/dashboard.tsx

@@ -1,8 +1,9 @@
+import { adonisContext } from '@matstack/remix-adonisjs'
 import { useLoaderData } from 'react-router'
 import type { Route } from './+types/dashboard.js'
 
 export const loader = ({ context }: Route.LoaderArgs) => {
-  const { http, make } = context
+  const { http } = context.get(adonisContext)
 
   return http.session.all()
 }

packages/reference-app/resources/remix_app/routes/login.tsx

@@ -1,8 +1,9 @@
+import { adonisContext } from '@matstack/remix-adonisjs'
 import { Form, redirect } from 'react-router'
 import type { Route } from './+types/login.js'
 
 export const action = async ({ context }: Route.ActionArgs) => {
-  const { http } = context
+  const { http } = context.get(adonisContext)
 
   const { password } = http.request.only(['password'])
   if (password !== '123') {

packages/reference-app/resources/remix_app/routes/resolve_container.tsx

@@ -1,8 +1,9 @@
+import { adonisContext } from '@matstack/remix-adonisjs'
 import { useLoaderData } from 'react-router'
 import type { Route } from './+types/resolve_container.js'
 
 export const loader = async ({ context }: Route.LoaderArgs) => {
-  const app = await context.make('app')
+  const app = await context.get(adonisContext).make('app')
   return {
     env: app.getEnvironment(),
   }

packages/reference-app/resources/remix_app/routes/webhooks.payment.tsx

@@ -1,8 +1,9 @@
+import { adonisContext } from '@matstack/remix-adonisjs'
 import type { Route } from './+types/webhooks.payment.js'
 
 export const action = async ({ request, context }: Route.ActionArgs) => {
   const body = await request.text()
-  const { http } = context
+  const { http } = context.get(adonisContext)
   http.logger.info('webhook body', body)
   return Response.json({
     status: 'ok',

packages/reference-app/vite.config.ts

@@ -10,4 +10,8 @@ export default defineConfig({
       ],
     },
   },
+  ssr: {
+    // Avoid bundling adapter code
+    external: ['@matstack/remix-adonisjs']
+  }
 })