Add ESM support

README.md

@@ -24,26 +24,26 @@ Add a file at `desktop/index.js` to run the electron app. The `initRemix` functi
 
 ```ts
 // desktop/index.js
-const { initRemix } = require("remix-electron")
-const { app, BrowserWindow } = require("electron")
-const { join } = require("node:path")
+const { initRemix } = require("remix-electron");
+const { app, BrowserWindow } = require("electron");
+const { join } = require("node:path");
 
 /** @type {BrowserWindow | undefined} */
-let win
+let win;
 
 app.on("ready", async () => {
  try {
  const url = await initRemix({
- serverBuild: join(__dirname, "../build/index.js"),
- })
+ serverBuild: join(process.cwd(), "build/index.js"),
+ });
 
- win = new BrowserWindow({ show: false })
- await win.loadURL(url)
- win.show()
+ win = new BrowserWindow({ show: false });
+ await win.loadURL(url);
+ win.show();
  } catch (error) {
- console.error(error)
+ console.error(error);
  }
-})
+});
 ```
 
 Build the app with `npm run build`, then run `npx electron desktop/index.js` to start the app! 🚀
@@ -56,18 +56,18 @@ To circumvent this, create a `electron.server.ts` file, which re-exports from el
 
 ```ts
 // app/electron.server.ts
-import electron from "electron"
-export default electron
+import electron from "electron";
+export default electron;
 ```
 
 ```ts
 // app/routes/_index.tsx
-import electron from "~/electron.server"
+import electron from "~/electron.server";
 
 export function loader() {
  return {
  userDataPath: electron.app.getPath("userData"),
- }
+ };
 }
 ```
 
@@ -82,7 +82,7 @@ function createWindow() {
  webPreferences: {
  nodeIntegration: true,
  },
- })
+ });
 }
 ```
 
@@ -94,31 +94,33 @@ Initializes remix-electron. Returns a promise with a url to load in the browser
 
 Options:
 
-- `serverBuild`: The path to your server build (e.g. `path.join(__dirname, 'build')`), or the server build itself (e.g. required from `@remix-run/dev/server-build`). Updates on refresh are only supported when passing a path string.
+- `serverBuild`: The path to your server build (e.g. `path.join(process.cwd(), 'build')`), or the server build itself (e.g. required from `@remix-run/dev/server-build`). Updates on refresh are only supported when passing a path string.
 
 - `mode`: The mode the app is running in. Can be `"development"` or `"production"`. Defaults to `"production"` when packaged, otherwise uses `process.env.NODE_ENV`.
 
-- `publicFolder`: The folder where static assets are served from, including your browser build. Defaults to `"public"`. Non-relative paths are resolved relative to `app.getAppPath()`.
+- `publicFolder`: The folder where static assets are served from, including your browser build. Defaults to `"public"`. Non-absolute paths are resolved relative to `process.cwd()`.
+
+- `getLoadContext`: Use this to inject some value into all of your remix loaders, e.g. an API client. The loaders receive it as `context`.
 
-- `getLoadContext`: Use this to inject some value into all of your remix loaders, e.g. an API client. The loaders receive it as `context`
+- `esm`: Set this to `true` to use remix-electron in an ESM application.
 
 <details>
 <summary>Load context TS example</summary>
 
 **app/context.ts**
 
 ```ts
-import type * as remix from "@remix-run/node"
+import type * as remix from "@remix-run/node";
 
 // your context type
 export type LoadContext = {
- secret: string
-}
+ secret: string;
+};
 
 // a custom data function args type to use for loaders/actions
 export type DataFunctionArgs = Omit<remix.DataFunctionArgs, "context"> & {
- context: LoadContext
-}
+ context: LoadContext;
+};
 ```
 
 **desktop/main.js**
@@ -131,13 +133,13 @@ const url = await initRemix({
  getLoadContext: () => ({
  secret: "123",
  }),
-})
+});
 ```
 
 In a route file:
 
 ```ts
-import type { DataFunctionArgs, LoadContext } from "~/context"
+import type { DataFunctionArgs, LoadContext } from "~/context";
 
 export async function loader({ context }: DataFunctionArgs) {
  // do something with context

knip.jsonc

@@ -16,6 +16,9 @@
  "workspaces/tests": {},
  "workspaces/test-app": {
  "ignoreDependencies": ["isbot", "nodemon"]
+ },
+ "workspaces/test-app-esm": {
+ "ignoreDependencies": ["isbot", "nodemon"]
  }
  }
 }

workspaces/remix-electron/src/index.mts

@@ -4,7 +4,7 @@ import * as webFetch from "@remix-run/web-fetch"
 // if we override everything else, we get errors caused by the mismatch of built-in types and remix types
 global.File = webFetch.File
 
-import { watch } from "node:fs/promises"
+import { constants, access, watch } from "node:fs/promises"
 import type { AppLoadContext, ServerBuild } from "@remix-run/node"
 import { broadcastDevReady, createRequestHandler } from "@remix-run/node"
 import { app, protocol } from "electron"
@@ -25,6 +25,7 @@ interface InitRemixOptions {
  mode?: string
  publicFolder?: string
  getLoadContext?: GetLoadContextFunction
+ esm?: boolean
 }
 
 /**
@@ -38,18 +39,29 @@ export async function initRemix({
  mode,
  publicFolder: publicFolderOption = "public",
  getLoadContext,
+ esm = typeof require === "undefined",
 }: InitRemixOptions): Promise<string> {
- const appRoot = app.getAppPath()
- const publicFolder = asAbsolutePath(publicFolderOption, appRoot)
+ const publicFolder = asAbsolutePath(publicFolderOption, process.cwd())
+
+ if (
+ !(await access(publicFolder, constants.R_OK).then(
+ () => true,
+ () => false,
+ ))
+ ) {
+ throw new Error(
+ `Public folder ${publicFolder} does not exist. Make sure that the initRemix \`publicFolder\` option is configured correctly.`,
+ )
+ }
 
  const buildPath =
- typeof serverBuildOption === "string"
- ? require.resolve(serverBuildOption)
- : undefined
+ typeof serverBuildOption === "string" ? serverBuildOption : undefined
 
  let serverBuild =
- typeof serverBuildOption === "string"
- ? /** @type {ServerBuild} */ require(serverBuildOption)
+ typeof buildPath === "string"
+ ? /** @type {ServerBuild} */ await import(
+ esm ? `${buildPath}?${Date.now()}` : buildPath
+ )
  : serverBuildOption
 
  await app.whenReady()
@@ -95,9 +107,13 @@ export async function initRemix({
  ) {
  void (async () => {
  for await (const _event of watch(buildPath)) {
- purgeRequireCache(buildPath)
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
- serverBuild = require(buildPath)
+ if (esm) {
+ serverBuild = await import(`${buildPath}?${Date.now()}`)
+ } else {
+ purgeRequireCache(buildPath)
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ serverBuild = require(buildPath)
+ }
  await broadcastDevReady(serverBuild)
  }
  })()

workspaces/test-app-esm/.gitignore

@@ -0,0 +1,3 @@
+/build
+/public/build
+.cache

workspaces/test-app-esm/app/electron.server.ts

@@ -0,0 +1,2 @@
+import electron from "electron"
+export default electron

workspaces/test-app-esm/app/root.tsx

@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node"
+import {
+ Links,
+ LiveReload,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "@remix-run/react"
+
+export const meta: MetaFunction = () => {
+ return [{ title: "New Remix App" }]
+}
+
+export default function App() {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ <Outlet />
+ <ScrollRestoration />
+ <Scripts />
+ {process.env.NODE_ENV === "development" && <LiveReload />}
+ </body>
+ </html>
+ )
+}

workspaces/test-app-esm/app/routes/_index.tsx

@@ -0,0 +1,27 @@
+import { useLoaderData } from "@remix-run/react"
+import { useState } from "react"
+import electron from "~/electron.server"
+
+export function loader() {
+ return {
+ userDataPath: electron.app.getPath("userData"),
+ }
+}
+
+export default function Index() {
+ const data = useLoaderData<typeof loader>()
+ const [count, setCount] = useState(0)
+ return (
+ <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+ <h1>Welcome to Remix</h1>
+ <p data-testid="user-data-path">{data.userDataPath}</p>
+ <button
+ type="button"
+ data-testid="counter"
+ onClick={() => setCount(count + 1)}
+ >
+ {count}
+ </button>
+ </div>
+ )
+}

workspaces/test-app-esm/app/routes/multipart-uploads.tsx

@@ -0,0 +1,36 @@
+import {
+ type ActionFunctionArgs,
+ NodeOnDiskFile,
+ json,
+ unstable_createFileUploadHandler,
+ unstable_parseMultipartFormData,
+} from "@remix-run/node"
+import { Form, useActionData } from "@remix-run/react"
+
+export async function action({ request }: ActionFunctionArgs) {
+ const formData = await unstable_parseMultipartFormData(
+ request,
+ unstable_createFileUploadHandler(),
+ )
+
+ const file = formData.get("file")
+ if (!(file instanceof NodeOnDiskFile)) {
+ throw new Error("No file uploaded")
+ }
+
+ const text = await file.text()
+ return json({ text })
+}
+
+export default function MultipartUploadsTest() {
+ const data = useActionData<typeof action>()
+ return (
+ <>
+ <Form method="post" encType="multipart/form-data">
+ <input type="file" name="file" />
+ <button type="submit">Submit</button>
+ </Form>
+ <p data-testid="result">{data?.text}</p>
+ </>
+ )
+}

workspaces/test-app-esm/app/routes/referrer-redirect.action.tsx

@@ -0,0 +1,13 @@
+import type { ActionFunction } from "@remix-run/node"
+import { redirect } from "@remix-run/node"
+
+export const action: ActionFunction = async ({ request }) => {
+ const { redirects } = Object.fromEntries(await request.formData())
+ const referrer = request.headers.get("referer")
+ if (!referrer) {
+ throw new Error("No referrer header")
+ }
+ const url = new URL(referrer)
+ url.searchParams.set("redirects", String(Number(redirects) + 1))
+ return redirect(url.toString())
+}

workspaces/test-app-esm/app/routes/referrer-redirect.form.tsx

@@ -0,0 +1,21 @@
+import { useFetcher, useSearchParams } from "@remix-run/react"
+
+export default function RedirectForm() {
+ const fetcher = useFetcher()
+ const [params] = useSearchParams()
+ const redirects = params.get("redirects")
+ return (
+ <>
+ <p data-testid="redirects">{redirects ?? 0}</p>
+ <fetcher.Form
+ action="/referrer-redirect/action"
+ method="post"
+ data-testid="referrer-form"
+ >
+ <button type="submit" name="redirects" value={redirects ?? 0}>
+ submit
+ </button>
+ </fetcher.Form>
+ </>
+ )
+}