feat: electron app (#1586)

apps/electron/scripts/before-make.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env zx
+import 'zx/globals';
+
+import path from 'node:path';
+
+import * as esbuild from 'esbuild';
+
+import { mainConfig, preloadConfig } from './common.mjs';
+
+const repoRootDir = path.join(__dirname, '..', '..', '..');
+const electronRootDir = path.join(__dirname, '..');
+const publicDistDir = path.join(electronRootDir, 'resources');
+const affineWebDir = path.join(repoRootDir, 'apps', 'web');
+const affineWebOutDir = path.join(affineWebDir, 'out');
+const publicAffineOutDir = path.join(publicDistDir, `web-static`);
+
+console.log('build with following dir', {
+  repoRootDir,
+  electronRootDir,
+  publicDistDir,
+  affineSrcDir: affineWebDir,
+  affineSrcOutDir: affineWebOutDir,
+  publicAffineOutDir,
+});
+
+// copy web dist files to electron dist
+
+// step 0: clean up
+await cleanup();
+console.log('Clean up done');
+
+// step 1: build web (nextjs) dist
+cd(repoRootDir);
+await $`pnpm i -r`;
+await $`pnpm build`;
+await $`pnpm export`;
+await fs.move(affineWebOutDir, publicAffineOutDir, { overwrite: true });
+
+// step 2: build electron resources
+await buildLayers();
+console.log('Build layers done');
+
+/// --------
+/// --------
+/// --------
+async function cleanup() {
+  await fs.emptyDir(publicAffineOutDir);
+  await fs.emptyDir(path.join(electronRootDir, 'layers', 'main', 'dist'));
+  await fs.emptyDir(path.join(electronRootDir, 'layers', 'preload', 'dist'));
+  await fs.remove(path.join(electronRootDir, 'out'));
+}
+
+async function buildLayers() {
+  await esbuild.build({
+    ...preloadConfig,
+  });
+
+  await esbuild.build({
+    ...mainConfig,
+    define: {
+      'process.env.NODE_ENV': `"production"`,
+    },
+  });
+}

apps/electron/scripts/common.mjs

@@ -0,0 +1,30 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const __dirname = new URL('.', import.meta.url).pathname;
+
+const { node } = JSON.parse(
+  fs.readFileSync(
+    path.join(__dirname, '../electron-vendors.autogen.json'),
+    'utf-8'
+  )
+);
+
+/** @type {import('esbuild').BuildOptions} */
+export const mainConfig = {
+  entryPoints: ['layers/main/src/index.ts'],
+  outdir: 'dist/layers/main',
+  bundle: true,
+  target: `node${node}`,
+  platform: 'node',
+  external: ['electron'],
+};
+
+export const preloadConfig = {
+  entryPoints: ['layers/preload/src/index.ts'],
+  outdir: 'dist/layers/preload',
+  bundle: true,
+  target: `node${node}`,
+  platform: 'node',
+  external: ['electron'],
+};

apps/electron/scripts/dev.mjs

@@ -0,0 +1,115 @@
+import { spawn } from 'node:child_process';
+
+import { generateAsync } from 'dts-for-context-bridge';
+import electronPath from 'electron';
+import * as esbuild from 'esbuild';
+
+import { mainConfig, preloadConfig } from './common.mjs';
+
+/** @type 'production' | 'development'' */
+const mode = (process.env.NODE_ENV = process.env.NODE_ENV || 'development');
+
+/** Messages on stderr that match any of the contained patterns will be stripped from output */
+const stderrFilterPatterns = [
+  // warning about devtools extension
+  // https://github.com/cawa-93/vite-electron-builder/issues/492
+  // https://github.com/MarshallOfSound/electron-devtools-installer/issues/143
+  /ExtensionLoadWarning/,
+];
+
+// hard-coded for now:
+// fixme(xp): report error if app is not running on port 8080
+process.env.DEV_SERVER_URL = `http://localhost:8080`;
+
+/** @type {ChildProcessWithoutNullStreams | null} */
+let spawnProcess = null;
+
+function spawnOrReloadElectron() {
+  if (spawnProcess !== null) {
+    spawnProcess.off('exit', process.exit);
+    spawnProcess.kill('SIGINT');
+    spawnProcess = null;
+  }
+
+  spawnProcess = spawn(String(electronPath), ['.']);
+
+  spawnProcess.stdout.on(
+    'data',
+    d => d.toString().trim() && console.warn(d.toString(), { timestamp: true })
+  );
+  spawnProcess.stderr.on('data', d => {
+    const data = d.toString().trim();
+    if (!data) return;
+    const mayIgnore = stderrFilterPatterns.some(r => r.test(data));
+    if (mayIgnore) return;
+    console.error(data, { timestamp: true });
+  });
+
+  // Stops the watch script when the application has been quit
+  spawnProcess.on('exit', process.exit);
+}
+
+async function main() {
+  async function watchPreload(onInitialBuild) {
+    const preloadBuild = await esbuild.context({
+      ...preloadConfig,
+      plugins: [
+        {
+          name: 'affine-dev:reload-app-on-preload-change',
+          setup(build) {
+            let initialBuild = false;
+            build.onEnd(() => {
+              generateAsync({
+                input: 'layers/preload/src/**/*.ts',
+                output: 'layers/preload/preload.autogen.d.ts',
+              });
+              if (initialBuild) {
+                console.log(`[preload] has changed`);
+                spawnOrReloadElectron();
+              } else {
+                initialBuild = true;
+                onInitialBuild();
+              }
+            });
+          },
+        },
+      ],
+    });
+    await preloadBuild.watch();
+  }
+
+  async function watchMain() {
+    const mainBuild = await esbuild.context({
+      ...mainConfig,
+      define: {
+        'process.env.NODE_ENV': `"${mode}"`,
+        'process.env.DEV_SERVER_URL': `"${process.env.DEV_SERVER_URL}"`,
+      },
+      plugins: [
+        {
+          name: 'affine-dev:reload-app-on-main-change',
+          setup(build) {
+            let initialBuild = false;
+            build.onEnd(() => {
+              if (initialBuild) {
+                console.log(`[main] has changed, [re]launching electron...`);
+              } else {
+                initialBuild = true;
+              }
+              spawnOrReloadElectron();
+            });
+          },
+        },
+      ],
+    });
+    await mainBuild.watch();
+  }
+
+  await watchPreload(async () => {
+    await watchMain();
+    spawnOrReloadElectron();
+    console.log(`Electron is started, watching for changes...`);
+  });
+}
+
+main();

apps/electron/scripts/update-electron-vendors.mjs

@@ -0,0 +1,17 @@
+/**
+ * This script should be run in electron context
+ * @example
+ *  ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs
+ */
+
+import { writeFileSync } from 'fs';
+
+const electronRelease = process.versions;
+
+const node = electronRelease.node.split('.')[0];
+const chrome = electronRelease.v8.split('.').splice(0, 2).join('');
+
+writeFileSync(
+  './electron-vendors.autogen.json',
+  JSON.stringify({ chrome, node })
+);