fix: Avoid recursion by using markHybridObject with rolling counter (#57)

Author: mrousavy

packages/react-native-nitro-image/src/markHybridObject.ts

@@ -0,0 +1,27 @@
+import { type AsyncImageSource, isHybridObject } from "./AsyncImageSource";
+import type { Image } from "./specs/Image.nitro";
+import type { ImageLoader } from "./specs/ImageLoader.nitro";
+
+let counter = 0;
+export function markHybridObject(
+    object: Image | ImageLoader,
+    source: AsyncImageSource,
+): typeof object {
+    if (isHybridObject(source)) {
+        // `source` is a HybridObject - to avoid recursion, we just set it to an incrementing counter.
+        Object.defineProperty(object, "__source", {
+            enumerable: true,
+            configurable: true,
+            value: counter,
+        });
+        counter++;
+    } else {
+        // `source` is just an input object, we can use it to tag the Image properly
+        Object.defineProperty(object, "__source", {
+            enumerable: true,
+            configurable: true,
+            value: source,
+        });
+    }
+    return object;
+}

packages/react-native-nitro-image/src/useImage.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { type AsyncImageSource, isHybridObject } from "./AsyncImageSource";
 import { loadImage } from "./loadImage";
+import { markHybridObject } from "./markHybridObject";
 import type { Image } from "./specs/Image.nitro";
 
 type Result =
@@ -41,11 +42,8 @@ export function useImage(source: AsyncImageSource): Result {
                 // 1. Create the Image/ImageLoader instance
                 const result = await loadImage(source);
                 // 2. Add `__source` as a property on the JS side so React diffs properly
-                Object.defineProperty(result, "__source", {
-                    enumerable: true,
-                    configurable: true,
-                    value: source,
-                });
+                markHybridObject(result, source);
+                // 3. Update the state
                 setImage({ image: result, error: undefined });
             } catch (e) {
                 const error = e instanceof Error ? e : new Error(`${e}`);

packages/react-native-nitro-image/src/useImageLoader.ts

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { type AsyncImageSource, isHybridObject } from "./AsyncImageSource";
 import { createImageLoader } from "./createImageLoader";
+import { markHybridObject } from "./markHybridObject";
 import type { Image } from "./specs/Image.nitro";
 import type { ImageLoader } from "./specs/ImageLoader.nitro";
 
@@ -12,11 +13,7 @@ export function useImageLoader(
         // 1. Create the Image/ImageLoader instance
         const loader = createImageLoader(source);
         // 2. Add `__source` as a property on the JS side so React diffs properly
-        Object.defineProperty(loader, "__source", {
-            enumerable: true,
-            configurable: true,
-            value: source,
-        });
+        markHybridObject(loader, source);
         // 3. Return it
         return loader;
     }, [isHybridObject(source) ? source : JSON.stringify(source)]);