rn-iconify 2.2.0 → 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/index.js

@@ -35,7 +35,7 @@ import { createRnIconifyPlugin, resetPluginState } from './plugin';
 // Export utilities for testing
 export { collector } from './collector';
 export { resetPluginState };
-export { COMPONENT_PREFIX_MAP, PREFIX_COMPONENT_MAP, VALID_COMPONENTS, VALID_PREFIXES, getFilenameFromState, getFilenameFromFile } from './types';
+export { COMPONENT_PREFIX_MAP, PREFIX_COMPONENT_MAP, VALID_COMPONENTS, VALID_PREFIXES, getFilenameFromState, getFilenameFromFile, getRootFromFile } from './types';
 
 /**
  * Default export for Babel plugin

package/lib/module/babel/plugin.js

@@ -9,7 +9,8 @@
  */
 
 import * as nodePath from 'path';
-import { COMPONENT_PREFIX_MAP, VALID_COMPONENTS, getFilenameFromState, getFilenameFromFile } from './types';
+import * as fs from 'fs';
+import { COMPONENT_PREFIX_MAP, VALID_COMPONENTS, getFilenameFromState, getFilenameFromFile, getRootFromFile } from './types';
 import { getComponentName, getNameAttribute, isCallTo, extractArrayStrings, getNodeLocation } from './ast-utils';
 import { collector } from './collector';
 import { generateBundle, readExistingBundle, resolveBundleDir } from './cache-writer';
@@ -41,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 +87,72 @@ let scannedIcons = [];
  */
 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
+
+/**
+ * Check if a scan lock file exists and is recent
+ */
+function isScanLockActive(lockPath, maxAge = SCAN_LOCK_MAX_AGE) {
+  try {
+    const stat = fs.statSync(lockPath);
+    return Date.now() - stat.mtimeMs < maxAge;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Acquire the scan lock by writing a timestamp file
+ * Returns true if lock was acquired, false if already held
+ */
+function acquireScanLock(lockPath) {
+  if (isScanLockActive(lockPath)) {
+    return false;
+  }
+  try {
+    const dir = nodePath.dirname(lockPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, {
+        recursive: true
+      });
+    }
+    fs.writeFileSync(lockPath, String(Date.now()), {
+      flag: 'wx'
+    });
+    return true;
+  } catch {
+    // Another worker may have created it between our check and write
+    return false;
+  }
+}
+
+/**
+ * Release the scan lock
+ */
+function releaseScanLock(lockPath) {
+  try {
+    fs.unlinkSync(lockPath);
+  } catch {
+    // Already removed or never existed
+  }
+}
+
 /**
  * Create the rn-iconify Babel plugin
  */
@@ -89,30 +166,24 @@ 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);
 
-        // Detect project root from file
-        const filename = getFilenameFromFile(file);
-        if (filename) {
-          let dir = filename;
-          while (dir !== '/') {
-            dir = dir.substring(0, dir.lastIndexOf('/'));
-            try {
-              require.resolve(`${dir}/package.json`);
-              projectRoot = dir;
-              break;
-            } catch {
-              continue;
-            }
-          }
-          if (!projectRoot) {
-            projectRoot = process.cwd();
-          }
-        }
+        // Detect project root from Babel's root (set from babel.config.js location)
+        const root = getRootFromFile(file);
+        projectRoot = root || process.cwd();
         const outputPath = opts.outputPath || '.rn-iconify';
         bundleDirPath = resolveBundleDir(outputPath, projectRoot);
         const bundleJsonPath = nodePath.join(bundleDirPath, 'icons.json');
@@ -121,14 +192,25 @@ export function createRnIconifyPlugin(babel) {
         existingBundle = readExistingBundle(bundleJsonPath);
         bundleExists = existingBundle !== null;
 
-        // Run sync scanner to discover all icons in the project
-        try {
-          scannedIcons = scanProjectForIcons(projectRoot, {
-            verbose: opts.verbose
-          });
-        } catch (error) {
+        // Use file-based lock to prevent duplicate scans across Metro workers
+        const lockPath = nodePath.join(bundleDirPath, '.scan-lock');
+        const lockAcquired = acquireScanLock(lockPath);
+        if (lockAcquired) {
+          try {
+            scannedIcons = scanProjectForIcons(projectRoot, {
+              verbose: opts.verbose
+            });
+          } catch (error) {
+            if (opts.verbose) {
+              console.warn('[rn-iconify] Scanner failed:', error);
+            }
+            scannedIcons = [];
+          } finally {
+            releaseScanLock(lockPath);
+          }
+        } else {
           if (opts.verbose) {
-            console.warn('[rn-iconify] Scanner failed:', error);
+            console.log('[rn-iconify] Scanner skipped (another worker is scanning)');
           }
           scannedIcons = [];
         }
@@ -262,33 +344,40 @@ 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);
     }
   };
 }
 
+// Exported for testing
+export { acquireScanLock, releaseScanLock, isScanLockActive, resetBuildState };
+
 /**
  * Reset plugin state (for testing)
  */
 export function resetPluginState() {
   processedFiles.clear();
   buildInProgress = false;
+  projectRoot = '';
   hasInjected = false;
   bundleExists = false;
   bundleDirPath = '';

package/lib/module/babel/scanner.js

@@ -7,6 +7,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { COMPONENT_PREFIX_MAP } from './types';
+import { isValidIconName } from './ast-utils';
 
 /**
  * Scanner options
@@ -20,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');
 }
 
 /**
@@ -50,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 {
@@ -64,35 +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) {
-        icons.push(`${prefix}:${iconName}`);
-        if (verbose) {
-          console.log(`[rn-iconify:scanner] Found ${prefix}:${iconName} 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}`);
       }
     }
   }
@@ -106,7 +91,7 @@ function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
     let itemMatch;
     while ((itemMatch = STRING_ITEM_REGEX.exec(arrayContent)) !== null) {
       const iconName = itemMatch[1];
-      if (iconName && iconName.includes(':')) {
+      if (iconName && iconName.includes(':') && isValidIconName(iconName)) {
         icons.push(iconName);
         if (verbose) {
           console.log(`[rn-iconify:scanner] Found prefetch ${iconName} in ${filePath}`);
@@ -185,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/babel/types.js

@@ -84,6 +84,24 @@ export function getFilenameFromFile(file) {
   return getFilename(file);
 }
 
+/**
+ * Type guard to check if an object has opts.root
+ */
+function hasOptsWithRoot(obj) {
+  return typeof obj === 'object' && obj !== null && 'opts' in obj && typeof obj.opts === 'object' && obj.opts !== null && 'root' in obj.opts && typeof obj.opts.root === 'string';
+}
+
+/**
+ * Helper to safely extract project root from BabelFile object
+ * Babel sets file.opts.root from babel.config.js location
+ */
+export function getRootFromFile(file) {
+  if (hasOptsWithRoot(file)) {
+    return file.opts.root;
+  }
+  return undefined;
+}
+
 /**
  * Collected icon information
  */

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