videojs · mihar-22 · Sep 3, 2026 · Sep 2, 2026 · Sep 2, 2026 · Sep 2, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -111,6 +111,7 @@ jobs:
           - '@videojs/element'
           - '@videojs/html'
           - '@videojs/react'
+          - '@videojs/sandbox'
 
     steps:
       - name: Checkout code

diff --git a/.github/workflows/pkg-pr-new.yml b/.github/workflows/pkg-pr-new.yml
@@ -113,6 +113,11 @@ jobs:
       # open a running player built from the pull request. Its `dev` script
       # regenerates the gitignored src/ from templates/ on boot, so the sandbox
       # still works even though src/ is never part of the upload.
+      # The template is apps/sandbox alone: no workspace catalog to resolve its `catalog:` specs, and no preview of
+      # the private packages its `workspace:` ranges name. Rewrite its manifest in place; this checkout is disposable.
+      - name: Prepare the StackBlitz template
+        run: pnpm --filter @videojs/sandbox exec tsx scripts/prepare-template.ts
+
       - name: Publish preview packages
         env:
           VIDEOJS_SKIP_PACKAGE_DOCS: '1'

diff --git a/apps/e2e/suites/player/app/vite.config.ts b/apps/e2e/suites/player/app/vite.config.ts
@@ -41,7 +41,7 @@ function getPageEntries(): Record<string, string> {
 }
 
 export default defineConfig({
-  root: 'src',
+  root: resolve(packageDir, 'src'),
   appType: 'mpa',
   define: {
     __DEV__: 'true',

diff --git a/apps/e2e/suites/player/playwright.config.ts b/apps/e2e/suites/player/playwright.config.ts
@@ -21,10 +21,14 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'], baseURL: 'http://localhost:5180' },
     },
   ],
+  // The workspace overrides vite with the Vite+ core package, which only ships the vp binary, and the app folder is not
+  // a workspace package, so run Vite+ from the e2e package and point it at the app directory.
   webServer: {
-    command: 'pnpm exec vite --port 5180',
-    cwd: resolve(import.meta.dirname, 'app'),
+    command: 'pnpm exec vp -C suites/player/app dev --port 5180 --strictPort',
+    cwd: resolve(import.meta.dirname, '../..'),
     port: 5180,
+    stdout: 'pipe',
+    stderr: 'pipe',
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,
   },

diff --git a/...e2e/suites/registry/overlays/vite/main.ts → ...e2e/suites/registry/overlays/html/main.ts b/...e2e/suites/registry/overlays/vite/main.ts → ...e2e/suites/registry/overlays/html/main.ts
diff --git a/...e/suites/registry/overlays/vite/style.css → ...e/suites/registry/overlays/html/style.css b/...e/suites/registry/overlays/vite/style.css → ...e/suites/registry/overlays/html/style.css
diff --git a/.../suites/registry/overlays/next/player.tsx → ...suites/registry/overlays/react/player.tsx b/.../suites/registry/overlays/next/player.tsx → ...suites/registry/overlays/react/player.tsx
diff --git a/apps/e2e/suites/registry/overlays/rspack/package.json b/apps/e2e/suites/registry/overlays/rspack/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "rspack-html-css",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rspack build --mode production"
+  },
+  "devDependencies": {
+    "@rspack/cli": "2.2.2",
+    "@rspack/core": "2.2.2",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/apps/e2e/suites/registry/overlays/rspack/rspack.config.mjs b/apps/e2e/suites/registry/overlays/rspack/rspack.config.mjs
@@ -0,0 +1,30 @@
+import { fileURLToPath } from 'node:url';
+
+import { rspack } from '@rspack/core';
+
+const source = fileURLToPath(new URL('./src', import.meta.url));
+
+export default {
+  entry: `${source}/main.ts`,
+  output: {
+    path: fileURLToPath(new URL('./dist', import.meta.url)),
+    filename: '[name].[contenthash].js',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    alias: { '@': source },
+  },
+  module: {
+    rules: [
+      { test: /\.ts$/, exclude: /node_modules/, loader: 'builtin:swc-loader', type: 'javascript/auto' },
+      // The registry's HTML skin templates are imported as strings.
+      { resourceQuery: /raw/, type: 'asset/source' },
+      { test: /\.css$/, type: 'css' },
+    ],
+  },
+  plugins: [new rspack.HtmlRspackPlugin({ template: `${source}/index.html` })],
+  // Rspack's built-in CSS pipeline is opt-in; the skin's stylesheets are imported from its module.
+  experiments: { css: true },
+  performance: { hints: false },
+};
diff --git a/packages/skins/dev/index.html → ...s/registry/overlays/rspack/src/index.html b/packages/skins/dev/index.html → ...s/registry/overlays/rspack/src/index.html
@@ -3,11 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="data:," />
-    <title>Video.js Skins</title>
+    <title>Video.js registry consumer</title>
   </head>
   <body>
-    <main id="root"></main>
-    <script type="module" src="./main.tsx"></script>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/apps/e2e/suites/registry/overlays/rspack/tsconfig.json b/apps/e2e/suites/registry/overlays/rspack/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}
diff --git a/apps/e2e/suites/registry/overlays/static/serve.mjs b/apps/e2e/suites/registry/overlays/static/serve.mjs
@@ -0,0 +1,38 @@
+// Serves a bundler's `dist/` the way any static host would, so the suite drives the built output rather than a dev server.
+import { readFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import { extname, join, normalize, resolve } from 'node:path';
+
+const [directory = 'dist', port = '0'] = process.argv.slice(2);
+const root = resolve(directory);
+const types = {
+  '.css': 'text/css; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.woff2': 'font/woff2',
+};
+
+createServer(async (request, response) => {
+  const { pathname } = new URL(request.url ?? '/', 'http://127.0.0.1');
+  const path = normalize(join(root, pathname.endsWith('/') ? `${pathname}index.html` : pathname));
+
+  if (!path.startsWith(root)) {
+    response.statusCode = 400;
+    response.end('Invalid path.');
+    return;
+  }
+
+  try {
+    const body = await readFile(path);
+
+    response.setHeader('content-type', types[extname(path)] ?? 'application/octet-stream');
+    response.end(body);
+  } catch {
+    response.statusCode = 404;
+    response.end('Not found.');
+  }
+}).listen(Number(port), '127.0.0.1');
diff --git a/apps/e2e/suites/registry/overlays/webpack/package.json b/apps/e2e/suites/registry/overlays/webpack/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "webpack-react-css",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "css-loader": "7.1.5",
+    "html-webpack-plugin": "5.6.8",
+    "style-loader": "4.0.0",
+    "ts-loader": "9.6.2",
+    "typescript": "5.9.3",
+    "webpack": "5.110.3",
+    "webpack-cli": "7.2.3"
+  }
+}
diff --git a/apps/e2e/suites/registry/overlays/webpack/src/env.d.ts b/apps/e2e/suites/registry/overlays/webpack/src/env.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/apps/e2e/suites/registry/overlays/webpack/src/index.html b/apps/e2e/suites/registry/overlays/webpack/src/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video.js registry consumer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/apps/e2e/suites/registry/overlays/webpack/src/main.tsx b/apps/e2e/suites/registry/overlays/webpack/src/main.tsx
@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+
+import { Player } from './player';
+
+import './style.css';
+
+const root = document.querySelector('#app');
+if (!root) throw new Error('Could not find the application root.');
+
+createRoot(root).render(<Player />);
diff --git a/apps/e2e/suites/registry/overlays/webpack/src/style.css b/apps/e2e/suites/registry/overlays/webpack/src/style.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 2rem;
+  font-family: system-ui, sans-serif;
+}
diff --git a/apps/e2e/suites/registry/overlays/webpack/tsconfig.json b/apps/e2e/suites/registry/overlays/webpack/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}
diff --git a/apps/e2e/suites/registry/overlays/webpack/webpack.config.mjs b/apps/e2e/suites/registry/overlays/webpack/webpack.config.mjs
@@ -0,0 +1,27 @@
+import { fileURLToPath } from 'node:url';
+
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+const source = fileURLToPath(new URL('./src', import.meta.url));
+
+export default {
+  entry: `${source}/main.tsx`,
+  output: {
+    path: fileURLToPath(new URL('./dist', import.meta.url)),
+    filename: '[name].[contenthash].js',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: { '@': source },
+  },
+  module: {
+    rules: [
+      // Types are checked separately with `tsc`; the loader only strips them.
+      { test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader', options: { transpileOnly: true } },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: `${source}/index.html` })],
+  performance: { hints: false },
+};
diff --git a/apps/e2e/suites/registry/projects.ts b/apps/e2e/suites/registry/projects.ts
@@ -1,9 +1,13 @@
 import { skinCatalog } from '../../../../packages/skins/build/catalog.ts';
 
+/** The tool that scaffolds, builds, and serves a consumer. Bundler compatibility is a property of the packages. */
+export type RegistryConsumerBundler = 'next' | 'vite' | 'webpack' | 'rspack';
+
 interface RegistryConsumerProjectBase {
   readonly name: string;
   readonly directory: string;
   readonly port: number;
+  readonly bundler: RegistryConsumerBundler;
 }
 
 export type RegistryConsumerProject = RegistryConsumerProjectBase &
@@ -24,20 +28,39 @@ export const registryConsumerProjects = [
     directory: 'next-react-tailwind',
     framework: 'react',
     styling: 'tailwind',
+    bundler: 'next',
     port: 5310,
   },
   {
     name: 'next-react-css',
     directory: 'next-react-css',
     framework: 'react',
     styling: 'css',
+    bundler: 'next',
     port: 5311,
   },
   {
     name: 'vite-html-css',
     directory: 'vite-html-css',
     framework: 'html',
     styling: 'css',
+    bundler: 'vite',
     port: 5312,
   },
+  {
+    name: 'webpack-react-css',
+    directory: 'webpack-react-css',
+    framework: 'react',
+    styling: 'css',
+    bundler: 'webpack',
+    port: 5313,
+  },
+  {
+    name: 'rspack-html-css',
+    directory: 'rspack-html-css',
+    framework: 'html',
+    styling: 'css',
+    bundler: 'rspack',
+    port: 5314,
+  },
 ] as const satisfies readonly RegistryConsumerProject[];