Remix v2 updates and other fixes

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+	"extends": ["./node_modules/@itsmapleleaf/configs/eslint.config.cjs"],
+	"plugins": ["prettier"],
+	"ignorePatterns": ["**/node_modules/**", "**/dist/**", "**/build/**"],
+	"parserOptions": {
+		"EXPERIMENTAL_useProjectService": true
+	},
+	"rules": {
+		"prettier/prettier": "error",
+		"@typescript-eslint/no-var-requires": "off",
+		"@typescript-eslint/no-misused-promises": [
+			"error",
+			{
+				"checksVoidReturn": false
+			}
+		]
+	},
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	}
+}

.github/actions/pnpm-install-cached/action.yml

@@ -0,0 +1,18 @@
+name: PNPM Install with Cache
+description: Setup pnpm and install dependencies, caches node_modules
+runs:
+  using: composite
+  steps:
+    - uses: actions/cache@v3
+      with:
+        path: node_modules
+        key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 8
+    - uses: actions/setup-node@v3
+      with:
+        node-version: "lts/*"
+        cache: "pnpm"
+    - shell: bash
+      run: pnpm install --frozen-lockfile

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: test
+name: tests
 
 on:
   push:
@@ -13,49 +13,27 @@ concurrency:
 
 jobs:
   test:
-    name: Test (${{ matrix.os }})
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
+    name: test (${{ matrix.os }})
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          # https://github.com/actions/setup-node#supported-version-syntax
-          node-version: "lts/*"
-          cache: "pnpm"
-      - name: Install
-        run: pnpm install
-      - name: Test
-        uses: coactions/setup-xvfb@v1
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/pnpm-install-cached
+      - uses: coactions/setup-xvfb@v1
         with:
           run: pnpm test
 
   lint:
-    name: Lint
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - name: Setup Node
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/pnpm-install-cached
+      - run: pnpm run lint
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        if: ${{ always() }}
+        continue-on-error: true
         with:
-          # https://github.com/actions/setup-node#supported-version-syntax
-          node-version: "lts/*"
-          cache: "pnpm"
-      - name: Install
-        run: pnpm install
-      - name: Lint
-        run: pnpm run lint
+          commit_message: "ci: lint fix"

.npmrc

@@ -1,2 +1 @@
-shamefully-hoist = true
 ignore-workspace-root-check = true

README.md

@@ -14,77 +14,75 @@ npx degit itsMapleLeaf/remix-electron/template my-desktop-app
 
 ### Adding to an existing Remix project
 
-Install remix-electron and peer dependencies:
+Install remix-electron and electron:
 
 ```bash
-npm i remix-electron electron @remix-run/node @remix-run/server-runtime react react-dom
+npm i remix-electron electron
 ```
 
-Add a file at `desktop/main.js` to run the electron app. The `initRemix` function returns a url to load in the browser window.
+Add a file at `desktop/index.js` to run the electron app. The `initRemix` function returns a url to load in the browser window.
 
 ```ts
-// desktop/main.js
+// desktop/index.js
 const { initRemix } = require("remix-electron")
 const { app, BrowserWindow } = require("electron")
 const { join } = require("node:path")
 
+/** @type {BrowserWindow | undefined} */
 let win
 
 app.on("ready", async () => {
-  try {
-    const url = await initRemix({
-      serverBuild: join(__dirname, "build"),
-    })
-
-    win = new BrowserWindow({ show: false })
-    await win.loadURL(url)
-    win.show()
-  } catch (error) {
-    console.error(error)
-  }
+	try {
+		const url = await initRemix({
+			serverBuild: join(__dirname, "../build/index.js"),
+		})
+
+		win = new BrowserWindow({ show: false })
+		await win.loadURL(url)
+		win.show()
+	} catch (error) {
+		console.error(error)
+	}
 })
 ```
 
-Update `serverBuildPath` in your Remix config:
-
-```js
-// remix.config.js
-/**
- * @type {import('@remix-run/dev/config').AppConfig}
- */
-module.exports = {
-  serverBuildPath: "desktop/build/index.js",
-  // ...
-}
-```
-
-Build the app with `npm run build`, then run `npx electron desktop/main.js` to start the app! 🚀
+Build the app with `npm run build`, then run `npx electron desktop/index.js` to start the app! 🚀
 
 ## Using Electron APIs
 
 Importing `"electron"` directly in route files results in Electron trying to get bundled and called in the browser / renderer process.
 
 To circumvent this, create a `electron.server.ts` file, which re-exports from electron. The `.server` suffix tells Remix to only load it in the main process. You should use `.server` for any code that runs in the main process and uses node/electron APIs.
 
-```js
+```ts
 // app/electron.server.ts
-// @ts-nocheck
 import electron from "electron"
-export = electron
+export default electron
+```
+
+```ts
+// app/routes/_index.tsx
+import electron from "~/electron.server"
+
+export function loader() {
+	return {
+		userDataPath: electron.app.getPath("userData"),
+	}
+}
 ```
 
 Likewise, for any code running in the renderer process, e.g. using the [clipboard](https://www.electronjs.org/docs/latest/api/clipboard) module, you can use the `.client` suffix. Renderer process modules require `nodeIntegration`.
 
-```js
-// desktop/main.ts
+```ts
+// desktop/index.js
 function createWindow() {
-  // ...
-  win = new BrowserWindow({
-    // ...
-    webPreferences: {
-      nodeIntegration: true,
-    },
-  })
+	// ...
+	win = new BrowserWindow({
+		// ...
+		webPreferences: {
+			nodeIntegration: true,
+		},
+	})
 }
 ```
 
@@ -110,29 +108,29 @@ Options:
 **app/context.ts**
 
 ```ts
-import type * as remix from "@remix-run/server-runtime"
+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**
 
 ```ts
 const url = await initRemix({
-  // ...
+	// ...
 
-  /** @type {import("~/context").LoadContext} */
-  getLoadContext: () => ({
-    secret: "123",
-  }),
+	/** @type {import("~/context").LoadContext} */
+	getLoadContext: () => ({
+		secret: "123",
+	}),
 })
 ```
 
@@ -142,7 +140,7 @@ In a route file:
 import type { DataFunctionArgs, LoadContext } from "~/context"
 
 export async function loader({ context }: DataFunctionArgs) {
-  // do something with context
+	// do something with context
 }
 ```
 

knip.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "./node_modules/knip/schema.json",
+	"workspaces": {
+		".": {
+			"vitest": {
+				"config": ["vitest.config.mts"],
+				"entry": ["**/*.test.?(c|m)[jt]s?(x)"]
+			},
+			"ignoreDependencies": ["basic"]
+		},
+		"template": {
+			"ignoreDependencies": ["isbot", "nodemon"]
+		}
+	}
+}