refactor(compiler)!: move component generation to core

packages/icons/components.config.js

@@ -1,4 +1,3 @@
-import { defineConfig } from '@videojs/compiler';
 import { pascalCase } from '@videojs/utils/string';
 
 const PASCAL_CASE_ICON_NAME_OVERRIDES = {
@@ -12,17 +11,14 @@ function iconComponentName(name) {
 }
 
 /** @param {string} set */
-const iconConfig = (set) =>
-  defineConfig({
-    generate: {
-      components: [
-        {
-          files: `./src/assets/${set}/*.svg`,
-          name: iconComponentName,
-        },
-      ],
-      output: `./src/__generated__/${set}.ts`,
+const iconConfig = (set) => ({
+  components: [
+    {
+      files: `./src/assets/${set}/*.svg`,
+      name: iconComponentName,
     },
-  });
+  ],
+  output: `./src/__generated__/${set}.ts`,
+});
 
 export default [iconConfig('default'), iconConfig('minimal')];

packages/icons/package.json

@@ -66,13 +66,13 @@
     "format": "node --import tsx scripts/format.ts"
   },
   "dependencies": {
+    "@videojs/core": "workspace:*",
     "svgo": "^4.0.1"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/react": "^19.2.14",
-    "@videojs/compiler": "workspace:*",
     "@videojs/utils": "workspace:*",
     "react": "^19.2.4",
     "tsx": "^4.21.0"

packages/icons/scripts/build.ts

@@ -4,10 +4,10 @@ import { join } from 'node:path';
 const isWatch = process.argv.includes('--watch');
 
 import { transform } from '@svgr/core';
-import { generate as generateComponents } from '@videojs/compiler';
 import { transform as esbuildTransform } from 'esbuild';
 import { optimize } from 'svgo';
-import compilerConfig from '../compiler.config.js';
+import { generateComponents } from '../../core/scripts/generate-components.ts';
+import componentsConfig from '../components.config.js';
 
 import { iconBases } from './icon-bases.js';
 import {
@@ -118,11 +118,12 @@ function buildComponentsTypes(sourceText: string): string {
   const components = componentNames.map((name) => `  readonly ${name}: IconManifest;`).join('\n');
 
   return [
-    `import type { ComponentManifest } from '@videojs/compiler';`,
-    `import type { Component } from '@videojs/compiler/jsx-runtime';`,
+    `import type { Component } from '@videojs/core/jsx-runtime';`,
     ``,
-    `type IconComponent = Component<Record<string, never>>;`,
-    `type IconManifest = ComponentManifest<Record<string, never>, readonly string[], Partial<Record<string, object>>>;`,
+    `declare const ICON_PROPS: unique symbol;`,
+    `type IconProps = { readonly [ICON_PROPS]?: never };`,
+    `type IconComponent = Component<IconProps>;`,
+    `interface IconManifest { readonly name: string; }`,
     ``,
     exports,
     ``,
@@ -337,12 +338,12 @@ async function buildComponentsModule(): Promise<void> {
   const generatedDir = join(ASSETS_DIR, '..', '__generated__');
   ensureDir(generatedDir);
 
-  for (const config of compilerConfig) {
+  for (const config of componentsConfig) {
     await generateComponents(config);
 
-    const setName = config.generate.output.match(/__generated__\/(\w+)\.ts$/)?.[1];
+    const setName = config.output.match(/__generated__\/(\w+)\.ts$/)?.[1];
     if (!setName) {
-      throw new Error(`Could not derive icon set from output path: ${config.generate.output}`);
+      throw new Error(`Could not derive icon set from output path: ${config.output}`);
     }
 
     const componentsDir = join(DIST_DIR, 'components', setName);

packages/icons/src/__generated__/default.ts

@@ -1,5 +1,5 @@
-// AUTO-GENERATED by `@videojs/compiler`. DO NOT EDIT.
-import { createComponent } from '@videojs/compiler/jsx-runtime';
+// AUTO-GENERATED by `@videojs/core/scripts/generate-components`. DO NOT EDIT.
+import { createComponent } from '@videojs/core/jsx-runtime';
 
 export const AirPlayEnterIcon = createComponent({ name: 'AirPlayEnterIcon' });
 export const AirPlayExitIcon = createComponent({ name: 'AirPlayExitIcon' });

packages/icons/src/__generated__/minimal.ts

@@ -1,5 +1,5 @@
-// AUTO-GENERATED by `@videojs/compiler`. DO NOT EDIT.
-import { createComponent } from '@videojs/compiler/jsx-runtime';
+// AUTO-GENERATED by `@videojs/core/scripts/generate-components`. DO NOT EDIT.
+import { createComponent } from '@videojs/core/jsx-runtime';
 
 export const AirPlayEnterIcon = createComponent({ name: 'AirPlayEnterIcon' });
 export const AirPlayExitIcon = createComponent({ name: 'AirPlayExitIcon' });