chore(site): preset pipeline — scan source directories instead of barrel files (#1333)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-08-15 10:23:32 +00:00 · 2026-04-14 12:28:16 -05:00
parent d8cd59e0fd
commit 7daec38b88
13 changed files with 536 additions and 143 deletions
@@ -854,17 +854,18 @@ describe('Feature pipeline (end-to-end)', () => {
 // ═══════════════════════════════════════════════════════════════════════
 //
 // Presets bundle features, skins, and media elements for a specific use
-// case. They are discovered from directories under packages/{html,react}/
-// src/presets/.
+// case. They are discovered from package.json exports in
+// packages/{html,react}/.
 //
 // Key behaviors:
-//   - Discovery: directories under both HTML and React preset paths
-//   - Feature bundle: *Features export → resolved to list of feature names
-//   - HTML skins: classes extending SkinElement, with tagName
+//   - Discovery: reads package.json exports for ./X + ./X/* pairs
+//   - Feature bundle: *Features export from barrel → resolved to feature names
+//   - HTML skins: classes with static tagName whose name matches *Skin*Element
+//   - HTML media element: classes with static tagName that aren't skins or players
 //   - React skins: exports matching *Skin naming
-//   - Media element: React exports that aren't bundles or skins
-//   - Tailwind exclusion: .tailwind files/exports are filtered out
-//   - HTML media element: implied by preset name (video → <video>)
+//   - React media element: remaining exports that aren't bundles or skins
+//   - Tailwind exclusion: .tailwind files are filtered out
+//   - Player exclusion: *Player* classes are filtered out

 describe('Preset pipeline (end-to-end)', () => {
  const results = generatePresetReferences(FIXTURE_ROOT);
@@ -878,13 +879,13 @@ describe('Preset pipeline (end-to-end)', () => {
  // ─────────────────────────────────────────────────────────────────

  describe('Discovery', () => {
-    it('discovers presets from preset directories', () => {
+    it('discovers presets from package.json exports', () => {
      const names = results.map((r) => r.name).sort();
-      expect(names).toEqual(['audio', 'video']);
+      expect(names).toEqual(['audio', 'background', 'video']);
    });

    it('produces one result per preset', () => {
-      expect(results.length).toBe(2);
+      expect(results.length).toBe(3);
    });
  });

@@ -919,6 +920,11 @@ describe('Preset pipeline (end-to-end)', () => {
      expect(skinNames).not.toContain('VideoSkinTailwindElement');
    });

+    it('does not produce an HTML media element for native video', () => {
+      const ref = findPreset('video')!.reference;
+      expect(ref.html.mediaElement).toBeUndefined();
+    });
+
    it('detects React skins', () => {
      const skins = findPreset('video')!.reference.react.skins;
      expect(skins).toEqual(expect.arrayContaining([{ name: 'VideoSkin' }, { name: 'MinimalVideoSkin' }]));
@@ -955,6 +961,11 @@ describe('Preset pipeline (end-to-end)', () => {
      expect(skins).toEqual([{ name: 'AudioSkinElement', tagName: 'audio-skin' }]);
    });

+    it('does not produce an HTML media element for native audio', () => {
+      const ref = findPreset('audio')!.reference;
+      expect(ref.html.mediaElement).toBeUndefined();
+    });
+
    it('detects single React skin', () => {
      const skins = findPreset('audio')!.reference.react.skins;
      expect(skins).toEqual([{ name: 'AudioSkin' }]);
@@ -966,6 +977,47 @@ describe('Preset pipeline (end-to-end)', () => {
    });
  });

+  // ─────────────────────────────────────────────────────────────────
+  // BACKGROUND PRESET (incomplete barrel, custom media element)
+  // ─────────────────────────────────────────────────────────────────
+
+  describe('background preset', () => {
+    it('identifies the feature bundle', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.featureBundle).toBe('backgroundFeatures');
+    });
+
+    it('resolves empty features array', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.features).toEqual([]);
+    });
+
+    it('detects HTML skin from directory scan (not in barrel)', () => {
+      const skins = findPreset('background')!.reference.html.skins;
+      expect(skins).toEqual([{ name: 'BackgroundVideoSkinElement', tagName: 'background-video-skin' }]);
+    });
+
+    it('detects HTML media element via export * chain', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.html.mediaElement).toBe('background-video');
+    });
+
+    it('excludes player elements', () => {
+      const skinNames = findPreset('background')!.reference.html.skins.map((s) => s.name);
+      expect(skinNames).not.toContain('BackgroundVideoPlayerElement');
+    });
+
+    it('detects React skin', () => {
+      const skins = findPreset('background')!.reference.react.skins;
+      expect(skins).toEqual([{ name: 'BackgroundVideoSkin' }]);
+    });
+
+    it('detects React media element', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.react.mediaElement).toBe('BackgroundVideo');
+    });
+  });
+
  // ─────────────────────────────────────────────────────────────────
  // CROSS-CUTTING: feature links
  // ─────────────────────────────────────────────────────────────────
@@ -11,3 +11,5 @@ import { volumeFeature } from './volume';
 export const videoFeatures = [playbackFeature, volumeFeature];

 export const audioFeatures = [playbackFeature];
+
+export const backgroundFeatures = [];
@@ -0,0 +1,29 @@
+{
+  "name": "@videojs/html",
+  "exports": {
+    "./video": {
+      "types": "./src/presets/video.ts",
+      "default": "./src/presets/video.ts"
+    },
+    "./video/*": {
+      "types": "./src/define/video/*.ts",
+      "default": "./src/define/video/*.ts"
+    },
+    "./audio": {
+      "types": "./src/presets/audio.ts",
+      "default": "./src/presets/audio.ts"
+    },
+    "./audio/*": {
+      "types": "./src/define/audio/*.ts",
+      "default": "./src/define/audio/*.ts"
+    },
+    "./background": {
+      "types": "./src/presets/background.ts",
+      "default": "./src/presets/background.ts"
+    },
+    "./background/*": {
+      "types": "./src/define/background/*.ts",
+      "default": "./src/define/background/*.ts"
+    }
+  }
+}
@@ -0,0 +1,9 @@
+/**
+ * Mock HTML background player element.
+ *
+ * Exercises: player exclusion — has static tagName but class name
+ * contains "Player", so it should NOT appear in skins or media elements.
+ */
+export class BackgroundVideoPlayerElement extends HTMLElement {
+  static readonly tagName = 'background-video-player';
+}
@@ -0,0 +1,10 @@
+/**
+ * Mock HTML background video skin element.
+ *
+ * Exercises: skin detection via *Skin*Element naming + static tagName.
+ */
+import { SkinElement } from '../skin-element';
+
+export class BackgroundVideoSkinElement extends SkinElement {
+  static readonly tagName = 'background-video-skin';
+}
@@ -0,0 +1,8 @@
+/**
+ * Mock HTML background video re-export.
+ *
+ * Exercises: `export *` re-export that resolves to a file with static tagName.
+ * Mirrors real define/background/video.ts which re-exports from
+ * define/media/background-video.ts (the file that registers the custom element).
+ */
+export * from '../media/background-video';
@@ -0,0 +1,8 @@
+/**
+ * Mock HTML background preset.
+ *
+ * Exercises: intentionally incomplete barrel — only exports the feature bundle.
+ * The skin and media element are NOT re-exported here, proving the pipeline
+ * must scan the directory (define/background/) to find them.
+ */
+export { backgroundFeatures } from '../../../core/src/dom/store/features/presets';
@@ -0,0 +1,29 @@
+{
+  "name": "@videojs/react",
+  "exports": {
+    "./video": {
+      "types": "./src/presets/video/index.ts",
+      "default": "./src/presets/video/index.ts"
+    },
+    "./video/*": {
+      "types": "./src/presets/video/*.ts",
+      "default": "./src/presets/video/*.ts"
+    },
+    "./audio": {
+      "types": "./src/presets/audio/index.ts",
+      "default": "./src/presets/audio/index.ts"
+    },
+    "./audio/*": {
+      "types": "./src/presets/audio/*.ts",
+      "default": "./src/presets/audio/*.ts"
+    },
+    "./background": {
+      "types": "./src/presets/background/index.ts",
+      "default": "./src/presets/background/index.ts"
+    },
+    "./background/*": {
+      "types": "./src/presets/background/*.ts",
+      "default": "./src/presets/background/*.ts"
+    }
+  }
+}
@@ -0,0 +1,4 @@
+/**
+ * Mock React BackgroundVideo media component.
+ */
+export function BackgroundVideo(): void {}
@@ -0,0 +1,8 @@
+/**
+ * Mock React background preset.
+ *
+ * Exercises: preset with no features, single skin, custom media element.
+ */
+export { backgroundFeatures } from '../../../../core/src/dom/store/features/presets';
+export { BackgroundVideo } from '../../media/background-video';
+export * from './skin';
@@ -0,0 +1,4 @@
+/**
+ * Mock React BackgroundVideoSkin component.
+ */
+export function BackgroundVideoSkin(): void {}