rn-iconify 2.2.1 → 3.0.0

package/lib/module/alias/createIconAliases.js

@@ -1,3 +1,4 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
  * createIconAliases - Factory function for creating type-safe icon aliases
  * Provides full TypeScript autocomplete for alias names
@@ -5,8 +6,7 @@
 
 import React from 'react';
 import { IconRenderer } from '../IconRenderer';
-import { useIconTheme } from '../theme';
-import { DEFAULT_ICON_THEME } from '../theme/types';
+import { useMergedIconProps } from '../theme';
 import { IconAliasProvider as BaseProvider } from './IconAliasContext';
 /**
  * Validate that all alias values are valid icon names
@@ -105,63 +105,24 @@ export function createIconAliases(config) {
 
   /**
    * Type-safe Icon component with alias support
+   * Uses rest spread to forward ALL props (press, animation, className, etc.)
    */
-  function TypedIcon({
+  const TypedIcon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function TypedIcon({
     name,
-    size,
-    color,
-    width,
-    height,
-    style,
-    rotate,
-    flip,
-    fallback,
-    fallbackDelay,
-    placeholder,
-    placeholderColor,
-    placeholderDuration,
-    onLoad,
-    onError,
     accessibilityLabel,
-    testID
-  }) {
-    // Get theme defaults
-    const {
-      theme
-    } = useIconTheme();
-
+    ...restProps
+  }, ref) {
     // Resolve the icon name
     const resolvedName = resolve(name);
 
-    // Merge props with theme defaults
-    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;
-    return /*#__PURE__*/React.createElement(IconRenderer, {
+    // Merge with theme defaults (memoized internally)
+    const mergedProps = useMergedIconProps(restProps);
+    return /*#__PURE__*/React.createElement(IconRenderer, _extends({
+      ref: ref,
       iconName: resolvedName,
-      size: mergedSize,
-      color: mergedColor,
-      width: width,
-      height: height,
-      style: style,
-      rotate: mergedRotate,
-      flip: mergedFlip,
-      fallback: fallback,
-      fallbackDelay: mergedFallbackDelay,
-      placeholder: mergedPlaceholder,
-      placeholderColor: mergedPlaceholderColor,
-      placeholderDuration: mergedPlaceholderDuration,
-      onLoad: onLoad,
-      onError: onError,
-      accessibilityLabel: accessibilityLabel ?? name,
-      testID: testID
-    });
-  }
+      accessibilityLabel: accessibilityLabel ?? name
+    }, mergedProps));
+  }));
   TypedIcon.displayName = 'TypedIcon';
 
   /**

package/lib/module/animated/useIconAnimation.js

@@ -110,7 +110,9 @@ export function useIconAnimation(options = {}) {
           return shakeSequence;
         }
       case 'sequence':
-        // For custom sequences, return null and handle separately
+        if (__DEV__) {
+          console.warn('[rn-iconify] Animation type "sequence" is not yet implemented. ' + 'Use individual animation presets (spin, pulse, bounce, shake, ping, wiggle) instead.');
+        }
         return null;
       default:
         return null;
@@ -213,12 +215,15 @@ export function useIconAnimation(options = {}) {
     });
   }, []);
 
-  // Pause animation (not directly supported, we stop it)
+  // Pause animation
+  // Note: React Native's Animated API does not support true pause/resume.
+  // pause() stops the animation at its current position.
+  // resume() restarts the animation from the beginning.
   const pause = useCallback(() => {
     if (animationRef.current) {
       animationRef.current.stop();
+      animationRef.current = null;
     }
-    // Use queueMicrotask to defer state update (React 19 compatibility)
     queueMicrotask(() => {
       if (mountedRef.current) {
         setState('paused');
@@ -226,7 +231,7 @@ export function useIconAnimation(options = {}) {
     });
   }, []);
 
-  // Resume animation
+  // Resume a paused animation (restarts from beginning due to RN Animated API limitations)
   const resume = useCallback(() => {
     if (state === 'paused') {
       start();
@@ -260,14 +265,18 @@ export function useIconAnimation(options = {}) {
     if (!config) return {};
     switch (config.type) {
       case 'rotate':
-        return {
-          transform: [{
-            rotate: rotateValue.interpolate({
-              inputRange: [0, 360],
-              outputRange: ['0deg', '360deg']
-            })
-          }]
-        };
+        {
+          const fromDeg = config.from;
+          const toDeg = config.to;
+          return {
+            transform: [{
+              rotate: rotateValue.interpolate({
+                inputRange: [fromDeg, toDeg],
+                outputRange: [`${fromDeg}deg`, `${toDeg}deg`]
+              })
+            }]
+          };
+        }
       case 'scale':
         return {
           transform: [{

package/lib/module/babel/plugin.js

@@ -42,6 +42,16 @@ const processedFiles = new Set();
  */
 let buildInProgress = false;
 
+/**
+ * Timestamp when build started — used for stale build detection
+ */
+let buildStartTime = 0;
+
+/**
+ * Maximum build duration (ms) before auto-reset
+ */
+const BUILD_TIMEOUT = 60_000;
+
 /**
  * Debounce timer for bundle generation
  */
