rn-iconify 2.1.0 → 2.2.0

package/lib/typescript/network/IconifyAPI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconifyAPI.d.ts","sourceRoot":"","sources":["../../../src/network/IconifyAPI.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAyFH;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAcvF;AAsCD;;;;;GAKG;AACH,wBAAsB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAqGvF;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CACnC,SAAS,EAAE,MAAM,EAAE,EACnB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,gBAAgB,CAAC,CA+E3B;AAED;;GAEG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAWvD;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CACnC,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,qBAAqB,CAAC,CAoDhC;AAED;;;;;;;GAOG;AACH,wBAAsB,cAAc,CAClC,KAAK,EAAE,MAAM,EACb,QAAQ,CAAC,EAAE,MAAM,EAAE,EACnB,KAAK,GAAE,MAAY,EACnB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,MAAM,EAAE,CAAC,CAgCnB"}
+{"version":3,"file":"IconifyAPI.d.ts","sourceRoot":"","sources":["../../../src/network/IconifyAPI.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+GH;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAcvF;AAsCD;;;;;GAKG;AACH,wBAAsB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAqGvF;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CACnC,SAAS,EAAE,MAAM,EAAE,EACnB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,gBAAgB,CAAC,CA+E3B;AAED;;GAEG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAWvD;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CACnC,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,qBAAqB,CAAC,CAoDhC;AAED;;;;;;;GAOG;AACH,wBAAsB,cAAc,CAClC,KAAK,EAAE,MAAM,EACb,QAAQ,CAAC,EAAE,MAAM,EAAE,EACnB,KAAK,GAAE,MAAY,EACnB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,MAAM,EAAE,CAAC,CAgCnB"}

package/metro.js

@@ -0,0 +1,12 @@
+/**
+ * rn-iconify Metro Plugin
+ *
+ * Adds dev server middleware for runtime icon usage learning.
+ *
+ * Usage in metro.config.js:
+ *   const { withRnIconify } = require('rn-iconify/metro');
+ *   module.exports = withRnIconify(config);
+ */
+
+// Re-export the Metro plugin from the built output
+module.exports = require('./lib/commonjs/metro/index.js');

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "rn-iconify",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "268,000+ Iconify icons for React Native with native MMKV caching and full TypeScript autocomplete",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./lib/typescript/index.d.ts",
@@ -27,16 +28,19 @@
       "types": "./lib/typescript/animated/index.d.ts",
       "import": "./lib/module/animated/index.js",
       "require": "./lib/commonjs/animated/index.js"
+    },
+    "./metro": {
+      "types": "./lib/typescript/metro/index.d.ts",
+      "import": "./lib/module/metro/index.js",
+      "require": "./lib/commonjs/metro/index.js"
     }
   },
-  "bin": {
-    "rn-iconify": "./lib/commonjs/cli/index.js"
-  },
+  "bin": "./lib/commonjs/cli/index.js",
   "files": [
     "src",
     "lib",
-    "bin",
     "babel.js",
+    "metro.js",
     "README.md",
     "assets",
     "!**/__tests__",
@@ -57,7 +61,7 @@
     "prepare": "husky",
     "prepublishOnly": "bob build",
     "generate-components": "tsx scripts/generate-components.ts",
-    "release": "npm run build && npm publish"
+    "semantic-release": "semantic-release"
   },
   "keywords": [
     "react-native",
@@ -112,6 +116,8 @@
     "@commitlint/config-conventional": "^19.0.0",
     "@react-native/babel-preset": "^0.82.1",
     "@react-native/eslint-config": "^0.74.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@testing-library/react-native": "^12.0.0",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.2.0",
@@ -129,6 +135,7 @@
     "react-native-mmkv": "^3.0.0",
     "react-native-svg": "^15.0.0",
     "react-test-renderer": "^18.2.0",
+    "semantic-release": "^25.0.2",
     "tsx": "^4.20.6",
     "typescript": "^5.4.0"
   },

package/src/IconRenderer.tsx

@@ -10,6 +10,7 @@ import { CacheManager } from './cache/CacheManager';
 import { fetchIcon } from './network/IconifyAPI';
 import { PlaceholderFactory } from './placeholder';
 import { useIconAnimation } from './animated/useIconAnimation';
