Build: The bundle script now generates multiple bundles for different formats

packages/playground/devEnv/servePlayground.ts

@@ -15,8 +15,6 @@ require('esbuild')
       entryPoints: [path.join(playgroundDir, 'src/index.tsx')],
       target: ['firefox88'],
       loader: {'.png': 'file'},
-      // outdir: '.',
-      // watch: true,
       bundle: true,
       sourcemap: true,
       define: definedGlobals,

theatre/core/package.json

@@ -13,12 +13,28 @@
     "email": "hello@theatrejs.com",
     "url": "https://www.theatrejs.com"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "browser": "dist/index.min.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.cjs",
+      "node": "./dist/index.cjs",
+      "script": "./dist/index.min.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "files": [
-    "dist/index.js",
+    "dist/index.cjs",
-    "dist/index.d.ts",
+    "dist/index.cjs.map",
-    "index.js.map"
+    "dist/index.mjs",
+    "dist/index.mjs.map",
+    "dist/index.min.js",
+    "dist/index.min.js.map",
+    "dist/index.min.js.LEGAL.txt",
+    "dist/index.d.ts"
   ],
   "scripts": {
     "prepack": "cd .. && yarn run prepare"

theatre/devEnv/build.ts

@@ -1,19 +0,0 @@
-import path from 'path'
-import {definedGlobals} from './buildUtils'
-
-for (const which of ['core', 'studio']) {
-  const pathToPackage = path.join(__dirname, '../', which)
-  const esbuildConfig = {
-    entryPoints: [path.join(pathToPackage, 'src/index.ts')],
-    target: ['firefox88', 'chrome90'],
-    loader: {'.png': 'file'},
-    outfile: path.join(pathToPackage, 'dist/index.js'),
-    bundle: true,
-    sourcemap: true,
-    define: definedGlobals,
-  }
-  if (which === 'core') {
-    esbuildConfig.target = ['firefox57', 'chrome58']
-  }
-  require('esbuild').build(esbuildConfig)
-}

theatre/devEnv/bundle.ts

@@ -0,0 +1,54 @@
+import path from 'path'
+import {definedGlobals} from './buildUtils'
+import {build} from 'esbuild'
+
+createBundles()
+
+function createBundles() {
+  for (const which of ['core', 'studio']) {
+    const pathToPackage = path.join(__dirname, '../', which)
+    const esbuildConfig: Parameters<typeof build>[0] = {
+      entryPoints: [path.join(pathToPackage, 'src/index.ts')],
+      target: ['firefox88', 'chrome90'],
+      loader: {'.png': 'file'},
+      bundle: true,
+      sourcemap: true,
+      define: definedGlobals,
+      external: ['@theatre/dataverse'],
+    }
+
+    if (which === 'core') {
+      esbuildConfig.platform = 'neutral'
+      esbuildConfig.mainFields = ['browser', 'module', 'main']
+      esbuildConfig.target = ['firefox57', 'chrome58']
+      esbuildConfig.conditions = ['browser', 'node']
+    }
+
+    build({
+      ...esbuildConfig,
+      outfile: path.join(pathToPackage, 'dist/index.cjs'),
+      format: 'cjs',
+    })
+
+    build({
+      ...esbuildConfig,
+      outfile: path.join(pathToPackage, 'dist/index.mjs'),
+      format: 'esm',
+    })
+
+    build({
+      ...esbuildConfig,
+      outfile: path.join(pathToPackage, 'dist/index.min.js'),
+      format: 'iife',
+      external: [],
+      minify: true,
+      globalName: `Theatre.${which}`,
+      legalComments: 'external',
+      platform: 'browser',
+      define: {
+        ...definedGlobals,
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      },
+    })
+  }
+}

theatre/package.json

@@ -17,7 +17,7 @@
     "_build:declarations:emit:watch": "tsc --build tsconfig.json --watch --preserveWatchOutput",
     "_build:declarations:bundle": "rollup -c devEnv/declarations-bundler/rollup.config.js",
     "_build:declarations:bundle:watch": "rollup --watch --no-watch.clearScreen -c devEnv/declarations-bundler/rollup.config.js",
-    "_bundle:production": "node -r esbuild-register devEnv/build.ts"
+    "_bundle:production": "node -r esbuild-register devEnv/bundle.ts"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.3",