rn-iconify 1.0.0 → 2.0.0

package/src/bundle/index.ts

@@ -0,0 +1,313 @@
+/**
+ * Offline Bundle Module
+ * Provides functionality to load pre-bundled icons at runtime
+ */
+
+import { CacheManager } from '../cache/CacheManager';
+
+/**
+ * Icon bundle structure (matches CLI output)
+ */
+export interface IconBundle {
+  /**
+   * Bundle version
+   */
+  version: string;
+
+  /**
+   * Generation timestamp
+   */
+  generatedAt: string;
+
+  /**
+   * Icons in the bundle
+   */
+  icons: Record<
+    string,
+    {
+      svg: string;
+      width: number;
+      height: number;
+    }
+  >;
+
+  /**
+   * Total icon count
+   */
+  count: number;
+}
+
+/**
+ * Bundle loading result
+ */
+export interface BundleLoadResult {
+  /**
+   * Number of icons loaded
+   */
+  loaded: number;
+
+  /**
+   * Number of icons skipped (already cached)
+   */
+  skipped: number;
+
+  /**
+   * Total icons in bundle
+   */
+  total: number;
+
+  /**
+   * Bundle version
+   */
+  version: string;
+
+  /**
+   * Load time in milliseconds
+   */
+  loadTimeMs: number;
+}
+
+/**
+ * Load an offline icon bundle into the cache
+ *
+ * This function should be called early in your app initialization
+ * to pre-populate the icon cache with bundled icons.
+ *
+ * Icons loaded from the bundle are immediately available without
+ * network requests, providing instant rendering.
+ *
+ * @param bundle - The icon bundle object (from JSON import)
+ * @param options - Loading options
+ * @returns Result with load statistics
+ *
+ * @example
+ * ```tsx
+ * // In your app entry point (App.tsx or index.js)
+ * import { loadOfflineBundle } from 'rn-iconify';
+ * import iconBundle from './assets/icons.bundle.json';
+ *
+ * // Load bundle on app start
+ * const result = loadOfflineBundle(iconBundle);
+ * console.log(`Loaded ${result.loaded} icons in ${result.loadTimeMs}ms`);
+ *
+ * // Or with options
+ * loadOfflineBundle(iconBundle, {
+ *   skipExisting: true,  // Don't overwrite existing cache entries
+ *   verbose: true,       // Log loading progress
+ * });
+ * ```
+ */
+export function loadOfflineBundle(
+  bundle: IconBundle,
+  options: {
+    /**
+     * Skip icons that are already in cache
+     * @default true
+     */
+    skipExisting?: boolean;
+
+    /**
+     * Log loading progress
+     * @default false
+     */
+    verbose?: boolean;
+  } = {}
+): BundleLoadResult {
+  const { skipExisting = true, verbose = false } = options;
+
+  const startTime = Date.now();
+  let loaded = 0;
+  let skipped = 0;
+
+  if (verbose) {
+    console.log(`[rn-iconify] Loading bundle v${bundle.version} (${bundle.count} icons)`);
+  }
+
+  for (const [iconName, iconData] of Object.entries(bundle.icons)) {
+    // Check if already cached
+    if (skipExisting) {
+      const existing = CacheManager.get(iconName);
+      if (existing) {
+        skipped++;
+        continue;
+      }
+    }
+
+    // Store in cache
+    CacheManager.set(iconName, iconData.svg);
+    loaded++;
+
+    if (verbose && loaded % 50 === 0) {
+      console.log(`[rn-iconify] Loaded ${loaded}/${bundle.count} icons...`);
+    }
+  }
+
+  const loadTimeMs = Date.now() - startTime;
+
+  if (verbose) {
+    console.log(`[rn-iconify] Bundle loaded: ${loaded} new, ${skipped} skipped, ${loadTimeMs}ms`);
+  }
+
+  return {
+    loaded,
+    skipped,
+    total: bundle.count,
+    version: bundle.version,
+    loadTimeMs,
+  };
+}
+
+/**
+ * Async version of loadOfflineBundle
+ *
+ * Useful for loading large bundles without blocking the main thread.
+ * Uses setTimeout to yield to the event loop periodically.
+ *
+ * @param bundle - The icon bundle object
+ * @param options - Loading options
+ * @returns Promise resolving to load result
+ *
+ * @example
+ * ```tsx
+ * import { loadOfflineBundleAsync } from 'rn-iconify';
+ * import iconBundle from './assets/icons.bundle.json';
+ *
+ * async function initApp() {
+ *   const result = await loadOfflineBundleAsync(iconBundle, {
+ *     batchSize: 100,  // Process 100 icons per batch
+ *     verbose: true,
+ *   });
+ *   console.log(`Loaded ${result.loaded} icons`);
+ * }
+ * ```
+ */
+export async function loadOfflineBundleAsync(
+  bundle: IconBundle,
+  options: {
+    /**
+     * Skip icons that are already in cache
+     * @default true
+     */
+    skipExisting?: boolean;
+
+    /**
+     * Log loading progress
+     * @default false
+     */
+    verbose?: boolean;
+
+    /**
+     * Number of icons to process per batch
+     * @default 50
+     */
+    batchSize?: number;
+
+    /**
+     * Progress callback
+     */
+    onProgress?: (loaded: number, total: number) => void;
+  } = {}
+): Promise<BundleLoadResult> {
+  const { skipExisting = true, verbose = false, batchSize = 50, onProgress } = options;
+
+  const startTime = Date.now();
+  let loaded = 0;
+  let skipped = 0;
+
+  if (verbose) {
+    console.log(`[rn-iconify] Loading bundle v${bundle.version} (${bundle.count} icons)`);
+  }
+
+  const entries = Object.entries(bundle.icons);
+
+  for (let i = 0; i < entries.length; i += batchSize) {
+    const batch = entries.slice(i, i + batchSize);
+
+    for (const [iconName, iconData] of batch) {
+      // Check if already cached
+      if (skipExisting) {
+        const existing = CacheManager.get(iconName);
+        if (existing) {
+          skipped++;
+          continue;
+        }
+      }
+
+      // Store in cache
+      CacheManager.set(iconName, iconData.svg);
+      loaded++;
+    }
+
+    // Report progress
+    onProgress?.(loaded + skipped, bundle.count);
+
+    // Yield to event loop
+    if (i + batchSize < entries.length) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+  }
+
+  const loadTimeMs = Date.now() - startTime;
+
+  if (verbose) {
+    console.log(`[rn-iconify] Bundle loaded: ${loaded} new, ${skipped} skipped, ${loadTimeMs}ms`);
+  }
+
+  return {
+    loaded,
+    skipped,
+    total: bundle.count,
+    version: bundle.version,
+    loadTimeMs,
+  };
+}
+
+/**
+ * Check if a bundle is compatible with this version of rn-iconify
+ *
+ * @param bundle - The icon bundle object
+ * @returns true if compatible
+ */
+export function isBundleCompatible(bundle: IconBundle): boolean {
+  if (!bundle || typeof bundle !== 'object') {
+    return false;
+  }
+
+  // Check required fields
+  if (!bundle.version || !bundle.icons || typeof bundle.count !== 'number') {
+    return false;
+  }
+
+  // Check version compatibility (currently supports v1.x)
+  const majorVersion = parseInt(bundle.version.split('.')[0], 10);
+  return majorVersion === 1;
+}
+
+/**
+ * Get bundle statistics
+ *
+ * @param bundle - The icon bundle object
+ * @returns Statistics about the bundle
+ */
+export function getBundleStats(bundle: IconBundle): {
+  iconCount: number;
+  prefixes: string[];
+  estimatedSizeBytes: number;
+  generatedAt: Date;
+} {
+  const prefixes = new Set<string>();
+  let totalSize = 0;
+
+  for (const [iconName, iconData] of Object.entries(bundle.icons)) {
+    const [prefix] = iconName.split(':');
+    prefixes.add(prefix);
+    totalSize += iconData.svg.length;
+  }
+
+  return {
+    iconCount: bundle.count,
+    prefixes: Array.from(prefixes).sort(),
+    estimatedSizeBytes: totalSize,
+    generatedAt: new Date(bundle.generatedAt),
+  };
+}

