@number10/jsx-icon-generator 5.0.0

package/README.md

@@ -0,0 +1,74 @@
+# @number10/jsx-icon-generator
+
+CLI tooling and Vite plugin for generating type-safe icon types and dynamic loaders from icon libraries.
+
+## Features
+
+- **Type generation** — Generate TypeScript union types from SVG icons in packages or directories
+- **Loader generation** — Scan your codebase for icon usage and generate dynamic import loaders
+- **Vite plugin** — Automatic icon generation during development and build
+- **Multi-source** — Combine icons from multiple packages and directories
+- **Watch mode** — Regenerate on file changes during development
+
+## Installation
+
+```bash
+pnpm add -D @number10/jsx-icon-generator
+```
+
+## CLI Usage
+
+```bash
+# Generate icon types
+generate-icon-types -p bootstrap-icons -o ./src/icon-types.generated.ts
+
+# Generate icon loaders
+generate-icon-loaders -s ./src -o ./src/icon-loaders.generated.ts -p bootstrap-icons
+
+# Unified generator with config file
+generate-icons --config ./icon-generator.config.ts
+```
+
+## Vite Plugin
+
+```typescript
+import { defineConfig } from 'vite'
+import { iconGeneratorPlugin } from '@number10/jsx-icon-generator/vite-plugin-icons'
+
+export default defineConfig({
+  plugins: [
+    iconGeneratorPlugin({
+      configPath: './icon-generator.config.ts',
+    }),
+  ],
+})
+```
+
+## Configuration
+
+```typescript
+import { defineIconConfig } from '@number10/jsx-icon-generator/icon-generator-config'
+
+export default defineIconConfig({
+  source: {
+    package: 'bootstrap-icons',
+    iconsPath: 'icons',
+  },
+  types: {
+    enabled: true,
+    output: './src/icon-types.generated.ts',
+    typeName: 'IconType',
+  },
+  loaders: {
+    enabled: true,
+    output: './src/icon-loaders.generated.ts',
+    scanDir: './src',
+    componentNames: ['Icon'],
+    validate: true,
+  },
+})
+```
+
+## License
+
+GPL-3.0-only

package/dist/generate-icon-loaders.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/generate-icon-loaders.js

