Strongly-typed AppLoadContext

[DovydasNavickas]

I spent quite a bit of time on hunting this, so I thought I'd share.

In our project, we are using a monorepo with pnpm. We have the structure:

packages:
  - "packages/*"
  - "apps/*"

I've read about ways of making the AppLoadContext strongly-typed and they either exported the typed interface in @remix-run/{runtime} module or @remix-run/server-runtime. In our case it turns out that apps running on @remix-run/node use the node interface, but the library uses the one exported in @remix-run/server-runtime. Thus, I ended up writing this in the global.d.ts that I export in my server library:

/// <reference types="@remix-run/node" />
/// <reference types="@remix-run/server-runtime" />

import type { Session, SessionData } from "@remix-run/node";

interface AppLoadContextBase {
  session: Session<SessionData, SessionData>;
}

// Exports for both @remix-run/node and @remix-run/server-runtime are needed
// because app projects end up using the /node version and libraries /server-runtime one.
// With only one of them, the other one one or the other project is missing the types.
declare module "@remix-run/node" {
  export interface AppLoadContext extends AppLoadContextBase {}
}

declare module "@remix-run/server-runtime" {
  export interface AppLoadContext extends AppLoadContextBase {}
}

I then import it in global.d.ts in apps and other libraries as such:

import "@scope/server/global.d.ts";

Probably this should be in the documentation. If so, I'll be able to write it in couple of weeks as I'll be offline 😄

[DovydasNavickas]

Would be nice to get a "yay" or "nay" on whether documentation should be updated or I'm missing something 😄