chore: add multi-target build system with run-all helper

jboix · jboix · commit 576d8848eaed · 2025-08-29T10:35:20.000+02:00
Introduces a complete multi-target build system across the template and packages, simplifying and
standardizing builds with multiple outputs.

Changes include:

- Updated `create` template:
  - Added `.build.config.js` defining the default build and instructions for adding new targets.
  - `vite.config.lib.js` and `vite.config.umd.js` now dynamically import the current build target
    from `.build.config.js` via the `BUILD_TARGET` environment variable.
  - The template now ships with multi-output builds by default.

- Added `run-all` helper script:
  - Runs multiple npm scripts sharing the same prefix sequentially.
  - Deletes `dist` before starting builds.
  - Centralizes multi-script execution, removing the need to manually aggregate scripts.
  - Simplifies the workflow and reduces boilerplate in `package.json`.

- Updated packages to use the new system:
  - `pillarbox-playlist` plugin now supports multi-output builds.
  - All package `build` scripts now leverage `run-all` to ensure consistent, simplified builds.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/airplay-button/package.json b/packages/airplay-button/package.json
@@ -33,7 +33,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/airplay-button.scss:dist/airplay-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/big-replay-button/package.json b/packages/big-replay-button/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/big-replay-button.scss:dist/big-replay-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/brand-button/package.json b/packages/brand-button/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/brand-button.scss:dist/brand-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/card.scss:dist/card.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/chapters-bar/package.json b/packages/chapters-bar/package.json
@@ -33,7 +33,7 @@
     "pillarbox"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/chapters-bar.scss:dist/chapters-bar.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/google-cast-sender/package.json b/packages/google-cast-sender/package.json
@@ -38,7 +38,7 @@
     "TV"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/google-cast-sender.scss:dist/google-cast-sender.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/pillarbox-debug-panel/package.json b/packages/pillarbox-debug-panel/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/pillarbox-debug-panel.scss:dist/pillarbox-debug-panel.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/pillarbox-playlist/.build.config.js b/packages/pillarbox-playlist/.build.config.js
@@ -0,0 +1,48 @@
+/**
+ * Build configuration resolver
+ *
+ * Resolves a build entry from `targetMap` based on `BUILD_TARGET`,
+ * defaulting to "default". Each entry defines `entry`, `output`,
+ * `outDir`, and UMD/global `name`. Unknown targets throw an error.
+ *
+ * Usage:
+ *   import { entry, output, outDir, name } from './build.config.js';
+ */
+import { env } from 'node:process';
+
+/**
+ * Adding a new build target:
+ *    1. Add an entry to `targetMap` with the desired configuration.
+ *    2. Define the npm scripts prefixed with `build:` in your `package.json`
+ *       for building the new target.
+ *       ```
+ *       BUILD_TARGET=${target_name} vite build --config vite.config.lib.js
+ *       BUILD_TARGET=${target_name} vite build --config vite.config.lib.js
+ *       ```
+ *    3. Run all build targets automatically using the helper script: `npm run build`.
+ *       The script discovers all `build:*` scripts in your package.json and runs
+ *       them sequentially, no manual aggregation is needed.
+ */
+const targetMap = {
+  default: {
+    entry: 'src/pillarbox-playlist.js',
+    output: 'pillarbox-playlist',
+    outDir: 'dist',
+    name: 'PillarboxPlaylist'
+  },
+  ui: {
+    entry: 'src/pillarbox-playlist-ui.js',
+    output: 'pillarbox-playlist-ui',
+    outDir: 'dist/ui',
+    name: 'PillarboxPlaylistUI'
+  }
+};
+
+const target = env.BUILD_TARGET ?? 'default';
+
+if (!(target in targetMap)) {
+  throw new Error(`Unknown build target: "${target}". Valid options are: ${Object.keys(targetMap).join(', ')}`);
+}
+
+export const { entry, output, outDir, name } = targetMap[target];
+
diff --git a/packages/pillarbox-playlist/package.json b/packages/pillarbox-playlist/package.json
@@ -40,12 +40,12 @@
     "playlist"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:ui && npm run build:umd && npm run build:umd:ui && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/pillarbox-playlist.scss:dist/pillarbox-playlist.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
-    "build:umd:ui": "vite build --config vite.config.umd.ui.js",
-    "build:ui": "vite build --config vite.config.ui.js",
+    "build:ui": "BUILD_TARGET=ui vite build --config vite.config.lib.js",
+    "build:umd:ui": "BUILD_TARGET=ui vite build --config vite.config.umd.js",
     "github:page": "vite build",
     "release:ci": "semantic-release",
     "start": " vite --port 4200 --open",
diff --git a/packages/pillarbox-playlist/vite.config.lib.js b/packages/pillarbox-playlist/vite.config.lib.js
@@ -1,28 +1,52 @@
 import { defineConfig } from 'vite';
 import babel from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy';
