+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ // Tree has 3 total elements: div (root) + 2 PlayButtons (children)
+ expect(countAllElements(usage.jsx!)).toBe(3);
+
+ const divRoot = usage.jsx;
+ const buttonUsages = findAllInTree(usage.jsx!, u => u.identifier === 'PlayButton');
+
+ expect(divRoot!.identifier).toBe('div');
+ expect(divRoot!.node).toBeDefined();
+
+ expect(buttonUsages).toHaveLength(2); // Two separate instances
+ expect(buttonUsages[0].node).toBeDefined();
+ expect(buttonUsages[1].node).toBeDefined();
+ });
+
+ it('tracks compound component usage with separate entries', () => {
+ const source = `
+ import { TimeSlider } from '@videojs/react';
+ export default function Skin() {
+ return (
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ // Should have 2 separate PlayButton entries in tree
+ const playButtons = findAllInTree(
+ usage.jsx!,
+ el => el.identifier === 'PlayButton',
+ );
+ expect(playButtons).toHaveLength(2);
+
+ // Each should be distinct (different AST nodes)
+ expect(playButtons[0].node).toBeDefined();
+ expect(playButtons[1].node).toBeDefined();
+ expect(playButtons[0].node).not.toBe(playButtons[1].node);
+
+ // Verify different classNames are tracked per instance
+ const primaryButton = usage.classNames.find(
+ cn => cn.component.identifier === 'PlayButton' && cn.type === 'member-expression' && cn.key === 'Primary',
+ );
+ const secondaryButton = usage.classNames.find(
+ cn => cn.component.identifier === 'PlayButton' && cn.type === 'member-expression' && cn.key === 'Secondary',
+ );
+
+ expect(primaryButton).toBeDefined();
+ expect(secondaryButton).toBeDefined();
+
+ // Verify they reference different component instances
+ expect(primaryButton!.component.node).not.toBe(secondaryButton!.component.node);
+ });
+ });
+
+ describe('className Usage Extraction', () => {
+ it('extracts member expression className usage', () => {
+ const source = `
+ import styles from './styles';
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ expect(usage.classNames).toHaveLength(1);
+ expect(usage.classNames[0]).toMatchObject({
+ type: 'member-expression',
+ identifier: 'styles',
+ key: 'Container',
+ component: { identifier: 'div' },
+ });
+ expect(usage.classNames[0].node).toBeDefined();
+ expect(usage.classNames[0].component.node).toBeDefined();
+ });
+
+ it('extracts string literal className usage', () => {
+ const source = `
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ expect(usage.classNames).toHaveLength(1);
+ expect(usage.classNames[0]).toMatchObject({
+ type: 'string-literal',
+ classes: ['button', 'primary'],
+ literalValue: 'button primary',
+ component: { identifier: 'div' },
+ });
+ });
+
+ it('extracts mixed template literal with member expressions and strings', () => {
+ const source = `
+ import styles from './styles';
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ expect(usage.classNames).toHaveLength(3);
+
+ // Member expressions
+ const containerUsage = usage.classNames.find(
+ u => u.type === 'member-expression' && u.key === 'Container',
+ );
+ expect(containerUsage).toBeDefined();
+
+ const buttonUsage = usage.classNames.find(
+ u => u.type === 'member-expression' && u.key === 'Button',
+ );
+ expect(buttonUsage).toBeDefined();
+
+ // Clustered string literals
+ const literalUsage = usage.classNames.find(
+ u => u.type === 'string-literal',
+ );
+ expect(literalUsage).toBeDefined();
+ if (literalUsage?.type === 'string-literal') {
+ expect(literalUsage.classes).toEqual(['prefix', 'middle', 'suffix']);
+ }
+ });
+
+ it('extracts multiple style keys from template literals', () => {
+ const source = `
+ import styles from './styles';
+ export default function Skin() {
+ return (
+
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ // 3 member expressions (Container, Layout, Button)
+ const memberExpressions = usage.classNames.filter(
+ u => u.type === 'member-expression',
+ );
+ expect(memberExpressions).toHaveLength(3);
+ expect(memberExpressions.map(u => u.key)).toEqual(['Container', 'Layout', 'Button']);
+ expect(memberExpressions.every(u => u.identifier === 'styles')).toBe(true);
+ });
+
+ it('captures component info for className on compound components', () => {
+ const source = `
+ import { TimeSlider } from '@videojs/react';
+ import styles from './styles';
+ export default function Skin() {
+ return (
+ Content
;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ expect(usage.defaultExport.componentName).toBe('MediaSkinSimple');
+ expect(usage.defaultExport.node).toBeDefined();
+ expect(usage.defaultExport.jsxElement).toBeDefined();
+
+ // Root element is stored directly in jsx field
+ expect(usage.jsx).toBeDefined();
+ expect(usage.jsx!.identifier).toBe('div');
+ });
+
+ it('handles arrow function exports and marks root', () => {
+ const source = `
+ export default () => Content
;
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ expect(usage.defaultExport.componentName).toBe('UnknownComponent');
+ expect(usage.defaultExport.jsxElement).toBeDefined();
+
+ // Root element is stored directly in jsx field
+ expect(usage.jsx).toBeDefined();
+ expect(usage.jsx!.identifier).toBe('div');
+ });
+ });
+
+ describe('compound parent/ancestor relationships', () => {
+ it('identifies compound parent for non-compound element', () => {
+ const source = `
+ import { Tooltip, PlayButton } from '@videojs/react';
+ export default function Skin() {
+ return (
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ // Root is div
+ const div = usage.jsx;
+ expect(div!.identifier).toBe('div');
+
+ // PlayButton is child of div
+ const playButton = findInTree(usage.jsx!, u => u.identifier === 'PlayButton');
+ expect(playButton).toBeDefined();
+ });
+
+ it('handles compound root with no ancestor', () => {
+ const source = `
+ import { Tooltip } from '@videojs/react';
+ export default function Skin() {
+ return
+ {children}
+
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+
+ // Verify imports
+ expect(usage.imports).toHaveLength(4);
+ expect(usage.imports.map(i => i.source)).toEqual([
+ 'react',
+ '@videojs/react',
+ '@/icons',
+ './styles',
+ ]);
+
+ // Verify JSX usage - collect all identifiers from tree
+ const allElements = findAllInTree(usage.jsx!, () => true);
+ const identifiers = allElements.map(u =>
+ u.member ? `${u.identifier}.${u.member}` : u.identifier,
+ ).sort();
+ expect(identifiers).toEqual([
+ 'PauseIcon',
+ 'PlayButton',
+ 'PlayIcon',
+ 'div',
+ ]);
+
+ // Verify className usage (member expressions only)
+ const memberExpressions = usage.classNames.filter(
+ u => u.type === 'member-expression',
+ );
+ expect(memberExpressions).toHaveLength(2);
+ expect(memberExpressions.map(u => u.key)).toEqual(['Container', 'Button']);
+
+ // Verify default export
+ expect(usage.defaultExport.componentName).toBe('MediaSkinSimple');
+ });
+ });
+});
diff --git a/packages/compiler/test/categorization/class-names.test.ts b/packages/compiler/test/categorization/class-names.test.ts
new file mode 100644
index 000000000..88fab30ce
--- /dev/null
+++ b/packages/compiler/test/categorization/class-names.test.ts
@@ -0,0 +1,156 @@
+/**
+ * className Categorization Tests
+ *
+ * Tests Phase 2: className categorization
+ * Verifies className values are correctly categorized for transformation
+ */
+
+import { describe, expect, it } from 'vitest';
+import { defaultCompilerConfig } from '../../src/configs/videojs-react-skin';
+import { analyze } from '../../src/phases/analyze';
+import { categorize } from '../../src/phases/categorize';
+import { createInitialContext } from '../utils';
+
+describe('className categorization', () => {
+ it('identifies component-match (exact match)', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ import styles from './styles';
+ export default function Skin() {
+ return
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ // Both usages of Button are generic-style (don't match component name)
+ const buttonClassNames = result.classNames.filter(
+ cn => cn.type === 'member-expression' && cn.key === 'Button',
+ );
+ expect(buttonClassNames).toHaveLength(2);
+ expect(buttonClassNames.every(cn => cn.category === 'generic-style')).toBe(true);
+ });
+
+ it('identifies generic-style for compound component keys', () => {
+ const source = `
+ import { TimeSlider } from '@videojs/react';
+ import styles from './styles';
+ export default function Skin() {
+ return (
+
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const containerClassName = result.classNames.find(
+ cn => cn.type === 'member-expression' && cn.key === 'Container',
+ );
+ expect(containerClassName?.category).toBe('generic-style');
+
+ const controlsClassName = result.classNames.find(
+ cn => cn.type === 'member-expression' && cn.key === 'Controls',
+ );
+ expect(controlsClassName?.category).toBe('generic-style');
+ });
+
+ it('handles mixed patterns in same skin', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ import styles from './styles';
+ export default function Skin() {
+ return (
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const categories = new Map(
+ result.classNames
+ .filter(cn => cn.type === 'member-expression')
+ .map(cn => [cn.key, cn.category]),
+ );
+
+ expect(categories.get('Container')).toBe('generic-style');
+ expect(categories.get('PlayButton')).toBe('component-match');
+ expect(categories.get('Button')).toBe('generic-style');
+ });
+
+ it('categorizes string literal className as literal-classes', () => {
+ const source = `
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ expect(result.classNames).toHaveLength(1);
+ expect(result.classNames[0].type).toBe('string-literal');
+ expect(result.classNames[0].category).toBe('literal-classes');
+
+ if (result.classNames[0].type === 'string-literal') {
+ expect(result.classNames[0].classes).toEqual(['button', 'primary', 'active']);
+ }
+ });
+});
diff --git a/packages/compiler/test/categorization/imports.test.ts b/packages/compiler/test/categorization/imports.test.ts
new file mode 100644
index 000000000..0fc833f1e
--- /dev/null
+++ b/packages/compiler/test/categorization/imports.test.ts
@@ -0,0 +1,142 @@
+/**
+ * Import Categorization Tests
+ *
+ * Tests Phase 2: Import categorization
+ * Verifies imports are correctly categorized based on usage
+ */
+
+import { describe, expect, it } from 'vitest';
+import { defaultCompilerConfig } from '../../src/configs/videojs-react-skin';
+import { analyze } from '../../src/phases/analyze';
+import { categorize } from '../../src/phases/categorize';
+import { createInitialContext } from '../utils';
+
+describe('import categorization', () => {
+ it('categorizes VJS component imports', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ export default function Skin() {
+ return {children}
;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const reactImport = result.imports.find(i => i.source === 'react');
+ expect(reactImport?.category).toBe('framework');
+ });
+
+ it('categorizes style imports', () => {
+ const source = `
+ import styles from './styles';
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const styleImport = result.imports.find(i => i.source === './styles');
+ expect(styleImport?.category).toBe('style');
+ });
+
+ it('categorizes VJS core imports', () => {
+ const source = `
+ import { formatTime } from '@videojs/utils';
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const coreImport = result.imports.find(i => i.source === '@videojs/utils');
+ expect(coreImport?.category).toBe('vjs-core');
+ });
+
+ it('categorizes VJS icon imports', () => {
+ const source = `
+ import { PlayIcon, PauseIcon } from '@/icons';
+ export default function Skin() {
+ return (
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const iconImport = result.imports.find(i => i.source === '@/icons');
+ expect(iconImport?.category).toBe('vjs-icon');
+ });
+
+ it('categorizes external imports', () => {
+ const source = `
+ import { someUtility } from 'lodash';
+ export default function Skin() {
+ return ;
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const externalImport = result.imports.find(i => i.source === 'lodash');
+ expect(externalImport?.category).toBe('external');
+ });
+
+ it('handles multiple imports with different categories', () => {
+ const source = `
+ import type { PropsWithChildren } from 'react';
+ import { PlayButton } from '@videojs/react';
+ import { PlayIcon } from '@/icons';
+ import styles from './styles';
+
+ export default function Skin({ children }: PropsWithChildren) {
+ return (
+
+
+
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ expect(result.imports).toHaveLength(4);
+
+ const categories = new Map(
+ result.imports.map(i => [i.source, i.category]),
+ );
+
+ expect(categories.get('react')).toBe('framework');
+ expect(categories.get('@videojs/react')).toBe('vjs-component');
+ expect(categories.get('@/icons')).toBe('vjs-icon'); // Icons get their own category
+ expect(categories.get('./styles')).toBe('style');
+ });
+});
diff --git a/packages/compiler/test/categorization/jsx.test.ts b/packages/compiler/test/categorization/jsx.test.ts
new file mode 100644
index 000000000..cf107c24a
--- /dev/null
+++ b/packages/compiler/test/categorization/jsx.test.ts
@@ -0,0 +1,376 @@
+/**
+ * JSX Element Categorization Tests
+ *
+ * Tests Phase 2: JSX element categorization
+ * Verifies JSX elements are correctly categorized and pattern metadata linked
+ */
+
+import type { CategorizedJSXUsage } from '../../src/configs/types';
+import { describe, expect, it } from 'vitest';
+import { defaultCompilerConfig } from '../../src/configs/videojs-react-skin';
+import { analyze } from '../../src/phases/analyze';
+import { categorize } from '../../src/phases/categorize';
+import { createInitialContext } from '../utils';
+
+// Helper function for tree traversal
+function findInTree(root: CategorizedJSXUsage, predicate: (el: CategorizedJSXUsage) => boolean): CategorizedJSXUsage | undefined {
+ if (predicate(root)) return root;
+ for (const child of root.children) {
+ if ('category' in child) {
+ // Only recurse into categorized JSXUsage elements
+ const found = findInTree(child, predicate);
+ if (found) return found;
+ }
+ }
+ return undefined;
+}
+
+describe('jSX element categorization', () => {
+ it('categorizes native HTML elements', () => {
+ const source = `
+ export default function Skin() {
+ return (
+
+
+ Text
+
+ );
+ }
+ `;
+
+ const usage = analyze(createInitialContext(source), defaultCompilerConfig);
+ const result = categorize(usage, defaultCompilerConfig);
+
+ const divElement = result.jsx;
+ const buttonElement = findInTree(result.jsx, el => el.identifier === 'button');
+ const spanElement = findInTree(result.jsx, el => el.identifier === 'span');
+
+ expect(divElement?.category).toBe('native-element');
+ expect(buttonElement?.category).toBe('native-element');
+ expect(spanElement?.category).toBe('native-element');
+ });
+
+ it('categorizes MediaContainer', () => {
+ const source = `
+ import { MediaContainer } from '@videojs/react';
+ export default function Skin() {
+ return
+
+ );
+ }
+ `;
+
+ const result = compile(createSourceContext(source));
+
+ // Verify imports section
+ expect(result).toContain(`import { MediaSkinElement } from '@/media/media-skin';`);
+ expect(result).toContain(`import { defineCustomElement } from '@/utils/custom-element';`);
+ expect(result).toContain(`import styles from './styles.css';`);
+ expect(result).toContain(`import '@/define/media-play-button';`);
+
+ // Verify template function
+ expect(result).toContain('export function getTemplateHTML()');
+ expect(result).toContain('$' + '{MediaSkinElement.getTemplateHTML()}');
+ expect(result).toContain('');
+
+ // Verify class declaration
+ expect(result).toContain('export class MediaSkinSimpleElement extends MediaSkinElement');
+ expect(result).toContain('static getTemplateHTML: () => string = getTemplateHTML');
+
+ // Verify custom element registration
+ expect(result).toContain(`defineCustomElement('media-skin-simple', MediaSkinSimpleElement);`);
+ });
+
+ it('compiles FrostedSkin with correct naming', () => {
+ const source = `
+ import { PlayButton, MuteButton } from '@videojs/react';
+ import { PlayIcon } from '@/icons';
+ import styles from './styles';
+
+ export default function FrostedSkin() {
+ return (
+
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(createSourceContext(source));
+
+ // Verify derived names
+ expect(result).toContain('export class MediaSkinFrostedElement');
+ expect(result).toContain(`defineCustomElement('media-skin-frosted', MediaSkinFrostedElement);`);
+
+ // Verify icon import deduplicated
+ expect(result).toContain(`import '@/icons';`);
+ const iconMatches = result.match(/import '@\/icons';/g);
+ expect(iconMatches).toHaveLength(1); // Only once!
+ });
+
+ // External imports are currently unsupported
+ it.skip('removes framework imports and keeps external', () => {
+ const source = `
+ import type { PropsWithChildren } from 'react';
+ import { PlayButton } from '@videojs/react';
+ import { clsx } from 'clsx';
+ import styles from './styles';
+
+ export default function MySkin({ children }: PropsWithChildren) {
+ return
+
+
+
+
+
+
+
+ Play
+ Pause
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enter Fullscreen
+ Exit Fullscreen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+
+ // Should have HTML imports
+ expect(result.imports).toContain(`import '@/define/media-play-button';`);
+ expect(result.imports).toContain(`import '@/define/media-time-slider';`);
+ expect(result.imports).toContain(`import '@/icons';`);
+ expect(result.imports).toContain(`import styles from './styles.css';`);
+
+ // Should remove React
+ expect(result.removedImports).toContain('react');
+
+ // Should NOT have React imports in output
+ expect(result.imports).not.toContain('react');
+ });
+ });
+});
diff --git a/packages/compiler/test/jsx-transform.test.ts b/packages/compiler/test/jsx-transform.test.ts
new file mode 100644
index 000000000..c494f6cc1
--- /dev/null
+++ b/packages/compiler/test/jsx-transform.test.ts
@@ -0,0 +1,319 @@
+import { describe, expect, it } from 'vitest';
+import { compileForTest as compile } from './helpers/compile';
+
+describe('jSX Transformation', () => {
+ describe('element Name Transformation', () => {
+ it('transforms custom elements to kebab-case with media- prefix', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ export default function TestSkin() {
+ return \n \n
');
+ });
+ });
+
+ describe('attribute Transformation', () => {
+ it('transforms className to class', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ expect(result.classNames).toContain('container');
+ });
+
+ it('extracts className from member expression', () => {
+ const source = `
+ const styles = { Button: 'button' };
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ expect(result.classNames).toContain('button');
+ });
+
+ it('converts camelCase attributes to kebab-case', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toContain('data-test-id="test"');
+ expect(result.html).toContain('aria-label="Label"');
+ });
+
+ it('handles numeric attribute values', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ });
+
+ it('handles boolean attribute values', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ // Boolean true outputs as standard HTML boolean attribute (no value)
+ expect(result.html).toBe('');
+ });
+
+ it('handles boolean attributes without value', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ });
+ });
+
+ describe('children Transformation', () => {
+ it('transforms {children} to slot element', () => {
+ const source = `
+ export default function TestSkin({ children }) {
+ return {children}
;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('\n
');
+ });
+
+ it('preserves text content', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ });
+
+ it('handles nested elements', () => {
+ const source = `
+ export default function TestSkin() {
+ return (
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe(
+ '\n \n
',
+ );
+ });
+ });
+
+ describe('self-Closing Elements', () => {
+ it('converts self-closing elements to explicit closing tags', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ export default function TestSkin() {
+ return 
;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.html).toBe('');
+ });
+ });
+
+ describe('complex Examples', () => {
+ it('handles compound components with className and children', () => {
+ const source = `
+ import { TimeSlider } from '@videojs/react';
+ const styles = {
+ Root: 'root',
+ Track: 'track',
+ Progress: 'progress'
+ };
+
+ export default function TestSkin({ children }) {
+ return (
+
+ {children}
+
+
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+
+ expect(result.html).toContain('
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+
+ expect(result.html).toContain('
+
+
+
+ ');
+ expect(result.html).toContain('');
+ expect(result.html).toContain('');
+ expect(result.html).toContain('');
+ expect(result.classNames).toEqual(expect.arrayContaining(['wrapper', 'play-btn', 'controls']));
+ });
+ });
+
+ describe('cSS Generation', () => {
+ it.skip('generates placeholder CSS for extracted classNames (CSS generates template reference, not actual rules)', () => {
+ const source = `
+ export default function TestSkin() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+
+ expect(result.css).toContain('.button {');
+ expect(result.css).toContain('.container {');
+ expect(result.css).toContain('/* TODO: Add styles */');
+ });
+
+ it('sorts classNames alphabetically', () => {
+ const source = `
+ export default function TestSkin() {
+ return (
+ =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source.endsWith('.css'),
+ );
+
+ expect(cssImport).toBeDefined();
+ expect(cssImport?.source).toBe('./styles.css');
+ expect(cssImport?.specifiers).toEqual([{ type: 'default', name: 'styles' }]);
+ });
+
+ it('transforms style import without extension', () => {
+ const styleImport: CategorizedImport = {
+ source: './styles',
+ specifiers: { named: [], default: 'styles' },
+ category: 'style',
+ };
+
+ const context = createContext([styleImport]);
+ const result = projectImports(context, { styleVariableName: 'styles' });
+
+ const cssImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source.endsWith('.css'),
+ );
+
+ expect(cssImport?.source).toBe('./styles.css');
+ });
+ });
+
+ describe('vJS Component Imports', () => {
+ it('transforms component imports to side-effect define imports', () => {
+ const componentImport: CategorizedImport = {
+ source: '@videojs/react',
+ specifiers: { named: ['PlayButton', 'MuteButton'], default: undefined },
+ category: 'vjs-component',
+ };
+
+ const context = createContext([componentImport]);
+ const result = projectImports(context, {});
+
+ // Should include video-provider comment and import
+ const comment = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'comment',
+ );
+ expect(comment).toBeDefined();
+ expect(comment?.style).toBe('line');
+ expect(comment?.value).toContain('video-provider');
+
+ const videoProviderImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === '@/define/video-provider',
+ );
+ expect(videoProviderImport).toBeDefined();
+ expect(videoProviderImport?.specifiers).toEqual([]);
+
+ // Should include component define imports (sorted)
+ const playButtonImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === '@/define/media-play-button',
+ );
+ expect(playButtonImport).toBeDefined();
+ expect(playButtonImport?.specifiers).toEqual([]);
+
+ const muteButtonImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === '@/define/media-mute-button',
+ );
+ expect(muteButtonImport).toBeDefined();
+ });
+
+ it('sorts component imports alphabetically by element name', () => {
+ const componentImport: CategorizedImport = {
+ source: '@videojs/react',
+ specifiers: { named: ['VolumeSlider', 'PlayButton', 'MuteButton'], default: undefined },
+ category: 'vjs-component',
+ };
+
+ const context = createContext([componentImport]);
+ const result = projectImports(context, {});
+
+ const defineImports = result.filter(
+ (entry): entry is Extract =>
+ typeof entry === 'object'
+ && entry.type === 'import'
+ && entry.source.startsWith('@/define/')
+ && entry.source !== '@/define/video-provider',
+ );
+
+ expect(defineImports[0].source).toBe('@/define/media-mute-button');
+ expect(defineImports[1].source).toBe('@/define/media-play-button');
+ expect(defineImports[2].source).toBe('@/define/media-volume-slider');
+ });
+ });
+
+ describe('vJS Icon Imports', () => {
+ it('collapses multiple icon imports to single side-effect import', () => {
+ const iconImport1: CategorizedImport = {
+ source: '@videojs/react/icons',
+ specifiers: { named: ['PlayIcon', 'PauseIcon'], default: undefined },
+ category: 'vjs-icon',
+ };
+
+ const iconImport2: CategorizedImport = {
+ source: '@/icons',
+ specifiers: { named: ['VolumeIcon'], default: undefined },
+ category: 'vjs-icon',
+ };
+
+ const context = createContext([iconImport1, iconImport2]);
+ const result = projectImports(context, {});
+
+ const iconImports = result.filter(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === '@/icons',
+ );
+
+ // Should only have ONE @/icons import despite multiple source imports
+ expect(iconImports).toHaveLength(1);
+ expect(iconImports[0].specifiers).toEqual([]);
+ });
+ });
+
+ describe('framework Imports', () => {
+ it('removes framework imports (React, PropsWithChildren, etc.)', () => {
+ const frameworkImport: CategorizedImport = {
+ source: 'react',
+ specifiers: { named: ['useState', 'useEffect'], default: 'React' },
+ category: 'framework',
+ };
+
+ const context = createContext([frameworkImport]);
+ const result = projectImports(context, {});
+
+ // Should NOT include any react imports
+ const reactImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === 'react',
+ );
+
+ expect(reactImport).toBeUndefined();
+ });
+ });
+
+ describe('vJS Core Imports', () => {
+ it('removes vjs-core imports (base imports added separately)', () => {
+ const coreImport: CategorizedImport = {
+ source: '@videojs/core',
+ specifiers: { named: ['MediaSkinElement'], default: undefined },
+ category: 'vjs-core',
+ };
+
+ const context = createContext([coreImport]);
+ const result = projectImports(context, {});
+
+ // Should NOT include the categorized core import
+ // (base imports are always added, but not from the categorized imports)
+ const coreImports = result.filter(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === '@videojs/core',
+ );
+
+ expect(coreImports).toHaveLength(0);
+ });
+ });
+
+ // External imports are currently unsupported
+ describe.skip('external Imports', () => {
+ it('preserves external imports as-is', () => {
+ const externalImport: CategorizedImport = {
+ source: 'some-external-lib',
+ specifiers: { named: ['foo', 'bar'], default: 'lib' },
+ category: 'external',
+ };
+
+ const context = createContext([externalImport]);
+ const result = projectImports(context, {});
+
+ const external = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === 'some-external-lib',
+ );
+
+ expect(external).toBeDefined();
+ expect(external?.specifiers).toContainEqual({ type: 'default', name: 'lib' });
+ expect(external?.specifiers).toContainEqual({ type: 'named', name: 'foo' });
+ expect(external?.specifiers).toContainEqual({ type: 'named', name: 'bar' });
+ });
+ });
+
+ describe('complete Integration', () => {
+ it('produces correct structure for realistic skin imports', () => {
+ const imports: CategorizedImport[] = [
+ {
+ source: 'react',
+ specifiers: { named: [], default: 'React' },
+ category: 'framework',
+ },
+ {
+ source: './styles.ts',
+ specifiers: { named: [], default: 'styles' },
+ category: 'style',
+ },
+ {
+ source: '@videojs/react',
+ specifiers: { named: ['PlayButton', 'MediaContainer'], default: undefined },
+ category: 'vjs-component',
+ },
+ {
+ source: '@videojs/react/icons',
+ specifiers: { named: ['PlayIcon', 'PauseIcon'], default: undefined },
+ category: 'vjs-icon',
+ },
+ ];
+
+ const context = createContext(imports);
+ const result = projectImports(context, {});
+
+ // Verify structure order:
+ // 1. Base imports (2)
+ expect(result[0]).toMatchObject({ type: 'import', source: '@/media/media-skin' });
+ expect(result[1]).toMatchObject({ type: 'import', source: '@/utils/custom-element' });
+
+ // 2. Style import (1)
+ expect(result[2]).toMatchObject({ type: 'import', source: './styles.css' });
+
+ // 3. video-provider comment + import (2)
+ expect(result[3]).toMatchObject({ type: 'comment' });
+ expect(result[4]).toMatchObject({ type: 'import', source: '@/define/video-provider' });
+
+ // 4. Component define imports (2, sorted)
+ expect(result[5]).toMatchObject({ type: 'import', source: '@/define/media-container' });
+ expect(result[6]).toMatchObject({ type: 'import', source: '@/define/media-play-button' });
+
+ // 5. Icons import (1)
+ expect(result[7]).toMatchObject({ type: 'import', source: '@/icons' });
+
+ // Total: 8 entries
+ expect(result).toHaveLength(8);
+
+ // Framework import should NOT be present
+ const reactImport = result.find(
+ (entry): entry is Extract =>
+ typeof entry === 'object' && entry.type === 'import' && entry.source === 'react',
+ );
+ expect(reactImport).toBeUndefined();
+ });
+ });
+});
diff --git a/packages/compiler/test/projection/static-values.test.ts b/packages/compiler/test/projection/static-values.test.ts
new file mode 100644
index 000000000..4c14d7947
--- /dev/null
+++ b/packages/compiler/test/projection/static-values.test.ts
@@ -0,0 +1,76 @@
+import type { CompilerConfig } from '../../src/configs/types';
+import { describe, expect, it } from 'vitest';
+import { analyze, categorize, defaultCompilerConfig, projectModule } from '../../src';
+import { createInitialContext } from '../utils';
+
+describe('projection State Static Values', () => {
+ it('supports static values in projectionState config', () => {
+ const source = `
+ import { PlayButton } from '@videojs/react';
+ export default function TestSkin() {
+ return ');
+
+ // Overlay (simple div)
+ expect(result.html).toContain('');
+ expect(result.html).not.toContain('');
+ expect(result.html).not.toContain('');
+ expect(result.html).not.toContain('');
+
+ // Mute button (wrapped in Popover)
+ expect(result.html).toContain(' {
+ const source = `
+ export default function TestSkin() {
+ const styles = { A: 'class-a', B: 'class-b', C: 'class-c' };
+ return (
+
+
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+ const classOrder = result.classNames;
+
+ expect(classOrder).toEqual(['apple', 'mango', 'zebra']);
+ });
+
+ it.skip('handles empty classNames gracefully (CSS generates template reference, not comments)', () => {
+ const source = `
+ export default function TestSkin() {
+ return No classes
;
+ }
+ `;
+
+ const result = compile(source);
+
+ expect(result.classNames).toEqual([]);
+ expect(result.css).toContain('/* No classes found */');
+ });
+ });
+
+ describe('component Name Extraction', () => {
+ it('extracts component name from default export', () => {
+ const source = `
+ export default function MediaSkinMinimal() {
+ return ;
+ }
+ `;
+
+ const result = compile(source);
+ expect(result.componentName).toBe('MediaSkinMinimal');
+ });
+
+ it('handles arrow function components', () => {
+ const source = `
+ export default () => ;
+ `;
+
+ const result = compile(source);
+ // Arrow functions without name will be 'UnknownComponent'
+ expect(result.componentName).toBe('UnknownComponent');
+ expect(result.html).toBe('');
+ });
+ });
+});
diff --git a/packages/compiler/test/projection/format-imports.test.ts b/packages/compiler/test/projection/format-imports.test.ts
new file mode 100644
index 000000000..182b9f134
--- /dev/null
+++ b/packages/compiler/test/projection/format-imports.test.ts
@@ -0,0 +1,256 @@
+import type { ProjectedImportEntry } from '../../src/types';
+import { describe, expect, it } from 'vitest';
+import { formatImportEntry, formatImports } from '../../src/utils/formatters/imports';
+
+/**
+ * Test suite for import formatting functions
+ * Verifies structured ProjectedImportEntry → string conversion
+ */
+describe('import Formatting', () => {
+ describe('formatImportEntry', () => {
+ describe('raw Strings', () => {
+ it('passes through raw string unchanged', () => {
+ const entry = 'import { foo } from \'bar\';';
+ expect(formatImportEntry(entry)).toBe(entry);
+ });
+ });
+
+ describe('comments', () => {
+ it('formats line comment', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'comment',
+ style: 'line',
+ value: 'This is a comment',
+ };
+
+ expect(formatImportEntry(entry)).toBe('// This is a comment');
+ });
+
+ it('formats multi-line line comment', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'comment',
+ style: 'line',
+ value: ['Line 1', 'Line 2', 'Line 3'],
+ };
+
+ expect(formatImportEntry(entry)).toBe('// Line 1\n// Line 2\n// Line 3');
+ });
+
+ it('formats block comment', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'comment',
+ style: 'block',
+ value: 'This is a block comment',
+ };
+
+ expect(formatImportEntry(entry)).toBe('/*\n * This is a block comment\n */');
+ });
+
+ it('formats multi-line block comment', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'comment',
+ style: 'block',
+ value: ['Line 1', 'Line 2', 'Line 3'],
+ };
+
+ expect(formatImportEntry(entry)).toBe('/*\n * Line 1\n * Line 2\n * Line 3\n */');
+ });
+ });
+
+ describe('side-Effect Imports', () => {
+ it('formats import with no specifiers', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: '@/define/video-provider',
+ specifiers: [],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import \'@/define/video-provider\';');
+ });
+
+ it('formats import with undefined specifiers', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: '@/icons',
+ };
+
+ expect(formatImportEntry(entry)).toBe('import \'@/icons\';');
+ });
+ });
+
+ describe('default Imports', () => {
+ it('formats default import without braces', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: './styles.css',
+ specifiers: [{ type: 'default', name: 'styles' }],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import styles from \'./styles.css\';');
+ });
+ });
+
+ describe('named Imports', () => {
+ it('formats single named import', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: '@/media/media-skin',
+ specifiers: [{ type: 'named', name: 'MediaSkinElement' }],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import { MediaSkinElement } from \'@/media/media-skin\';');
+ });
+
+ it('formats multiple named imports', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'react',
+ specifiers: [
+ { type: 'named', name: 'useState' },
+ { type: 'named', name: 'useEffect' },
+ { type: 'named', name: 'useCallback' },
+ ],
+ };
+
+ expect(formatImportEntry(entry)).toBe(
+ 'import { useState, useEffect, useCallback } from \'react\';',
+ );
+ });
+
+ it('formats named import with alias', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'some-lib',
+ specifiers: [{ type: 'named', name: 'foo', alias: 'bar' }],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import { foo as bar } from \'some-lib\';');
+ });
+
+ it('formats mixed named imports with and without aliases', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'lib',
+ specifiers: [
+ { type: 'named', name: 'a' },
+ { type: 'named', name: 'b', alias: 'B' },
+ { type: 'named', name: 'c' },
+ ],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import { a, b as B, c } from \'lib\';');
+ });
+ });
+
+ describe('namespace Imports', () => {
+ it('formats namespace import', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'utils',
+ specifiers: [{ type: 'namespace', name: 'Utils' }],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import { * as Utils } from \'utils\';');
+ });
+ });
+
+ describe('mixed Imports', () => {
+ it('formats default + named imports', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'react',
+ specifiers: [
+ { type: 'default', name: 'React' },
+ { type: 'named', name: 'useState' },
+ ],
+ };
+
+ expect(formatImportEntry(entry)).toBe('import { React, useState } from \'react\';');
+ });
+
+ it('formats all types together', () => {
+ const entry: ProjectedImportEntry = {
+ type: 'import',
+ source: 'lib',
+ specifiers: [
+ { type: 'default', name: 'Lib' },
+ { type: 'namespace', name: 'NS' },
+ { type: 'named', name: 'foo' },
+ { type: 'named', name: 'bar', alias: 'baz' },
+ ],
+ };
+
+ expect(formatImportEntry(entry)).toBe(
+ 'import { Lib, * as NS, foo, bar as baz } from \'lib\';',
+ );
+ });
+ });
+ });
+
+ describe('formatImports', () => {
+ it('formats array of mixed entries', () => {
+ const entries: ProjectedImportEntry[] = [
+ {
+ type: 'import',
+ source: '@/media/media-skin',
+ specifiers: [{ type: 'named', name: 'MediaSkinElement' }],
+ },
+ {
+ type: 'import',
+ source: './styles.css',
+ specifiers: [{ type: 'default', name: 'styles' }],
+ },
+ {
+ type: 'comment',
+ style: 'line',
+ value: 'Side-effect imports',
+ },
+ {
+ type: 'import',
+ source: '@/define/video-provider',
+ specifiers: [],
+ },
+ 'import { foo } from \'bar\';', // Raw string
+ ];
+
+ const result = formatImports(entries);
+
+ expect(result).toBe(
+ 'import { MediaSkinElement } from \'@/media/media-skin\';\n'
+ + 'import styles from \'./styles.css\';\n'
+ + '// Side-effect imports\n'
+ + 'import \'@/define/video-provider\';\n'
+ + 'import { foo } from \'bar\';',
+ );
+ });
+
+ it('handles empty array', () => {
+ const entries: ProjectedImportEntry[] = [];
+ const result = formatImports(entries);
+
+ expect(result).toBe('');
+ });
+
+ it('produces output ready for composeModule', () => {
+ // Verify that formatted output is a single string ready to use
+ const entries: ProjectedImportEntry[] = [
+ {
+ type: 'import',
+ source: '@/media/media-skin',
+ specifiers: [{ type: 'named', name: 'MediaSkinElement' }],
+ },
+ {
+ type: 'import',
+ source: '@/utils/custom-element',
+ specifiers: [{ type: 'named', name: 'defineCustomElement' }],
+ },
+ ];
+
+ const result = formatImports(entries);
+
+ expect(result).toBe(
+ 'import { MediaSkinElement } from \'@/media/media-skin\';\nimport { defineCustomElement } from \'@/utils/custom-element\';',
+ );
+ });
+ });
+});
diff --git a/packages/compiler/test/projection/imports.test.ts b/packages/compiler/test/projection/imports.test.ts
new file mode 100644
index 000000000..2941ace49
--- /dev/null
+++ b/packages/compiler/test/projection/imports.test.ts
@@ -0,0 +1,312 @@
+import type { CategorizedContext, CategorizedImport } from '../../src/configs/types';
+import type { ProjectedImportEntry } from '../../src/types';
+import { describe, expect, it } from 'vitest';
+import { projectImports } from '../../src/configs/videojs-react-skin/projectors/imports';
+
+/**
+ * Test suite for imports projection
+ * Verifies projection produces correct ProjectedImportEntry[] output
+ */
+describe('imports Projection', () => {
+ function createContext(imports: CategorizedImport[]): CategorizedContext {
+ return {
+ imports,
+ classNames: [],
+ jsx: {
+ type: 'JSXElement',
+ name: 'div',
+ attributes: {},
+ children: [],
+ category: 'native-element',
+ },
+ defaultExport: {
+ name: 'TestComponent',
+ category: 'react-functional-component',
+ },
+ projectionState: {},
+ };
+ }
+
+ describe('base Imports', () => {
+ it('always includes MediaSkinElement and defineCustomElement', () => {
+ const context = createContext([]);
+ const result = projectImports(context, {});
+
+ // Base imports + video-provider comment + import = 4 entries
+ expect(result).toHaveLength(4);
+ expect(result[0]).toEqual({
+ type: 'import',
+ source: '@/media/media-skin',
+ specifiers: [{ type: 'named', name: 'MediaSkinElement' }],
+ });
+ expect(result[1]).toEqual({
+ type: 'import',
+ source: '@/utils/custom-element',
+ specifiers: [{ type: 'named', name: 'defineCustomElement' }],
+ });
+ // video-provider comment and import always included
+ expect(result[2]).toMatchObject({ type: 'comment' });
+ expect(result[3]).toMatchObject({ type: 'import', source: '@/define/video-provider' });
+ });
+ });
+
+ describe('style Imports', () => {
+ it('transforms TypeScript style import to CSS', () => {
+ const styleImport: CategorizedImport = {
+ source: './styles.ts',
+ specifiers: { named: [], default: 'styles' },
+ category: 'style',
+ };
+
+ const context = createContext([styleImport]);
+ const result = projectImports(context, { styleVariableName: 'styles' });
+
+ const cssImport = result.find(
+ (entry): entry is Extract
+
+
+
+ );
+ }
+ `;
+
+ const result = compile(source);
+
+ // Template literals are not fully resolved at compile time
+ // This is expected - we just extract what we can
+ expect(result.html).toContain('');
+ expect(result.html).toContain(' {
+ const componentTests = [
+ { react: 'PlayButton', html: 'media-play-button' },
+ { react: 'MuteButton', html: 'media-mute-button' },
+ { react: 'FullscreenButton', html: 'media-fullscreen-button' },
+ { react: 'MediaContainer', html: 'media-container' },
+ { react: 'CurrentTimeDisplay', html: 'media-current-time-display' },
+ { react: 'DurationDisplay', html: 'media-duration-display' },
+ { react: 'PreviewTimeDisplay', html: 'media-preview-time-display' },
+ { react: 'PlayIcon', html: 'media-play-icon' },
+ { react: 'PauseIcon', html: 'media-pause-icon' },
+ { react: 'VolumeHighIcon', html: 'media-volume-high-icon' },
+ { react: 'VolumeLowIcon', html: 'media-volume-low-icon' },
+ { react: 'VolumeOffIcon', html: 'media-volume-off-icon' },
+ { react: 'FullscreenEnterIcon', html: 'media-fullscreen-enter-icon' },
+ { react: 'FullscreenExitIcon', html: 'media-fullscreen-exit-icon' },
+ ];
+
+ componentTests.forEach(({ react, html }) => {
+ const source = `import { ${react} } from '@videojs/react';
+export default function Test() { return <${react} />; }`;
+ const result = compile(source);
+ expect(result.html).toBe(`<${html}>`);
+ });
+ });
+
+ it('verifies all slider compound components transform correctly', () => {
+ const compoundTests = [
+ // TimeSlider
+ { react: 'TimeSlider.Root', html: 'media-time-slider', base: 'TimeSlider' },
+ { react: 'TimeSlider.Track', html: 'media-time-slider-track', base: 'TimeSlider' },
+ { react: 'TimeSlider.Progress', html: 'media-time-slider-progress', base: 'TimeSlider' },
+ { react: 'TimeSlider.Pointer', html: 'media-time-slider-pointer', base: 'TimeSlider' },
+ { react: 'TimeSlider.Thumb', html: 'media-time-slider-thumb', base: 'TimeSlider' },
+ // VolumeSlider
+ { react: 'VolumeSlider.Root', html: 'media-volume-slider', base: 'VolumeSlider' },
+ { react: 'VolumeSlider.Track', html: 'media-volume-slider-track', base: 'VolumeSlider' },
+ { react: 'VolumeSlider.Progress', html: 'media-volume-slider-progress', base: 'VolumeSlider' },
+ { react: 'VolumeSlider.Thumb', html: 'media-volume-slider-thumb', base: 'VolumeSlider' },
+ ];
+
+ compoundTests.forEach(({ react, html, base }) => {
+ const source = `import { ${base} } from '@videojs/react';
+export default function Test() { return <${react} />; }`;
+ const result = compile(source);
+ expect(result.html).toBe(`<${html}>`);
+ });
+ });
+});
diff --git a/packages/compiler/test/skins/simple-skin.test.ts b/packages/compiler/test/skins/simple-skin.test.ts
new file mode 100644
index 000000000..3e51a8043
--- /dev/null
+++ b/packages/compiler/test/skins/simple-skin.test.ts
@@ -0,0 +1,145 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { compileForTest as compile } from '../helpers/compile';
+import { elementExists, getClasses, parseElement, querySelector, querySelectorAll } from '../helpers/dom';
+
+describe('skin: Simple', () => {
+ it('compiles SimpleSkin.tsx with correct DOM structure', () => {
+ const source = readFileSync(
+ join(__dirname, '../fixtures/skins/simple/SimpleSkin.tsx'),
+ 'utf-8',
+ );
+
+ const result = compile(source);
+ const root = parseElement(result.html);
+
+ // Root element
+ expect(root.tagName.toLowerCase()).toBe('media-container');
+ expect(getClasses(root)).toContain('container');
+
+ // Children slot
+ const slot = querySelector(root, 'slot[name="media"]');
+ expect(slot.getAttribute('slot')).toBe('media');
+
+ // Controls container
+ const controls = querySelector(root, 'div.controls');
+ expect(controls).toBeDefined();
+
+ // Play button - className is PlayButton (component-match, omitted)
+ const playButton = querySelector(controls, 'media-play-button');
+ expect(playButton).toBeDefined();
+
+ // Time slider - verify Root → base element (no -root suffix)
+ const timeSlider = querySelector(controls, 'media-time-slider');
+ expect(getClasses(timeSlider)).toContain('slider-root'); // CSS module KEY (SliderRoot → slider-root)
+
+ // Time slider track
+ const track = querySelector(timeSlider, 'media-time-slider-track');
+ expect(getClasses(track)).toContain('slider-track'); // CSS module KEY (SliderTrack → slider-track)
+
+ // Time slider progress
+ const progress = querySelector(track, 'media-time-slider-progress');
+ expect(getClasses(progress)).toContain('slider-progress'); // CSS module KEY (SliderProgress → slider-progress)
+
+ // Verify no media-time-slider-root exists (should be media-time-slider)
+ expect(elementExists(root, 'media-time-slider-root')).toBe(false);
+ });
+
+ it('verifies all expected elements exist in DOM tree', () => {
+ const source = readFileSync(
+ join(__dirname, '../fixtures/skins/simple/SimpleSkin.tsx'),
+ 'utf-8',
+ );
+
+ const result = compile(source);
+ const root = parseElement(result.html);
+
+ // Check root itself
+ expect(root.tagName.toLowerCase()).toBe('media-container');
+
+ const expectedSelectors = [
+ 'slot[name="media"]',
+ 'div.controls',
+ 'media-play-button',
+ 'media-time-slider', // Not media-time-slider-root!
+ 'media-time-slider-track',
+ 'media-time-slider-progress',
+ ];
+
+ expectedSelectors.forEach((selector) => {
+ expect(
+ elementExists(root, selector),
+ `Expected element to exist: ${selector}`,
+ ).toBe(true);
+ });
+ });
+
+ it('verifies DOM nesting structure', () => {
+ const source = readFileSync(
+ join(__dirname, '../fixtures/skins/simple/SimpleSkin.tsx'),
+ 'utf-8',
+ );
+
+ const result = compile(source);
+ const root = parseElement(result.html);
+
+ // Verify parent-child relationships
+ const controls = querySelector(root, 'div.controls');
+ const playButton = querySelector(controls, 'media-play-button');
+ const timeSlider = querySelector(controls, 'media-time-slider');
+
+ // Play button should be direct child of controls
+ expect(playButton.parentElement).toBe(controls);
+
+ // Time slider should be direct child of controls
+ expect(timeSlider.parentElement).toBe(controls);
+
+ // Track should be child of time slider
+ const track = querySelector(timeSlider, 'media-time-slider-track');
+ expect(track.parentElement).toBe(timeSlider);
+
+ // Progress should be child of track
+ const progress = querySelector(track, 'media-time-slider-progress');
+ expect(progress.parentElement).toBe(track);
+ });
+
+ it('verifies all classNames are extracted', () => {
+ const source = readFileSync(
+ join(__dirname, '../fixtures/skins/simple/SimpleSkin.tsx'),
+ 'utf-8',
+ );
+
+ const result = compile(source);
+
+ // Expected classes: CSS module KEYS (not values), kebab-cased, component-match omitted
+ const expectedClasses = [
+ 'container', // Container (generic-style, kebab-case)
+ 'controls', // Controls (generic-style, kebab-case)
+ // play-button omitted (component-match)
+ 'slider-progress', // SliderProgress (generic-style, kebab-case)
+ 'slider-root', // SliderRoot (generic-style, kebab-case)
+ 'slider-track', // SliderTrack (generic-style, kebab-case)
+ ];
+
+ expect(result.classNames).toEqual(expectedClasses);
+
+ // Verify classes exist in DOM
+ const root = parseElement(result.html);
+
+ // Include root element in search
+ const allElements = [root, ...querySelectorAll(root, '*')];
+ const domClasses = new Set();
+
+ allElements.forEach((el) => {
+ getClasses(el).forEach(cls => domClasses.add(cls));
+ });
+
+ expectedClasses.forEach((className) => {
+ expect(
+ domClasses.has(className),
+ `Expected class to exist in DOM: ${className}`,
+ ).toBe(true);
+ });
+ });
+});
diff --git a/packages/compiler/test/utils.ts b/packages/compiler/test/utils.ts
new file mode 100644
index 000000000..80206028d
--- /dev/null
+++ b/packages/compiler/test/utils.ts
@@ -0,0 +1,47 @@
+/**
+ * Test Utilities
+ *
+ * Helper functions for testing the compiler
+ */
+
+import type { SourceContext } from '../src/phases/types';
+
+/**
+ * Create a SourceContext for testing
+ * Used throughout tests - analyze() will add projectionState
+ *
+ * @param source - Source code to compile
+ * @param overrides - Optional overrides for context fields
+ * @returns SourceContext ready for compilation
+ *
+ * @example
+ * const context = createInitialContext(`import { PlayButton } from '@videojs/react';`);
+ * const result = analyze(context);
+ */
+export function createInitialContext(
+ source: string,
+ overrides?: Partial,
+): SourceContext {
+ return {
+ input: {
+ source,
+ path: undefined,
+ ...overrides?.input,
+ },
+ };
+}
+
+/**
+ * Alias for createInitialContext
+ * Used for end-to-end compilation tests
+ *
+ * @param source - Source code to compile
+ * @param overrides - Optional overrides
+ * @returns SourceContext
+ */
+export function createSourceContext(
+ source: string,
+ overrides?: Partial