build: Use shared packages through modules

By running the build for the shared packages only once, errors in them
are reported only once in watch mode.

We still have to point jest to the original source files (and rebuild
the shared source files as part of the test), because it won't load the
"module" entry of the shared packages. However, as a benefit, jest can
now run even if the shared packages haven't been built yet.

6 files changed, 62 insertions, 31 deletions

diff --git a/jest.config.js b/jest.config.js
index 6943513..d0ba361 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,7 @@
 // @ts-check
 
+const { join } = require('path');
+
 /** @type {import('ts-jest').InitialOptionsTsJest} */
 module.exports = {
   preset: 'ts-jest',
@@ -8,6 +10,9 @@ module.exports = {
       isolatedModules: true,
     },
   },
+  moduleNameMapper: {
+    '@sophie/(.+)': join(__dirname, 'packages/$1/src/index.ts'),
+  },
   resetMocks: true,
   restoreMocks: true,
   testEnvironment: 'node',
diff --git a/packages/service-shared/esbuild.config.js b/packages/service-shared/esbuild.config.js
new file mode 100644
index 0000000..ce57cd7
--- /dev/null
+++ b/packages/service-shared/esbuild.config.js
@@ -0,0 +1,21 @@
+// @ts-check
+
+const { chrome } = require('../../config/build-common');
+const { getConfig } = require('../../config/esbuild-config');
+
+module.exports = getConfig({
+  absWorkingDir: __dirname,
+  entryPoints: [
+    'src/index.ts',
+  ],
+  outfile: 'dist/index.mjs',
+  format: 'esm',
+  // The package that includes this one will have a header comment,
+  // no need to have an additional one here.
+  banner: {},
+  platform: 'node',
+  target: chrome,
+  external: [
+    'zod',
+  ],
+});
diff --git a/packages/service-shared/package.json b/packages/service-shared/package.json
index 6f34a9d..e812e4a 100644
--- a/packages/service-shared/package.json
+++ b/packages/service-shared/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "main": "src/index.ts",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/shared/package.json b/packages/shared/package.json
index e2b2c77..e4b57b0 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "main": "src/index.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
diff --git a/scripts/build.js b/scripts/build.js
index 416530d..5abcdab 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -18,16 +18,21 @@ function buildPackageVite(packageName) {
 }
 
 function buildAll() {
-  // Esbuild can natively load a typescript main file,
-  // so we don't need to bundle `service-shared`.
-  // We onyl bundle `shared` for vite.
+  const buildServiceShared = buildPackageEsbuild('service-shared');
   const buildShared = buildPackageEsbuild('shared');
   return Promise.all([
-    buildShared.then(() => buildPackageEsbuild('main')),
-    buildPackageEsbuild('service-inject'),
-    buildPackageEsbuild('service-preload'),
-    buildPackageEsbuild('preload'),
-    buildPackageVite('renderer'),
+    Promise.all([
+      buildServiceShared,
+      buildShared,
+    ]).then(() => buildPackageEsbuild('main')),
+    buildServiceShared.then(() => Promise.all([
+      buildPackageEsbuild('service-inject'),
+      buildPackageEsbuild('service-preload'),
+    ])),
+    buildShared.then(() => Promise.all([
+      buildPackageEsbuild('preload'),
+      buildPackageVite('renderer'),
+    ])),
   ]);
 }
 
diff --git a/scripts/watch.js b/scripts/watch.js
index 367ab88..d4229e9 100644
--- a/scripts/watch.js
+++ b/scripts/watch.js
@@ -11,10 +11,10 @@ process.env.MODE = 'development';
 process.env.NODE_ENV = 'development';
 
 /** @type {string} */
-const sharedPackageSource = packageSource('shared');
+const sharedModule = join(__dirname, '../packages/shared/dist/index.mjs');
 
 /** @type {string} */
-const serviceSharedPackageSource = packageSource('service-shared');
+const serviceSharedModule = join(__dirname, '../packages/service-shared/dist/index.mjs');
 
 /** @type {RegExp[]} */
 const stderrIgnorePatterns = [
@@ -29,14 +29,6 @@ const stderrIgnorePatterns = [
 
 /**
  * @param {string} packageName
- * @returns {string}
- */
-function packageSource(packageName) {
-  return join(__dirname, `../packages/${packageName}/src`);
-}
-
-/**
- * @param {string} packageName
  * @param {string[]} [extraPaths]
  * @param {() => void} [callback]
  * @return {Promise<void>}
@@ -47,7 +39,7 @@ async function setupEsbuildWatcher(packageName, extraPaths, callback) {
   config.incremental = true;
   const incrementalBuild = await esbuild.build(config);
   const paths = [
-    packageSource(packageName),
+    join(__dirname, `../packages/${packageName}/src`),
     ...(extraPaths || []),
   ];
   const watcher = chokidar.watch(paths, {
@@ -60,8 +52,8 @@ async function setupEsbuildWatcher(packageName, extraPaths, callback) {
   }
   watcher.on('change', () => {
     incrementalBuild.rebuild().then(() => {
-      console.log(`\u26a1 Reloading package ${packageName}`);
       if (callback) {
+        console.log(`\u26a1 Reloading package ${packageName}`);
         callback();
       }
     }).catch((err) => {
@@ -100,7 +92,7 @@ async function setupDevServer(packageName) {
  * @return {Promise<void>}
  */
 function setupPreloadPackageWatcher(sendEvent) {
-  return setupEsbuildWatcher('preload', [sharedPackageSource], () => {
+  return setupEsbuildWatcher('preload', [sharedModule], () => {
     sendEvent({
       type: 'full-reload',
     });
@@ -113,7 +105,7 @@ function setupPreloadPackageWatcher(sendEvent) {
  * @return {Promise<void>}
  */
 function setupServicePackageWatcher(packageName, sendEvent) {
-  return setupEsbuildWatcher(packageName, [serviceSharedPackageSource], () => {
+  return setupEsbuildWatcher(packageName, [serviceSharedModule], () => {
     sendEvent({
       type: 'custom',
       event: 'sophie:reload-services',
@@ -139,8 +131,8 @@ function setupMainPackageWatcher(viteDevServer) {
   return setupEsbuildWatcher(
     'main',
     [
-      serviceSharedPackageSource,
-      sharedPackageSource
+      serviceSharedModule,
+      sharedModule,
     ],
     () => {
       if (spawnProcess !== null) {
@@ -174,13 +166,22 @@ async function setupDevEnvironment() {
       viteDevServer.ws.send(event);
     }
   };
+
+  const sharedWatcher = setupEsbuildWatcher('shared');
+  const serviceSharedWatcher = setupEsbuildWatcher('service-shared');
   await Promise.all([
-    setupEsbuildWatcher('shared'),
-    setupPreloadPackageWatcher(sendEvent),
-    setupServicePackageWatcher('service-inject', sendEvent),
-    setupServicePackageWatcher('service-preload', sendEvent),
+    sharedWatcher.then(() => Promise.all([
+      setupPreloadPackageWatcher(sendEvent),
+      setupDevServer('renderer').then((devServer) => {
+        viteDevServer = devServer;
+      }),
+    ])),
+    serviceSharedWatcher.then(() => Promise.all([
+      setupServicePackageWatcher('service-inject', sendEvent),
+      setupServicePackageWatcher('service-preload', sendEvent),
+    ])),
   ]);
-  viteDevServer = await setupDevServer('renderer');
+
   console.log('\ud83c\udf80 Sophie is starting up')
   return setupMainPackageWatcher(viteDevServer);
 }