fix(player): text renderer throwing on cdn bundle

vidstack · Oct 10, 2023 · 8b6120b · 8b6120b
1 parent 39fd92c
commit 8b6120b
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 168 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@types/node": "^16.0.0",
     "chokidar": "^3.5.0",
     "enquirer": "^2.3.0",
-    "esbuild": "^0.16.0",
+    "esbuild": "^0.19.4",
     "execa": "^6.0.0",
     "fs-extra": "^11.0.0",
     "globby": "^13.0.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -43,7 +43,7 @@
     "@types/fs-extra": "^11.0.1",
     "@types/react": "^18.0.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "esbuild": "^0.16.17",
+    "esbuild": "^0.19.4",
     "fs-extra": "^11.0.0",
     "maverick.js": "0.40.7",
     "media-icons": "^1.0.0",
@@ -52,7 +52,7 @@
     "rimraf": "^3.0.0",
     "rollup": "^3.25.1",
     "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-esbuild": "^6.1.0",
     "typescript": "^5.2.2",
     "vidstack": "workspace:*",
     "vite": "^4.4.9"

diff --git a/packages/vidstack/package.json b/packages/vidstack/package.json
@@ -26,6 +26,7 @@
     "analyze": "maverick analyze \"src/**/*.ts\"",
     "dev": "pnpm clean && pnpm build:types && pnpm watch",
     "build": "rollup -c",
+    "build:cdn": "rollup -c --config-cdn",
     "build:types": "tsc -p tsconfig.build.json",
     "types": "pnpm build:types && rollup -c --config-types",
     "clean": "rimraf dist cdn",
@@ -37,6 +38,7 @@
     "test:server": "SERVER=true vitest --run",
     "test:server:watch": "SERVER=true vitest --watch",
     "watch": "pnpm watch:types & rollup -c -w",
+    "watch:cdn": "pnpm run build:cdn -w",
     "watch:types": "pnpm run build:types -w"
   },
   "dependencies": {
@@ -51,7 +53,7 @@
     "@types/fscreen": "^1.0.1",
     "autoprefixer": "^10.4.2",
     "es-module-lexer": "^1.3.0",
-    "esbuild": "^0.16.0",
+    "esbuild": "^0.19.4",
     "esbuild-minify-templates": "^0.11.0",
     "fscreen": "^1.2.0",
     "hls.js": "^1.4.0",
@@ -66,7 +68,7 @@
     "rimraf": "^3.0.0",
     "rollup": "^3.25.1",
     "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "solid-js": "^1.7.11",
     "svelte": "^4.2.1",

diff --git a/packages/vidstack/rollup.config.js b/packages/vidstack/rollup.config.js
@@ -9,7 +9,8 @@ import dts from 'rollup-plugin-dts';
 import esbuildPlugin from 'rollup-plugin-esbuild';
 
 const MODE_WATCH = process.argv.includes('-w'),
-  MODE_TYPES = process.argv.includes('--config-types');
+  MODE_TYPES = process.argv.includes('--config-types'),
+  MODE_CDN = process.argv.includes('--config-cdn');
 
 const EXTERNAL_PACKAGES = ['hls.js', 'media-captions', 'media-icons'],
   NPM_BUNDLES = [define({ type: 'server' }), define({ type: 'dev' }), define({ type: 'prod' })],
@@ -28,7 +29,9 @@ if (!MODE_TYPES) {
 }
 
 export default defineConfig(
-  MODE_WATCH
+  MODE_CDN
+    ? CDN_BUNDLES
+    : MODE_WATCH
     ? [...NPM_BUNDLES, ...TYPES_BUNDLES]
     : MODE_TYPES
     ? TYPES_BUNDLES
@@ -133,18 +136,6 @@ function define({ target, type, minify }) {
           ? ['production', 'default']
           : ['development', 'production', 'default'],
       }),
-      esbuildPlugin({
-        tsconfig: 'tsconfig.build.json',
-        target: target ?? (isServer ? 'node18' : 'esnext'),
-        platform: isServer ? 'node' : 'browser',
-        minify: minify,
-        legalComments: 'none',
-        define: {
-          __DEV__: !isProd && !isServer ? 'true' : 'false',
-          __SERVER__: isServer ? 'true' : 'false',
-          __TEST__: 'false',
-        },
-      }),
       isServer && {
         name: 'server-bundle',
         async transform(code, id) {
@@ -179,6 +170,18 @@ function define({ target, type, minify }) {
           return result.code;
         },
       },
+      esbuildPlugin({
+        tsconfig: 'tsconfig.build.json',
+        target: target ?? (isServer ? 'node18' : 'esnext'),
+        platform: isServer ? 'node' : 'browser',
+        minify: minify,
+        legalComments: 'none',
+        define: {
+          __DEV__: !isProd && !isServer ? 'true' : 'false',
+          __SERVER__: isServer ? 'true' : 'false',
+          __TEST__: 'false',
+        },
+      }),
     ],
   };
 }

