Skip to content

Commit dfd4fa5

Browse files
mihar-22mihar-22
committed
feat(core): web component bundler plugins
1 parent f6c668a commit dfd4fa5

10 files changed

Lines changed: 435 additions & 44 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ packages/vidstack/icons.d.ts
3232
packages/vidstack/vue.d.ts
3333
packages/vidstack/svelte.d.ts
3434
packages/vidstack/solid.d.ts
35+
packages/vidstack/plugins.js
36+
packages/vidstack/plugins.d.ts
3537
packages/vidstack/player/styles/default/theme.css
3638

3739
packages/react/src/icons.ts

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ All notable changes to this project will be documented in this file.
66

77
### ✨ Features
88

9+
#### Core
10+
11+
- web component bundler plugins ([d97a9e1](https://github.com/vidstack/player/commit/d97a9e13a542952f8745584ca26dac1f32bb03f6))
12+
913
#### Player
1014

1115
- new `sliderChaptersMinWidth` layouts prop ([441c54e](https://github.com/vidstack/player/commit/441c54e08f4c9e02b97c1d274801493e5dc7aca3))

‎packages/react/rollup.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const EXTERNAL_PACKAGES = [
3131
'hls.js',
3232
/^remotion/,
3333
],
34-
NPM_BUNDLES = [define({ dev: true }), define({ dev: false })],
35-
TYPES_BUNDLES = defineTypes();
34+
NPM_BUNDLES = [defineNPMBundle({ dev: true }), defineNPMBundle({ dev: false })],
35+
TYPES_BUNDLES = defineTypesBundle();
3636

3737
// Styles
3838
if (!MODE_TYPES) {
@@ -55,7 +55,7 @@ export default defineConfig(
5555
/**
5656
* @returns {import('rollup').RollupOptions[]}
5757
* */
58-
function defineTypes() {
58+
function defineTypesBundle() {
5959
return [
6060
{
6161
input: {
@@ -119,7 +119,7 @@ function defineTypes() {
119119
* @param {BundleOptions}
120120
* @returns {import('rollup').RollupOptions}
121121
*/
122-
function define({ dev }) {
122+
function defineNPMBundle({ dev }) {
123123
let alias = dev ? 'dev' : 'prod';
124124

125125
let input = {

‎packages/vidstack/analyze.config.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { readdirSync, readFileSync } from 'node:fs';
1+
import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
22
import path from 'node:path';
33

44
import {
@@ -79,6 +79,7 @@ export default [
7979
});
8080
},
8181
}),
82+
elementsManifest(),
8283
checkElementExports(),
8384
vueJSXTypesPlugin({
8485
imports: [`import type { IconType } from "./icons";`],
@@ -96,6 +97,21 @@ export default [
9697
}),
9798
];
9899

100+
function elementsManifest(): AnalyzePlugin {
101+
return {
102+
name: 'elements.json',
103+
async transform({ customElements }) {
104+
const manifest = {};
105+
106+
for (const el of customElements) {
107+
manifest[el.tag.name] = el.name;
108+
}
109+
110+
writeFileSync('elements.json', JSON.stringify(manifest, null, 2));
111+
},
112+
};
113+
}
114+
99115
function checkElementExports(): AnalyzePlugin {
100116
return {
101117
name: 'check-element-exports',

‎packages/vidstack/bundle.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference path="./elements.d.ts" />

‎packages/vidstack/package.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"cdn/",
2020
"tailwind.*",
2121
"analyze.json",
22+
"elements.json",
2223
"empty.vtt",
2324
"vscode.html-data.json"
2425
],
@@ -27,6 +28,7 @@
2728
"dev": "pnpm clean && pnpm build:types && pnpm watch",
2829
"build": "rollup -c",
2930
"build:cdn": "rollup -c --config-cdn",
31+
"build:plugins": "rollup -c --config-plugins",
3032
"build:types": "tsc -p tsconfig.build.json",
3133
"types": "pnpm build:types && rollup -c --config-types",
3234
"clean": "rimraf dist cdn",
@@ -42,7 +44,8 @@
4244
"watch:types": "pnpm run build:types -w"
4345
},
4446
"dependencies": {
45-
"media-captions": "^1.0.1"
47+
"media-captions": "^1.0.1",
48+
"unplugin": "^1.6.0"
4649
},
4750
"devDependencies": {
4851
"@floating-ui/dom": "^1.4.4",
@@ -69,6 +72,7 @@
6972
"rollup": "^4.0.0",
7073
"rollup-plugin-dts": "^6.0.0",
7174
"rollup-plugin-esbuild": "^6.1.0",
75+
"rollup-pluginutils": "^2.8.2",
7276
"solid-js": "^1.7.11",
7377
"svelte": "^4.2.1",
7478
"tailwindcss": "^3.2.0",
@@ -141,6 +145,7 @@
141145
"types": "./analyze.json.d.ts",
142146
"default": "./analyze.json"
143147
},
148+
"./elements.json": "./elements.json",
144149
"./vue": {
145150
"types": "./vue.d.ts",
146151
"default": "./vue.d.ts"
@@ -153,6 +158,14 @@
153158
"types": "./solid.d.ts",
154159
"default": "./solid.d.ts"
155160
},
161+
"./bundle": {
162+
"types": "./bundle.d.ts",
163+
"default": "./bundle.d.ts"
164+
},
165+
"./plugins": {
166+
"types": "./plugins.d.ts",
167+
"default": "./plugins.js"
168+
},
156169
"./dom.d.ts": "./dom.d.ts",
157170
"./google-cast.d.ts": "./google-cast.d.ts",
158171
"./vscode.html-data.json": "./vscode.html-data.json"

‎packages/vidstack/rollup.config.js‎

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,27 @@ import esbuildPlugin from 'rollup-plugin-esbuild';
1111

1212
const MODE_WATCH = process.argv.includes('-w'),
1313
MODE_TYPES = process.argv.includes('--config-types'),
14-
MODE_CDN = process.argv.includes('--config-cdn');
14+
MODE_CDN = process.argv.includes('--config-cdn'),
15+
MODE_PLUGINS = process.argv.includes('--config-plugins');
1516

1617
/** @type {Record<string, string | false>} */
1718
const MANGLE_CACHE = !MODE_TYPES ? await buildMangleCache() : {};
1819

1920
const NPM_EXTERNAL_PACKAGES = ['hls.js', 'media-captions', 'media-icons'],
2021
CDN_EXTERNAL_PACKAGES = ['media-captions', 'media-icons'],
21-
NPM_BUNDLES = [define({ type: 'server' }), define({ type: 'dev' }), define({ type: 'prod' })],
22-
CDN_BUNDLES = [defineCDN({ dev: true }), defineCDN(), defineCDN({ layouts: true })],
23-
TYPES_BUNDLES = defineTypes();
22+
PLUGINS_EXTERNAL_PACKAGES = ['vite', 'rollup', /webpack/, /rspack/, 'esbuild', 'unplugin'],
23+
NPM_BUNDLES = [
24+
defineNPMBundle({ type: 'server' }),
25+
defineNPMBundle({ type: 'dev' }),
26+
defineNPMBundle({ type: 'prod' }),
27+
],
28+
CDN_BUNDLES = [
29+
defineCDNBundle({ dev: true }),
30+
defineCDNBundle(),
31+
defineCDNBundle({ layouts: true }),
32+
],
33+
PLUGIN_BUNDLES = definePluginsBundle(),
34+
TYPES_BUNDLES = defineTypesBundle();
2435

2536
// Styles
2637
if (!MODE_TYPES) {
@@ -36,19 +47,21 @@ if (!MODE_TYPES) {
3647
}
3748

3849
export default defineConfig(
39-
MODE_CDN
40-
? CDN_BUNDLES
41-
: MODE_WATCH
42-
? [...NPM_BUNDLES, ...TYPES_BUNDLES]
43-
: MODE_TYPES
44-
? TYPES_BUNDLES
45-
: [...NPM_BUNDLES, ...CDN_BUNDLES],
50+
MODE_PLUGINS
51+
? PLUGIN_BUNDLES
52+
: MODE_CDN
53+
? CDN_BUNDLES
54+
: MODE_WATCH
55+
? [...NPM_BUNDLES, ...TYPES_BUNDLES]
56+
: MODE_TYPES
57+
? TYPES_BUNDLES
58+
: [...NPM_BUNDLES, ...CDN_BUNDLES, ...PLUGIN_BUNDLES],
4659
);
4760

4861
/**
4962
* @returns {import('rollup').RollupOptions[]}
5063
* */
51-
function defineTypes() {
64+
function defineTypesBundle() {
5265
/** @type {Record<string, string>} */
5366
const input = {
5467
index: 'types/index.d.ts',
@@ -90,6 +103,12 @@ function defineTypes() {
90103
},
91104
],
92105
},
106+
{
107+
input: 'types/plugins.d.ts',
108+
output: { file: 'plugins.d.ts' },
109+
external: PLUGINS_EXTERNAL_PACKAGES,
110+
plugins: [dts({ respectExternal: true })],
111+
},
93112
];
94113
}
95114

@@ -105,7 +124,7 @@ function defineTypes() {
105124
* @param {BundleOptions}
106125
* @returns {import('rollup').RollupOptions}
107126
*/
108-
function define({ target, type, minify }) {
127+
function defineNPMBundle({ target, type, minify }) {
109128
/** @type {Record<string, string>} */
110129
let input = {
111130
vidstack: 'src/index.ts',
@@ -189,14 +208,14 @@ function define({ target, type, minify }) {
189208
}
190209

191210
/** @returns {import('rollup').RollupOptions} */
192-
function defineCDN({ dev = false, layouts = false } = {}) {
211+
function defineCDNBundle({ dev = false, layouts = false } = {}) {
193212
const input =
194213
dev || layouts
195214
? 'src/elements/bundles/cdn/player-with-layouts.ts'
196215
: 'src/elements/bundles/cdn/player.ts',
197216
output = dev ? `vidstack.dev` : `vidstack`;
198217
return {
199-
...define({
218+
...defineNPMBundle({
200219
type: dev ? 'dev' : 'prod',
201220
minify: !dev,
202221
target: 'es2020',
@@ -283,3 +302,29 @@ function getProviderInputs() {
283302
[`providers/vidstack-google-cast`]: 'src/providers/google-cast/provider.ts',
284303
};
285304
}
305+
306+
/** @returns {import('rollup').RollupOptions[]} */
307+
function definePluginsBundle() {
308+
return [
309+
{
310+
input: 'src/plugins.ts',
311+
output: { file: 'plugins.js', format: 'esm' },
312+
external: PLUGINS_EXTERNAL_PACKAGES,
313+
treeshake: true,
314+
plugins: [
315+
nodeResolve(),
316+
esbuildPlugin({
317+
tsconfig: 'tsconfig.build.json',
318+
target: 'node18',
319+
platform: 'node',
320+
format: 'esm',
321+
// minify: true,
322+
legalComments: 'none',
323+
define: {
324+
__DEV__: 'false',
325+
},
326+
}),
327+
],
328+
},
329+
];
330+
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,20 @@ defineCustomElement(MediaLayoutElement);
4848
defineCustomElement(MediaControlsElement);
4949
defineCustomElement(MediaControlsGroupElement);
5050
defineCustomElement(MediaPosterElement);
51+
// Tooltips
52+
defineCustomElement(MediaTooltipElement);
53+
defineCustomElement(MediaTooltipTriggerElement);
54+
defineCustomElement(MediaTooltipContentElement);
5155
// Buttons
56+
defineCustomElement(MediaPlayButtonElement);
57+
defineCustomElement(MediaMuteButtonElement);
5258
defineCustomElement(MediaCaptionButtonElement);
5359
defineCustomElement(MediaFullscreenButtonElement);
54-
defineCustomElement(MediaMuteButtonElement);
5560
defineCustomElement(MediaPIPButtonElement);
56-
defineCustomElement(MediaPlayButtonElement);
5761
defineCustomElement(MediaSeekButtonElement);
58-
defineCustomElement(MediaToggleButtonElement);
5962
defineCustomElement(MediaAirPlayButtonElement);
6063
defineCustomElement(MediaGoogleCastButtonElement);
64+
defineCustomElement(MediaToggleButtonElement);
6165
// Sliders
6266
defineCustomElement(MediaSliderElement);
6367
defineCustomElement(MediaVolumeSliderElement);
@@ -80,10 +84,6 @@ defineCustomElement(MediaQualityRadioGroupElement);
8084
defineCustomElement(MediaChaptersRadioGroupElement);
8185
defineCustomElement(MediaRadioGroupElement);
8286
defineCustomElement(MediaRadioElement);
83-
// Tooltips
84-
defineCustomElement(MediaTooltipElement);
85-
defineCustomElement(MediaTooltipTriggerElement);
86-
defineCustomElement(MediaTooltipContentElement);
8787
// Display
8888
defineCustomElement(MediaGestureElement);
8989
defineCustomElement(MediaThumbnailElement);

0 commit comments

Comments
 (0)