feat(core): web component bundler plugins

.gitignore

@@ -32,6 +32,8 @@ packages/vidstack/icons.d.ts
 packages/vidstack/vue.d.ts
 packages/vidstack/svelte.d.ts
 packages/vidstack/solid.d.ts
+packages/vidstack/plugins.js
+packages/vidstack/plugins.d.ts
 packages/vidstack/player/styles/default/theme.css
 
 packages/react/src/icons.ts

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to this project will be documented in this file.
 
 ### ✨ Features
 
+#### Core
+
+- web component bundler plugins ([d97a9e1](https://github.com/vidstack/player/commit/d97a9e13a542952f8745584ca26dac1f32bb03f6))
+
 #### Player
 
 - new `sliderChaptersMinWidth` layouts prop ([441c54e](https://github.com/vidstack/player/commit/441c54e08f4c9e02b97c1d274801493e5dc7aca3))

packages/react/rollup.config.js

@@ -31,8 +31,8 @@ const EXTERNAL_PACKAGES = [
     'hls.js',
     /^remotion/,
   ],
-  NPM_BUNDLES = [define({ dev: true }), define({ dev: false })],
-  TYPES_BUNDLES = defineTypes();
+  NPM_BUNDLES = [defineNPMBundle({ dev: true }), defineNPMBundle({ dev: false })],
+  TYPES_BUNDLES = defineTypesBundle();
 
 // Styles
 if (!MODE_TYPES) {
@@ -55,7 +55,7 @@ export default defineConfig(
 /**
  * @returns {import('rollup').RollupOptions[]}
  * */
-function defineTypes() {
+function defineTypesBundle() {
   return [
     {
       input: {
@@ -119,7 +119,7 @@ function defineTypes() {
  * @param {BundleOptions}
  * @returns {import('rollup').RollupOptions}
  */
-function define({ dev }) {
+function defineNPMBundle({ dev }) {
   let alias = dev ? 'dev' : 'prod';
 
   let input = {

packages/vidstack/analyze.config.ts

@@ -1,4 +1,4 @@
-import { readdirSync, readFileSync } from 'node:fs';
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 
 import {
@@ -79,6 +79,7 @@ export default [
       });
     },
   }),
+  elementsManifest(),
   checkElementExports(),
   vueJSXTypesPlugin({
     imports: [`import type { IconType } from "./icons";`],
@@ -96,6 +97,21 @@ export default [
   }),
 ];
 
+function elementsManifest(): AnalyzePlugin {
+  return {
+    name: 'elements.json',
+    async transform({ customElements }) {
+      const manifest = {};
+
+      for (const el of customElements) {
+        manifest[el.tag.name] = el.name;
+      }
+
+      writeFileSync('elements.json', JSON.stringify(manifest, null, 2));
+    },
+  };
+}
+
 function checkElementExports(): AnalyzePlugin {
   return {
     name: 'check-element-exports',

packages/vidstack/bundle.d.ts

@@ -0,0 +1 @@
+/// <reference path="./elements.d.ts" />

packages/vidstack/package.json

@@ -19,6 +19,7 @@
     "cdn/",
     "tailwind.*",
     "analyze.json",
+    "elements.json",
     "empty.vtt",
     "vscode.html-data.json"
   ],
@@ -27,6 +28,7 @@
     "dev": "pnpm clean && pnpm build:types && pnpm watch",
     "build": "rollup -c",
     "build:cdn": "rollup -c --config-cdn",
+    "build:plugins": "rollup -c --config-plugins",
     "build:types": "tsc -p tsconfig.build.json",
     "types": "pnpm build:types && rollup -c --config-types",
     "clean": "rimraf dist cdn",
@@ -42,7 +44,8 @@
     "watch:types": "pnpm run build:types -w"
   },
   "dependencies": {
-    "media-captions": "^1.0.1"
+    "media-captions": "^1.0.1",
+    "unplugin": "^1.6.0"
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.4.4",
@@ -69,6 +72,7 @@
     "rollup": "^4.0.0",
     "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
+    "rollup-pluginutils": "^2.8.2",
     "solid-js": "^1.7.11",
     "svelte": "^4.2.1",
     "tailwindcss": "^3.2.0",
@@ -141,6 +145,7 @@
       "types": "./analyze.json.d.ts",
       "default": "./analyze.json"
     },
+    "./elements.json": "./elements.json",
     "./vue": {
       "types": "./vue.d.ts",
       "default": "./vue.d.ts"
@@ -153,6 +158,14 @@
       "types": "./solid.d.ts",
       "default": "./solid.d.ts"
     },
+    "./bundle": {
+      "types": "./bundle.d.ts",
+      "default": "./bundle.d.ts"
+    },
+    "./plugins": {
+      "types": "./plugins.d.ts",
+      "default": "./plugins.js"
+    },
     "./dom.d.ts": "./dom.d.ts",
     "./google-cast.d.ts": "./google-cast.d.ts",
     "./vscode.html-data.json": "./vscode.html-data.json"

packages/vidstack/rollup.config.js

@@ -11,16 +11,27 @@ import esbuildPlugin from 'rollup-plugin-esbuild';
 
 const MODE_WATCH = process.argv.includes('-w'),
   MODE_TYPES = process.argv.includes('--config-types'),
-  MODE_CDN = process.argv.includes('--config-cdn');
+  MODE_CDN = process.argv.includes('--config-cdn'),
+  MODE_PLUGINS = process.argv.includes('--config-plugins');
 
 /** @type {Record<string, string | false>} */
 const MANGLE_CACHE = !MODE_TYPES ? await buildMangleCache() : {};
 
 const NPM_EXTERNAL_PACKAGES = ['hls.js', 'media-captions', 'media-icons'],
   CDN_EXTERNAL_PACKAGES = ['media-captions', 'media-icons'],
-  NPM_BUNDLES = [define({ type: 'server' }), define({ type: 'dev' }), define({ type: 'prod' })],
-  CDN_BUNDLES = [defineCDN({ dev: true }), defineCDN(), defineCDN({ layouts: true })],
-  TYPES_BUNDLES = defineTypes();
+  PLUGINS_EXTERNAL_PACKAGES = ['vite', 'rollup', /webpack/, /rspack/, 'esbuild', 'unplugin'],
+  NPM_BUNDLES = [
+    defineNPMBundle({ type: 'server' }),
+    defineNPMBundle({ type: 'dev' }),
+    defineNPMBundle({ type: 'prod' }),
+  ],
+  CDN_BUNDLES = [
+    defineCDNBundle({ dev: true }),
+    defineCDNBundle(),
+    defineCDNBundle({ layouts: true }),
+  ],
+  PLUGIN_BUNDLES = definePluginsBundle(),
+  TYPES_BUNDLES = defineTypesBundle();
 
 // Styles
 if (!MODE_TYPES) {
@@ -36,19 +47,21 @@ if (!MODE_TYPES) {
 }
 
 export default defineConfig(
-  MODE_CDN
-    ? CDN_BUNDLES
-    : MODE_WATCH
-      ? [...NPM_BUNDLES, ...TYPES_BUNDLES]
-      : MODE_TYPES
-        ? TYPES_BUNDLES
-        : [...NPM_BUNDLES, ...CDN_BUNDLES],
+  MODE_PLUGINS
+    ? PLUGIN_BUNDLES
+    : MODE_CDN
+      ? CDN_BUNDLES
+      : MODE_WATCH
+        ? [...NPM_BUNDLES, ...TYPES_BUNDLES]
+        : MODE_TYPES
+          ? TYPES_BUNDLES
+          : [...NPM_BUNDLES, ...CDN_BUNDLES, ...PLUGIN_BUNDLES],
 );
 
 /**
  * @returns {import('rollup').RollupOptions[]}
  * */
-function defineTypes() {
+function defineTypesBundle() {
   /** @type {Record<string, string>} */
   const input = {
     index: 'types/index.d.ts',
@@ -90,6 +103,12 @@ function defineTypes() {
         },
       ],
     },
+    {
+      input: 'types/plugins.d.ts',
+      output: { file: 'plugins.d.ts' },
+      external: PLUGINS_EXTERNAL_PACKAGES,
+      plugins: [dts({ respectExternal: true })],
+    },
   ];
 }
 
@@ -105,7 +124,7 @@ function defineTypes() {
  * @param {BundleOptions}
  * @returns {import('rollup').RollupOptions}
  */
-function define({ target, type, minify }) {
+function defineNPMBundle({ target, type, minify }) {
   /** @type {Record<string, string>} */
   let input = {
       vidstack: 'src/index.ts',
@@ -189,14 +208,14 @@ function define({ target, type, minify }) {
 }
 
 /** @returns {import('rollup').RollupOptions} */
-function defineCDN({ dev = false, layouts = false } = {}) {
+function defineCDNBundle({ dev = false, layouts = false } = {}) {
   const input =
       dev || layouts
         ? 'src/elements/bundles/cdn/player-with-layouts.ts'
         : 'src/elements/bundles/cdn/player.ts',
     output = dev ? `vidstack.dev` : `vidstack`;
   return {
-    ...define({
+    ...defineNPMBundle({
       type: dev ? 'dev' : 'prod',
       minify: !dev,
       target: 'es2020',
@@ -283,3 +302,29 @@ function getProviderInputs() {
     [`providers/vidstack-google-cast`]: 'src/providers/google-cast/provider.ts',
   };
 }
+
+/** @returns {import('rollup').RollupOptions[]} */
+function definePluginsBundle() {
+  return [
+    {
+      input: 'src/plugins.ts',
+      output: { file: 'plugins.js', format: 'esm' },
+      external: PLUGINS_EXTERNAL_PACKAGES,
+      treeshake: true,
+      plugins: [
+        nodeResolve(),
+        esbuildPlugin({
+          tsconfig: 'tsconfig.build.json',
+          target: 'node18',
+          platform: 'node',
+          format: 'esm',
+          // minify: true,
+          legalComments: 'none',
+          define: {
+            __DEV__: 'false',
+          },
+        }),
+      ],
+    },
+  ];
+}

packages/vidstack/src/elements/bundles/player-ui.ts

@@ -48,16 +48,20 @@ defineCustomElement(MediaLayoutElement);
 defineCustomElement(MediaControlsElement);
 defineCustomElement(MediaControlsGroupElement);
 defineCustomElement(MediaPosterElement);
+// Tooltips
+defineCustomElement(MediaTooltipElement);
+defineCustomElement(MediaTooltipTriggerElement);
+defineCustomElement(MediaTooltipContentElement);
 // Buttons
+defineCustomElement(MediaPlayButtonElement);
+defineCustomElement(MediaMuteButtonElement);
 defineCustomElement(MediaCaptionButtonElement);
 defineCustomElement(MediaFullscreenButtonElement);
-defineCustomElement(MediaMuteButtonElement);
 defineCustomElement(MediaPIPButtonElement);
-defineCustomElement(MediaPlayButtonElement);
 defineCustomElement(MediaSeekButtonElement);
-defineCustomElement(MediaToggleButtonElement);
 defineCustomElement(MediaAirPlayButtonElement);
 defineCustomElement(MediaGoogleCastButtonElement);
+defineCustomElement(MediaToggleButtonElement);
 // Sliders
 defineCustomElement(MediaSliderElement);
 defineCustomElement(MediaVolumeSliderElement);
@@ -80,10 +84,6 @@ defineCustomElement(MediaQualityRadioGroupElement);
 defineCustomElement(MediaChaptersRadioGroupElement);
 defineCustomElement(MediaRadioGroupElement);
 defineCustomElement(MediaRadioElement);
-// Tooltips
-defineCustomElement(MediaTooltipElement);
-defineCustomElement(MediaTooltipTriggerElement);
-defineCustomElement(MediaTooltipContentElement);
 // Display
 defineCustomElement(MediaGestureElement);
 defineCustomElement(MediaThumbnailElement);