rn-iconify 1.0.0 → 2.0.0

package/src/cli/commands/bundle.ts

@@ -0,0 +1,231 @@
+/**
+ * Bundle Command
+ * Fetches icons and creates an offline bundle file
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import type { BundleOptions, IconBundle } from '../types';
+import { EXIT_CODES } from '../types';
+import { analyzeDirectory, getUniqueIcons, parseIconList } from '../parser';
+
+/**
+ * Iconify API base URL
+ */
+const ICONIFY_API = 'https://api.iconify.design';
+
+/**
+ * Fetch timeout in milliseconds
+ */
+const FETCH_TIMEOUT = 30000;
+
+/**
+ * Fetch multiple icons with batching
+ */
+async function fetchIcons(
+  icons: string[],
+  verbose: boolean,
+  onProgress?: (current: number, total: number) => void
+): Promise<Record<string, { svg: string; width: number; height: number }>> {
+  const results: Record<string, { svg: string; width: number; height: number }> = {};
+
+  // Group by prefix for batch fetching
+  const byPrefix = new Map<string, string[]>();
+
+  for (const icon of icons) {
+    const [prefix, name] = icon.split(':');
+    if (!byPrefix.has(prefix)) {
+      byPrefix.set(prefix, []);
+    }
+    byPrefix.get(prefix)!.push(name);
+  }
+
+  let processed = 0;
+  const total = icons.length;
+
+  // Fetch each prefix batch
+  for (const [prefix, names] of byPrefix) {
+    try {
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+
+      // Sort names alphabetically (Iconify best practice)
+      const sortedNames = [...names].sort();
+      const url = `${ICONIFY_API}/${prefix}.json?icons=${sortedNames.join(',')}`;
+
+      if (verbose) {
+        console.log(`  Fetching ${sortedNames.length} icons from ${prefix}...`);
+      }
+
+      const response = await fetch(url, { signal: controller.signal });
+      clearTimeout(timeout);
+
+      if (!response.ok) {
+        console.error(`  Failed to fetch ${prefix}: ${response.status}`);
+        processed += names.length;
+        continue;
+      }
+
+      const data = await response.json();
+      const defaultWidth = data.width ?? 24;
+      const defaultHeight = data.height ?? 24;
+
+      for (const name of names) {
+        const iconData = data.icons?.[name];
+
+        if (iconData) {
+          const width = iconData.width ?? defaultWidth;
+          const height = iconData.height ?? defaultHeight;
+          const body = iconData.body;
+          const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${body}</svg>`;
+
+          results[`${prefix}:${name}`] = { svg, width, height };
+        } else if (verbose) {
+          console.error(`  Icon not found: ${prefix}:${name}`);
+        }
+
+        processed++;
+        onProgress?.(processed, total);
+      }
+    } catch (error) {
+      if (verbose) {
+        console.error(`  Error fetching ${prefix}:`, error);
+      }
+      processed += names.length;
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Bundle command implementation
+ */
+export async function bundleCommand(options: BundleOptions): Promise<number> {
+  const {
+    src = './src',
+    output = './assets/icons.bundle.json',
+    auto = true,
+    icons: manualIcons,
+    exclude = [],
+    verbose = false,
+    pretty = false,
+  } = options;
+
+  console.log('\n📦 rn-iconify Bundle Generator\n');
+
+  let iconsToBundle: string[] = [];
+
+  // Auto-detect icons from source
+  if (auto) {
+    console.log(`🔍 Analyzing source code in ${src}...`);
+
+    const analysis = analyzeDirectory(src, verbose);
+
+    if (analysis.totalIcons === 0) {
+      console.log('⚠️  No icons found in source code.');
+    } else {
+      console.log(`   Found ${analysis.totalIcons} unique icons\n`);
+      iconsToBundle = getUniqueIcons(analysis);
+    }
+  }
+
+  // Add manual icons
+  if (manualIcons) {
+    const parsed = parseIconList(manualIcons);
+    console.log(`📋 Adding ${parsed.length} manual icons...`);
+
+    for (const icon of parsed) {
+      if (!iconsToBundle.includes(icon)) {
+        iconsToBundle.push(icon);
+      }
+    }
+  }
+
+  // Apply exclusions
+  if (exclude.length > 0) {
+    const beforeCount = iconsToBundle.length;
+    iconsToBundle = iconsToBundle.filter((icon) => {
+      return !exclude.some((pattern) => {
+        if (pattern.includes('*')) {
+          const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$');
+          return regex.test(icon);
+        }
+        return icon === pattern;
+      });
+    });
+
+    if (verbose) {
+      console.log(`   Excluded ${beforeCount - iconsToBundle.length} icons`);
+    }
+  }
+
+  if (iconsToBundle.length === 0) {
+    console.error('\n❌ No icons to bundle.');
+    console.log('   Use --icons to specify icons manually or check your source code.\n');
+    return EXIT_CODES.ERROR;
+  }
+
+  console.log(`\n📥 Fetching ${iconsToBundle.length} icons from Iconify API...`);
+
+  // Progress indicator
+  let lastPercent = 0;
+  const onProgress = (current: number, total: number) => {
+    const percent = Math.floor((current / total) * 100);
+    if (percent >= lastPercent + 10) {
+      lastPercent = percent;
+      process.stdout.write(`   ${percent}%`);
+      if (percent < 100) process.stdout.write(' ');
+    }
+  };
+
+  const fetchedIcons = await fetchIcons(iconsToBundle, verbose, onProgress);
+  console.log('\n');
+
+  const fetchedCount = Object.keys(fetchedIcons).length;
+  const failedCount = iconsToBundle.length - fetchedCount;
+
+  if (failedCount > 0) {
+    console.log(`⚠️  Failed to fetch ${failedCount} icons`);
+  }
+
+  if (fetchedCount === 0) {
+    console.error('❌ No icons were fetched. Check your network connection.\n');
+    return EXIT_CODES.NETWORK_ERROR;
+  }
+
+  // Create bundle
+  const bundle: IconBundle = {
+    version: '1.0.0',
+    generatedAt: new Date().toISOString(),
+    icons: fetchedIcons,
+    count: fetchedCount,
+  };
+
+  // Ensure output directory exists
+  const outputDir = path.dirname(output);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write bundle file
+  const jsonContent = pretty ? JSON.stringify(bundle, null, 2) : JSON.stringify(bundle);
+
+  fs.writeFileSync(output, jsonContent, 'utf-8');
+
+  // Calculate file size
+  const stats = fs.statSync(output);
+  const sizeKB = (stats.size / 1024).toFixed(2);
+
+  console.log(`✅ Bundle created successfully!`);
+  console.log(`   Output: ${output}`);
+  console.log(`   Icons: ${fetchedCount}`);
+  console.log(`   Size: ${sizeKB} KB\n`);
+
+  console.log('💡 Usage:');
+  console.log("   import { loadOfflineBundle } from 'rn-iconify';");
+  console.log(`   import bundle from '${output.replace(/^\.\//, './')}';`);
+  console.log('   loadOfflineBundle(bundle);\n');
+
+  return EXIT_CODES.SUCCESS;
+}

package/src/cli/index.ts

@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/**
+ * rn-iconify CLI
+ * Command-line tools for icon bundling and analysis
+ */
+
+import { bundleCommand } from './commands/bundle';
+import { analyzeCommand } from './commands/analyze';
+import { EXIT_CODES } from './types';
+import type { BundleOptions, AnalyzeOptions } from './types';
+
+/**
+ * Package version
+ */
+const VERSION = '1.0.0';
+
+/**
+ * Help text
+ */
+const HELP = `
+📦 rn-iconify CLI v${VERSION}
+
+Usage: npx rn-iconify <command> [options]
+
+Commands:
+  bundle    Generate offline icon bundle
+  analyze   Analyze icon usage in source code
+  help      Show this help message
+  version   Show version
+
+Examples:
+  npx rn-iconify bundle --auto --output ./assets/icons.json
+  npx rn-iconify bundle --icons "mdi:home,mdi:settings"
+  npx rn-iconify analyze --src ./src --format table
+  npx rn-iconify analyze --detailed
+
+Bundle Options:
+  --src <path>       Source directory to analyze (default: ./src)
+  --output <path>    Output file path (default: ./assets/icons.bundle.json)
+  --auto             Auto-detect icons from source code (default: true)
+  --icons <list>     Comma-separated list of icons to include
+  --exclude <list>   Comma-separated patterns to exclude
+  --verbose          Show detailed output
+  --pretty           Pretty-print JSON output
+
+Analyze Options:
+  --src <path>       Source directory to analyze (default: ./src)
+  --format <type>    Output format: table, json, markdown (default: table)
+  --detailed         Show file locations for each icon
+  --verbose          Show detailed output
+
+More info: https://github.com/mogretici/rn-iconify
+`;
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs(args: string[]): {
+  command: string;
+  options: Record<string, string | boolean | string[]>;
+} {
+  const command = args[0] || 'help';
+  const options: Record<string, string | boolean | string[]> = {};
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg.startsWith('--')) {
+      const key = arg.slice(2);
+      const nextArg = args[i + 1];
+
+      // Boolean flags
+      if (
+        !nextArg ||
+        nextArg.startsWith('--') ||
+        key === 'auto' ||
+        key === 'verbose' ||
+        key === 'pretty' ||
+        key === 'detailed'
+      ) {
+        options[key] = true;
+      } else {
+        options[key] = nextArg;
+        i++;
+      }
+    } else if (arg.startsWith('-')) {
+      // Short flags
+      const key = arg.slice(1);
+      options[key] = true;
+    }
+  }
+
+  return { command, options };
+}
+
+/**
+ * Main CLI entry point
+ */
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+  const { command, options } = parseArgs(args);
+
+  switch (command) {
+    case 'bundle': {
+      const bundleOptions: BundleOptions = {
+        src: options.src as string,
+        output: options.output as string,
+        auto: options.auto !== false,
+        icons: options.icons as string,
+        exclude: options.exclude ? (options.exclude as string).split(',') : undefined,
+        verbose: options.verbose as boolean,
+        pretty: options.pretty as boolean,
+      };
+
+      const exitCode = await bundleCommand(bundleOptions);
+      process.exit(exitCode);
+      break;
+    }
+
+    case 'analyze': {
+      const analyzeOptions: AnalyzeOptions = {
+        src: options.src as string,
+        format: options.format as 'table' | 'json' | 'markdown',
+        detailed: options.detailed as boolean,
+        verbose: options.verbose as boolean,
+      };
+
+      const exitCode = analyzeCommand(analyzeOptions);
+      process.exit(exitCode);
+      break;
+    }
+
+    case 'version':
+    case '-v':
+    case '--version':
+      console.log(`rn-iconify v${VERSION}`);
+      process.exit(EXIT_CODES.SUCCESS);
+      break;
+
+    case 'help':
+    case '-h':
+    case '--help':
+    default:
+      console.log(HELP);
+      process.exit(command === 'help' ? EXIT_CODES.SUCCESS : EXIT_CODES.INVALID_ARGS);
+  }
+}
+
+// Run CLI
+main().catch((error) => {
+  console.error('Error:', error.message);
+  process.exit(EXIT_CODES.ERROR);
+});

package/src/cli/parser.ts

@@ -0,0 +1,275 @@
+/**
+ * Icon Usage Parser
+ * Analyzes source code to find icon usage patterns
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import type { IconUsage, AnalysisResult } from './types';
+
+/**
+ * File extensions to analyze
+ */
+const ANALYZABLE_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
+
+/**
+ * Regex patterns for finding icon usage
+ */
+const PATTERNS = {
+  // JSX component usage: <Mdi name="home" /> or <Mdi name='home' />
+  jsxComponent: /<(\w+)\s+[^>]*name\s*=\s*["']([^"']+)["'][^>]*\/?>/g,
+
+  // Import statement to find component names
+  iconImport: /import\s*{([^}]+)}\s*from\s*['"]rn-iconify['"]/g,
+
+  // prefetchIcons usage: prefetchIcons(['mdi:home', 'mdi:settings'])
+  prefetchIcons: /prefetchIcons\s*\(\s*\[([^\]]+)\]/g,
+
+  // String icon names in arrays or objects: 'mdi:home' or "mdi:home"
+  iconString: /['"](\w+:[^'"]+)['"]/g,
+};
+
+/**
+ * Map of component names to icon prefixes
+ */
+const COMPONENT_PREFIX_MAP: Record<string, string> = {
+  Mdi: 'mdi',
+  MdiLight: 'mdi-light',
+  Heroicons: 'heroicons',
+  Lucide: 'lucide',
+  Ph: 'ph',
+  Feather: 'feather',
+  Tabler: 'tabler',
+  Bi: 'bi',
+  Fa6Solid: 'fa6-solid',
+  Fa6Regular: 'fa6-regular',
+  Fa6Brands: 'fa6-brands',
+  Fa7Solid: 'fa7-solid',
+  Ri: 'ri',
+  Carbon: 'carbon',
+  Fluent: 'fluent',
+  MaterialSymbols: 'material-symbols',
+  Solar: 'solar',
+  Ion: 'ion',
+  AntDesign: 'ant-design',
+  // Add more mappings as needed
+};
+
+/**
+ * Get all files recursively from a directory
+ */
+function getFilesRecursively(dir: string, files: string[] = []): string[] {
+  if (!fs.existsSync(dir)) {
+    return files;
+  }
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    // Skip node_modules and hidden directories
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+      continue;
+    }
+
+    if (entry.isDirectory()) {
+      getFilesRecursively(fullPath, files);
+    } else if (ANALYZABLE_EXTENSIONS.includes(path.extname(entry.name))) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Parse a single file for icon usage
+ */
+function parseFile(filePath: string, verbose: boolean = false): Map<string, IconUsage> {
+  const usageMap = new Map<string, IconUsage>();
+
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const lines = content.split('\n');
+
+    // Track which icon components are imported
+    const importedComponents = new Set<string>();
+
+    // Find imports from rn-iconify
+    let importMatch;
+    PATTERNS.iconImport.lastIndex = 0;
+    while ((importMatch = PATTERNS.iconImport.exec(content)) !== null) {
+      const imports = importMatch[1].split(',').map((s) => s.trim());
+      imports.forEach((imp) => {
+        // Handle renamed imports: Mdi as Icon
+        const name = imp.split(/\s+as\s+/)[0].trim();
+        if (COMPONENT_PREFIX_MAP[name]) {
+          importedComponents.add(name);
+        }
+      });
+    }
+
+    // Find JSX component usage
+    for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+      const line = lines[lineIndex];
+      const lineNum = lineIndex + 1;
+
+      // Match <ComponentName name="iconName" />
+      for (const componentName of importedComponents) {
+        const componentRegex = new RegExp(
+          `<${componentName}\\s+[^>]*name\\s*=\\s*["']([^"']+)["']`,
+          'g'
+        );
+
+        let match;
+        while ((match = componentRegex.exec(line)) !== null) {
+          const iconName = match[1];
+          const prefix = COMPONENT_PREFIX_MAP[componentName];
+          const fullIconName = `${prefix}:${iconName}`;
+          const column = match.index + 1;
+
+          if (!usageMap.has(fullIconName)) {
+            usageMap.set(fullIconName, {
+              icon: fullIconName,
+              count: 0,
+              locations: [],
+            });
+          }
+
+          const usage = usageMap.get(fullIconName)!;
+          usage.count++;
+          usage.locations.push({
+            file: filePath,
+            line: lineNum,
+            column,
+          });
+        }
+      }
+
+      // Match prefetchIcons and direct string patterns
+      PATTERNS.iconString.lastIndex = 0;
+      let stringMatch;
+      while ((stringMatch = PATTERNS.iconString.exec(line)) !== null) {
+        const iconName = stringMatch[1];
+
+        // Validate icon name format (prefix:name)
+        if (iconName.includes(':') && !iconName.includes('/')) {
+          if (!usageMap.has(iconName)) {
+            usageMap.set(iconName, {
+              icon: iconName,
+              count: 0,
+              locations: [],
+            });
+          }
+
+          const usage = usageMap.get(iconName)!;
+          usage.count++;
+          usage.locations.push({
+            file: filePath,
+            line: lineNum,
+            column: stringMatch.index + 1,
+          });
+        }
+      }
+    }
+
+    if (verbose && usageMap.size > 0) {
+      console.log(`  Found ${usageMap.size} icons in ${filePath}`);
+    }
+  } catch (error) {
+    if (verbose) {
+      console.error(`  Error parsing ${filePath}:`, error);
+    }
+  }
+
+  return usageMap;
+}
+
+/**
+ * Merge icon usage maps
+ */
+function mergeUsageMaps(target: Map<string, IconUsage>, source: Map<string, IconUsage>): void {
+  for (const [icon, usage] of source) {
+    if (target.has(icon)) {
+      const existing = target.get(icon)!;
+      existing.count += usage.count;
+      existing.locations.push(...usage.locations);
+    } else {
+      target.set(icon, { ...usage });
+    }
+  }
+}
+
+/**
+ * Analyze a directory for icon usage
+ */
+export function analyzeDirectory(srcDir: string, verbose: boolean = false): AnalysisResult {
+  const absolutePath = path.resolve(srcDir);
+
+  if (verbose) {
+    console.log(`Analyzing directory: ${absolutePath}`);
+  }
+
+  const files = getFilesRecursively(absolutePath);
+
+  if (verbose) {
+    console.log(`Found ${files.length} files to analyze`);
+  }
+
+  const allUsage = new Map<string, IconUsage>();
+
+  for (const file of files) {
+    const fileUsage = parseFile(file, verbose);
+    mergeUsageMaps(allUsage, fileUsage);
+  }
+
+  // Group by prefix
+  const byPrefix: Record<string, { count: number; icons: string[] }> = {};
+  const icons: IconUsage[] = [];
+
+  for (const [iconName, usage] of allUsage) {
+    const [prefix] = iconName.split(':');
+
+    if (!byPrefix[prefix]) {
+      byPrefix[prefix] = { count: 0, icons: [] };
+    }
+
+    byPrefix[prefix].count += usage.count;
+    byPrefix[prefix].icons.push(iconName);
+    icons.push(usage);
+  }
+
+  // Sort icons by count (descending)
+  icons.sort((a, b) => b.count - a.count);
+
+  return {
+    totalIcons: allUsage.size,
+    totalUsage: icons.reduce((sum, i) => sum + i.count, 0),
+    byPrefix,
+    icons,
+    filesAnalyzed: files.length,
+    timestamp: new Date().toISOString(),
+  };
+}
+
+/**
+ * Get unique icon names from analysis result
+ */
+export function getUniqueIcons(result: AnalysisResult): string[] {
+  return result.icons.map((i) => i.icon);
+}
+
+/**
+ * Parse icon list from string
+ */
+export function parseIconList(input: string | string[]): string[] {
+  if (Array.isArray(input)) {
+    return input;
+  }
+
+  return input
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}