Split the demo app to a different repository

[jboix]

The goal of this issue is to separate the demo app from this repository for the following reasons:

1. Migrate the SDK building framework to rollup for better flexibility.
2. Compile the demo with either parcel or vite, which allows more straightforward configuration for fully-fledged SPA apps.
3. Prevent polluting the changelog with demo changes, enabling the use of other tags in conventional commits, simplifying the lifecycle of both repositories.

---

While working on issue #175, we observed that the build process has become overly complex. The following issues have been identified:

• UMD File Generation with Parcel: Generating a UMD-compliant file with Parcel seems challenging unless explicit window settings are made in a dedicated entry file, as illustrated below:

import './src/middleware/srgssr.js';
import './src/components/player.js';
import Pillarbox from './src/pillarbox.js';

window.Pillarbox = Pillarbox;

We have tested the following alternatives:

Vite

It is easy to generate both ES and UMD modules with Vite. The demo page is handled correctly through multiple configuration files. However, dependency exclusion in the final build with Vite requires specifying each excluded dependency or building the library in SSR (Server Side Rendering) mode. See Building in library mode for node instead of browser This is a working example with SSR mode :

export default defineConfig({
    build: {
        ssr: true,
        rollupOptions: {
            input: 'src/main.js',
            output: {
                entryFileNames: 'pillarbox-core.js',
            }
        }
    }
});

Rollup

Configuring Rollup for multiple targets in the SDK part is straightforward, offering extensive customization options. However, configuring the demo, especially serving it in a development server, becomes convoluted with multiple plugins and complex configurations. See this WIP configuration for the demo part:

const isServe = process.env.SERVE === 'true';

export default [
    {
        input: 'demo/*.html',
        output: {
            dir: 'dist',
            format: 'esm',
            entryFileNames: '[name].[hash].js',
            assetFileNames: '[name].[hash][extname]'
        },
        plugins: [
            commonjs(),
            resolve(),
            terser(),
            scss({
                output: true,
                minify: true
            }),
            html(),
            importMetaAssets(),
            isServe && serve('demo'),
            isServe && livereload()
        }
    }
];

Both solutions are not satisfying to contain the demo and SDK in the same repository, hence the decision to split them.

[jboix]

As a first iteration we will merge the demo using video.js awaiting the first release of pillarbox to integrate as an npm dependencyl

[github-actions[bot]]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@main dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: