refactor: use esbuild instead of vite (#2672)

apps/electron/scripts/build-layers.mjs

@@ -1,12 +1,9 @@
 #!/usr/bin/env zx
 import 'zx/globals';
 
-import { spawnSync } from 'node:child_process';
-import { resolve } from 'node:path';
-
 import * as esbuild from 'esbuild';
 
-import { config, rootDir } from './common.mjs';
+import { config } from './common.mjs';
 
 const NODE_ENV =
   process.env.NODE_ENV === 'development' ? 'development' : 'production';
@@ -20,11 +17,8 @@ async function buildLayers() {
   const common = config();
   await esbuild.build(common.preload);
 
-  console.log('build plugins');
+  console.log('Build plugins');
-  spawnSync('yarn', ['build'], {
+  await import('./plugins/build-plugins.mjs');
-    cwd: resolve(rootDir, './plugins/bookmark-block'),
-    stdio: 'inherit',
-  });
 
   await esbuild.build({
     ...common.main,

apps/electron/scripts/dev.mjs

@@ -1,12 +1,12 @@
 /* eslint-disable no-async-promise-executor */
 import { spawn } from 'node:child_process';
 import { readFileSync } from 'node:fs';
-import path, { resolve } from 'node:path';
+import path from 'node:path';
 
 import electronPath from 'electron';
 import * as esbuild from 'esbuild';
 
-import { config, electronDir, rootDir } from './common.mjs';
+import { config, electronDir } from './common.mjs';
 
 // this means we don't spawn electron windows, mainly for testing
 const watchMode = process.argv.includes('--watch');
@@ -68,15 +68,8 @@ function spawnOrReloadElectron() {
 
 const common = config();
 
-function watchPlugins() {
+async function watchPlugins() {
-  const cp = spawn('yarn', ['dev'], {
+  await import('./plugins/dev-plugins.mjs');
-    cwd: resolve(rootDir, './plugins/bookmark-block'),
-    stdio: 'inherit',
-  });
-
-  process.once('beforeExit', () => {
-    cp.kill();
-  });
 }
 
 async function watchPreload() {
@@ -136,7 +129,7 @@ async function watchMain() {
 }
 
 async function main() {
-  watchPlugins();
+  await watchPlugins();
   await watchMain();
   await watchPreload();
 

apps/electron/scripts/plugins/build-plugins.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { build } from 'esbuild';
+
+import { definePluginServerConfig } from './utils.mjs';
+
+await build({
+  ...definePluginServerConfig('bookmark-block'),
+  external: ['cheerio', 'electron'],
+});

apps/electron/scripts/plugins/dev-plugins.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { context } from 'esbuild';
+
+import { definePluginServerConfig } from './utils.mjs';
+
+const plugin = await context({
+  ...definePluginServerConfig('bookmark-block'),
+  external: ['cheerio', 'electron'],
+});
+
+await plugin.watch();

apps/electron/scripts/plugins/utils.mjs

@@ -0,0 +1,29 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const rootDir = fileURLToPath(new URL('../../../..', import.meta.url));
+export const electronOutputDir = resolve(
+  rootDir,
+  'apps',
+  'electron',
+  'dist',
+  'plugins'
+);
+export const pluginDir = resolve(rootDir, 'plugins');
+
+/**
+ *
+ * @param pluginDirName {string}
+ * @return {import('esbuild').BuildOptions}
+ */
+export function definePluginServerConfig(pluginDirName) {
+  const pluginRootDir = resolve(pluginDir, pluginDirName);
+  const serverEntryFile = resolve(pluginRootDir, 'src/server.ts');
+  const serverOutputDir = resolve(electronOutputDir, pluginDirName);
+  return {
+    entryPoints: [serverEntryFile],
+    platform: 'node',
+    outdir: serverOutputDir,
+    bundle: true,
+  };
+}

package.json

@@ -15,10 +15,11 @@
     "dev": "dev-web",
     "dev:ac": "API_SERVER_PROFILE=ac yarn workspace @affine/web dev",
     "dev:local": "PORT=8080 API_SERVER_PROFILE=local yarn workspace @affine/web dev",
-    "dev:app": "yarn workspace @affine/electron dev:app",
+    "dev:electron": "yarn workspace @affine/electron dev:app",
+    "dev:plugins": "./apps/electron/scripts/plugins/dev-plugins.mjs",
     "build": "yarn workspace @affine/web build",
-    "build:client": "yarn workspace @affine/client-app build:app",
     "build:storybook": "yarn workspace @affine/component build-storybook",
+    "build:plugins": "./apps/electron/scripts/plugins/build-plugins.mjs",
     "bump:nightly": "./scripts/bump-blocksuite.sh",
     "circular": "madge --circular --ts-config ./tsconfig.json ./apps/web/src/pages/**/*.tsx",
     "export": "yarn workspace @affine/web export",

plugins/bookmark-block/package.json

@@ -7,10 +7,6 @@
     ".": "./src/index.ts",
     "./server": "./src/server.ts"
   },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch"
-  },
   "dependencies": {
     "@toeverything/plugin-infra": "workspace:*",
     "cheerio": "^1.0.0-rc.12"

plugins/bookmark-block/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true,
-    "outDir": "lib"
-  },
-  "include": ["vite.config.ts", "scripts"]
-}

plugins/bookmark-block/vite.config.ts

@@ -1,33 +0,0 @@
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { defineConfig } from 'vite';
-
-const rootDir = fileURLToPath(new URL('.', import.meta.url));
-
-export default defineConfig({
-  build: {
-    minify: false,
-    lib: {
-      entry: resolve(__dirname, 'src/server.ts'),
-      fileName: 'server',
-      formats: ['cjs'],
-    },
-    emptyOutDir: true,
-    rollupOptions: {
-      external: ['cheerio', 'electron', 'node:url'],
-      output: {
-        dir: resolve(
-          rootDir,
-          '..',
-          '..',
-          'apps',
-          'electron',
-          'dist',
-          'plugins',
-          'bookmark-block'
-        ),
-      },
-    },
-  },
-});

scripts/esbuild/build-plugins.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { build } from 'esbuild';
+
+import { definePluginServerConfig } from './utils.mjs';
+
+await build({
+  ...definePluginServerConfig('bookmark-block'),
+  external: ['cheerio', 'electron'],
+});

scripts/esbuild/dev-plugins.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { context } from 'esbuild';
+
+import { definePluginServerConfig } from './utils.mjs';
+
+const plugin = await context({
+  ...definePluginServerConfig('bookmark-block'),
+  external: ['cheerio', 'electron'],
+});
+
+await plugin.watch();

scripts/esbuild/utils.mjs

@@ -0,0 +1,29 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const rootDir = fileURLToPath(new URL('../..', import.meta.url));
+export const electronOutputDir = resolve(
+  rootDir,
+  'apps',
+  'electron',
+  'dist',
+  'plugins'
+);
+export const pluginDir = resolve(rootDir, 'plugins');
+
+/**
+ *
+ * @param pluginDirName {string}
+ * @return {import('esbuild').BuildOptions}
+ */
+export function definePluginServerConfig(pluginDirName) {
+  const pluginRootDir = resolve(pluginDir, pluginDirName);
+  const serverEntryFile = resolve(pluginRootDir, 'src/server.ts');
+  const serverOutputDir = resolve(electronOutputDir, pluginDirName);
+  return {
+    entryPoints: [serverEntryFile],
+    platform: 'node',
+    outdir: serverOutputDir,
+    bundle: true,
+  };
+}

scripts/setup/build-plugins.ts

@@ -1,14 +1,6 @@
-import { resolve } from 'node:path';
-
-import { fileURLToPath } from 'url';
-import { build } from 'vite';
 import { beforeAll } from 'vitest';
 
-export const rootDir = fileURLToPath(new URL('../..', import.meta.url));
-
 beforeAll(async () => {
-  const { default: config } = await import(
+  console.log('Build plugins');
-    resolve(rootDir, './plugins/bookmark-block/vite.config.ts')
+  await import('../esbuild/build-plugins.mjs');
-  );
-  await build(config);
 });