|
| 1 | +import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; |
| 2 | +import { dirname, join } from 'node:path'; |
| 3 | +import { fileURLToPath } from 'node:url'; |
| 4 | +import { transform } from '@svgr/core'; |
| 5 | +import { camelCase, pascalCase } from '@videojs/utils/string'; |
| 6 | +import { transform as esbuildTransform } from 'esbuild'; |
| 7 | +import { optimize } from 'svgo'; |
| 8 | + |
| 9 | +const __dirname = dirname(fileURLToPath(import.meta.url)); |
| 10 | +const ROOT = join(__dirname, '..'); |
| 11 | +const ASSETS_DIR = join(ROOT, 'src/assets'); |
| 12 | +const DIST_DIR = join(ROOT, 'dist'); |
| 13 | + |
| 14 | +const FRAMEWORKS = ['react', 'html'] as const; |
| 15 | +type Framework = (typeof FRAMEWORKS)[number]; |
| 16 | + |
| 17 | +const SVGO_CONFIG = { |
| 18 | + multipass: true, |
| 19 | + plugins: [], |
| 20 | +}; |
| 21 | + |
| 22 | +function ensureDir(path: string): void { |
| 23 | + if (!existsSync(path)) mkdirSync(path, { recursive: true }); |
| 24 | +} |
| 25 | + |
| 26 | +function cleanDist(): void { |
| 27 | + if (existsSync(DIST_DIR)) rmSync(DIST_DIR, { recursive: true, force: true }); |
| 28 | +} |
| 29 | + |
| 30 | +function getIconSets(): string[] { |
| 31 | + if (!existsSync(ASSETS_DIR)) { |
| 32 | + console.error(`Assets directory not found: ${ASSETS_DIR}`); |
| 33 | + process.exit(1); |
| 34 | + } |
| 35 | + return readdirSync(ASSETS_DIR).filter((item) => !item.startsWith('.') && item !== 'index'); |
| 36 | +} |
| 37 | + |
| 38 | +function getSvgFiles(setName: string): string[] { |
| 39 | + return readdirSync(join(ASSETS_DIR, setName)).filter((f) => f.endsWith('.svg')); |
| 40 | +} |
| 41 | + |
| 42 | +function optimizeSvg(svgContent: string): string { |
| 43 | + return optimize(svgContent, SVGO_CONFIG).data; |
| 44 | +} |
| 45 | + |
| 46 | +async function buildReactComponent(svgContent: string, componentName: string): Promise<{ js: string; tsx: string }> { |
| 47 | + const transformOpts = { |
| 48 | + plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], |
| 49 | + svgoConfig: SVGO_CONFIG, |
| 50 | + }; |
| 51 | + |
| 52 | + const tsxCode = await transform(svgContent, { ...transformOpts, typescript: true }, { componentName }); |
| 53 | + const jsxCode = await transform(svgContent, transformOpts, { componentName }); |
| 54 | + |
| 55 | + // SVGR outputs JSX syntax which is invalid in .js files — compile to JS |
| 56 | + const { code } = await esbuildTransform(jsxCode, { loader: 'jsx', jsx: 'automatic' }); |
| 57 | + |
| 58 | + return { js: code, tsx: tsxCode }; |
| 59 | +} |
| 60 | + |
| 61 | +function buildHtmlExport(svgContent: string, varName: string): string { |
| 62 | + return `export const ${varName} = \`${optimizeSvg(svgContent)}\`;\n`; |
| 63 | +} |
| 64 | + |
| 65 | +function buildIndexExports(icons: { name: string; varName: string }[], framework: Framework): string { |
| 66 | + return icons |
| 67 | + .map(({ name, varName }) => |
| 68 | + framework === 'react' |
| 69 | + ? `export { default as ${pascalCase(varName)}Icon } from './${name}.js';` |
| 70 | + : `export { ${camelCase(varName)}Icon } from './${name}.js';` |
| 71 | + ) |
| 72 | + .join('\n'); |
| 73 | +} |
| 74 | + |
| 75 | +function buildIndexTypes(icons: { name: string; varName: string }[], framework: Framework): string { |
| 76 | + const types = icons.map(({ varName }) => |
| 77 | + framework === 'react' |
| 78 | + ? `export declare const ${pascalCase(varName)}Icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;` |
| 79 | + : `export declare const ${camelCase(varName)}Icon: string;` |
| 80 | + ); |
| 81 | + return `/// <reference types="react" />\n${types.join('\n')}\n`; |
| 82 | +} |
| 83 | + |
| 84 | +async function buildIconSet(setName: string): Promise<void> { |
| 85 | + const svgFiles = getSvgFiles(setName); |
| 86 | + console.log(` Building set: ${setName} (${svgFiles.length} icons)`); |
| 87 | + |
| 88 | + const icons = svgFiles.map((file) => ({ |
| 89 | + name: file.replace('.svg', ''), |
| 90 | + varName: file.replace('.svg', ''), |
| 91 | + content: readFileSync(join(ASSETS_DIR, setName, file), 'utf8'), |
| 92 | + })); |
| 93 | + |
| 94 | + for (const framework of FRAMEWORKS) { |
| 95 | + const outDir = join(DIST_DIR, framework, setName); |
| 96 | + ensureDir(outDir); |
| 97 | + |
| 98 | + for (const icon of icons) { |
| 99 | + const { name, varName, content } = icon; |
| 100 | + |
| 101 | + if (framework === 'react') { |
| 102 | + const componentName = `${pascalCase(varName)}Icon`; |
| 103 | + const { js, tsx } = await buildReactComponent(content, componentName); |
| 104 | + writeFileSync(join(outDir, `${name}.js`), js); |
| 105 | + writeFileSync(join(outDir, `${name}.tsx`), tsx); |
| 106 | + writeFileSync( |
| 107 | + join(outDir, `${name}.d.ts`), |
| 108 | + `import * as React from 'react';\ndeclare const ${componentName}: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;\nexport default ${componentName};\n` |
| 109 | + ); |
| 110 | + } else { |
| 111 | + const varNameCamel = camelCase(varName); |
| 112 | + writeFileSync(join(outDir, `${name}.js`), buildHtmlExport(content, `${varNameCamel}Icon`)); |
| 113 | + writeFileSync(join(outDir, `${name}.d.ts`), `export declare const ${varNameCamel}Icon: string;\n`); |
| 114 | + } |
| 115 | + } |
| 116 | + |
| 117 | + writeFileSync(join(outDir, 'index.js'), buildIndexExports(icons, framework)); |
| 118 | + writeFileSync(join(outDir, 'index.d.ts'), buildIndexTypes(icons, framework)); |
| 119 | + } |
| 120 | +} |
| 121 | + |
| 122 | +async function main(): Promise<void> { |
| 123 | + console.log('Building icons...\n'); |
| 124 | + cleanDist(); |
| 125 | + |
| 126 | + const sets = getIconSets(); |
| 127 | + console.log(`Found ${sets.length} icon sets: ${sets.join(', ')}\n`); |
| 128 | + |
| 129 | + for (const set of sets) { |
| 130 | + await buildIconSet(set); |
| 131 | + } |
| 132 | + |
| 133 | + console.log('\nBuild complete!'); |
| 134 | +} |
| 135 | + |
| 136 | +main().catch(console.error); |
0 commit comments