@witchcraft/nuxt-electron 0.0.12 → 0.2.0

package/src/runtime/electron/createProxiedProtocolHandler.ts

@@ -0,0 +1,229 @@
+import { keys } from "@alanscodelog/utils/keys"
+import { pick } from "@alanscodelog/utils/pick"
+import type { Protocol } from "electron"
+import { net } from "electron"
+import fs from "node:fs/promises"
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+
+
+const cache = new Map<string, string | undefined>()
+
+async function getPathToServe(
+	originalPath: string,
+	pathWithIndexHtml: string,
+	/** Usually the request url */
+	key: string,
+	logger?: {
+		trace: (...args: any[]) => void
+	}
+) {
+	if (cache.has(key)) {
+		const result = cache.get(key)
+		if (logger) {
+			logger.trace({
+				ns: "main:createProxiedProtocolHandler:cacheHit",
+				requestUrl: key,
+				result: cache.get(key)
+			})
+		}
+		return result
+	}
+	const stats = await fs.stat(originalPath).catch(() => undefined)
+
+
+	if (logger) {
+		logger.trace({
+			ns: "main:createProxiedProtocolHandler:stats",
+			key,
+			stats,
+			isFile: stats?.isFile(),
+			isDirectory: stats?.isDirectory()
+		})
+	}
+	// if file exists get the file, if path/index.html exists get that
+	const pathToServe = stats !== undefined
+		? stats.isFile()
+			? originalPath
+			: stats.isDirectory()
+				? (await fs.stat(pathWithIndexHtml).catch(() => undefined))?.isFile()
+						? pathWithIndexHtml
+						: undefined
+				: undefined
+		: undefined
+	cache.set(key, pathToServe)
+	return pathToServe
+}
+export function createProxiedProtocolHandler(
+	/** `protocol` or `session.protocol` depending on if you're using paritions with your windows or not, regular `protocol` only registers the handler for the default parition. */
+	protocol: Protocol,
+	protocolName: string = "app",
+	basePath: string,
+	/**
+	 * If any route starts with one of these keys, it will get rerouted to the given value.
+	 *
+	 * At least `/api` should be added for a basic nuxt app to work correctly.
+	 *
+	 *
+	 * ```ts
+	 * routeProxies: {
+	 * 	"/api": "http://localhost:3000/api",
+	 * }
+	 * ```
+	 */
+	routeProxies: Record<string, string>,
+	{
+		logger,
+		errorPage = "404.html"
+	}: {
+		/**
+		 * Optional logger. It's suggested you not pass this unless you're traceging in dev mode as a lot of requests can be made.
+		 */
+		logger?: {
+			trace: (...args: any[]) => void
+			error: (...args: any[]) => void
+		}
+
+		/**
+		 * The path to the error page. Defaults to "/404.html".
+		 *
+		 * The module forces nuxt to generate it as it's not rendered in build mode. This is only used for 404 errors. The 400 error for bad requests still just returns Bad Request for now. This might become more flexible in the future.
+		 */
+		errorPage?: string
+
+	} = {}
+): void {
+	const routeProxyKeys = keys(routeProxies)
+	if (protocol.isProtocolHandled(protocolName)) {
+		throw new Error(`Protocol ${protocolName} is already handled.`)
+	}
+	if (routeProxyKeys.length > 0) {
+		if (!process.env.PUBLIC_SERVER_URL && !process.env.VITE_DEV_URL && !process.env.PUBLIC_SERVER_URL) {
+			throw new Error("You defined proxy routes but didn't set PUBLIC_SERVER_URL or VITE_DEV_URL set. This is required for the /api routes to work.")
+		}
+	}
+
+	let errorPage404: string | undefined
+	// note that while it would be nice to do protocol.isProtocolRegistered
+	// to check the user correctly registered it
+	// it's deprecated for some reason and also it doesn't work (so maybe because of that)!
+	protocol.handle(protocolName, async request => {
+		errorPage404 ??= await getPathToServe(path.join(basePath, errorPage), "404.html", "404.html", logger)
+
+		if (!errorPage404) {
+			throw new Error(`Error page ${path.join(basePath, errorPage)} does not exist. Did you override the routeRules for it?`)
+		}
+
+		const parsedUrl = new URL(request.url)
+		// we can ignore the host, as getPaths sets it to bundle (e.g. protocol://bundle/path/to/file)
+		const requestPath = decodeURIComponent(parsedUrl.pathname)
+
+		const proxyKey = routeProxyKeys.find(key => requestPath.startsWith(key))
+
+		if (proxyKey) {
+			const proxyUrl = routeProxies[proxyKey]
+			const finalPath = proxyUrl + requestPath
+			if (logger) {
+				logger.trace({
+					ns: "main:createProxiedProtocolHandler:fetchingViaProxy",
+					requestUrl: request.url,
+					proxyKey,
+					route: proxyUrl,
+					requestPath,
+					finalPath
+				})
+			}
+			return net.fetch(finalPath, {
+				...pick(request, ["headers", "destination", "referrer", "referrerPolicy", "mode", "credentials", "cache", "redirect", "integrity", "keepalive"])
+			})
+		}
+
+		const originalPath = path.join(basePath, requestPath)
+		const pathWithIndexHtml = path.join(originalPath, "index.html")
+
+		// the safety checks are modified from this example
+		// https://www.electronjs.org/docs/latest/api/protocol#protocolhandlescheme-handler
+		const relativePath = path.relative(basePath, originalPath)
+		const isSafe = !relativePath.startsWith("..") && !path.isAbsolute(relativePath)
+
+		if (!isSafe) {
+			if (logger) {
+				logger.error({
+					ns: "main:createProxiedProtocolHandler:badRequest",
+
+					request: pick(request, [
+						"url", "headers", "destination", "referrer", "referrerPolicy", "mode", "credentials", "cache", "redirect", "integrity", "keepalive",
+						// these also seem to exist
+						...(["isReloadNavigation", "isHistoryNavigation"] as any)
+					]),
+					requestPath,
+					pathWithIndexHtml,
+					relativePath,
+					originalPath,
+					isSafe
+				})
+			}
+
+			return new Response(JSON.stringify({
+				error: "Bad Request - Unsafe Path"
+			}), {
+				headers: { "content-type": "application/json" },
+				status: 400
+			})
+		}
+
+
+		const pathToServe = await getPathToServe(originalPath, pathWithIndexHtml, request.url, logger)
+
+		if (!pathToServe) {
+			if (logger) {
+				logger.error({
+					ns: "main:createProxiedProtocolHandler:noFileFound",
+					requestUrl: request.url,
+					originalPath,
+					requestPath,
+					pathWithIndexHtml,
+					pathToServe,
+					errorPath: pathToFileURL(errorPage404).toString()
+				})
+			}
+			const res = await net.fetch(pathToFileURL(errorPage404).toString(), {
+				// see below
+				bypassCustomProtocolHandlers: true
+			})
+				.catch(err => err)
+			return res
+		}
+
+		const finalPath = pathToFileURL(pathToServe).toString()
+		if (logger) {
+			logger.trace({
+				ns: "main:createProxiedProtocolHandler:fetchingFile",
+				requestUrl: request.url,
+				finalPath,
+				requestPath,
+				originalPath
+			})
+		}
+
+		const response = await net.fetch(finalPath, {
+			// avoid infinite loop if protocolName protocol is "file"
+			// or file is otherwise handled
+			bypassCustomProtocolHandlers: true
+		}).catch(err => {
+			if (logger) {
+				logger.error({
+					ns: "main:createProxiedProtocolHandler:fetchError",
+					requestUrl: request.url,
+					finalPath,
+					requestPath,
+					originalPath,
+					err
+				})
+			}
+			return err
+		})
+
+		return response
+	})
+}