@@ -76,6 +86,23 @@ let scannedIcons = [];
  * Existing bundle loaded during pre hook
  */
 let existingBundle = null;
+
+/**
+ * Reset all module-level build state
+ * Called when build completes or when stale build is detected
+ */
+function resetBuildState() {
+  buildInProgress = false;
+  buildStartTime = 0;
+  hasInjected = false;
+  scannedIcons = [];
+  existingBundle = null;
+  processedFiles.clear();
+  if (bundleTimer) {
+    clearTimeout(bundleTimer);
+    bundleTimer = null;
+  }
+}
 const SCAN_LOCK_MAX_AGE = 30000; // 30 seconds
 
 /**
@@ -139,9 +166,18 @@ export function createRnIconifyPlugin(babel) {
         return;
       }
 
+      // Auto-reset stale builds (stuck for > 60s)
+      if (buildInProgress && buildStartTime > 0 && Date.now() - buildStartTime > BUILD_TIMEOUT) {
+        if (opts.verbose) {
+          console.warn('[rn-iconify] Stale build detected (>60s), resetting state');
+        }
+        resetBuildState();
+      }
+
       // Initialize collector on first file
       if (!buildInProgress) {
         buildInProgress = true;
+        buildStartTime = Date.now();
         hasInjected = false;
         collector.initialize(opts);
 
@@ -308,21 +344,24 @@ export function createRnIconifyPlugin(babel) {
         clearTimeout(bundleTimer);
       }
       bundleTimer = setTimeout(async () => {
-        if (!collector.isBundleGenerated()) {
-          collector.markBundleGenerated();
-
-          // Merge AST-collected icons with scanner-collected icons
-          const astIcons = collector.getIconNames();
-          const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
-          if (allIcons.length > 0) {
-            collector.printSummary();
-            try {
-              await generateBundle(allIcons, opts, projectRoot, existingBundle);
-            } catch (error) {
-              console.error('[rn-iconify] Bundle generation error:', error);
+        try {
+          if (!collector.isBundleGenerated()) {
+            collector.markBundleGenerated();
+
+            // Merge AST-collected icons with scanner-collected icons
+            const astIcons = collector.getIconNames();
+            const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
+            if (allIcons.length > 0) {
+              collector.printSummary();
+              try {
+                await generateBundle(allIcons, opts, projectRoot, existingBundle);
+              } catch (error) {
+                console.error('[rn-iconify] Bundle generation error:', error);
+              }
             }
           }
-          buildInProgress = false;
+        } finally {
+          resetBuildState();
         }
       }, 500);
     }
@@ -330,7 +369,7 @@ export function createRnIconifyPlugin(babel) {
 }
 
 // Exported for testing
-export { acquireScanLock, releaseScanLock, isScanLockActive };
+export { acquireScanLock, releaseScanLock, isScanLockActive, resetBuildState };
 
 /**
  * Reset plugin state (for testing)

package/lib/module/babel/scanner.js

@@ -21,20 +21,19 @@ const DEFAULT_EXCLUDE_DIRS = new Set(['node_modules', 'lib', '.rn-iconify', '__t
  */
 
 /**
- * Build regex patterns for icon component detection
- * Matches: <Ion name="home" /> or <Ion name={'home'} /> or <Ion name={`home`} />
+ * Build a single combined regex that captures both the component name
+ * and the icon name in one match — O(n) single pass instead of O(n²)
+ *
+ * Captures:
+ *   group 1 = component name (e.g., "Ion")
+ *   group 2 = icon name from name="..."
+ *   group 3 = icon name from name={'...'}
+ *   group 4 = icon name from name={"..."}
+ *   group 5 = icon name from name={`...`}
  */
