rn-iconify 2.2.0 → 3.0.0

package/src/cache/CacheManager.ts

@@ -50,6 +50,13 @@ class CacheManagerImpl {
    */
   private isLoadingBundle = false;
 
+  /**
+   * Batched icon usage reports (DEV only)
+   * Accumulates icon names and flushes every 2 seconds
+   */
+  private pendingReports = new Set<string>();
+  private reportTimer: ReturnType<typeof setTimeout> | null = null;
+
   /**
    * Initialize bundled icons from the Babel plugin cache
    * This should be called automatically on first access
@@ -79,31 +86,34 @@ class CacheManagerImpl {
     }
 
     this.isLoadingBundle = true;
-    this.bundledIcons = new Map();
-    let skippedCount = 0;
-
-    for (const [iconName, data] of Object.entries(bundle.icons)) {
-      if (data && typeof data.svg === 'string' && data.svg.length > 0) {
-        this.bundledIcons.set(iconName, data.svg);
-      } else {
-        skippedCount++;
-        if (__DEV__) {
-          console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+    try {
+      this.bundledIcons = new Map();
+      let skippedCount = 0;
+
+      for (const [iconName, data] of Object.entries(bundle.icons)) {
+        if (data && typeof data.svg === 'string' && data.svg.length > 0) {
+          this.bundledIcons.set(iconName, data.svg);
+        } else {
+          skippedCount++;
+          if (__DEV__) {
+            console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+          }
         }
       }
-    }
 
-    if (__DEV__ && skippedCount > 0) {
-      console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
-    }
+      if (__DEV__ && skippedCount > 0) {
+        console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
+      }
 
-    this.bundledIconsInitialized = true;
+      this.bundledIconsInitialized = true;
 
-    // Warmup memory cache from disk cache
-    this.warmup();
+      // Warmup memory cache from disk cache
+      this.warmup();
 
-    this.isLoadingBundle = false;
-    return this.bundledIcons.size;
+      return this.bundledIcons.size;
+    } finally {
+      this.isLoadingBundle = false;
+    }
   }
 
   /**
@@ -395,22 +405,43 @@ class CacheManagerImpl {
 
   /**
    * Report icon usage to Metro dev server (DEV only)
-   * Fire-and-forget POST to the Metro middleware
+   * Batches reports and flushes every 2 seconds to avoid
+   * flooding Metro with individual HTTP requests
    */
   reportIconUsage(iconName: string): void {
     if (typeof __DEV__ === 'undefined' || !__DEV__) return;
     if (this.isLoadingBundle) return;
 
+    this.pendingReports.add(iconName);
+
+    if (!this.reportTimer) {
+      this.reportTimer = setTimeout(() => this.flushReports(), 2000);
+    }
+  }
+
+  /**
+   * Flush batched icon usage reports to Metro dev server
+   */
+  private flushReports(): void {
+    this.reportTimer = null;
+
+    if (this.pendingReports.size === 0) return;
+
+    const icons = Array.from(this.pendingReports);
+    this.pendingReports.clear();
+
     try {
-      // Use global fetch if available (React Native)
       if (typeof fetch === 'function') {
-        fetch('http://localhost:8081/__rn_iconify_log', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ icon: iconName }),
-        }).catch(() => {
-          // Silently ignore - Metro server might not have the plugin
-        });
+        // Send all icons in a single request
+        for (const icon of icons) {
+          fetch('http://localhost:8081/__rn_iconify_log', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ icon }),
+          }).catch(() => {
+            // Silently ignore - Metro server might not have the plugin
+          });
+        }
       }
     } catch {
       // Silently ignore

package/src/cache/MemoryCache.ts

@@ -1,15 +1,12 @@
 /**
- * Simple in-memory cache for icon SVG data
- * Provides instant synchronous access to recently used icons
+ * LRU in-memory cache for icon SVG data
+ * Uses Map insertion-order trick for O(1) eviction:
+ * - get() deletes and re-inserts to move entry to tail
+ * - eviction removes from head (oldest) in O(1)
  */
 
-interface CacheEntry {
-  svg: string;
-  timestamp: number;
-}
-
 class MemoryCacheImpl {
-  private cache = new Map<string, CacheEntry>();
+  private cache = new Map<string, string>();
   private maxSize: number;
 
   constructor(maxSize = 500) {
@@ -18,31 +15,36 @@ class MemoryCacheImpl {
 
   /**
    * Get icon SVG from memory cache
+   * Moves the entry to the tail (most recently used)
    * @returns SVG string or null if not cached
    */
   get(iconName: string): string | null {
-    const entry = this.cache.get(iconName);
-    if (entry) {
-      // Update timestamp for LRU
-      entry.timestamp = Date.now();
-      return entry.svg;
+    const svg = this.cache.get(iconName);
+    if (svg !== undefined) {
+      // Move to tail by delete + re-insert (Map preserves insertion order)
+      this.cache.delete(iconName);
+      this.cache.set(iconName, svg);
+      return svg;
     }
     return null;
   }
 
   /**
    * Store icon SVG in memory cache
+   * Evicts oldest entries if cache is at capacity
    */
   set(iconName: string, svg: string): void {
+    // If key already exists, delete first to refresh position
+    if (this.cache.has(iconName)) {
+      this.cache.delete(iconName);
+    }
+
     // Evict oldest entries if cache is full
     if (this.cache.size >= this.maxSize) {
       this.evictOldest();
     }
 
-    this.cache.set(iconName, {
-      svg,
-      timestamp: Date.now(),
-    });
+    this.cache.set(iconName, svg);
   }
 
   /**
@@ -81,22 +83,17 @@ class MemoryCacheImpl {
   }
 
   /**
-   * Evict the oldest entries to make room for new ones
+   * Evict the oldest 20% of entries
+   * O(1) per removal using Map's insertion order (head = oldest)
    */
   private evictOldest(): void {
-    // Remove 20% of oldest entries
     const entriesToRemove = Math.ceil(this.maxSize * 0.2);
-    const entries = Array.from(this.cache.entries());
-
-    // Sort by timestamp (oldest first)
-    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+    let removed = 0;
 
-    // Remove oldest entries
-    for (let i = 0; i < entriesToRemove && i < entries.length; i++) {
-      const entry = entries[i];
-      if (entry) {
-        this.cache.delete(entry[0]);
-      }
+    for (const key of this.cache.keys()) {
+      if (removed >= entriesToRemove) break;
+      this.cache.delete(key);
+      removed++;
     }
   }
 }

package/src/cli/index.ts

@@ -4,15 +4,35 @@
  * Command-line tools for icon bundling and analysis
  */
 
+import * as fs from 'fs';
+import * as path from 'path';
 import { bundleCommand } from './commands/bundle';
 import { analyzeCommand } from './commands/analyze';
 import { EXIT_CODES } from './types';
 import type { BundleOptions, AnalyzeOptions } from './types';
 
 /**
- * Package version
+ * Read version from package.json at build time
  */
-const VERSION = '1.0.0';
+function getPackageVersion(): string {
+  try {
+    // Walk up from this file to find package.json
+    let dir = __dirname;
+    for (let i = 0; i < 5; i++) {
+      const pkgPath = path.join(dir, 'package.json');
+      if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+        if (pkg.name === 'rn-iconify') return pkg.version;
+      }
+      dir = path.dirname(dir);
+    }
+  } catch {
+    // Fallback silently
+  }
+  return '0.0.0';
+}
+
+const VERSION = getPackageVersion();
 
 /**
  * Help text

package/src/cli/parser.ts

@@ -6,6 +6,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import type { IconUsage, AnalysisResult } from './types';
+import { COMPONENT_PREFIX_MAP } from '../babel/types';
 
 /**
  * File extensions to analyze
@@ -29,32 +30,6 @@ const PATTERNS = {
   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
  */

package/src/createIconSet.tsx

@@ -1,11 +1,17 @@
 /**
  * createIconSet - Factory function for creating typed icon components
+ *
+ * v3.0 rewrite:
+ * - React.memo + React.forwardRef
+ * - useMergedIconProps (replaces inline ?? chains)
+ * - Rest spread (new props automatically forwarded)
+ * - Fuzzy matching in __DEV__ for typo suggestions
  */
 
 import React from 'react';
+import { type View } from 'react-native';
 import { IconRenderer } from './IconRenderer';
-import { useIconTheme } from './theme';
-import { DEFAULT_ICON_THEME } from './theme/types';
+import { useMergedIconProps } from './theme';
 import type { IconProps } from './types';
 
 /**
@@ -29,6 +35,56 @@ function toPascalCase(str: string): string {
  */
 type IconNameValue = true | string;
 
+/**
+ * Simple Levenshtein distance for __DEV__ fuzzy matching
+ * Only used for "Did you mean?" suggestions on typos
+ */
+function levenshtein(a: string, b: string): number {
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+
+  const matrix: number[][] = [];
+
+  for (let i = 0; i <= b.length; i++) {
+    matrix[i] = [i];
+  }
+  for (let j = 0; j <= a.length; j++) {
+    matrix[0]![j] = j;
+  }
+
+  for (let i = 1; i <= b.length; i++) {
+    for (let j = 1; j <= a.length; j++) {
+      const cost = b[i - 1] === a[j - 1] ? 0 : 1;
+      matrix[i]![j] = Math.min(
+        matrix[i - 1]![j]! + 1,
+        matrix[i]![j - 1]! + 1,
+        matrix[i - 1]![j - 1]! + cost
+      );
+    }
+  }
+
+  return matrix[b.length]![a.length]!;
+}
+
+/**
+ * Find the closest icon name within a reasonable edit distance
+ */
+function findClosestMatch(name: string, validNames: string[]): string | null {
+  let bestMatch: string | null = null;
+  let bestDistance = Infinity;
+  const maxDistance = Math.max(2, Math.floor(name.length * 0.4));
+
+  for (const validName of validNames) {
+    const distance = levenshtein(name, validName);
+    if (distance < bestDistance && distance <= maxDistance) {
+      bestDistance = distance;
+      bestMatch = validName;
+    }
+  }
+
+  return bestMatch;
+}
+
 /**
  * Create a typed icon component for a specific icon set
  *
@@ -51,110 +107,43 @@ export function createIconSet<T extends string>(
   prefix: string,
   iconNames: Record<T, IconNameValue>
 ) {
-  /**
-   * Icon component for the specific icon set
-   */
-  function IconComponent({
-    name,
-    size,
-    color,
-    width,
-    height,
-    style,
-    className,
-    rotate,
-    flip,
-    fallback,
-    fallbackDelay,
-    placeholder,
-    placeholderColor,
-    placeholderDuration,
-    onLoad,
-    onError,
-    accessibilityLabel,
-    testID,
-    // Press props
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    disabled,
-    pressedStyle,
-    // Animation props
-    animate,
-    animationDuration,
-    animationLoop,
-    animationEasing,
-    animationDelay,
-    autoPlay,
-    onAnimationComplete,
-  }: IconProps<T>) {
-    // Get theme defaults
-    const { theme } = useIconTheme();
-
-    // Merge props with theme defaults (props take precedence)
-    const mergedSize = size ?? theme.size ?? DEFAULT_ICON_THEME.size;
-    const mergedColor = color ?? theme.color ?? DEFAULT_ICON_THEME.color;
-    const mergedRotate = rotate ?? theme.rotate ?? DEFAULT_ICON_THEME.rotate;
-    const mergedFlip = flip ?? theme.flip;
-    const mergedFallbackDelay =
-      fallbackDelay ?? theme.fallbackDelay ?? DEFAULT_ICON_THEME.fallbackDelay;
-    const mergedPlaceholder = placeholder ?? theme.placeholder;
-    const mergedPlaceholderColor =
-      placeholderColor ?? theme.placeholderColor ?? DEFAULT_ICON_THEME.placeholderColor;
-    const mergedPlaceholderDuration =
-      placeholderDuration ?? theme.placeholderDuration ?? DEFAULT_ICON_THEME.placeholderDuration;
-
-    // Runtime validation for icon name
-    if (__DEV__ && !(name in iconNames)) {
-      console.warn(
-        `[rn-iconify] Invalid icon name "${name}" for prefix "${prefix}". ` +
-          `Check if the icon exists in the icon set.`
-      );
-    }
+  // Cache valid names for fuzzy matching (only computed once per icon set)
+  let cachedValidNames: string[] | null = null;
 
-    // Get the actual icon name (handles mapped names like _500px -> "500px")
-    const actualName = iconNames[name] === true ? name : iconNames[name];
-    const iconName = `${prefix}:${actualName}`;
-
-    return (
-      <IconRenderer
-        iconName={iconName}
-        size={mergedSize}
-        color={mergedColor}
-        width={width}
-        height={height}
-        style={style}
-        className={className}
-        rotate={mergedRotate}
-        flip={mergedFlip}
-        fallback={fallback}
-        fallbackDelay={mergedFallbackDelay}
-        placeholder={mergedPlaceholder}
-        placeholderColor={mergedPlaceholderColor}
-        placeholderDuration={mergedPlaceholderDuration}
-        onLoad={onLoad}
-        onError={onError}
-        accessibilityLabel={accessibilityLabel ?? name}
-        testID={testID}
-        // Press props
-        onPress={onPress}
-        onLongPress={onLongPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        pressedStyle={pressedStyle}
-        // Animation props
-        animate={animate}
-        animationDuration={animationDuration}
-        animationLoop={animationLoop}
-        animationEasing={animationEasing}
-        animationDelay={animationDelay}
-        autoPlay={autoPlay}
-        onAnimationComplete={onAnimationComplete}
-      />
-    );
-  }
+  const IconComponent = React.memo(
+    React.forwardRef<View, IconProps<T>>(function IconComponent(
+      { name, accessibilityLabel, ...restProps },
+      ref
+    ) {
+      // Merge with theme defaults (memoized internally)
+      const mergedProps = useMergedIconProps(restProps);
+
+      // Runtime validation with fuzzy matching
+      if (__DEV__ && !(name in iconNames)) {
+        if (!cachedValidNames) {
+          cachedValidNames = Object.keys(iconNames);
+        }
+        const suggestion = findClosestMatch(name, cachedValidNames);
+        const suggestionText = suggestion ? ` Did you mean "${suggestion}"?` : '';
+        console.warn(
+          `[rn-iconify] Unknown icon name "${name}" for ${toPascalCase(prefix)}.${suggestionText}`
+        );
+      }
+
+      // Get the actual icon name (handles mapped names like _500px -> "500px")
+      const actualName = iconNames[name] === true ? name : iconNames[name];
+      const iconName = `${prefix}:${actualName}`;
+
+      return (
+        <IconRenderer
+          ref={ref}
+          iconName={iconName}
+          accessibilityLabel={accessibilityLabel ?? name}
+          {...mergedProps}
+        />
+      );
+    })
+  );
 
   // Set display name for debugging
   IconComponent.displayName = `${toPascalCase(prefix)}Icon`;

package/src/dev/index.ts

@@ -0,0 +1,59 @@
+/**
+ * rn-iconify/dev
+ * Development-only utilities for exploring and profiling icons.
+ * These are separated from the main entry point to avoid bloating production bundles.
+ *
+ * @example
+ * ```tsx
+ * import { IconExplorer, PerformanceMonitor } from 'rn-iconify/dev';
+ * ```
+ */
+
+// Icon Explorer
+export {
+  IconExplorer,
+  ExplorerContext,
+  useExplorerContext,
+  useExplorer,
+  getAllIconSets,
+  getIconSetByPrefix,
+  getIconSetsByCategory,
+  searchIconSets,
+  generateImportStatement,
+  generateIconJSX,
+  POPULAR_ICON_SETS,
+  DEFAULT_PREVIEW_CONFIG,
+  DEFAULT_EXPLORER_CONFIG,
+} from '../explorer';
+export type {
+  IconSetInfo,
+  SearchResult,
+  PreviewConfig,
+  ExplorerConfig,
+  ResolvedExplorerConfig,
+  ExplorerState,
+  ExplorerActions,
+  ExplorerContextValue,
+  IconExplorerProps,
+  IconGridProps,
+  IconPreviewProps,
+  SearchBarProps,
+  IconSetFilterProps,
+} from '../explorer';
+
+// Performance Monitoring
+export {
+  PerformanceMonitor,
+  enablePerformanceMonitoring,
+  disablePerformanceMonitoring,
+  getPerformanceReport,
+  printPerformanceReport,
+} from '../performance';
+export type {
+  IconLoadEvent,
+  LoadEventType,
+  CacheStatistics,
+  PerformanceSummary,
+  PerformanceReport,
+  PerformanceListener,
+} from '../performance';

package/src/errors.ts

@@ -0,0 +1,17 @@
+/**
+ * Typed error classes for rn-iconify
+ * Consumers can use error.code to distinguish error types
+ */
+
+export type IconErrorCode = 'NOT_FOUND' | 'NETWORK' | 'TIMEOUT' | 'INVALID_SVG' | 'INVALID_NAME';
+
+export class IconLoadError extends Error {
+  public readonly name = 'IconLoadError';
+
+  constructor(
+    public readonly code: IconErrorCode,
+    message: string
+  ) {
+    super(message);
+  }
+}

package/src/index.ts

@@ -16,6 +16,10 @@
 // Icon Set Components (200+ sets, 268,000+ icons)
 export * from './components';
 
+// Errors
+export { IconLoadError } from './errors';
+export type { IconErrorCode } from './errors';
+
 // Core Types
 export type {
   IconProps,
@@ -180,14 +184,8 @@ export {
 } from './bundle';
 export type { IconBundle, BundleLoadResult } from './bundle';
 
-// Performance Monitoring
-export {
-  PerformanceMonitor,
-  enablePerformanceMonitoring,
-  disablePerformanceMonitoring,
-  getPerformanceReport,
-  printPerformanceReport,
-} from './performance';
+// Performance Monitoring — runtime exports moved to 'rn-iconify/dev'
+// Types kept here for type-only consumers
 export type {
   IconLoadEvent,
   LoadEventType,
@@ -222,22 +220,8 @@ export type {
   UseAccessibleIconOutput,
 } from './accessibility';
 
-// Icon Explorer (Dev Mode)
-export {
-  IconExplorer,
-  ExplorerContext,
-  useExplorerContext,
-  useExplorer,
-  getAllIconSets,
-  getIconSetByPrefix,
-  getIconSetsByCategory,
-  searchIconSets,
-  generateImportStatement,
-  generateIconJSX,
-  POPULAR_ICON_SETS,
-  DEFAULT_PREVIEW_CONFIG,
-  DEFAULT_EXPLORER_CONFIG,
-} from './explorer';
+// Icon Explorer — runtime exports moved to 'rn-iconify/dev'
+// Types kept here for type-only consumers
 export type {
   IconSetInfo,
   SearchResult,