package/src/runtime/electron/getPaths.ts

@@ -1,49 +1,47 @@
 import { unreachable } from "@alanscodelog/utils/unreachable"
-import { app } from "electron"
 import path from "node:path"
+import { fileURLToPath } from "node:url"
 
 import { STATIC } from "./static.js"
 
-export function forceRelativePath(filepath: string): string {
-	return path.join(`.${path.sep}`, filepath)
-}
-
 /**
  * Calculates the correct paths for the app to run in electron.
  *
- * Note: For serverUrl to not be overridable in production, you should set `electron.additionalElectronVariables.publicServerUrl` to a quoted string.
  *
- * ```ts[nuxt.config.ts]
- * export default defineNuxtConfig({
- * 	modules: [
- * 		"@witchcraft/nuxt-electron",
- * 	],
- * 	electron: {
- * 		additionalElectronVariables: {
- * 			publicServerUrl: process.env.NODE_ENV === "production"
- * 			? `"mysite.com"`
- * 			: `undefined`
- * 		}
- * 	}
+ * Paths are not overridable in production unless you pass the variables that can override them.
+ *
+ * ```ts
+ * const paths = getPaths("app", {
+ * 	windowUrl: process.env.OVERRIDE_WINDOW_URL,
+ * 	publicServerUrl: process.env.OVERRIDE_PUBLIC_SERVER_URL
  * })
  * ```
  */
