"UMD" build with tsup (#1268)

* WIP

* Regen lock

* Remove dist scripts

* Update spectacle umd script

* Add back in process dep

* Add changeset

* minify umd output

* Update local script

Author: gksander

.changeset/mighty-otters-attack.md

@@ -0,0 +1,5 @@
+---
+'spectacle': minor
+---
+
+Use tsup (instead of webpack) for browser/umd build

examples/one-page/index.html

@@ -13,8 +13,8 @@
     <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-is.production.min.js"></script>
     <script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
-    <script src="https://unpkg.com/spectacle@^10/dist/spectacle.min.js"></script>
-<!--    <script src="../../packages/spectacle/dist/spectacle.min.js"></script>-->
+    <script src="https://unpkg.com/spectacle@^10/lib/index.global.js"></script>
+<!--    <script src="../../packages/spectacle/lib/index.global.js"></script>-->
 
     <script type="module">
       const {

packages/spectacle/package.json

@@ -4,10 +4,7 @@
   "description": "ReactJS Powered Presentation Framework",
   "types": "lib/index.d.ts",
   "main": "lib/index.js",
-  "files": [
-    "dist/",
-    "lib/"
-  ],
+  "files": ["lib/"],
   "module": "lib/index.mjs",
   "author": "Formidable Labs <[email protected]>",
   "license": "MIT",
@@ -54,6 +51,7 @@
     "@types/styled-system": "^5.1.5",
     "@types/unist": "^2.0.6",
     "csstype": "^3.1.1",
+    "esbuild-plugin-external-global": "^1.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -63,9 +61,6 @@
     "build": "wireit",
     "build:lib": "wireit",
     "build:lib:watch": "wireit",
-    "build:dist": "wireit",
-    "build:dist:dev": "wireit",
-    "build:dist:min": "wireit",
     "lint": "wireit",
     "lint:fix": "wireit",
     "prettier": "wireit",
@@ -78,10 +73,7 @@
   },
   "wireit": {
     "build": {
-      "dependencies": [
-        "build:lib",
-        "build:dist"
-      ]
+      "dependencies": ["build:lib"]
     },
     "build:lib": {
       "command": "nps tsup",
@@ -116,45 +108,6 @@
         "pnpm-lock.yaml"
       ]
     },
-    "build:dist": {
-      "dependencies": [
-        "build:dist:dev",
-        "build:dist:min"
-      ]
-    },
-    "build:dist:dev": {
-      "command": "nps \"webpack --config webpack.config.dev.js\"",
-      "files": [
-        "src/**",
-        "!src/**/*.test.*",
-        "../../.babelrc.js",
-        "../../.babelrc.build.js",
-        "webpack.config.js"
-      ],
-      "output": [
-        "dist/spectacle.js*",
-        "!dist/spectacle.min.js*"
-      ],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
-    "build:dist:min": {
-      "command": "nps webpack",
-      "files": [
-        "src/**",
-        "!src/**/*.test.*",
-        "../../.babelrc.js",
-        "../../.babelrc.build.js",
-        "webpack.config.js"
-      ],
-      "output": [
-        "dist/spectacle.min.js*"
-      ],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
     "lint": {
       "command": "nps lint:pkg -- -- \"*.js\" src",
       "files": [

packages/spectacle/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup';
+import externalGlobal from 'esbuild-plugin-external-global';
 
 export default defineConfig({
   entry: ['src/index.ts'],
@@ -7,6 +8,27 @@ export default defineConfig({
   clean: false,
   external: ['react', 'react-dom'],
   dts: true,
-  format: ['cjs', 'esm'],
-  target: 'es6'
+  format: ['cjs', 'esm', 'iife'],
+  skipNodeModulesBundle: true,
+  globalName: 'Spectacle',
+  target: 'es6',
+
+  /**
+   * Couple build options for UMD/iife build.
+   *  - externalGlobalPlugin to use window.React instead of trying to bundle it.
+   *  - for iife build, set platform to "browser" and define process.env.NODE_ENV
+   */
+  esbuildPlugins: [
+    externalGlobal.externalGlobalPlugin({
+      react: 'window.React',
+      'react-dom': 'window.ReactDOM'
+    })
+  ],
+  esbuildOptions: (options, context) => {
+    if (context.format === 'iife') {
+      options.minify = true;
+      options.platform = 'browser';
+      options.define!['process.env.NODE_ENV'] = '"production"';
+    }
+  }
 });