support load context

Author: itsMapleLeaf

README.md

@@ -84,7 +84,7 @@ function createWindow() {
 
 ## API
 
-### `initRemix({ remixConfig[, mode] })`
+### `initRemix({ remixConfig[, mode, getLoadContext] })`
 
 Initializes remix-electron. Returns a promise with a url to load in the browser window.
 
@@ -94,6 +94,52 @@ Options:
 
 - `mode`: The mode the app is running in. Can be `"development"` or `"production"`. Defaults to `"production"` when packaged, otherwise uses `process.env.NODE_ENV`.
 
+- `getLoadContext`: Use this to inject some value into all of your remix loaders, e.g. an API client. The loaders receive it as `context`
+
+<details>
+<summary>Load context TS example</summary>
+
+**app/context.ts**
+
+```ts
+import type * as remix from "@remix-run/server-runtime"
+
+// your context type
+export type LoadContext = {
+  secret: string
+}
+
+// a custom data function args type to use for loaders/actions
+export type DataFunctionArgs = Omit<remix.DataFunctionArgs, "context"> & {
+  context: LoadContext
+}
+```
+
+**desktop/main.js**
+
+```ts
+const url = await initRemix({
+  remixConfig,
+
+  /** @returns {import("~/context").LoadContext} */
+  getLoadContext: () => ({
+    secret: "123",
+  }),
+})
+```
+
+In some route file:
+
+```ts
+import type { LoadContext } from "~/context"
+
+export async function loader({ context }: DataFunctionArgs) {
+  // do something with context
+}
+```
+
+</details>
+
 ## Motivation
 
 Electron has [a comprehensive list of security recommendations](https://www.electronjs.org/docs/latest/tutorial/security) to follow when building an app, especially if that app interacts with the web. Which includes, but is not limited to:

src/main.ts

@@ -19,12 +19,14 @@ export type InitRemixOptions = {
   mode?: "development" | "production"
   publicFolder?: string
   remixConfig: AppConfig
+  getLoadContext?: (request: Electron.ProtocolRequest) => unknown
 }
 
 export async function initRemix({
   remixConfig,
   mode = defaultMode,
   publicFolder = "public",
+  getLoadContext,
 }: InitRemixOptions) {
   await app.whenReady()
 
@@ -43,7 +45,8 @@ export async function initRemix({
         return
       }
 
-      callback(await serveRemixResponse(request, mode, remixConfig))
+      const context = await getLoadContext?.(request)
+      callback(await serveRemixResponse(request, mode, remixConfig, context))
     } catch (error) {
       callback({
         statusCode: 500,
@@ -85,6 +88,7 @@ async function serveRemixResponse(
   request: Electron.ProtocolRequest,
   mode: "development" | "production",
   remixConfig: AppConfig,
+  context?: unknown,
 ): Promise<Electron.ProtocolResponse> {
   const init: RequestInit = {
     method: request.method,
@@ -105,7 +109,7 @@ async function serveRemixResponse(
 
   const build = require(serverBuildFolder)
   const handleRequest = createRequestHandler(build, {}, mode)
-  const response = await handleRequest(remixRequest)
+  const response = await handleRequest(remixRequest, context)
 
   return {
     data: Buffer.from(await response.arrayBuffer()),

tests/context.test.ts

@@ -0,0 +1,4 @@
+import {} from "electron"
+import { test } from "vitest"
+
+test.todo("load context")