-export function getPaths(): {
+export function getPaths(
+	protocolName: string = "app",
+	overridingEnvs: Record<string, string | undefined> = {
+		windowUrl: undefined,
+		publicServerUrl: undefined
+	}
+): {
 	windowUrl: string
 	publicServerUrl: string
 	nuxtPublicDir: string
 	preloadPath: string
 } {
-	const rootDir = app.getAppPath()
-	const nuxtPublicDir = path.resolve(rootDir, forceRelativePath(STATIC.ELECTRON_NUXT_PUBLIC_DIR!))
+	// this will be the same in dev and prod and makes things simpler
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+	const nuxtPublicDir = path.join(__dirname, STATIC.ELECTRON_NUXT_PUBLIC_DIR!)
 
-	const preloadPath = path.resolve(rootDir, forceRelativePath(STATIC.ELECTRON_BUILD_DIR!), "./preload.cjs")
+	const preloadPath = path.join(__dirname, STATIC.ELECTRON_BUILD_DIR!, "./preload.cjs")
 
 	const base = {
 		nuxtPublicDir,
 		preloadPath,
-		publicServerUrl: (process.env.PUBLIC_SERVER_URL
-			// allows us to override it when previewing (VITE_DEV_URL is not available then)
+		publicServerUrl: (
+			overridingEnvs.publicServerUrl
 			?? process.env.PUBLIC_SERVER_URL
 			?? process.env.VITE_DEV_SERVER_URL)!
 	}
@@ -51,17 +49,24 @@ export function getPaths(): {
 		throw new Error("publicServerUrl could not be determined.")
 	}
 
-	if (process.env.VITE_DEV_SERVER_URL) {
+	if (overridingEnvs.windowUrl) {
+		return {
+			...base,
+			windowUrl: `${overridingEnvs.windowUrl}${STATIC.ELECTRON_ROUTE}`
+		}
+	}
+
+	if (process.env.NODE_ENV === "production" && process.env.VITE_DEV_SERVER_URL) {
 		return {
 			...base,
 			windowUrl: `${process.env.VITE_DEV_SERVER_URL}${STATIC.ELECTRON_ROUTE}`
 		}
 		// this will always be defined in production since they are defined by vite
-	} else if (STATIC.ELECTRON_PROD_URL && STATIC.ELECTRON_BUILD_DIR) {
+	} else if (STATIC.ELECTRON_PROD_URL !== undefined && STATIC.ELECTRON_BUILD_DIR !== undefined) {
 		return {
 			...base,
 			// careful, do not use path.join, it will remove extra slashes
-			windowUrl: `file://${STATIC.ELECTRON_PROD_URL}`
+			windowUrl: `${protocolName}://bundle/${STATIC.ELECTRON_PROD_URL}`
 		}
 	}
 	unreachable()

package/src/runtime/electron/index.ts

@@ -1,7 +1,8 @@
 export * from "./types"
 // note adding file endings breaks build types
 export { getPaths } from "./getPaths"
-export { createNuxtFileProtocolHandler } from "./createNuxtFileProtocolHandler"
+export { createProxiedProtocolHandler } from "./createProxiedProtocolHandler"
+export { createPrivilegedProtocolScheme } from "./createPrivilegedProtocolScheme"
 export { createWindowControlsApi } from "./createWindowControlsApi"
 export { createWindowControlsApiHandler } from "./createWindowControlsApiHandler"
 export { useNuxtRuntimeConfig } from "./useNuxtRuntimeConfig"

package/dist/runtime/electron/createNuxtFileProtocolHandler.d.ts

@@ -1,14 +0,0 @@
-export declare function createNuxtFileProtocolHandler(session: Electron.Session, basePath: string, 
-/**
- * If any route starts with one of these keys, it will get rerouted to the given value.
- *
- * At least `/api` should be added for a basic nuxt app to work correctly.
- *
- *
- * ```ts
- * routeProxies: {
- * 	"/api": "http://localhost:3000/api",
- * }
- * ```
- */
-routeProxies: Record<string, string>): void;

package/dist/runtime/electron/createNuxtFileProtocolHandler.js

@@ -1,20 +0,0 @@
-import { keys } from "@alanscodelog/utils/keys";
-import { net } from "electron";
-import path from "node:path";
-export function createNuxtFileProtocolHandler(session, basePath, routeProxies) {
-  const routeProxyKeys = keys(routeProxies);
-  session.protocol.handle("file", async (request) => {
-    const url = decodeURIComponent(request.url.slice(7));
-    const newUrl = path.isAbsolute(url) ? path.resolve(basePath, url.slice(1)) : path.resolve(basePath, url);
-    const proxyKey = routeProxyKeys.find((key) => url.startsWith(key));
-    if (proxyKey) {
-      const proxyUrl = routeProxies[proxyKey];
-      return net.fetch(proxyUrl + url);
-    }
-    const res = await net.fetch(`file://${newUrl}`, {
-      // avoid infinite loop
-      bypassCustomProtocolHandlers: true
-    }).catch((err) => new Response(err, { status: 404 }));
-    return res;
-  });
-}

package/src/runtime/electron/createNuxtFileProtocolHandler.ts

@@ -1,42 +0,0 @@
-import { keys } from "@alanscodelog/utils/keys"
-import { net } from "electron"
-import path from "node:path"
-
-export function createNuxtFileProtocolHandler(
-	session: Electron.Session,
-	basePath: string,
-	/**
-	 * If any route starts with one of these keys, it will get rerouted to the given value.
-	 *
-	 * At least `/api` should be added for a basic nuxt app to work correctly.
-	 *
-	 *
-	 * ```ts
-	 * routeProxies: {
-	 * 	"/api": "http://localhost:3000/api",
-	 * }
-	 * ```
-	 */
-	routeProxies: Record<string, string>
-): void {
-	const routeProxyKeys = keys(routeProxies)
-	session.protocol.handle("file", async request => {
-		const url = decodeURIComponent(request.url.slice(7))
-		const newUrl = path.isAbsolute(url)
-			? path.resolve(basePath, url.slice(1))
-			: path.resolve(basePath, url)
-
-		const proxyKey = routeProxyKeys.find(key => url.startsWith(key))
-
-		if (proxyKey) {
-			const proxyUrl = routeProxies[proxyKey]
-			return net.fetch(proxyUrl + url)
-		}
-
-		const res = await net.fetch(`file://${newUrl}`, {
-			// avoid infinite loop
-			bypassCustomProtocolHandlers: true
-		}).catch(err => new Response(err, { status: 404 }))
-		return res
-	})
-}