+import { entry, outDir, output } from './.build.config.js';
 
 /**
  * Vite's configuration for the lib build.
  *
  * Outputs:
  * - 'dist/pillarbox-playlist.js': ESModule version with sourcemaps.
  * - 'dist/pillarbox-playlist.cjs': CommonJS version with sourcemaps.
+ * - 'dist/ui/pillarbox-playlist-ui.js': ESModule version with sourcemaps.
+ * - 'dist/ui/pillarbox-playlist-ui.cjs': CommonJS version with sourcemaps.
  */
 export default defineConfig({
   esbuild: false,
   build: {
+    outDir: outDir,
+    emptyOutDir: false,
     sourcemap: true,
     lib: {
       formats: ['es', 'cjs'],
-      name: 'PillarboxPlaylist',
-      entry: 'src/pillarbox-playlist.js'
+      entry: entry
     },
     rollupOptions: {
       external: ['video.js'],
-      plugins: [babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**'
-      })]
+      output: [
+        {
+          format: 'es',
+          entryFileNames: `${output}.js`
+        },
+        {
+          format: 'cjs',
+          entryFileNames: `${output}.cjs`
+        }
+      ],
+      plugins: [
+        babel({
+          babelHelpers: 'bundled',
+          exclude: 'node_modules/**'
+        }),
+        copy({
+          targets: [{
+            src: 'src/lang/*.json',
+            dest: 'dist/lang'
+          }],
+          hook: 'writeBundle'
+        })
+      ]
     }
   }
 });
diff --git a/packages/pillarbox-playlist/vite.config.ui.js b/packages/pillarbox-playlist/vite.config.ui.js
diff --git a/packages/pillarbox-playlist/vite.config.umd.js b/packages/pillarbox-playlist/vite.config.umd.js
@@ -1,29 +1,32 @@
 import { defineConfig } from 'vite';
 import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
+import { entry, outDir, output, name } from './.build.config.js';
 
 /**
  * Vite's configuration for the umd build.
  *
  * Outputs:
  * - 'dist/pillarbox-playlist.umd.min.js': Universal Module Definition version.
+ * - 'dist/ui/pillarbox-playlist-ui.umd.min.js': Universal Module Definition version.
  */
 export default defineConfig({
   esbuild: false,
   build: {
+    outDir: outDir,
     emptyOutDir: false,
     sourcemap: true,
     lib: {
       formats: ['umd'],
-      name: 'PillarboxPlaylist',
-      entry: 'src/pillarbox-playlist.js'
+      name: name,
+      entry: entry
     },
     rollupOptions: {
       output: {
-        name: 'PillarboxPlaylist',
-        entryFileNames: 'pillarbox-playlist.umd.min.js',
+        name: name,
+        entryFileNames: `${output}.umd.min.js`,
         globals: {
-          videojs: 'videojs'
+          videojs: 'videojs',
         },
       },
       external: ['video.js'],
@@ -33,7 +36,7 @@ export default defineConfig({
           exclude: 'node_modules/**'
         }),
         terser()
-      ]
+      ],
     },
   },
 });
diff --git a/packages/pillarbox-playlist/vite.config.umd.ui.js b/packages/pillarbox-playlist/vite.config.umd.ui.js
diff --git a/packages/skip-button/package.json b/packages/skip-button/package.json
@@ -36,7 +36,7 @@
     "skip-button"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/skip-button.scss:dist/skip-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/svg-button/package.json b/packages/svg-button/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/svg-button.scss:dist/svg-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/thumbnail-preview/package.json b/packages/thumbnail-preview/package.json
@@ -32,7 +32,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd && npm run build:css",
+    "build": "node ../../scripts/run-all.js build",
     "build:css": "sass ./scss/thumbnail-preview.scss:dist/thumbnail-preview.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
diff --git a/packages/user-preferences/package.json b/packages/user-preferences/package.json
@@ -31,7 +31,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd",
+    "build": "node ../../scripts/run-all.js build",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
     "github:page": "vite build",
diff --git a/packages/web-suite-utils/package.json b/packages/web-suite-utils/package.json
@@ -30,7 +30,7 @@
     "player"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:umd",
+    "build": "node ../../scripts/run-all.js build",
     "build:lib": "vite build --config vite.config.lib.js",
     "build:umd": "vite build --config vite.config.umd.js",
     "release:ci": "semantic-release",
diff --git a/scripts/run-all.js b/scripts/run-all.js
@@ -0,0 +1,24 @@
+import { execSync } from 'child_process';
+import { readFile } from 'fs/promises';
+import { resolve } from 'path';
+import { rm } from 'fs/promises';
+
+const pkgPath = resolve('./package.json');
+const prefix = process.argv[2] || 'build';
+const pkgRaw = await readFile(pkgPath, 'utf-8');
+const pkg = JSON.parse(pkgRaw);
+const scripts = Object.keys(pkg.scripts).filter(name => name.startsWith(`${prefix}:`));
+
+if (!scripts.length) {
+  console.error(`No scripts found with prefix "${prefix}:" in ${pkgPath}`);
+  process.exit(1);
+}
+
+console.log('Deleting dist folder...');
+await rm('dist', { recursive: true, force: true });
+
+console.log(`Running scripts with prefix "${prefix}":`, scripts.join(', '));
+
+for (const script of scripts) {
+  execSync(`npm run ${script}`, { stdio: 'inherit' });
+}
diff --git a/scripts/template/.build.config.js.hbs b/scripts/template/.build.config.js.hbs
diff --git a/scripts/template/package.json.hbs b/scripts/template/package.json.hbs
diff --git a/scripts/template/vite.config.lib.js.hbs b/scripts/template/vite.config.lib.js.hbs
diff --git a/scripts/template/vite.config.umd.js.hbs b/scripts/template/vite.config.umd.js.hbs