-function buildComponentRegex() {
+function buildCombinedRegex() {
   const componentNames = Object.keys(COMPONENT_PREFIX_MAP).join('|');
-  return new RegExp(`<(?:${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`, 'g');
-}
-
-/**
- * Build regex to extract component name from JSX
- */
-function buildComponentNameRegex() {
-  const componentNames = Object.keys(COMPONENT_PREFIX_MAP).join('|');
-  return new RegExp(`<(${componentNames})\\s`, 'g');
+  return new RegExp(`<(${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`, 'g');
 }
 
 /**
@@ -51,7 +50,7 @@ const STRING_ITEM_REGEX = /['"]([^'"]+)['"]/g;
 /**
  * Scan a single file for icon usage
  */
-function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
+function scanFile(filePath, combinedRegex, verbose) {
   const icons = [];
   let content;
   try {
@@ -65,37 +64,20 @@ function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
     return icons;
   }
 
-  // Scan for JSX component usage: <Ion name="home" />
-  componentRegex.lastIndex = 0;
-  componentNameRegex.lastIndex = 0;
-
-  // Find all component usages with name attribute
-  const fullPattern = new RegExp(componentRegex.source, 'g');
+  // Single-pass scan: combined regex captures component name + icon name in one match
+  combinedRegex.lastIndex = 0;
   let match;
-  while ((match = fullPattern.exec(content)) !== null) {
-    const iconName = match[1] || match[2] || match[3] || match[4];
-    if (!iconName) continue;
-
-    // Find the component name for this match by searching backwards
-    const beforeMatch = content.substring(0, match.index + 20);
-    const namePattern = new RegExp(componentNameRegex.source, 'g');
-    let nameMatch;
-    let lastNameMatch = null;
-    while ((nameMatch = namePattern.exec(beforeMatch)) !== null) {
-      if (nameMatch.index <= match.index) {
-        lastNameMatch = nameMatch;
-      }
-    }
-    if (lastNameMatch) {
-      const componentName = lastNameMatch[1];
-      const prefix = COMPONENT_PREFIX_MAP[componentName];
-      if (prefix) {
-        const fullName = `${prefix}:${iconName}`;
-        if (!isValidIconName(fullName)) continue;
-        icons.push(fullName);
-        if (verbose) {
-          console.log(`[rn-iconify:scanner] Found ${fullName} in ${filePath}`);
-        }
+  while ((match = combinedRegex.exec(content)) !== null) {
+    const componentName = match[1];
+    const iconName = match[2] || match[3] || match[4] || match[5];
+    if (!componentName || !iconName) continue;
+    const prefix = COMPONENT_PREFIX_MAP[componentName];
+    if (prefix) {
+      const fullName = `${prefix}:${iconName}`;
+      if (!isValidIconName(fullName)) continue;
+      icons.push(fullName);
+      if (verbose) {
+        console.log(`[rn-iconify:scanner] Found ${fullName} in ${filePath}`);
       }
     }
   }
@@ -188,14 +170,13 @@ export function scanProjectForIcons(projectRoot, options = {}) {
     console.log(`[rn-iconify:scanner] Found ${files.length} source files to scan`);
   }
 
-  // 2. Build regex patterns once
-  const componentRegex = buildComponentRegex();
-  const componentNameRegex = buildComponentNameRegex();
+  // 2. Build combined regex once (single-pass O(n) per file)
+  const combinedRegex = buildCombinedRegex();
 
   // 3. Scan each file
   const allIcons = new Set();
   for (const file of files) {
-    const icons = scanFile(file, componentRegex, componentNameRegex, verbose);
+    const icons = scanFile(file, combinedRegex, verbose);
     for (const icon of icons) {
       allIcons.add(icon);
     }

package/lib/module/cache/CacheManager.js

@@ -39,6 +39,13 @@ class CacheManagerImpl {
    */
   isLoadingBundle = false;
 
+  /**
+   * Batched icon usage reports (DEV only)
+   * Accumulates icon names and flushes every 2 seconds
+   */
+  pendingReports = new Set();
+  reportTimer = null;
+
   /**
    * Initialize bundled icons from the Babel plugin cache
    * This should be called automatically on first access
@@ -66,27 +73,30 @@ class CacheManagerImpl {
       return 0;
     }
     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`);
-    }
-    this.bundledIconsInitialized = true;
+      if (__DEV__ && skippedCount > 0) {
+        console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
+      }
+      this.bundledIconsInitialized = true;
 
-    // Warmup memory cache from disk cache
-    this.warmup();
-    this.isLoadingBundle = false;
-    return this.bundledIcons.size;
+      // Warmup memory cache from disk cache
+      this.warmup();
+      return this.bundledIcons.size;
+    } finally {
+      this.isLoadingBundle = false;
+    }
   }
 
   /**
@@ -357,25 +367,42 @@ 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) {
     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
+   */
+  flushReports() {
+    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/lib/module/cache/MemoryCache.js

@@ -1,6 +1,8 @@
 /**
- * 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)
  */
 
 class MemoryCacheImpl {
@@ -11,30 +13,35 @@ 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) {
-    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, svg) {
+    // 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);
   }
 
   /**
@@ -73,22 +80,16 @@ 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)
    */
   evictOldest() {
-    // 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);
-
-    // Remove oldest entries
-    for (let i = 0; i < entriesToRemove && i < entries.length; i++) {
-      const entry = entries[i];
-      if (entry) {
-        this.cache.delete(entry[0]);
-      }
+    let removed = 0;
+    for (const key of this.cache.keys()) {
+      if (removed >= entriesToRemove) break;
+      this.cache.delete(key);
+      removed++;
     }
   }
 }

package/lib/module/cli/index.js

@@ -3,13 +3,32 @@
  * rn-iconify CLI
  * 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';
 /**
- * Package version
+ * Read version from package.json at build time
  */
-const VERSION = '1.0.0';
+function getPackageVersion() {
+  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/lib/module/cli/parser.js

@@ -5,6 +5,8 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
+import { COMPONENT_PREFIX_MAP } from '../babel/types';
+
 /**
  * File extensions to analyze
  */
@@ -24,32 +26,6 @@ const PATTERNS = {
   iconString: /['"](\w+:[^'"]+)['"]/g
 };
 
-/**
- * Map of component names to icon prefixes
- */
-const COMPONENT_PREFIX_MAP = {
-  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
  */