From 27618a8db58fe3d6f1bf3c30b6c28fcb6591251c Mon Sep 17 00:00:00 2001
From: Matt Karl <matt@mattkarl.com>
Date: Mon, 7 Nov 2022 08:40:53 -0500
Subject: [PATCH] Add browser builds for optional packages (#8827)

---
 package.json                          |  2 +-
 packages/basis/package.json           |  2 +
 packages/graphics-extras/package.json |  3 ++
 packages/math-extras/package.json     |  2 +
 packages/unsafe-eval/package.json     |  2 +
 rollup.config.js                      | 69 ++++++++++++++++++++++-----
 6 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index f9488e5288..c5649e0fe2 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "watch": "rollup -cw",
     "dist": "run-s lint types build build:types docs",
     "dist-validate": "workspaces-run --only=\"@pixi/node\" -- npm test",
-    "postdist": "copyfiles -f bundles/*/dist/* dist",
+    "postdist": "copyfiles -f bundles/*/dist/* dist && copyfiles -f packages/*/dist/* dist/packages",
     "prerelease": "run-s clean:build test",
     "postversion": "run-s lint types build build:types",
     "release": "lerna version --exact --force-publish",
diff --git a/packages/basis/package.json b/packages/basis/package.json
index 4d1e932432..f51a18df4d 100644
--- a/packages/basis/package.json
+++ b/packages/basis/package.json
@@ -14,6 +14,7 @@
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
+  "plugin": "dist/basis.js",
   "exports": {
     ".": {
       "import": {
@@ -30,6 +31,7 @@
     "access": "public"
   },
   "files": [
+    "dist",
     "lib",
     "assets",
     "*.d.ts"
diff --git a/packages/graphics-extras/package.json b/packages/graphics-extras/package.json
index d200452aac..4c238d786d 100644
--- a/packages/graphics-extras/package.json
+++ b/packages/graphics-extras/package.json
@@ -4,6 +4,8 @@
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
+  "plugin": "dist/graphics-extras.js",
+  "pluginExports": false,
   "exports": {
     ".": {
       "import": {
@@ -29,6 +31,7 @@
     "access": "public"
   },
   "files": [
+    "dist",
     "lib",
     "*.d.ts"
   ],
diff --git a/packages/math-extras/package.json b/packages/math-extras/package.json
index 6996a02e4a..177f263ed2 100644
--- a/packages/math-extras/package.json
+++ b/packages/math-extras/package.json
@@ -4,6 +4,7 @@
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
+  "plugin": "dist/math-extras.js",
   "exports": {
     ".": {
       "import": {
@@ -33,6 +34,7 @@
     "access": "public"
   },
   "files": [
+    "dist",
     "lib",
     "*.d.ts"
   ],
diff --git a/packages/unsafe-eval/package.json b/packages/unsafe-eval/package.json
index 8e6a2c3f89..d05eccc73b 100644
--- a/packages/unsafe-eval/package.json
+++ b/packages/unsafe-eval/package.json
@@ -4,6 +4,7 @@
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
+  "plugin": "dist/unsafe-eval.js",
   "exports": {
     ".": {
       "import": {
@@ -30,6 +31,7 @@
     "access": "public"
   },
   "files": [
+    "dist",
     "lib",
     "*.d.ts"
   ],
diff --git a/rollup.config.js b/rollup.config.js
index ba879c7a87..39babdad5c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -74,6 +74,8 @@ async function main()
     packages.forEach((pkg) =>
     {
         const {
+            plugin,
+            pluginExports = true,
             bundle,
             bundleModule,
             version,
@@ -120,24 +122,67 @@ async function main()
             plugins,
         });
 
+        const banner = [
+            `/*!`,
+            ` * ${pkg.name} - v${version}`,
+            ` * Compiled ${(new Date()).toUTCString().replace(/GMT/g, 'UTC')}`,
+            ` *`,
+            ` * ${pkg.name} is licensed under the MIT License.`,
+            ` * http://www.opensource.org/licenses/mit-license`,
+            ` */`,
+        ].join('\n');
+
+        // There are a handful of optional packages that are not included in the bundle
+        // but we still want to build a browser-based version of them, like we would
+        // for any external plugin.
+        if (plugin)
+        {
+            const name = pkg.name.replace(/[^a-z]+/g, '_');
+            const file = path.join(basePath, plugin);
+            const footer = pluginExports ? `Object.assign(this.PIXI, ${name});` : '';
+            const nsBanner = pluginExports ? `${banner}\nthis.PIXI = this.PIXI || {};`: banner;
+            const globals = external.reduce((obj, name) => ({ ...obj, [name]: 'PIXI' }), {});
+
+            results.push({
+                input,
+                output: {
+                    name,
+                    banner: nsBanner,
+                    footer,
+                    file,
+                    format: 'iife',
+                    freeze: false,
+                    sourcemap: true,
+                    globals,
+                },
+                treeshake: false,
+                external,
+                plugins: bundlePlugins,
+            }, {
+                input,
+                output: {
+                    name,
+                    banner: nsBanner,
+                    footer,
+                    file: prodName(file),
+                    format: 'iife',
+                    freeze: false,
+                    sourcemap: true,
+                    globals,
+                },
+                treeshake: false,
+                external,
+                plugins: bundlePluginsProd,
+            });
+        }
+
         // The package.json file has a bundle field
         // we'll use this to generate the bundle file
         // this will package all dependencies
         if (bundle)
         {
-            const banner = [
-                `/*!`,
-                ` * ${pkg.name} - v${version}`,
-                ` * Compiled ${(new Date()).toUTCString().replace(/GMT/g, 'UTC')}`,
-                ` *`,
-                ` * ${pkg.name} is licensed under the MIT License.`,
-                ` * http://www.opensource.org/licenses/mit-license`,
-                ` */`,
-            ].join('\n');
-            const input = path.join(basePath, 'src/index.ts');
             const file = path.join(basePath, bundle);
             const moduleFile = bundleModule ? path.join(basePath, bundleModule) : '';
-            let footer;
 
             results.push({
                 input,
@@ -148,7 +193,6 @@ async function main()
                         file,
                         format: 'iife',
                         freeze: false,
-                        footer,
                         sourcemap: true,
                     },
                     {
@@ -170,7 +214,6 @@ async function main()
                         file: prodName(file),
                         format: 'iife',
                         freeze: false,
-                        footer,
                         sourcemap: true,
                     },
                     {