build: Switch to esbuild

We will build all packages except the frontend (where vite remains in
use) with esbuild.

For some reason, the @yarnpkg/esbuild-plugin-pnp doesn't allow esbuild
to load esm modules and we fall back to commonjs for dependencies.
Hence we had to switch back to node_modules (but still rely on yarn
hardlinking for a more efficient install).

3 files changed, 47 insertions, 21 deletions

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index ff8955a..1d34cdb 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -5,8 +5,7 @@
   "main": "dist/index.html",
   "types": "dist-types/index.d.ts",
   "scripts": {
-    "clean": "rimraf dist node_modules",
-    "build": "vite build",
+    "clean": "rimraf dist",
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -18,7 +17,7 @@
     "@sophie/shared": "workspace:*",
     "lodash": "^4.17.21",
     "mobx": "^6.3.10",
-    "mobx-react-lite": "^3.2.2",
+    "mobx-react-lite": "^3.2.3",
     "mobx-state-tree": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -32,6 +31,6 @@
     "remotedev": "^0.2.9",
     "rimraf": "^3.0.2",
     "typescript": "^4.5.4",
-    "vite": "^2.7.7"
+    "vite": "^2.7.9"
   }
 }
diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts
index 7c44559..3ec66aa 100644
--- a/packages/renderer/src/devTools.ts
+++ b/packages/renderer/src/devTools.ts
@@ -61,12 +61,9 @@ export function exposeToReduxDevtools(model: IAnyStateTreeNode): void {
  * `build/watch.js` sends a reload event on bundle write.
  */
 export function hotReloadServices(): void {
-  import.meta.hot?.on(
-    'sophie:reload-services',
-    () => {
-      window.sophieRenderer.dispatchAction({
-        action: 'reload-all-services',
-      });
-    },
-  );
+  import.meta.hot?.on('sophie:reload-services', () => {
+    window.sophieRenderer.dispatchAction({
+      action: 'reload-all-services',
+    });
+  });
 }
diff --git a/packages/renderer/vite.config.js b/packages/renderer/vite.config.js
index 94f0b76..30729c0 100644
--- a/packages/renderer/vite.config.js
+++ b/packages/renderer/vite.config.js
@@ -3,21 +3,35 @@
 /* eslint-env node */
 
 import { builtinModules } from 'module';
+import { join } from 'path';
 import react from '@vitejs/plugin-react';
 
-import { chrome, makeConfig } from '../../config/vite-common';
+import { banner, chrome } from '../../config/build-common';
 
-/** @type {string} */
-const PACKAGE_ROOT = __dirname;
+const mode = process.env.MODE || 'development';
+
+const isDevelopment = mode === 'development';
 
 /**
  * @type {import('vite').UserConfig}
  * @see https://vitejs.dev/config/
  */
-const config = makeConfig({
-  root: PACKAGE_ROOT,
+export default {
+  /** @type {import('vite').LogLevel} */
+  logLevel: 'info',
+  mode,
+  root: __dirname,
+  cacheDir: join(__dirname, '../../.vite'),
   plugins: [
-    react(),
+    react({
+      babel: {
+        // Gets rid of deoptimization warnings for large chunks.
+        // We don't need to minify here, because the output of babel
+        // will get passed to esbuild anyways.
+        compact: false,
+        minified: false,
+      },
+    }),
   ],
   base: '',
   server: {
@@ -25,16 +39,32 @@ const config = makeConfig({
       strict: true,
     },
   },
+  resolve: {
+    preserveSymlinks: true,
+  },
+  optimizeDeps: {
+    exclude: [
+      // Already bundled by esbuild.
+      '@sophie/shared',
+    ],
+  },
   build: {
     target: chrome,
+    assetsDir: '.',
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: isDevelopment,
+    minify: !isDevelopment,
+    brotliSize: false,
     rollupOptions: {
       external: [
         'mst-middlewares',
         'remotedev',
         ...builtinModules,
       ],
+      output: {
+        banner,
+      }
     },
   },
-});
-
-export default config;
+};