rn-iconify 2.2.1 → 3.0.1

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,

package/src/network/IconifyAPI.ts

@@ -6,6 +6,7 @@
 
 import type { IconifyAPIResponse, IconifyIconData } from '../types';
 import { ConfigManager } from '../config';
+import { IconLoadError } from '../errors';
 
 /**
  * Get current API configuration
@@ -177,15 +178,36 @@ function buildSvg(data: IconifyIconData, defaultWidth = 24, defaultHeight = 24):
  */
 export async function fetchIcon(iconName: string, signal?: AbortSignal): Promise<string> {
   // Check for pending request (deduplication)
+  // If a request is already in flight, reuse it but isolate the abort signal
+  // so that one component's unmount doesn't cancel another's fetch
   const pending = pendingRequests.get(iconName);
   if (pending) {
+    if (signal) {
+      return Promise.race([
+        pending,
+        new Promise<never>((_, reject) => {
+          if (signal.aborted) {
+            reject(new DOMException('Aborted', 'AbortError'));
+            return;
+          }
+          signal.addEventListener(
+            'abort',
+            () => reject(new DOMException('Aborted', 'AbortError')),
+            { once: true }
+          );
+        }),
+      ]);
+    }
     return pending;
   }
 
   // Parse icon name
   const parsed = parseIconName(iconName);
   if (!parsed) {
-    throw new Error(`Invalid icon name format: "${iconName}". Expected "prefix:name" format.`);
+    throw new IconLoadError(
+      'INVALID_NAME',
+      `Invalid icon name format: "${iconName}". Expected "prefix:name" format.`
+    );
   }
 
   const { prefix, name } = parsed;
@@ -211,20 +233,29 @@ export async function fetchIcon(iconName: string, signal?: AbortSignal): Promise
         const response = await fetchWithTimeout(url, { signal });
 
         if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: Failed to fetch icon "${iconName}"`);
+          if (response.status === 404) {
+            throw new IconLoadError('NOT_FOUND', `Icon "${iconName}" not found (HTTP 404)`);
+          }
+          throw new IconLoadError(
+            'NETWORK',
+            `HTTP ${response.status}: Failed to fetch icon "${iconName}"`
+          );
         }
 
         const data: IconifyAPIResponse = await response.json();
 
         // Validate response structure
         if (!data || typeof data !== 'object' || !data.icons) {
-          throw new Error(`Invalid API response for icon "${iconName}"`);
+          throw new IconLoadError('NETWORK', `Invalid API response for icon "${iconName}"`);
         }
 
         // Check if icon exists in response
         const iconData = data.icons[name];
         if (!iconData) {
-          throw new Error(`Icon "${iconName}" not found in Iconify API response`);
+          throw new IconLoadError(
+            'NOT_FOUND',
+            `Icon "${iconName}" not found in Iconify API response`
+          );
         }
 
         // Build SVG from icon data
@@ -232,7 +263,7 @@ export async function fetchIcon(iconName: string, signal?: AbortSignal): Promise
 
         // Validate SVG output
         if (!isValidSvg(svg)) {
-          throw new Error(`Invalid SVG generated for icon "${iconName}"`);
+          throw new IconLoadError('INVALID_SVG', `Invalid SVG generated for icon "${iconName}"`);
         }
 
         return svg;
@@ -248,7 +279,12 @@ export async function fetchIcon(iconName: string, signal?: AbortSignal): Promise
           }
         }
 
-        lastError = error instanceof Error ? error : new Error(String(error));
+        // Convert timeout aborts to typed error
+        if (error instanceof Error && error.name === 'AbortError' && !signal?.aborted) {
+          lastError = new IconLoadError('TIMEOUT', `Timeout fetching icon "${iconName}"`);
+        } else {
+          lastError = error instanceof Error ? error : new IconLoadError('NETWORK', String(error));
+        }
 
         // Wait before retrying (except on last attempt)
         if (attempt < settings.retries) {
@@ -378,14 +414,19 @@ export async function fetchIconsBatch(
 
 /**
  * Check if Iconify API is reachable
+ * @param timeoutMs Timeout in milliseconds (default: 5000)
  */
-export async function checkAPIHealth(): Promise<boolean> {
+export async function checkAPIHealth(timeoutMs = 5000): Promise<boolean> {
   const settings = getAPISettings();
   try {
-    const response = await fetch(`${settings.baseUrl}/collections`, {
-      method: 'HEAD',
-      headers: settings.headers,
-    });
+    const response = await fetchWithTimeout(
+      `${settings.baseUrl}/collections`,
+      {
+        method: 'HEAD',
+        headers: settings.headers,
+      },
+      timeoutMs
+    );
     return response.ok;
   } catch {
     return false;