feat(compiler): add @videojs/compiler package

Introduce the build-time compiler for constrained-JSX skins, rebased onto current main as a clean, additive package. Provides: - core pipeline: parse, compile, generate, JSX runtime, define-component - transforms: import rewriting, replace/wrap, drop-unused locals/imports - matchers + react lowering (add-prop, child-as-prop) - styles className analyzer - tailwind subsystem: design-system loader, decompose, evaluator, deriveClassName, emitCss, tailwindPlugin (three targets) Self-contained: the integration smoke test now reads a vendored skin fixture instead of the skins package, so the compiler builds and tests green independently. 158 tests pass. Wiring: register the project reference (tsconfig), commitlint scope, CI test-matrix entry, and lockfile entries (lightningcss, tailwindcss). The skin migration that consumes this compiler is parked separately — its token refactor conflicts with skin work that landed on main; see the follow-up commit and .claude/plans/compiler-rebase-audit.md.
2026-08-16 02:45:09 +00:00 · 2026-06-17 17:13:40 -07:00
parent 1b31f3e8d7
commit b01a051744
53 changed files with 6097 additions and 8 deletions
@@ -0,0 +1,72 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { compile, type ImportRule } from '..';
+import { anyTag, byTag, hasChild } from '../matchers';
+import { childAsProp, replace } from '../react';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const skinSource = resolve(__dirname, 'fixtures/video-skin.tsx');
+
+/**
+ * End-to-end smoke test: feed a representative constrained-JSX video skin
+ * (vendored under `fixtures/`) through `compile()` with the same shape
+ * `@videojs/react`'s build hook uses, and sanity-check the output's structural
+ * shape. Snapshot-style assertions intentionally use `.toContain` over a full
+ * snapshot to keep the test resilient to incidental whitespace differences
+ * from the TS printer.
+ */
+describe('integration: default/video skin → React', () => {
+  const source = readFileSync(skinSource, 'utf8');
+
+  const imports: Record<string, ImportRule> = {
+    '@videojs/core/components': (name) => ({
+      source: `./src/ui/${name.replace(/^[A-Z]/, (m) => m.toLowerCase()).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`,
+      name,
+    }),
+    '@videojs/icons/components': '@videojs/icons/react',
+    '../tailwind': '@videojs/skins/default/tailwind',
+  };
+
+  const { code } = compile(source, {
+    target: 'react',
+    imports,
+    plugins: [
+      replace({
+        match: byTag('Popover.Root', {
+          when: hasChild(byTag('Popover.Trigger', { when: hasChild(byTag('MuteButton')) })),
+        }),
+        with: { source: './volume-popover', name: 'VolumePopover' },
+        mapChildren: () => [],
+      }),
+      childAsProp({ match: anyTag(['Tooltip.Trigger', 'Popover.Trigger']), prop: 'render' }),
+    ],
+  });
+
+  it('rewrites @videojs/core/components imports to per-identifier UI sources', () => {
+    expect(code).toMatch(/import \{ PlayButton \} from "\.\/src\/ui\/play-button"/);
+    // MuteButton lives under the volume Popover.Root subtree, which is replaced
+    // wholesale by VolumePopover — its import is correctly dropped by the
+    // unused-imports cleanup pass.
+    expect(code).not.toMatch(/import \{ MuteButton \}/);
+  });
+
+  it('rewrites @videojs/icons/components to @videojs/icons/react', () => {
+    expect(code).toContain('@videojs/icons/react');
+    expect(code).not.toContain('@videojs/icons/components');
+  });
+
+  it('substitutes the volume Popover.Root with VolumePopover', () => {
+    expect(code).toContain('<VolumePopover');
+    expect(code).toContain('import { VolumePopover }');
+  });
+
+  it('lifts Tooltip.Trigger / Popover.Trigger children into render props', () => {
+    expect(code).toMatch(/<Tooltip\.Trigger render=\{<PlayButton/);
+  });
+
+  it('keeps unrelated relative tailwind import re-routed to the skins package', () => {
+    expect(code).toContain('@videojs/skins/default/tailwind');
+  });
+});