feat(service-preload): Embed service-inject

Embed the service-inject script into the service-preload script to avoid
having to load it manually and reduce IPC communication when a service
loads.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

18 files changed, 162 insertions, 138 deletions

diff --git a/.electron-builder.config.cjs b/.electron-builder.config.cjs
index 4340623..efd9ef7 100644
--- a/.electron-builder.config.cjs
+++ b/.electron-builder.config.cjs
@@ -15,7 +15,6 @@ const config = {
     'packages/main/dist/**',
     'packages/preload/dist/**',
     'packages/renderer/dist/**',
-    'packages/service-inject/dist/**',
     'packages/service-preload/dist/**',
     'locales/**',
     // Do not ship with source maps.
diff --git a/config/srcPlugin.js b/config/srcPlugin.js
new file mode 100644
index 0000000..13bee7b
--- /dev/null
+++ b/config/srcPlugin.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { readFile } from 'node:fs/promises';
+
+/** @type {string} */
+const PLUGIN_NAMESPACE = 'sophie-src';
+
+/** @type {RegExp} */
+// eslint-disable-next-line security/detect-non-literal-regexp -- Argument is const.
+const FILTER_REGEXP = new RegExp(`^${PLUGIN_NAMESPACE}:(.+)$`);
+
+/**
+ * An esbuild plugin that import the source of referenced file or package as a string.
+ *
+ * Prefix the imported file name with `sophie-src:` to import its source instead.
+ *
+ * @type { import('esbuild').Plugin }
+ */
+const srcPlugin = {
+  name: 'sophie-inline-service-inject-plugin',
+  setup(build) {
+    build.onResolve(
+      {
+        filter: FILTER_REGEXP,
+      },
+      async ({ path: pathToResolve, importer, resolveDir }) => {
+        const match = FILTER_REGEXP.exec(pathToResolve);
+        if (match === null) {
+          return {
+            path: '',
+            namespace: PLUGIN_NAMESPACE,
+            errors: [
+              {
+                text: `Could not resolve ${pathToResolve}`,
+              },
+            ],
+          };
+        }
+        const { path, errors, warnings } = await build.resolve(match[1], {
+          importer,
+          resolveDir,
+          kind: 'import-statement',
+        });
+        return {
+          path,
+          namespace: PLUGIN_NAMESPACE,
+          errors,
+          warnings,
+        };
+      },
+    );
+    build.onLoad(
+      {
+        filter: /./,
+        namespace: PLUGIN_NAMESPACE,
+      },
+      async ({ path }) => {
+        const src = await readFile(path, 'utf8');
+        return {
+          contents: `export default ${JSON.stringify(src)};`,
+        };
+      },
+    );
+  },
+};
+
+export default srcPlugin;
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
index 884643a..c72860d 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronViewFactory.ts
@@ -18,15 +18,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { readFile } from 'node:fs/promises';
-
-import { ServiceToMainIpcMessage } from '@sophie/service-shared';
-import { ipcMain, WebSource } from 'electron';
-
 import type MainStore from '../../../stores/MainStore';
 import type Profile from '../../../stores/Profile';
 import type Service from '../../../stores/Service';
-import { getLogger } from '../../../utils/log';
 import type Resources from '../../resources/Resources';
 import type UserAgents from '../UserAgents';
 import type { MainWindow, Partition, ServiceView, ViewFactory } from '../types';
@@ -35,37 +29,17 @@ import ElectronMainWindow from './ElectronMainWindow';
 import ElectronPartition from './ElectronPartition';
 import ElectronServiceView from './ElectronServiceView';
 
-const log = getLogger('ElectronViewFactory');
-
 export default class ElectronViewFactory implements ViewFactory {
   private readonly webContentsIdToServiceView = new Map<
     number,
     ElectronServiceView
   >();
 
-  private serviceInjectSource: WebSource | undefined;
-
   constructor(
     readonly userAgents: UserAgents,
     readonly resources: Resources,
     readonly devMode: boolean,
-  ) {
-    ipcMain.handle(ServiceToMainIpcMessage.ApiExposedInMainWorld, (event) => {
-      if (!this.webContentsIdToServiceView.has(event.sender.id)) {
-        log.error(
-          'Unexpected',
-          ServiceToMainIpcMessage.ApiExposedInMainWorld,
-          'IPC message from webContents',
-          event.sender.id,
-        );
-        throw new Error('Invalid IPC call');
-      }
-      if (this.serviceInjectSource === undefined) {
-        log.error('Service inject source was not loaded');
-      }
-      return this.serviceInjectSource;
-    });
-  }
+  ) {}
 
   async createMainWindow(store: MainStore): Promise<MainWindow> {
     const mainWindow = new ElectronMainWindow(store, this);
@@ -94,23 +68,12 @@ export default class ElectronViewFactory implements ViewFactory {
     throw new TypeError('Unexpected ProfileSession is not a WrappedSession');
   }
 
-  async loadServiceInject(): Promise<void> {
-    const injectPackage = 'service-inject';
-    const injectFile = 'index.js';
-    const injectPath = this.resources.getPath(injectPackage, injectFile);
-    this.serviceInjectSource = {
-      code: await readFile(injectPath, 'utf8'),
-      url: this.resources.getFileURL(injectPackage, injectFile),
-    };
-  }
-
   dispose(): void {
     if (this.webContentsIdToServiceView.size > 0) {
       throw new Error(
         'Must dispose all ServiceView instances before disposing ViewFactory',
       );
     }
-    ipcMain.removeHandler(ServiceToMainIpcMessage.ApiExposedInMainWorld);
   }
 
   unregisterServiceView(id: number): void {
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index e5b0fd6..1321048 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -31,8 +31,6 @@ export interface ViewFactory {
 
   createServiceView(service: Service, partition: Partition): ServiceView;
 
-  loadServiceInject(): Promise<void>;
-
   dispose(): void;
 }
 
diff --git a/packages/main/src/initReactions.ts b/packages/main/src/initReactions.ts
index 94b1f06..05bc205 100644
--- a/packages/main/src/initReactions.ts
+++ b/packages/main/src/initReactions.ts
@@ -71,7 +71,6 @@ export default async function initReactions(
     await devToolsLoaded;
     return viewFactory.createMainWindow(store);
   })();
-  await viewFactory.loadServiceInject();
   loadServices(store, viewFactory);
   store.setMainWindow(await mainWindow);
   return () => {
diff --git a/packages/service-inject/esbuild.config.js b/packages/service-inject/esbuild.config.js
index d8698ac..fbc3e55 100644
--- a/packages/service-inject/esbuild.config.js
+++ b/packages/service-inject/esbuild.config.js
@@ -10,4 +10,6 @@ export default getEsbuildConfig({
   platform: 'browser',
   target: chrome,
   sourcemap: 'inline',
+  // Absolute URL for displaying source map in the "Page" tab of devtools.
+  sourceRoot: 'sophie-internal://sophie/packages/service-inject/dist/',
 });
diff --git a/packages/service-inject/package.json b/packages/service-inject/package.json
index c045500..a9c6e08 100644
--- a/packages/service-inject/package.json
+++ b/packages/service-inject/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "types": "dist-types/index.d.ts",
+  "main": "dist/index.js",
   "scripts": {
     "typecheck:workspace": "yarn g:typecheck"
   },
diff --git a/packages/service-preload/esbuild.config.js b/packages/service-preload/esbuild.config.js
index 87e91d8..fb7359b 100644
--- a/packages/service-preload/esbuild.config.js
+++ b/packages/service-preload/esbuild.config.js
@@ -1,6 +1,7 @@
 import { chrome } from '../../config/buildConstants.js';
 import fileUrlToDirname from '../../config/fileUrlToDirname.js';
 import getEsbuildConfig from '../../config/getEsbuildConfig.js';
+import srcPlugin from '../../config/srcPlugin.js';
 
 export default getEsbuildConfig({
   absWorkingDir: fileUrlToDirname(import.meta.url),
@@ -10,5 +11,8 @@ export default getEsbuildConfig({
   platform: 'node',
   target: chrome,
   sourcemap: 'inline',
+  // Absolute URL for displaying source map in the "Content scripts" tab of devtools.
+  sourceRoot: 'sophie-internal://sophie/packages/service-preload/dist/',
   external: ['electron'],
+  plugins: [srcPlugin],
 });
diff --git a/packages/service-preload/package.json b/packages/service-preload/package.json
index 20925ae..9307c2f 100644
--- a/packages/service-preload/package.json
+++ b/packages/service-preload/package.json
@@ -8,6 +8,7 @@
     "typecheck:workspace": "yarn g:typecheck"
   },
   "dependencies": {
+    "@sophie/service-inject": "workspace:*",
     "@sophie/service-shared": "workspace:*",
     "color-string": "^1.9.0",
     "electron": "18.0.1"
diff --git a/packages/service-preload/src/index.ts b/packages/service-preload/src/index.ts
index a49a3a4..99d02ec 100644
--- a/packages/service-preload/src/index.ts
+++ b/packages/service-preload/src/index.ts
@@ -18,9 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ServiceToMainIpcMessage, WebSource } from '@sophie/service-shared';
 import colorString from 'color-string';
-import { ipcRenderer, webFrame } from 'electron';
+import { webFrame } from 'electron';
+// eslint-disable-next-line import/no-unresolved -- Synthetic import provided by an eslint plugin.
+import injectSource from 'sophie-src:@sophie/service-inject';
 
 const DEFAULT_BG_COLOR = '#fff';
 
@@ -79,35 +80,31 @@ if (webFrame.parent === null) {
 }
 
 /**
- * Fetches and executes the service inject script in the isolated world.
+ * Executes the service inject script in the isolated world.
  *
  * The service inject script relies on exposed APIs, so this function can only
  * be called after APIs have been exposed via `contextBridge` to the main world.
  *
- * We have to call `executeJavaScriptInIsolatedWorld` from the service preload script,
- * beause there is no way currently (electron 16) to execute a script on a
- * `WebFrameMain` in the main process by specifying a `WebSource`.
- * Calling `executeJavaScriptInInsolatedWorld` on a `WebContents` in the main process
- * will always inject the script into the _top-level_ frame, but here we
- * are injecting into the _current_ frame instead.
+ * We embed the source code of the inject script into the preload script
+ * with an esbuild plugin, so there is no need to fetch it separately.
+ *
  * As a tradeoff, the promise returned by `executeJavaScriptInIsolatedWorld`
  * will resolve to `unknown` (instead of rejecting) even if the injected script fails,
  * because chromium doesn't dispatch main world errors to isolated worlds.
  *
- * @return A promise that only rejects if we fail to fetch the inject script.
- * @see https://www.electronjs.org/docs/latest/api/web-frame#webframeexecutejavascriptinisolatedworldworldid-scripts-usergesture-callback
- * @see https://www.electronjs.org/docs/latest/api/web-frame-main#frameexecutejavascriptcode-usergesture
- * @see https://www.electronjs.org/docs/latest/api/web-contents#contentsexecutejavascriptinisolatedworldworldid-scripts-usergesture
+ * @return A promise that always resolves to `undefined`.
  */
 async function fetchAndExecuteInjectScript(): Promise<void> {
-  const apiExposedResponse: unknown = await ipcRenderer.invoke(
-    ServiceToMainIpcMessage.ApiExposedInMainWorld,
-  );
-  const injectSource = WebSource.parse(apiExposedResponse);
   // Isolated world 0 is the main world.
-  await webFrame.executeJavaScriptInIsolatedWorld(0, [injectSource]);
+  await webFrame.executeJavaScriptInIsolatedWorld(0, [
+    {
+      code: injectSource,
+    },
+  ]);
 }
 
 fetchAndExecuteInjectScript().catch((error) => {
-  console.error('Failed to fetch inject source:', error);
+  // This will never happen because of
+  // https://www.electronjs.org/docs/latest/api/web-frame#webframeexecutejavascriptinisolatedworldworldid-scripts-usergesture-callback
+  console.error('Failed to execute service inject:', error);
 });
diff --git a/packages/service-preload/tsconfig.json b/packages/service-preload/tsconfig.json
index 33ce1de..d7fb8cb 100644
--- a/packages/service-preload/tsconfig.json
+++ b/packages/service-preload/tsconfig.json
@@ -9,5 +9,10 @@
       "path": "../service-shared/tsconfig.build.json"
     }
   ],
-  "include": ["src/**/*.ts", ".eslintrc.cjs", "esbuild.config.js"]
+  "include": [
+    "src/**/*.ts",
+    "types/**/*.d.ts",
+    ".eslintrc.cjs",
+    "esbuild.config.js"
+  ]
 }
diff --git a/packages/service-preload/types/serviceInject.d.ts b/packages/service-preload/types/serviceInject.d.ts
new file mode 100644
index 0000000..236973e
--- /dev/null
+++ b/packages/service-preload/types/serviceInject.d.ts
@@ -0,0 +1,4 @@
+declare module 'sophie-src:@sophie/service-inject' {
+  const src: string;
+  export default src;
+}
diff --git a/packages/service-shared/src/index.ts b/packages/service-shared/src/index.ts
index a2e5ee5..5165fe5 100644
--- a/packages/service-shared/src/index.ts
+++ b/packages/service-shared/src/index.ts
@@ -20,4 +20,4 @@
 
 export { MainToServiceIpcMessage, ServiceToMainIpcMessage } from './ipc';
 
-export { UnreadCount, WebSource } from './schemas';
+export { UnreadCount } from './schemas';
diff --git a/packages/service-shared/src/ipc.ts b/packages/service-shared/src/ipc.ts
index e0a8755..4ead5bd 100644
--- a/packages/service-shared/src/ipc.ts
+++ b/packages/service-shared/src/ipc.ts
@@ -21,6 +21,5 @@
 export enum MainToServiceIpcMessage {}
 
 export enum ServiceToMainIpcMessage {
-  ApiExposedInMainWorld = 'sophie-service-to-main:api-exposed-in-main-world',
   SetUnreadCount = 'sophie-service-to-main:set-unread-count',
 }
diff --git a/packages/service-shared/src/schemas.ts b/packages/service-shared/src/schemas.ts
index bb1926f..799faac 100644
--- a/packages/service-shared/src/schemas.ts
+++ b/packages/service-shared/src/schemas.ts
@@ -31,15 +31,3 @@ export const UnreadCount = /* @__PURE__ */ (() =>
   Intentionally naming the type the same as the schema definition.
 */
 export type UnreadCount = z.infer<typeof UnreadCount>;
-
-export const WebSource = /* @__PURE__ */ (() =>
-  z.object({
-    code: z.string(),
-    url: z.string().nonempty(),
-  }))();
-
-/*
-  eslint-disable-next-line @typescript-eslint/no-redeclare --
-  Intentionally naming the type the same as the schema definition.
-*/
-export type WebSource = z.infer<typeof WebSource>;
diff --git a/scripts/build.js b/scripts/build.js
index 66a1506..eb0e8a3 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -37,12 +37,9 @@ function buildAll() {
     Promise.all([buildServiceShared, buildShared]).then(() =>
       buildPackageEsbuild('main'),
     ),
-    buildServiceShared.then(() =>
-      Promise.all([
-        buildPackageEsbuild('service-inject'),
-        buildPackageEsbuild('service-preload'),
-      ]),
-    ),
+    buildServiceShared
+      .then(() => buildPackageEsbuild('service-inject'))
+      .then(() => buildPackageEsbuild('service-preload')),
     buildShared.then(() =>
       Promise.all([
         buildPackageEsbuild('preload'),
diff --git a/scripts/watch.js b/scripts/watch.js
index 9cd65c8..3c3a8fd 100644
--- a/scripts/watch.js
+++ b/scripts/watch.js
@@ -1,6 +1,5 @@
 import { spawn } from 'node:child_process';
 import path from 'node:path';
-import { exit, kill } from 'node:process';
 
 import { watch } from 'chokidar';
 import electronPath from 'electron';
@@ -21,6 +20,12 @@ const serviceSharedModule = path.join(
   '../packages/service-shared/dist/index.mjs',
 );
 
+/** @type {string} */
+const serviceInjectModule = path.join(
+  thisDir,
+  '../packages/service-inject/dist/index.js',
+);
+
 /** @type {RegExp[]} */
 const stderrIgnorePatterns = [
   // warning about devtools extension
@@ -111,50 +116,6 @@ async function setupEsbuildWatcher(packageName, extraPaths, callback) {
 }
 
 /**
- * @param {string} packageName
- * @returns {Promise<import('vite').ViteDevServer>}
- */
-async function setupDevServer(packageName) {
-  const viteDevServer = await createServer({
-    build: {
-      watch: {
-        skipWrite: true,
-        clearScreen: false,
-      },
-    },
-    configFile: path.join(thisDir, `../packages/${packageName}/vite.config.js`),
-  });
-  await viteDevServer.listen();
-  return viteDevServer;
-}
-
-/**
- * @param {(event: import('vite').HMRPayload) => void} sendEvent
- * @returns {Promise<void>}
- */
-function setupPreloadPackageWatcher(sendEvent) {
-  return setupEsbuildWatcher('preload', [sharedModule], () => {
-    sendEvent({
-      type: 'full-reload',
-    });
-  });
-}
-
-/**
- * @param {string} packageName
- * @param {(event: import('vite').HMRPayload) => void} sendEvent
- * @returns {Promise<void>}
- */
-function setupServicePackageWatcher(packageName, sendEvent) {
-  return setupEsbuildWatcher(packageName, [serviceSharedModule], () => {
-    sendEvent({
-      type: 'custom',
-      event: 'sophie:reload-services',
-    });
-  });
-}
-
-/**
  * @param {import('vite').ViteDevServer} viteDevServer
  * @returns {Promise<void>}
  */
@@ -280,7 +241,16 @@ async function setupDevEnvironment() {
    * @returns {Promise<void>}
    */
   async function startDevServer() {
-    viteDevServer = await setupDevServer('renderer');
+    viteDevServer = await createServer({
+      build: {
+        watch: {
+          skipWrite: true,
+          clearScreen: false,
+        },
+      },
+      configFile: path.join(thisDir, `../packages/renderer/vite.config.js`),
+    });
+    await viteDevServer.listen();
   }
 
   /**
@@ -289,7 +259,11 @@ async function setupDevEnvironment() {
   async function watchRendererPackages() {
     await setupEsbuildWatcher('shared');
     await Promise.all([
-      setupPreloadPackageWatcher(sendEvent),
+      setupEsbuildWatcher('preload', [sharedModule], () =>
+        sendEvent({
+          type: 'full-reload',
+        }),
+      ),
       startDevServer(),
     ]);
   }
@@ -299,21 +273,29 @@ async function setupDevEnvironment() {
    */
   async function watchServicePackages() {
     await setupEsbuildWatcher('service-shared');
-    await Promise.all([
-      setupServicePackageWatcher('service-inject', sendEvent),
-      setupServicePackageWatcher('service-preload', sendEvent),
-    ]);
+    await setupEsbuildWatcher('service-inject', [serviceSharedModule]);
+    await setupEsbuildWatcher(
+      'service-preload',
+      [serviceSharedModule, serviceInjectModule],
+      () =>
+        sendEvent({
+          type: 'custom',
+          event: 'sophie:reload-services',
+        }),
+    );
   }
 
-  await Promise.all([watchRendererPackages(), watchServicePackages()]);
+  await Promise.all([
+    watchRendererPackages(),
+    watchServicePackages(),
+    setupTranslationsWatcher(sendEvent),
+  ]);
 
   if (viteDevServer === undefined) {
     console.error('Failed to create vite dev server');
     return;
   }
 
-  setupTranslationsWatcher(sendEvent);
-
   console.log('\uD83C\uDF80 Sophie is starting up');
   await setupMainPackageWatcher(viteDevServer);
 }
diff --git a/yarn.lock b/yarn.lock
index 5a844c8..79a8a17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1356,7 +1356,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sophie/service-inject@workspace:packages/service-inject":
+"@sophie/service-inject@workspace:*, @sophie/service-inject@workspace:packages/service-inject":
   version: 0.0.0-use.local
   resolution: "@sophie/service-inject@workspace:packages/service-inject"
   dependencies:
@@ -1368,6 +1368,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sophie/service-preload@workspace:packages/service-preload"
   dependencies:
+    "@sophie/service-inject": "workspace:*"
     "@sophie/service-shared": "workspace:*"
     "@types/color-string": ^1.5.2
     color-string: ^1.9.0