@@ -0,0 +1,224 @@
+#!/usr/bin/env node
+import { readFile, readdir, writeFile } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+//#region src/generate-icon-loaders.ts
+/**
+* Auto-generates icon loader registry from actual icon usage in the codebase
+* Scans TSX/TS files for Icon component usage and generates loaders
+*
+* Usage:
+*   generate-icon-loaders --source ./src --output ./src/components/icon-loaders.generated.ts --package bootstrap-icons
+*/
+/**
+* Recursively find all TypeScript files
+*/
+async function findTsFiles(dir) {
+	const files = [];
+	const entries = await readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		const fullPath = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			if (entry.name === "node_modules" || entry.name === "dist") continue;
+			files.push(...await findTsFiles(fullPath));
+		} else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name)) files.push(fullPath);
+	}
+	return files;
+}
+/**
+* Extract icon names from file content
+*/
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function addStringLiteralIcons(expression, iconNames) {
+	const stringLiteralPattern = /(["'])([^"'\r\n]+)\1/g;
+	let match;
+	while ((match = stringLiteralPattern.exec(expression)) !== null) {
+		const iconName = match[2];
+		if (iconName) iconNames.add(iconName);
+	}
+}
+function addIconTypeDeclarationIcons(content, iconNames) {
+	const iconTypeLiteralDeclarationPattern = /\b(?:const|let|var)\s+\w+\s*:\s*[^=;\r\n]*\bIconType\b[^=;\r\n]*=\s*(["'])([^"']+)\1/g;
+	let match;
+	while ((match = iconTypeLiteralDeclarationPattern.exec(content)) !== null) {
+		const iconName = match[2];
+		if (iconName) iconNames.add(iconName);
+	}
+}
+function extractIconNames(content, componentNames) {
+	const iconNames = /* @__PURE__ */ new Set();
+	let match;
+	for (const componentName of componentNames) {
+		const escapedComponentName = escapeRegExp(componentName);
+		const typePattern = new RegExp(`<${escapedComponentName}\\s+[^>]*\\btype=(?:["']([^"']+)["']|\\{['"]([^"']+)["']\\})`, "g");
+		while ((match = typePattern.exec(content)) !== null) {
+			const iconName = match[1] || match[2];
+			if (iconName) iconNames.add(iconName);
+		}
+		const typeExpressionPattern = new RegExp(`<${escapedComponentName}\\s+[^>]*\\btype=\\{([^}]*)\\}`, "g");
+		while ((match = typeExpressionPattern.exec(content)) !== null) {
+			const expression = match[1];
+			if (expression) addStringLiteralIcons(expression, iconNames);
+		}
+	}
+	addIconTypeDeclarationIcons(content, iconNames);
+	const themedPattern = /themed\.(\w*[Ii]con)\s*\?\?\s*["']([^"']+)["']/g;
+	while ((match = themedPattern.exec(content)) !== null) if (match[2]) iconNames.add(match[2]);
+	const iconPropPattern = /(?:icon|iconType):\s*["']([^"']+)["']/g;
+	while ((match = iconPropPattern.exec(content)) !== null) if (match[1]) iconNames.add(match[1]);
+	return iconNames;
+}
+/**
+* Load available icon names from generated types file
+*/
+async function loadAvailableIcons(typesFile) {
+	try {
+		const match = (await readFile(typesFile, "utf-8")).match(/(?:export\s+)?type\s+\w+\s*=\s*([\s\S]+?)(?=\n\nexport|\n\/\/|$)/s);
+		if (!match?.[1]) return null;
+		const typeContent = match[1];
+		const icons = /* @__PURE__ */ new Set();
+		const iconPattern = /'([^']+)'/g;
+		let iconMatch;
+		while ((iconMatch = iconPattern.exec(typeContent)) !== null) {
+			const iconName = iconMatch[1];
+			if (iconName) icons.add(iconName);
+		}
+		return icons;
+	} catch {
+		return null;
+	}
+}
+/**
+* Main generator function
+*/
+async function generateIconLoaders(options) {
+	try {
+		const cwd = process.cwd();
+		const srcDir = resolve(cwd, options.source);
+		const componentNames = options.componentNames || [options.componentName || "Icon"];
+		console.log(`📁 Scanning directory: ${srcDir}`);
+		console.log(`🔍 Looking for components: ${componentNames.join(", ")}`);
+		let availableIcons = null;
+		if (options.typesFile) {
+			availableIcons = await loadAvailableIcons(resolve(cwd, options.typesFile));
+			if (availableIcons) console.log(`✓ Loaded ${availableIcons.size} available icons from ${options.typesFile}`);
+			else console.warn(`⚠️  Could not parse types file: ${options.typesFile}`);
+		}
+		const files = await findTsFiles(srcDir);
+		console.log(`📄 Found ${files.length} TypeScript files`);
+		const allIconNames = /* @__PURE__ */ new Set();
+		for (const file of files) extractIconNames(await readFile(file, "utf-8"), componentNames).forEach((icon) => allIconNames.add(icon));
+		let iconArray = Array.from(allIconNames).sort();
+		if (availableIcons) {
+			const invalidIcons = iconArray.filter((icon) => !availableIcons.has(icon));
+			if (invalidIcons.length > 0) {
+				console.warn(`⚠️  Found ${invalidIcons.length} icons not in types file:`);
+				console.warn(`   ${invalidIcons.slice(0, 5).join(", ")}${invalidIcons.length > 5 ? "..." : ""}`);
+			}
+			iconArray = iconArray.filter((icon) => availableIcons.has(icon));
+		}
+		console.log(`✓ Found ${iconArray.length} unique icons`);
+		if (iconArray.length > 0) console.log(`  Icons: ${iconArray.slice(0, 10).join(", ")}${iconArray.length > 10 ? "..." : ""}`);
+		const iconsPath = options.iconsPath || "icons";
+		const loaders = iconArray.map((icon) => `  '${icon}': () => import('${options.package}/${iconsPath}/${icon}.svg'),`).join("\n");
+		const output = `/**
+ * Auto-generated icon loader registry
+ * Package: ${options.package}
+ * Icons found: ${iconArray.length}
+ *
+ * @generated by @number10/jsx-icon-generator/generate-icon-loaders
+ * @cspell: disable
+ */
+
+/**
+ * Icon loaders - only icons used in the codebase are registered
+ * Bundler will create separate chunks for each icon
+ */
+export const iconLoaders: Record<string, () => Promise<{ default: string }>> = {
+${loaders || "  // No icons found"}
+}
+`;
+		const outputPath = resolve(cwd, options.output);
+		await writeFile(outputPath, output, "utf-8");
+		console.log(`✓ Generated: ${outputPath}`);
+		console.log(`✓ Registered ${iconArray.length} icon loaders`);
+	} catch (error) {
+		console.error("❌ Error generating icon loaders:", error);
+		process.exit(1);
+	}
+}
+var { values } = parseArgs({ options: {
+	source: {
+		type: "string",
+		short: "s"
+	},
+	output: {
+		type: "string",
+		short: "o"
+	},
+	package: {
+		type: "string",
+		short: "p"
+	},
+	iconsPath: {
+		type: "string",
+		short: "i"
+	},
+	componentName: {
+		type: "string",
+		short: "c"
+	},
+	componentNames: {
+		type: "string",
+		multiple: true
+	},
+	typesFile: {
+		type: "string",
+		short: "t"
+	},
+	help: {
+		type: "boolean",
+		short: "h"
+	}
+} });
+if (values.help || !values.source || !values.output || !values.package) {
+	console.log(`
+Usage: generate-icon-loaders [options]
+
+Options:
+  -s, --source <path>         Source directory to scan (e.g., ./src)
+  -o, --output <path>         Output file path (e.g., ./src/components/icon-loaders.generated.ts)
+  -p, --package <name>        Icon package name (e.g., bootstrap-icons)
+  -i, --iconsPath <path>      Relative path to icons in package (default: icons)
+  -c, --componentName <name>  Icon component name to search for (default: Icon)
+  --componentNames <names...> Multiple component names (e.g., Icon BootstrapIcon)
+  -t, --typesFile <path>      Types file for validation (e.g., ./src/icon-types.generated.ts)
+  -h, --help                  Show this help message
+
+Examples:
+  # Single component name
+  generate-icon-loaders -s ./src -o ./src/icon-loaders.generated.ts -p bootstrap-icons
+
+  # Multiple component names
+  generate-icon-loaders -s ./src -o ./src/icon-loaders.generated.ts -p bootstrap-icons \\
+    --componentNames Icon BootstrapIcon CustomIcon
+
+  # With validation
+  generate-icon-loaders -s ./src -o ./src/icon-loaders.generated.ts -p bootstrap-icons \\
+    -t ./src/icon-types.generated.ts
+`);
+	process.exit(values.help ? 0 : 1);
+}
+var options = {
+	source: values.source,
+	output: values.output,
+	package: values.package
+};
+if (values.iconsPath) options.iconsPath = values.iconsPath;
+if (values.componentName) options.componentName = values.componentName;
+if (values.componentNames && values.componentNames.length > 0) options.componentNames = values.componentNames;
+if (values.typesFile) options.typesFile = values.typesFile;
+generateIconLoaders(options);
+//#endregion

package/dist/generate-icon-types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/generate-icon-types.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+import { readdir, writeFile } from "node:fs/promises";
+import { basename, join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+//#region src/generate-icon-types.ts
+/**
+* Generator for icon type definitions from any icon library
+* Scans an icon package and generates TypeScript union type
+*
+* Usage:
+*   generate-icon-types --package bootstrap-icons --output ./src/types/icons.ts
+*/
+/**
+* Find icon package in node_modules
+*/
+async function findIconPackage(packageName, cwd) {
+	const fs = await import("node:fs");
+	const pnpmBase = join(cwd, "node_modules/.pnpm");
+	if (fs.existsSync(pnpmBase)) {
+		const entries = await readdir(pnpmBase);
+		for (const entry of entries) if (entry.startsWith(`${packageName}@`)) {
+			const packagePath = join(pnpmBase, entry, "node_modules", packageName);
+			if (fs.existsSync(packagePath)) return packagePath;
+		}
+	}
+	const standardPath = join(cwd, "node_modules", packageName);
+	if (fs.existsSync(standardPath)) return standardPath;
+	throw new Error(`Could not find package: ${packageName}`);
+}
+/**
+* Main generator function
+*/
+async function generateIconTypes(options) {
+	try {
+		const cwd = process.cwd();
+		let iconsDir;
+		let sourceName;
+		if (options.directory) {
+			iconsDir = resolve(cwd, options.directory);
+			sourceName = options.directory;
+			console.log(`📁 Scanning directory: ${options.directory}`);
+		} else if (options.package) {
+			iconsDir = join(await findIconPackage(options.package, cwd), options.iconsPath || "icons");
+			sourceName = options.package;
+			console.log(`📦 Scanning package: ${options.package}`);
+		} else throw new Error("Either --package or --directory must be specified");
+		console.log(`📁 Icons directory: ${iconsDir}`);
+		const iconNames = (await readdir(iconsDir)).filter((file) => file.endsWith(".svg")).map((file) => basename(file, ".svg")).sort();
+		console.log(`✓ Found ${iconNames.length} icons`);
+		const typeDefinition = iconNames.map((name) => `  | '${name}'`).join("\n");
+		const typeName = options.typeName || "IconType";
+		const output = `/**
+ * Auto-generated icon type definitions
+ * Source: ${sourceName}
+ * Total icons: ${iconNames.length}
+ *
+ * @generated by @number10/jsx-icon-generator/generate-icon-types
+ * @cspell: disable
+ */
+
+/**
+ * All available icon names from ${sourceName}
+ * Type-only definition - no runtime imports, zero bundle impact
+ */
+export type ${typeName} =
+${typeDefinition}
+`;
+		const outputPath = resolve(cwd, options.output);
+		await writeFile(outputPath, output, "utf-8");
+		console.log(`✓ Generated: ${outputPath}`);
+		console.log(`✓ Type name: ${typeName}`);
+		console.log(`✓ Total icons: ${iconNames.length}`);
+		if (iconNames.length > 0) {
+			console.log(`  First: ${iconNames[0]}`);
+			console.log(`  Last: ${iconNames[iconNames.length - 1]}`);
+		}
+	} catch (error) {
+		console.error("❌ Error generating icon types:", error);
+		process.exit(1);
+	}
+}
+var { values } = parseArgs({ options: {
+	package: {
+		type: "string",
+		short: "p"
+	},
+	directory: {
+		type: "string",
+		short: "d"
+	},
+	output: {
+		type: "string",
+		short: "o"
+	},
+	typeName: {
+		type: "string",
+		short: "t"
+	},
+	iconsPath: {
+		type: "string",
+		short: "i"
+	},
+	help: {
+		type: "boolean",
+		short: "h"
+	}
+} });
+if (values.help || !values.package && !values.directory || !values.output) {
+	console.log(`
+Usage: generate-icon-types [options]
+
+Options:
+  -p, --package <name>      Icon package name (e.g., bootstrap-icons)
+  -d, --directory <path>    Local directory with SVG files (alternative to --package)
+  -o, --output <path>       Output file path (e.g., ./src/types/icons.ts)
+  -t, --typeName <name>     TypeScript type name (default: IconType)
+  -i, --iconsPath <path>    Relative path to icons in package (default: icons)
+  -h, --help                Show this help message
+
+Examples:
+  # From npm package
+  generate-icon-types -p bootstrap-icons -o ./src/icon-types.generated.ts
+
+  # From local directory
+  generate-icon-types -d ./public/icons -o ./src/icon-types.generated.ts
+`);
+	process.exit(values.help ? 0 : 1);
+}
+var options = { output: values.output };
+if (values.package) options.package = values.package;
+if (values.directory) options.directory = values.directory;
+if (values.typeName) options.typeName = values.typeName;
+if (values.iconsPath) options.iconsPath = values.iconsPath;
+generateIconTypes(options);
+//#endregion

package/dist/generate-icons.d.ts

@@ -0,0 +1,36 @@
+import type { IconGeneratorConfig } from './icon-generator-config';
+/**
+ * Generate icon types
+ * Exported for use by Vite plugin
+ */
+export declare function generateTypes(config: IconGeneratorConfig, cwd: string): Promise<{
+    iconNames: string[];
+    sourceIconSets: Map<number, Set<string>>;
+} | null>;
+/**
+ * Scan icon sources without generating the types file
+ * Used by Vite plugin to get sourceIconSets for loader generation without full type regeneration
+ * @param config - Icon generator configuration
+ * @param cwd - Current working directory
+ * @returns Icon names and source mapping
+ */
+export declare function scanIconSources(config: IconGeneratorConfig, cwd: string): Promise<{
+    iconNames: string[];
+    sourceIconSets: Map<number, Set<string>>;
+}>;
+/**
+ * Generate icon loaders
+ * Exported for use by Vite plugin
+ */
+export declare function generateLoaders(config: IconGeneratorConfig, cwd: string, typesResult?: {
+    iconNames: string[];
+    sourceIconSets: Map<number, Set<string>>;
+}): Promise<void>;
+/**
+ * Load config file
+ */
+/**
+ * Load icon generator config file
+ * Exported for use by Vite plugin and other tools
+ */
+export declare function loadConfig(configPath: string, cwd?: string): Promise<IconGeneratorConfig>;