package/src/cache/CacheManager.ts

@@ -1,6 +1,6 @@
 /**
- * Cache Manager - Orchestrates memory and disk cache
- * Priority: Memory Cache → Disk Cache → Native Cache → Network
+ * Cache Manager - Orchestrates memory, bundled, and disk cache
+ * Priority: Memory Cache → Bundled Icons → Disk Cache → Native Cache → Network
  *
  * Integrates with native module for background prefetching when available
  */
@@ -9,6 +9,25 @@ import { MemoryCache } from './MemoryCache';
 import { DiskCache } from './DiskCache';
 import { getNativeIconify, isNativeModuleAvailable } from '../native';
 
+/**
+ * Bundled icon data structure
+ */
+interface BundledIconData {
+  svg: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * Bundle structure from Babel plugin
+ */
+interface IconBundle {
+  version: string;
+  generatedAt: string;
+  icons: Record<string, BundledIconData>;
+  count: number;
+}
+
 class CacheManagerImpl {
   /**
    * Track in-flight prefetch operations to prevent race conditions
@@ -16,7 +35,76 @@ class CacheManagerImpl {
   private prefetchingIcons = new Set<string>();
 
   /**
-   * Get icon SVG from cache (memory first, then disk)
+   * Bundled icons from Babel plugin (loaded at app start)
+   * These are icons that were detected during build time
+   */
+  private bundledIcons: Map<string, string> | null = null;
+
+  /**
+   * Whether bundled icons have been initialized
+   */
+  private bundledIconsInitialized = false;
+
+  /**
+   * Initialize bundled icons from the Babel plugin cache
+   * This should be called automatically on first access
+   */
+  initBundledIcons(): void {
+    if (this.bundledIconsInitialized) {
+      return;
+    }
+
+    this.bundledIconsInitialized = true;
+
+    // Bundled icons loading is disabled by default to prevent Metro bundling errors
+    // Use loadBundle() explicitly to load icons from a generated bundle file
+    // This is called by the app after importing the bundle from the Babel plugin output
+  }
+
+  /**
+   * Load bundled icons from a custom bundle object
+   * Useful for manual bundle loading or testing
+   *
+   * @param bundle The icon bundle to load
+   * @returns Number of icons loaded
+   */
+  loadBundle(bundle: IconBundle): number {
+    if (!bundle || !bundle.icons || bundle.version !== '1.0.0') {
+      return 0;
+    }
+
+    this.bundledIcons = new Map();
+
+    for (const [iconName, data] of Object.entries(bundle.icons)) {
+      this.bundledIcons.set(iconName, data.svg);
+    }
+
+    this.bundledIconsInitialized = true;
+    return this.bundledIcons.size;
+  }
+
+  /**
+   * Check if an icon is in the bundled cache
+   */
+  hasBundled(iconName: string): boolean {
+    if (!this.bundledIconsInitialized) {
+      this.initBundledIcons();
+    }
+    return this.bundledIcons?.has(iconName) ?? false;
+  }
+
+  /**
+   * Get bundled icons count
+   */
+  getBundledCount(): number {
+    if (!this.bundledIconsInitialized) {
+      this.initBundledIcons();
+    }
+    return this.bundledIcons?.size ?? 0;
+  }
+
+  /**
+   * Get icon SVG from cache (memory first, then bundled, then disk)
    * @returns SVG string or null if not cached
    */
   get(iconName: string): string | null {
@@ -26,7 +114,18 @@ class CacheManagerImpl {
       return memoryCached;
     }
 
-    // 2. Try disk cache (~1-5ms via JSI)
+    // 2. Try bundled icons (instant, ~0ms)
+    if (!this.bundledIconsInitialized) {
+      this.initBundledIcons();
+    }
+    const bundledSvg = this.bundledIcons?.get(iconName);
+    if (bundledSvg) {
+      // Promote to memory cache for faster subsequent access
+      MemoryCache.set(iconName, bundledSvg);
+      return bundledSvg;
+    }
+
+    // 3. Try disk cache (~1-5ms via JSI)
     const diskCached = DiskCache.get(iconName);
     if (diskCached) {
       // Promote to memory cache for faster subsequent access
@@ -46,10 +145,22 @@ class CacheManagerImpl {
   }
 
   /**
-   * Check if icon exists in any cache
+   * Check if icon exists in any cache (memory, bundled, or disk)
    */
   has(iconName: string): boolean {
-    return MemoryCache.has(iconName) || DiskCache.has(iconName);
+    if (MemoryCache.has(iconName)) {
+      return true;
+    }
+
+    // Check bundled icons
+    if (!this.bundledIconsInitialized) {
+      this.initBundledIcons();
+    }
+    if (this.bundledIcons?.has(iconName)) {
+      return true;
+    }
+
+    return DiskCache.has(iconName);
   }
 
   /**
@@ -80,12 +191,18 @@ class CacheManagerImpl {
    */
   getStats(): {
     memoryCount: number;
+    bundledCount: number;
     diskCount: number;
     diskSizeBytes: number;
   } {
+    if (!this.bundledIconsInitialized) {
+      this.initBundledIcons();
+    }
+
     const diskStats = DiskCache.getStats();
     return {
       memoryCount: MemoryCache.size,
+      bundledCount: this.bundledIcons?.size ?? 0,
       diskCount: diskStats.iconCount,
       diskSizeBytes: diskStats.sizeBytes,
     };

package/src/cli/commands/analyze.ts

@@ -0,0 +1,195 @@
+/**
+ * Analyze Command
+ * Analyzes source code and reports icon usage statistics
+ */
+
+import type { AnalyzeOptions, AnalysisResult } from '../types';
+import { EXIT_CODES } from '../types';
+import { analyzeDirectory } from '../parser';
+
+/**
+ * Format bytes to human readable
+ */
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Estimate bundle size (rough estimate: ~400 bytes per icon average)
+ */
+function estimateBundleSize(iconCount: number): number {
+  return iconCount * 400;
+}
+
+/**
+ * Format result as table
+ */
+function formatTable(result: AnalysisResult, detailed: boolean): string {
+  const lines: string[] = [];
+  const divider = '─'.repeat(55);
+
+  lines.push('');
+  lines.push(`┌${divider}┐`);
+  lines.push(`│ 📊 Icon Usage Report${' '.repeat(34)}│`);
+  lines.push(`├${divider}┤`);
+
+  const estimatedSize = formatSize(estimateBundleSize(result.totalIcons));
+  lines.push(
+    `│ Total icons: ${result.totalIcons.toString().padEnd(6)} │ Est. size: ${estimatedSize.padEnd(8)} │ Files: ${result.filesAnalyzed.toString().padEnd(4)}│`
+  );
+
+  lines.push(`├${divider}┤`);
+  lines.push(
+    `│ ${'Prefix'.padEnd(16)}│ ${'Count'.padEnd(7)}│ ${'Icons'.padEnd(7)}│ ${'% Total'.padEnd(10)}│`
+  );
+  lines.push(`├${divider}┤`);
+
+  // Sort prefixes by count
+  const sortedPrefixes = Object.entries(result.byPrefix).sort((a, b) => b[1].count - a[1].count);
+
+  for (const [prefix, data] of sortedPrefixes) {
+    const percent =
+      result.totalUsage > 0 ? ((data.count / result.totalUsage) * 100).toFixed(1) : '0.0';
+
+    lines.push(
+      `│ ${prefix.padEnd(16)}│ ${data.count.toString().padEnd(7)}│ ${data.icons.length.toString().padEnd(7)}│ ${(percent + '%').padEnd(10)}│`
+    );
+  }
+
+  lines.push(`└${divider}┘`);
+
+  // Show top 10 most used icons
+  if (result.icons.length > 0) {
+    lines.push('');
+    lines.push('🔥 Top 10 Most Used Icons:');
+
+    const top10 = result.icons.slice(0, 10);
+    for (let i = 0; i < top10.length; i++) {
+      const icon = top10[i];
+      lines.push(`   ${i + 1}. ${icon.icon} (${icon.count}x)`);
+    }
+  }
+
+  // Show detailed locations if requested
+  if (detailed && result.icons.length > 0) {
+    lines.push('');
+    lines.push('📍 All Icon Locations:');
+
+    for (const icon of result.icons) {
+      lines.push(`\n   ${icon.icon} (${icon.count}x):`);
+      for (const loc of icon.locations.slice(0, 5)) {
+        lines.push(`     - ${loc.file}:${loc.line}:${loc.column}`);
+      }
+      if (icon.locations.length > 5) {
+        lines.push(`     ... and ${icon.locations.length - 5} more`);
+      }
+    }
+  }
+
+  lines.push('');
+  return lines.join('\n');
+}
+
+/**
+ * Format result as JSON
+ */
+function formatJSON(result: AnalysisResult): string {
+  return JSON.stringify(result, null, 2);
+}
+
+/**
+ * Format result as Markdown
+ */
+function formatMarkdown(result: AnalysisResult, detailed: boolean): string {
+  const lines: string[] = [];
+  const estimatedSize = formatSize(estimateBundleSize(result.totalIcons));
+
+  lines.push('# Icon Usage Report');
+  lines.push('');
+  lines.push(`- **Total Icons:** ${result.totalIcons}`);
+  lines.push(`- **Total Usage:** ${result.totalUsage}`);
+  lines.push(`- **Estimated Bundle Size:** ${estimatedSize}`);
+  lines.push(`- **Files Analyzed:** ${result.filesAnalyzed}`);
+  lines.push(`- **Generated:** ${result.timestamp}`);
+  lines.push('');
+
+  lines.push('## By Icon Set');
+  lines.push('');
+  lines.push('| Prefix | Usage Count | Unique Icons | % of Total |');
+  lines.push('|--------|-------------|--------------|------------|');
+
+  const sortedPrefixes = Object.entries(result.byPrefix).sort((a, b) => b[1].count - a[1].count);
+
+  for (const [prefix, data] of sortedPrefixes) {
+    const percent =
+      result.totalUsage > 0 ? ((data.count / result.totalUsage) * 100).toFixed(1) : '0.0';
+
+    lines.push(`| ${prefix} | ${data.count} | ${data.icons.length} | ${percent}% |`);
+  }
+
+  lines.push('');
+  lines.push('## Top 10 Most Used');
+  lines.push('');
+
+  const top10 = result.icons.slice(0, 10);
+  for (let i = 0; i < top10.length; i++) {
+    const icon = top10[i];
+    lines.push(`${i + 1}. \`${icon.icon}\` - ${icon.count} uses`);
+  }
+
+  if (detailed) {
+    lines.push('');
+    lines.push('## All Icons');
+    lines.push('');
+    lines.push('| Icon | Count | First Location |');
+    lines.push('|------|-------|----------------|');
+
+    for (const icon of result.icons) {
+      const firstLoc = icon.locations[0];
+      const location = firstLoc ? `${firstLoc.file}:${firstLoc.line}` : '-';
+      lines.push(`| \`${icon.icon}\` | ${icon.count} | ${location} |`);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Analyze command implementation
+ */
+export function analyzeCommand(options: AnalyzeOptions): number {
+  const { src = './src', format = 'table', detailed = false, verbose = false } = options;
+
+  console.log('\n🔍 rn-iconify Analyzer\n');
+  console.log(`   Analyzing: ${src}`);
+
+  const result = analyzeDirectory(src, verbose);
+
+  if (result.totalIcons === 0) {
+    console.log('\n⚠️  No icons found in the source code.\n');
+    console.log("   Make sure you're using rn-iconify components like:");
+    console.log('   <Mdi name="home" /> or prefetchIcons([\'mdi:home\'])\n');
+    return EXIT_CODES.SUCCESS;
+  }
+
+  let output: string;
+
+  switch (format) {
+    case 'json':
+      output = formatJSON(result);
+      break;
+    case 'markdown':
+      output = formatMarkdown(result, detailed);
+      break;
+    case 'table':
+    default:
+      output = formatTable(result, detailed);
+      break;
+  }
+
+  console.log(output);
+
+  return EXIT_CODES.SUCCESS;
+}