diff --git a/packages/vidstack/src/core/tracks/text/render/text-renderer.ts b/packages/vidstack/src/core/tracks/text/render/text-renderer.ts
@@ -1,5 +1,6 @@
 import { effect, onDispose } from 'maverick.js';
 import { listenEvent } from 'maverick.js/std';
+
 import type { MediaContext } from '../../../api/media-context';
 import { TextTrackSymbol } from '../symbols';
 import { isTrackCaptionKind, TextTrack } from '../text-track';
@@ -43,7 +44,7 @@ export class TextRenderers {
   }
 
   /* @internal */
-  [TextTrackSymbol._attachVideo](video: HTMLVideoElement | null) {
+  _attachVideo(video: HTMLVideoElement | null) {
     requestAnimationFrame(() => {
       this._video = video;
 

diff --git a/packages/vidstack/src/core/tracks/text/symbols.ts b/packages/vidstack/src/core/tracks/text/symbols.ts
@@ -1,5 +1,4 @@
-const ATTACH_VIDEO = Symbol(__DEV__ ? 'ATTACH_VIDEO' : 0),
-  CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
+const CROSSORIGIN = Symbol(__DEV__ ? 'TEXT_TRACK_CROSSORIGIN' : 0),
   READY_STATE = Symbol(__DEV__ ? 'TEXT_TRACK_READY_STATE' : 0),
   UPDATE_ACTIVE_CUES = Symbol(__DEV__ ? 'TEXT_TRACK_UPDATE_ACTIVE_CUES' : 0),
   CAN_LOAD = Symbol(__DEV__ ? 'TEXT_TRACK_CAN_LOAD' : 0),
@@ -8,7 +7,6 @@ const ATTACH_VIDEO = Symbol(__DEV__ ? 'ATTACH_VIDEO' : 0),
   NATIVE_HLS = Symbol(__DEV__ ? 'TEXT_TRACK_NATIVE_HLS' : 0);
 
 export const TextTrackSymbol = {
-  _attachVideo: ATTACH_VIDEO,
   _crossorigin: CROSSORIGIN,
   _readyState: READY_STATE,
   _updateActiveCues: UPDATE_ACTIVE_CUES,

diff --git a/packages/vidstack/src/elements/lit/lit-element.ts b/packages/vidstack/src/elements/lit/lit-element.ts
@@ -12,7 +12,6 @@ export class LitElement extends HTMLElement {
 
   disconnectedCallback() {
     this.rootPart?.setConnected(false);
-    this.rootPart?._$setValue(null);
     this.rootPart = null;
   }
 }

diff --git a/packages/vidstack/src/providers/video/provider.ts b/packages/vidstack/src/providers/video/provider.ts
@@ -1,7 +1,6 @@
 import { onDispose } from 'maverick.js';
 
 import type { MediaContext } from '../../core/api/media-context';
-import { TextTrackSymbol } from '../../core/tracks/text/symbols';
 import {
   canPlayHLSNatively,
   canUsePictureInPicture,
@@ -66,9 +65,9 @@ export class VideoProvider extends HTMLMediaProvider implements MediaProviderAda
       new NativeHLSTextTracks(this.video, context);
     }
 
-    context.textRenderers[TextTrackSymbol._attachVideo](this.video);
+    context.textRenderers._attachVideo(this.video);
     onDispose(() => {
-      context.textRenderers[TextTrackSymbol._attachVideo](null);
+      context.textRenderers._attachVideo(null);
     });
 
     if (this.type === 'video') context.delegate._dispatch('provider-setup', { detail: this });