feat(build): unify export strategy across ESM, UMD, and CJS builds

Resolves #310 by aligning UMD and CJS builds with the ESM export strategy. All core classes are now
exported consistently across all formats. Additionally, all CJS output files suffixes are now
`.cjs` for better compatibility.

The UMD build now exposes a unified namespace (`srgssr`) on the global scope, making all business
classes accessible via CDN through a single file. To integrate it, simply import the script:

```html
<script src="https://cdn.jsdelivr.net/npm/@srgssr/pillarbox-web@1.23.0/dist/pillarbox.umd.min.js">
</script>
<script>
  const {
    DataProvider,
    MediaComposition,
    PillarboxMonitoring,
    Player,
    SRGAnalytics,
    SrgSsr } = window.srgssr;
  // Use Pillarbox as needed
</script>
```

`window.pillarbox` and `window.videojs` are also exposed through this bundle allowing extensions
to be integrated easily.

Author: jboix

README.md

@@ -38,12 +38,43 @@ Import the CSS file in your HTML to apply Pillarbox default theme:
 Finally, import Pillarbox and set up the player:
 
 ```javascript
-import Pillarbox from '@srgssr/pillarbox-web';
+import pillarbox from '@srgssr/pillarbox-web';
 
-const player = new Pillarbox('my-player', {/* options... */ });
+const player = pillarbox('my-player', {/* options... */ });
 player.src({ src: 'urn:swi:video:48115940', type: 'srgssr/urn' });
 ```
 
+## CDN Integration
+
+Pillarbox is an open-source project published as a public NPM package. You can easily include it in
+your website using a public CDN that proxies NPM packages—such as [jsDelivr][js-deliver].
+
+To integrate Pillarbox Web via CDN, you can include it in your HTML like this:
+
+```html
+<!-- It's recommended to specify an exact version in production.
+     For example: https://cdn.jsdelivr.net/npm/@srgssr/pillarbox-web@{version}/dist/pillarbox.umd.min.js
+     In this example, we use the latest version for simplicity. -->
+<script src="https://cdn.jsdelivr.net/npm/@srgssr/pillarbox-web/dist/pillarbox.umd.min.js"></script>
+<!-- Load additional plugins or extensions after Pillarbox -->
+<script>
+  // Example usage:
+  const player = pillarbox('my-player', {/* options... */ });
+  player.src({ src: 'urn:swi:video:48115940', type: 'srgssr/urn' });
+
+  // Other classes and utilities available under `window.srgssr`:
+  // DataProvider, MediaComposition, PillarboxMonitoring, Player, SRGAnalytics, SrgSsr
+</script>
+```
+
+You can also use a different CDN or host the file yourself.
+
+> [!NOTE]
+> When using the UMD build via CDN, video.js is already bundled with Pillarbox.
+> You should not include it separately.
+> The UMD bundle also exposes `video.js` as a global variable, allowing you to use both and internal
+> extensions as needed.
+
 ## Documentation
 
 For detailed information on how to use the Pillarbox Web Player, checkout
@@ -122,3 +153,5 @@ See the [LICENSE](LICENSE) file for more information.
 [token-settings]: https://github.com/settings/tokens
 
 [token-guide]: https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token
+
+[js-deliver]: https://www.jsdelivr.com/package/npm/@srgssr/pillarbox-web

build.es.js renamed to build.js

@@ -4,17 +4,17 @@
   "version": "1.22.0",
   "type": "module",
   "module": "dist/pillarbox.es.js",
-  "main": "dist/pillarbox.cjs.js",
+  "main": "dist/pillarbox.cjs",
   "style": "./dist/pillarbox.min.css",
-  "types": "./dist/types/build.es.d.ts",
+  "types": "./dist/types/build.d.ts",
   "exports": {
     ".": {
       "import": "./dist/pillarbox.es.js",
-      "require": "./dist/pillarbox.cjs.js"
+      "require": "./dist/pillarbox.cjs"
     },
     "./core": {
       "import": "./dist/pillarbox-core.es.js",
-      "require": "./dist/pillarbox-core.cjs.js"
+      "require": "./dist/pillarbox-core.cjs"
     },
     "./*": "./*"
   },

build.umd.js

@@ -7,7 +7,7 @@
    *
    * Usage: npx -p typescript tsc
    */
-  "include": ["build.es.js"],
+  "include": ["build.js"],
   "compilerOptions": {
     "allowJs": true,
     "declaration": true,

package-lock.json

@@ -9,12 +9,13 @@ export default defineConfig({
     lib: {
       formats: ['cjs'],
       name: 'pillarbox',
-      entry: './build.umd.js'
+      entry: './build.js'
     },
     rollupOptions: {
       external: ['video.js', 'videojs-contrib-eme'],
       output: {
-        entryFileNames: 'pillarbox.cjs.js'
+        entryFileNames: 'pillarbox.cjs',
+        exports: 'named'
       },
       plugins: [babel({
         babelHelpers: 'bundled',

package.json

@@ -19,7 +19,7 @@ export default defineConfig({
         },
         {
           format: 'cjs',
-          entryFileNames: '[name]-core.cjs.js'
+          entryFileNames: '[name]-core.cjs'
         }
       ],
       plugins: [babel({

tsconfig.json

@@ -9,7 +9,7 @@ export default defineConfig({
     lib: {
       formats: ['es'],
       name: 'pillarbox',
-      entry: './build.es.js'
+      entry: './build.js'
     },
     rollupOptions: {
       external: ['video.js', 'videojs-contrib-eme'],

vite.config.cjs.js

@@ -2,27 +2,36 @@ import { defineConfig } from 'vite';
 import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
 
+const outroScript = `
+window.pillarbox = pillarbox;
+window.videojs = window.pillarbox;
+`.trim();
+
 export default defineConfig({
   esbuild: false,
   build: {
     sourcemap: true,
     emptyOutDir: false,
     lib: {
       name: 'pillarbox',
-      entry: './build.umd.js'
+      entry: './build.js'
     },
     rollupOptions: {
       output: [
         {
-          name: 'Pillarbox',
+          name: 'srgssr',
           entryFileNames: 'pillarbox.umd.min.js',
+          exports: 'named',
           format: 'umd',
+          outro: outroScript,
           plugins: [terser()]
         },
         {
-          name: 'Pillarbox',
+          name: 'srgssr',
           entryFileNames: 'pillarbox.umd.js',
+          exports: 'named',
           format: 'umd',
+          outro: outroScript,
         }
       ],
       plugins: [babel({