Merge pull request #577 from thejustinwalsh/feat-rollup-dist-bundle

Bundle @pixi/react for use without bundler

Author: trezy

Diff for: package-lock.json

@@ -91,6 +91,8 @@
     "react-dom": "^19.0.0",
     "rollup": "^4.18.0",
     "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-inject-process-env": "^1.3.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "typescript": "^5.4.5",
     "vitest": "^2.0.0"

Diff for: package.json

@@ -1,5 +1,7 @@
 import path from 'node:path';
 import esbuild from 'rollup-plugin-esbuild';
+import injectProcessEnv from 'rollup-plugin-inject-process-env';
+import peerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import repo from './package.json' with { type: 'json' };
 import commonjs from '@rollup/plugin-commonjs';
@@ -15,9 +17,23 @@ const paths = {
 
 const {
     dependencies = {},
-    peerDependencies = {},
 } = repo;
 
+const plugins = ({ env, esmExternals = false } = {}) => [
+    json(),
+    esbuild({ target: moduleTarget, minify: env === 'production' }),
+    sourcemaps(),
+    commonjs({ esmExternals }),
+    ...(env ? [injectProcessEnv({
+        NODE_ENV: env
+    })] : []),
+    resolve({
+        browser: true,
+        preferBuiltins: false,
+    }),
+    peerDepsExternalPlugin(),
+];
+
 /**
  * Escapes the `RegExp` special characters.
  * @param {string} str
@@ -36,57 +52,59 @@ function convertPackageNameToRegExp(packageName)
     return new RegExp(`^${escapeRegExp(packageName)}(/.+)?$`);
 }
 
-// Check for bundle folder
-const external = Object.keys(dependencies)
-    .concat(Object.keys(peerDependencies))
-    .map(convertPackageNameToRegExp);
+const external = ({ bundleDeps = true } = {}) => (bundleDeps ? [] : Object.keys(dependencies).map(convertPackageNameToRegExp));
 
-export default {
-    input: 'src/index.ts',
-    output: [
-        {
-            dir: paths.library,
-            entryFileNames: '[name].js',
-            exports: 'named',
-            format: 'cjs',
-            preserveModules: true,
-            preserveModulesRoot: paths.source,
-            sourcemap: true,
-        },
-        {
-            dir: paths.library,
-            entryFileNames: '[name].mjs',
-            exports: 'named',
-            format: 'esm',
-            preserveModules: true,
-            preserveModulesRoot: paths.source,
-            sourcemap: true,
-        },
-        {
-            dir: paths.distributable,
-            entryFileNames: '[name].js',
-            exports: 'named',
-            format: 'cjs',
-            sourcemap: true,
-        },
-        {
-            dir: paths.distributable,
-            entryFileNames: '[name].mjs',
-            exports: 'named',
-            format: 'esm',
-            sourcemap: true,
-        },
-    ],
-    plugins: [
-        esbuild({ target: moduleTarget }),
-        sourcemaps(),
-        resolve({
-            browser: true,
-            preferBuiltins: false,
-        }),
-        commonjs(),
-        json(),
-    ],
-    external,
-    treeshake: false
+const targets = {
+    lib: {
+        path: paths.library,
+        entryFileNames: '[name]',
+        env: undefined,
+        external: external(),
+        preserveModules: true,
+        esmExternals: false,
+    },
+    'dist-dev': {
+        path: paths.distributable,
+        entryFileNames: 'pixi-react',
+        env: 'development',
+        external: external({ bundleDeps: true }),
+        preserveModules: false,
+        esmExternals: true,
+    },
+    'dist-prod': {
+        path: paths.distributable,
+        entryFileNames: 'pixi-react.min',
+        env: 'production',
+        external: external({ bundleDeps: true }),
+        preserveModules: false,
+        esmExternals: true,
+    },
 };
+
+export default ['lib', 'dist-dev', 'dist-prod'].map((target) =>
+    ({
+        input: 'src/index.ts',
+        output: [
+            {
+                dir: targets[target].path,
+                entryFileNames: `${targets[target].entryFileNames}.js`,
+                exports: 'named',
+                format: 'cjs',
+                preserveModules: targets[target].preserveModules,
+                preserveModulesRoot: paths.source,
+                sourcemap: true,
+            },
+            {
+                dir: targets[target].path,
+                entryFileNames: `${targets[target].entryFileNames}.mjs`,
+                exports: 'named',
+                format: 'esm',
+                preserveModules: targets[target].preserveModules,
+                preserveModulesRoot: paths.source,
+                sourcemap: true,
+            },
+        ],
+        plugins: plugins({ env: targets[target].env, esmExternals: targets[target].esmExternals }),
+        external: targets[target].external,
+        treeshake: false
+    }));