+import { ConfigManager } from './config';
 import type { IconRendererProps, IconLoadingState } from './types';
 
 /**
@@ -60,13 +61,25 @@ export function IconRenderer({
   autoPlay = true,
   onAnimationComplete,
 }: IconRendererProps) {
+  // Resolve defaults from config
+  const defaultsConfig = ConfigManager.getDefaultsConfig();
+  const effectivePlaceholder = placeholder !== undefined
+    ? placeholder
+    : (defaultsConfig.placeholder !== false ? defaultsConfig.placeholder : undefined);
+  const fadeIn = defaultsConfig.fadeIn;
+  const fadeInDuration = defaultsConfig.fadeInDuration;
+
   const [svg, setSvg] = useState<string | null>(null);
   const [state, setState] = useState<IconLoadingState>('idle');
   const [showFallback, setShowFallback] = useState(false);
+  const [wasCacheHit, setWasCacheHit] = useState(false);
   const mountedRef = useRef(true);
   const fallbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
-  const isLoadingRef = useRef(false); // Track loading state for closure
+  const isLoadingRef = useRef(false);
+
+  // Fade-in animation value
+  const fadeAnim = useRef(new Animated.Value(0)).current;
 
   // Calculate dimensions
   const iconWidth = propWidth ?? size;
@@ -99,7 +112,9 @@ export function IconRenderer({
       if (mountedRef.current) {
         setSvg(cached);
         setState('loaded');
+        setWasCacheHit(true);
         isLoadingRef.current = false;
+        fadeAnim.setValue(1); // No fade for cache hits
         onLoad?.();
       }
       return;
@@ -108,15 +123,15 @@ export function IconRenderer({
     // 2. Set loading state and start fallback timer
     setState('loading');
     isLoadingRef.current = true;
+    setWasCacheHit(false);
 
     if (fallbackDelay > 0) {
       fallbackTimerRef.current = setTimeout(() => {
-        // Use ref instead of state to avoid stale closure
         if (mountedRef.current && isLoadingRef.current) {
           setShowFallback(true);
         }
       }, fallbackDelay);
-    } else if (fallback) {
+    } else if (fallback || effectivePlaceholder !== undefined) {
       setShowFallback(true);
     }
 
@@ -125,17 +140,28 @@ export function IconRenderer({
       const fetchedSvg = await fetchIcon(iconName, abortControllerRef.current.signal);
 
       if (mountedRef.current) {
-        // Store in cache
         CacheManager.set(iconName, fetchedSvg);
 
         setSvg(fetchedSvg);
         setState('loaded');
         isLoadingRef.current = false;
         setShowFallback(false);
+
+        // Fade-in for non-cached icons
+        if (fadeIn) {
+          fadeAnim.setValue(0);
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: fadeInDuration,
+            useNativeDriver: true,
+          }).start();
+        } else {
+          fadeAnim.setValue(1);
+        }
+
         onLoad?.();
       }
     } catch (error) {
-      // Ignore abort errors
       if (error instanceof Error && error.name === 'AbortError') {
         return;
       }
@@ -145,7 +171,7 @@ export function IconRenderer({
         onError?.(error instanceof Error ? error : new Error(String(error)));
       }
     }
-  }, [iconName, fallback, fallbackDelay, onLoad, onError]); // Removed 'state' from deps
+  }, [iconName, fallback, fallbackDelay, onLoad, onError, effectivePlaceholder, fadeIn, fadeInDuration, fadeAnim]);
 
   // Effect to load icon
   useEffect(() => {
@@ -194,6 +220,9 @@ export function IconRenderer({
   // Determine if we should show placeholder/fallback
   const shouldShowPlaceholder = (state === 'loading' && showFallback) || state === 'error';
 
+  // Whether to use fade-in wrapper (only for non-cached, non-animated icons)
+  const useFadeIn = fadeIn && !wasCacheHit && state === 'loaded' && !hasAnimation;
+
   // Check if icon should be pressable
   const isPressable = !!(onPress || onLongPress);
 
@@ -224,8 +253,8 @@ export function IconRenderer({
 
   // Render placeholder or fallback during loading/error
   if (shouldShowPlaceholder) {
-    // Priority: placeholder > fallback
-    if (placeholder !== undefined) {
+    // Priority: effectivePlaceholder (includes config default) > fallback
+    if (effectivePlaceholder !== undefined) {
       return wrapWithPressable(
         <View
           style={[{ width: iconWidth, height: iconHeight }, style]}
@@ -234,7 +263,7 @@ export function IconRenderer({
           {...nativeWindProps}
         >
           <PlaceholderFactory
-            type={placeholder}
+            type={effectivePlaceholder}
             width={iconWidth}
             height={iconHeight}
             color={placeholderColor}
@@ -291,7 +320,25 @@ export function IconRenderer({
       );
     }
 
-    // Render without animation
+    // Render without animation (with optional fade-in)
+    if (useFadeIn) {
+      return wrapWithPressable(
+        <Animated.View
+          style={[
+            styles.container,
+            { width: iconWidth, height: iconHeight, transform: transformStyle, opacity: fadeAnim },
+            style,
+          ]}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="image"
+          testID={testID}
+          {...nativeWindProps}
+        >
+          <SvgXml xml={colorizedSvg} width={iconWidth} height={iconHeight} />
+        </Animated.View>
+      );
+    }
+
     return wrapWithPressable(
       <View
         style={[
@@ -310,7 +357,7 @@ export function IconRenderer({
   }
 
   // Show placeholder immediately if set (no delay), otherwise empty view
-  if (placeholder !== undefined && state === 'loading') {
+  if (effectivePlaceholder !== undefined && state === 'loading') {
     return wrapWithPressable(
       <View
         style={[{ width: iconWidth, height: iconHeight }, style]}
@@ -319,7 +366,7 @@ export function IconRenderer({
         {...nativeWindProps}
       >
         <PlaceholderFactory
-          type={placeholder}
+          type={effectivePlaceholder}
           width={iconWidth}
           height={iconHeight}
           color={placeholderColor}

package/src/babel/cache-writer.ts

@@ -233,7 +233,33 @@ export async function fetchAndCreateBundle(
 }
 
 /**
- * Write bundle to file
+ * Read existing bundle from disk
+ * Returns null if file doesn't exist or is invalid
+ */
+export function readExistingBundle(bundlePath: string): IconBundle | null {
+  try {
+    if (!fs.existsSync(bundlePath)) return null;
+    const content = fs.readFileSync(bundlePath, 'utf-8');
+    const bundle = JSON.parse(content) as IconBundle;
+    if (bundle.version === '1.0.0' && typeof bundle.count === 'number' && bundle.icons) {
+      return bundle;
+    }
+  } catch {
+    // Invalid bundle file
+  }
+  return null;
+}
+
+/**
+ * Determine which icons are new and need to be fetched
+ */
+export function getNewIconNames(allIcons: string[], existingBundle: IconBundle | null): string[] {
+  if (!existingBundle) return allIcons;
+  return allIcons.filter((name) => !existingBundle.icons[name]);
+}
+
+/**
+ * Write bundle to file (only if content changed)
  */
 export function writeBundleToFile(bundle: IconBundle, outputPath: string, verbose: boolean): void {
   // Ensure directory exists
@@ -242,8 +268,29 @@ export function writeBundleToFile(bundle: IconBundle, outputPath: string, verbos
     fs.mkdirSync(dir, { recursive: true });
   }
 
-  // Write bundle
+  // Write bundle JSON
   const content = JSON.stringify(bundle);
+
+  // Check if content actually changed
+  if (fs.existsSync(outputPath)) {
+    try {
+      const existing = fs.readFileSync(outputPath, 'utf-8');
+      const existingBundle = JSON.parse(existing) as IconBundle;
+      if (existingBundle.count === bundle.count && existingBundle.version === bundle.version) {
+        const existingKeys = Object.keys(existingBundle.icons).sort().join(',');
+        const newKeys = Object.keys(bundle.icons).sort().join(',');
+        if (existingKeys === newKeys) {
+          if (verbose) {
+            console.log('[rn-iconify] Bundle unchanged, skipping write');
+          }
+          return;
+        }
+      }
+    } catch {
+      // Existing file is corrupted, proceed with write
+    }
+  }
+
   fs.writeFileSync(outputPath, content, 'utf-8');
 
   if (verbose) {
@@ -252,15 +299,26 @@ export function writeBundleToFile(bundle: IconBundle, outputPath: string, verbos
   }
 }
 
+/**
+ * Resolve the bundle directory path
+ */
+export function resolveBundleDir(outputPath: string, projectRoot: string): string {
+  return path.isAbsolute(outputPath)
+    ? outputPath
+    : path.join(projectRoot, outputPath);
+}
+
 /**
  * Generate icon bundle from collected icons
+ * Supports incremental fetching: only fetches icons not already in the existing bundle
  */
 export async function generateBundle(
   iconNames: string[],
   options: BabelPluginOptions,
-  projectRoot: string
+  projectRoot: string,
+  existingBundle?: IconBundle | null
 ): Promise<void> {
-  const { outputPath = 'node_modules/.cache/rn-iconify', verbose = false } = options;
+  const { outputPath = '.rn-iconify', verbose = false } = options;
 
   if (iconNames.length === 0) {
     if (verbose) {
@@ -269,28 +327,55 @@ export async function generateBundle(
     return;
   }
 
+  const bundleDir = resolveBundleDir(outputPath, projectRoot);
+  const bundleFile = path.join(bundleDir, 'icons.json');
+
   try {
-    // Fetch all icons
-    const bundle = await fetchAndCreateBundle(iconNames, options);
+    // Read existing bundle if not provided
+    const existing = existingBundle !== undefined ? existingBundle : readExistingBundle(bundleFile);
+
+    // Determine which icons need fetching
+    const newIconNames = getNewIconNames(iconNames, existing);
 
-    // Determine output file path
-    const bundleFile = path.isAbsolute(outputPath)
-      ? path.join(outputPath, 'icons.json')
-      : path.join(projectRoot, outputPath, 'icons.json');
+    if (newIconNames.length === 0 && existing) {
+      if (verbose) {
+        console.log('[rn-iconify] All icons already bundled, skipping fetch');
+      }
+      return;
+    }
+
+    // Fetch only new icons
+    const newBundle = newIconNames.length > 0
+      ? await fetchAndCreateBundle(newIconNames, options)
+      : { version: '1.0.0', generatedAt: new Date().toISOString(), icons: {}, count: 0 } as IconBundle;
+
+    // Merge with existing bundle
+    const mergedIcons = {
+      ...(existing?.icons || {}),
+      ...newBundle.icons,
+    };
+
+    const bundle: IconBundle = {
+      version: '1.0.0',
+      generatedAt: new Date().toISOString(),
+      icons: mergedIcons,
+      count: Object.keys(mergedIcons).length,
+    };
 
     // Write bundle to file
     writeBundleToFile(bundle, bundleFile, verbose);
 
-    // Also write a JS module for easy importing
-    const jsContent = `// Auto-generated by rn-iconify babel plugin
-// Do not edit manually
-module.exports = ${JSON.stringify(bundle)};
-`;
-    const jsFile = bundleFile.replace('.json', '.js');
+    // Also write a JS module for direct require() by Metro
+    const jsContent = `// Auto-generated by rn-iconify babel plugin\n// Do not edit manually\nmodule.exports = ${JSON.stringify(bundle)};\n`;
+    const jsFile = path.join(bundleDir, 'icons.js');
     fs.writeFileSync(jsFile, jsContent, 'utf-8');
 
     if (verbose) {
-      console.log(`[rn-iconify] Bundle generation complete!`);
+      const newCount = newIconNames.length;
+      const existingCount = existing ? Object.keys(existing.icons).length : 0;
+      console.log(
+        `[rn-iconify] Bundle generation complete! ${newCount} new + ${existingCount} existing = ${bundle.count} total icons`
+      );
     }
   } catch (error) {
     // Don't fail the build on bundle generation error
@@ -305,19 +390,8 @@ module.exports = ${JSON.stringify(bundle)};
  * Check if bundle file exists and is valid
  */
 export function isBundleValid(outputPath: string, projectRoot: string): boolean {
-  const bundleFile = path.isAbsolute(outputPath)
-    ? path.join(outputPath, 'icons.json')
-    : path.join(projectRoot, outputPath, 'icons.json');
-
-  if (!fs.existsSync(bundleFile)) {
-    return false;
-  }
+  const bundleDir = resolveBundleDir(outputPath, projectRoot);
+  const bundleFile = path.join(bundleDir, 'icons.json');
 
-  try {
-    const content = fs.readFileSync(bundleFile, 'utf-8');
-    const bundle = JSON.parse(content) as IconBundle;
-    return bundle.version === '1.0.0' && typeof bundle.count === 'number';
-  } catch {
-    return false;
-  }
+  return readExistingBundle(bundleFile) !== null;
 }