@shopify/react-native-skia 0.1.238 → 0.1.239

package/cpp/rnskia/dom/nodes/JsiAtlasNode.h

@@ -46,7 +46,6 @@ protected:
 
     _rectsProp->require();
     _rsxFormsProp->require();
-    _imageProp->require();
   }
 
 private:

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -2,7 +2,6 @@
 
 #import <React/RCTBridge+Private.h>
 #import <React/RCTBridge.h>
-#import <ReactCommon/RCTTurboModule.h>
 
 #include <functional>
 #include <memory>
@@ -30,8 +29,10 @@ static void handleNotification(CFNotificationCenterRef center, void *observer,
 
 class RNSkiOSPlatformContext : public RNSkPlatformContext {
 public:
-  RNSkiOSPlatformContext(jsi::Runtime *runtime, RCTBridge *bridge)
-      : RNSkPlatformContext(runtime, bridge.jsCallInvoker,
+  RNSkiOSPlatformContext(
+      jsi::Runtime *runtime, RCTBridge *bridge,
+      std::shared_ptr<facebook::react::CallInvoker> jsCallInvoker)
+      : RNSkPlatformContext(runtime, jsCallInvoker,
                             [[UIScreen mainScreen] scale]) {
 
     // We need to make sure we invalidate when modules are freed

package/ios/RNSkia-iOS/SkiaManager.h

@@ -12,6 +12,8 @@
 
 - (void)invalidate;
 
-- (instancetype)initWithBridge:(RCTBridge *)bridge;
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+                     jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)
+                                   jsInvoker;
 
 @end

package/ios/RNSkia-iOS/SkiaManager.mm

@@ -6,8 +6,6 @@
 #import <React/RCTBridge.h>
 #import <React/RCTUIManager.h>
 
-#import <ReactCommon/RCTTurboModule.h>
-
 #import "RNSkiOSPlatformContext.h"
 
 @implementation SkiaManager {
@@ -26,7 +24,9 @@
   _skManager = nullptr;
 }
 
-- (instancetype)initWithBridge:(RCTBridge *)bridge {
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+                     jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)
+                                   jsInvoker {
   self = [super init];
   if (self) {
     RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
@@ -37,8 +37,9 @@
 
       // Create the RNSkiaManager (cross platform)
       _skManager = std::make_shared<RNSkia::RNSkManager>(
-          jsRuntime, bridge.jsCallInvoker,
-          std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, bridge));
+          jsRuntime, jsInvoker,
+          std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, bridge,
+                                                           jsInvoker));
     }
   }
   return self;

package/ios/RNSkiaModule.mm

@@ -1,9 +1,11 @@
 
 #import "RNSkiaModule.h"
 #import <React/RCTBridge+Private.h>
+#import <ReactCommon/RCTTurboModule.h>
 
 @implementation RNSkiaModule {
   SkiaManager *skiaManager;
+  std::shared_ptr<facebook::react::CallInvoker> jsInvoker;
 }
 
 RCT_EXPORT_MODULE()
@@ -33,13 +35,17 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
     return @true;
   }
   RCTBridge *bridge = [RCTBridge currentBridge];
-  skiaManager = [[SkiaManager alloc] initWithBridge:bridge];
+  if (!jsInvoker) {
+    jsInvoker = bridge.jsCallInvoker;
+  }
+  skiaManager = [[SkiaManager alloc] initWithBridge:bridge jsInvoker:jsInvoker];
   return @true;
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params {
+  jsInvoker = params.jsInvoker;
   return std::make_shared<facebook::react::NativeSkiaModuleSpecJSI>(params);
 }
 #endif

package/lib/commonjs/external/reanimated/buffers.d.ts

@@ -1,5 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
-export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+type Modifier<T> = (input: T, index: number) => void;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export {};

package/lib/commonjs/external/reanimated/buffers.js

@@ -5,22 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRectBuffer = exports.useRSXformBuffer = exports.usePointBuffer = exports.useColorBuffer = void 0;
 var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
 var _skia = require("../../skia");
 var _moduleWrapper = require("./moduleWrapper");
 var _interpolators = require("./interpolators");
 const useBuffer = (size, bufferInitializer, modifier) => {
+  var _mod$__closure;
   const buffer = (0, _react.useMemo)(() => new Array(size).fill(0).map(bufferInitializer),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [size]);
-  const transforms = (0, _moduleWrapper.useSharedValue)(buffer);
-  (0, _moduleWrapper.useDerivedValue)(() => {
+  const values = (0, _moduleWrapper.useSharedValue)(buffer);
+  const mod = modifier;
+  const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
+  const mapperId = (0, _reactNativeReanimated.startMapper)(() => {
+    "worklet";
+
     buffer.forEach((val, index) => {
       modifier(val, index);
     });
-    // Assuming notifyChange is a function that notifies about the change in transforms.
-    (0, _interpolators.notifyChange)(transforms);
-  });
-  return transforms;
+    (0, _interpolators.notifyChange)(values);
+  }, deps);
+  (0, _react.useEffect)(() => {
+    return () => {
+      (0, _reactNativeReanimated.stopMapper)(mapperId);
+    };
+  }, [mapperId]);
+  return values;
 };
 const useRectBuffer = (size, modifier) => useBuffer(size, () => _skia.Skia.XYWHRect(0, 0, 0, 0), modifier);
 

package/lib/commonjs/external/reanimated/buffers.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","buffer","useMemo","Array","fill","map","transforms","useSharedValue","useDerivedValue","forEach","val","index","notifyChange","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useDerivedValue, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: (input: T, index: number) => void\n) => {\n  const buffer = useMemo(\n    () => new Array(size).fill(0).map(bufferInitializer),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n  const transforms = useSharedValue(buffer);\n\n  useDerivedValue(() => {\n    buffer.forEach((val, index) => {\n      modifier(val, index);\n    });\n    // Assuming notifyChange is a function that notifies about the change in transforms.\n    notifyChange(transforms);\n  });\n\n  return transforms;\n};\n\nexport const useRectBuffer = (\n  size: number,\n  modifier: (input: SkHostRect, index: number) => void\n) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (\n  size: number,\n  modifier: (input: SkRSXform, index: number) => void\n) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (\n  size: number,\n  modifier: (input: SkPoint, index: number) => void\n) => useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (\n  size: number,\n  modifier: (input: SkColor, index: number) => void\n) => useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAEA,MAAMI,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAA2C,KACxC;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,UAAU,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EAEzC,IAAAO,8BAAe,EAAC,MAAM;IACpBP,MAAM,CAACQ,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BX,QAAQ,CAACU,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF;IACA,IAAAC,2BAAY,EAACN,UAAU,CAAC;EAC1B,CAAC,CAAC;EAEF,OAAOA,UAAU;AACnB,CAAC;AAEM,MAAMO,aAAa,GAAGA,CAC3Bf,IAAY,EACZE,QAAoD,KACjDH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEf,QAAQ,CAAC;;AAE/D;AAAAgB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAC9BnB,IAAY,EACZE,QAAmD,KAChDH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE9D;AAAAgB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAC5BrB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEtD;AAAAgB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAC5BvB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAMgB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC;AAACgB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}
+{"version":3,"names":["_react","require","_reactNativeReanimated","_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","useMemo","Array","fill","map","values","useSharedValue","mod","deps","Object","__closure","mapperId","startMapper","forEach","val","index","notifyChange","useEffect","stopMapper","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { startMapper, stopMapper } from \"react-native-reanimated\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: Modifier<T>\n) => {\n  const buffer = useMemo(\n    () => new Array(size).fill(0).map(bufferInitializer),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n  const values = useSharedValue(buffer);\n  const mod = modifier as WorkletFunction;\n  const deps = Object.values(mod.__closure ?? {});\n  const mapperId = startMapper(() => {\n    \"worklet\";\n    buffer.forEach((val, index) => {\n      modifier(val, index);\n    });\n    notifyChange(values);\n  }, deps);\n\n  useEffect(() => {\n    return () => {\n      stopMapper(mapperId);\n    };\n  }, [mapperId]);\n\n  return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n  useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n  useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAIA,MAAMK,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACN,IAAI,CAAC,CAACO,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACP,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMS,MAAM,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EACrC,MAAMO,GAAG,GAAGT,QAA2B;EACvC,MAAMU,IAAI,GAAGC,MAAM,CAACJ,MAAM,EAAAN,cAAA,GAACQ,GAAG,CAACG,SAAS,cAAAX,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMY,QAAQ,GAAG,IAAAC,kCAAW,EAAC,MAAM;IACjC,SAAS;;IACTZ,MAAM,CAACa,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BjB,QAAQ,CAACgB,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF,IAAAC,2BAAY,EAACX,MAAM,CAAC;EACtB,CAAC,EAAEG,IAAI,CAAC;EAER,IAAAS,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAAC,iCAAU,EAACP,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAON,MAAM;AACf,CAAC;AAEM,MAAMc,aAAa,GAAGA,CAACvB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEvB,QAAQ,CAAC;;AAE5D;AAAAwB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAAC3B,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE1B,QAAQ,CAAC;;AAE3D;AAAAwB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAAC7B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE5B,QAAQ,CAAC;;AAEnD;AAAAwB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAAC/B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAE9B,QAAQ,CAAC;AAACwB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}

package/lib/commonjs/external/reanimated/textures.d.ts

@@ -1,5 +1,8 @@
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
-export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
-export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
+import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
+export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;

package/lib/commonjs/external/reanimated/textures.js

@@ -3,28 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTextureValueFromPicture = exports.useTextureValue = void 0;
+exports.useTextureValueFromPicture = exports.useTextureAsValue = exports.useTexture = exports.usePictureAsTexture = exports.useImageAsTexture = void 0;
 var _react = require("react");
 var _Offscreen = require("../../renderer/Offscreen");
+var _skia = require("../../skia");
 var _moduleWrapper = require("./moduleWrapper");
-const createTextureValue = (texture, picture, size) => {
+const createTexture = (texture, picture, size) => {
   "worklet";
 
   texture.value = (0, _Offscreen.drawAsImageFromPicture)(picture, size);
 };
-const useTextureValue = (element, size) => {
+const useTexture = (element, size) => {
   const picture = (0, _react.useMemo)(() => {
     return (0, _Offscreen.drawAsPicture)(element);
   }, [element]);
-  return useTextureValueFromPicture(picture, size);
+  return usePictureAsTexture(picture, size);
 };
-exports.useTextureValue = useTextureValue;
+exports.useTexture = useTexture;
+const useTextureAsValue = (element, size) => {
+  console.warn("useTextureAsValue has been renamed to use useTexture");
+  return useTexture(element, size);
+};
+exports.useTextureAsValue = useTextureAsValue;
 const useTextureValueFromPicture = (picture, size) => {
+  console.warn("useTextureValueFromPicture has been renamed to use usePictureAsTexture");
+  return usePictureAsTexture(picture, size);
+};
+exports.useTextureValueFromPicture = useTextureValueFromPicture;
+const usePictureAsTexture = (picture, size) => {
   const texture = (0, _moduleWrapper.useSharedValue)(null);
   (0, _react.useEffect)(() => {
-    (0, _moduleWrapper.runOnUI)(createTextureValue)(texture, picture, size);
+    if (picture !== null) {
+      (0, _moduleWrapper.runOnUI)(createTexture)(texture, picture, size);
+    }
   }, [texture, picture, size]);
   return texture;
 };
-exports.useTextureValueFromPicture = useTextureValueFromPicture;
+exports.usePictureAsTexture = usePictureAsTexture;
+const useImageAsTexture = source => {
+  const image = (0, _skia.useImage)(source);
+  const size = (0, _react.useMemo)(() => {
+    if (image) {
+      return {
+        width: image.width(),
+        height: image.height()
+      };
+    }
+    return {
+      width: 0,
+      height: 0
+    };
+  }, [image]);
+  const picture = (0, _react.useMemo)(() => {
+    if (image) {
+      const recorder = _skia.Skia.PictureRecorder();
+      const canvas = recorder.beginRecording({
+        x: 0,
+        y: 0,
+        width: size.width,
+        height: size.height
+      });
+      canvas.drawImage(image, 0, 0);
+      return recorder.finishRecordingAsPicture();
+    } else {
+      return null;
+    }
+  }, [size, image]);
+  return usePictureAsTexture(picture, size);
+};
+exports.useImageAsTexture = useImageAsTexture;
 //# sourceMappingURL=textures.js.map

package/lib/commonjs/external/reanimated/textures.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_Offscreen","_moduleWrapper","createTextureValue","texture","picture","size","value","drawAsImageFromPicture","useTextureValue","element","useMemo","drawAsPicture","useTextureValueFromPicture","exports","useSharedValue","useEffect","runOnUI"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { SkImage, SkPicture, SkSize } from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTextureValue = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTextureValue = (element: ReactElement, size: SkSize) => {\n  const picture = useMemo(() => {\n    return drawAsPicture(element);\n  }, [element]);\n  return useTextureValueFromPicture(picture, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    runOnUI(createTextureValue)(texture, picture, size);\n  }, [texture, picture, size]);\n  return texture;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAD,OAAA;AAKA,IAAAE,cAAA,GAAAF,OAAA;AAEA,MAAMG,kBAAkB,GAAGA,CACzBC,OAAoC,EACpCC,OAAkB,EAClBC,IAAY,KACT;EACH,SAAS;;EACTF,OAAO,CAACG,KAAK,GAAG,IAAAC,iCAAsB,EAACH,OAAO,EAAEC,IAAI,CAAC;AACvD,CAAC;AAEM,MAAMG,eAAe,GAAGA,CAACC,OAAqB,EAAEJ,IAAY,KAAK;EACtE,MAAMD,OAAO,GAAG,IAAAM,cAAO,EAAC,MAAM;IAC5B,OAAO,IAAAC,wBAAa,EAACF,OAAO,CAAC;EAC/B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,OAAOG,0BAA0B,CAACR,OAAO,EAAEC,IAAI,CAAC;AAClD,CAAC;AAACQ,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAEK,MAAMI,0BAA0B,GAAGA,CACxCR,OAAkB,EAClBC,IAAY,KACT;EACH,MAAMF,OAAO,GAAG,IAAAW,6BAAc,EAAiB,IAAI,CAAC;EACpD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAAC,sBAAO,EAACd,kBAAkB,CAAC,CAACC,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC;EACrD,CAAC,EAAE,CAACF,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;EAC5B,OAAOF,OAAO;AAChB,CAAC;AAACU,OAAA,CAAAD,0BAAA,GAAAA,0BAAA"}
+{"version":3,"names":["_react","require","_Offscreen","_skia","_moduleWrapper","createTexture","texture","picture","size","value","drawAsImageFromPicture","useTexture","element","useMemo","drawAsPicture","usePictureAsTexture","exports","useTextureAsValue","console","warn","useTextureValueFromPicture","useSharedValue","useEffect","runOnUI","useImageAsTexture","source","image","useImage","width","height","recorder","Skia","PictureRecorder","canvas","beginRecording","x","y","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  DataSourceParam,\n  SkImage,\n  SkPicture,\n  SkSize,\n} from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n  const picture = useMemo(() => {\n    return drawAsPicture(element);\n  }, [element]);\n  return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n  console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n  return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  console.warn(\n    \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n  );\n  return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    if (picture !== null) {\n      runOnUI(createTexture)(texture, picture, size);\n    }\n  }, [texture, picture, size]);\n  return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n  const image = useImage(source);\n  const size = useMemo(() => {\n    if (image) {\n      return { width: image.width(), height: image.height() };\n    }\n    return { width: 0, height: 0 };\n  }, [image]);\n  const picture = useMemo(() => {\n    if (image) {\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording({\n        x: 0,\n        y: 0,\n        width: size.width,\n        height: size.height,\n      });\n      canvas.drawImage(image, 0, 0);\n      return recorder.finishRecordingAsPicture();\n    } else {\n      return null;\n    }\n  }, [size, image]);\n  return usePictureAsTexture(picture, size);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAUA,IAAAC,UAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AAEA,MAAMI,aAAa,GAAGA,CACpBC,OAAoC,EACpCC,OAAkB,EAClBC,IAAY,KACT;EACH,SAAS;;EACTF,OAAO,CAACG,KAAK,GAAG,IAAAC,iCAAsB,EAACH,OAAO,EAAEC,IAAI,CAAC;AACvD,CAAC;AAEM,MAAMG,UAAU,GAAGA,CAACC,OAAqB,EAAEJ,IAAY,KAAK;EACjE,MAAMD,OAAO,GAAG,IAAAM,cAAO,EAAC,MAAM;IAC5B,OAAO,IAAAC,wBAAa,EAACF,OAAO,CAAC;EAC/B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,OAAOG,mBAAmB,CAACR,OAAO,EAAEC,IAAI,CAAC;AAC3C,CAAC;AAACQ,OAAA,CAAAL,UAAA,GAAAA,UAAA;AAEK,MAAMM,iBAAiB,GAAGA,CAACL,OAAqB,EAAEJ,IAAY,KAAK;EACxEU,OAAO,CAACC,IAAI,CAAC,sDAAsD,CAAC;EACpE,OAAOR,UAAU,CAACC,OAAO,EAAEJ,IAAI,CAAC;AAClC,CAAC;AAACQ,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEK,MAAMG,0BAA0B,GAAGA,CACxCb,OAAyB,EACzBC,IAAY,KACT;EACHU,OAAO,CAACC,IAAI,CACV,wEACF,CAAC;EACD,OAAOJ,mBAAmB,CAACR,OAAO,EAAEC,IAAI,CAAC;AAC3C,CAAC;AAACQ,OAAA,CAAAI,0BAAA,GAAAA,0BAAA;AAEK,MAAML,mBAAmB,GAAGA,CACjCR,OAAyB,EACzBC,IAAY,KACT;EACH,MAAMF,OAAO,GAAG,IAAAe,6BAAc,EAAiB,IAAI,CAAC;EACpD,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIf,OAAO,KAAK,IAAI,EAAE;MACpB,IAAAgB,sBAAO,EAAClB,aAAa,CAAC,CAACC,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC;IAChD;EACF,CAAC,EAAE,CAACF,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;EAC5B,OAAOF,OAAO;AAChB,CAAC;AAACU,OAAA,CAAAD,mBAAA,GAAAA,mBAAA;AAEK,MAAMS,iBAAiB,GAAIC,MAAuB,IAAK;EAC5D,MAAMC,KAAK,GAAG,IAAAC,cAAQ,EAACF,MAAM,CAAC;EAC9B,MAAMjB,IAAI,GAAG,IAAAK,cAAO,EAAC,MAAM;IACzB,IAAIa,KAAK,EAAE;MACT,OAAO;QAAEE,KAAK,EAAEF,KAAK,CAACE,KAAK,CAAC,CAAC;QAAEC,MAAM,EAAEH,KAAK,CAACG,MAAM,CAAC;MAAE,CAAC;IACzD;IACA,OAAO;MAAED,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;EAChC,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EACX,MAAMnB,OAAO,GAAG,IAAAM,cAAO,EAAC,MAAM;IAC5B,IAAIa,KAAK,EAAE;MACT,MAAMI,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;MACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC;QACrCC,CAAC,EAAE,CAAC;QACJC,CAAC,EAAE,CAAC;QACJR,KAAK,EAAEpB,IAAI,CAACoB,KAAK;QACjBC,MAAM,EAAErB,IAAI,CAACqB;MACf,CAAC,CAAC;MACFI,MAAM,CAACI,SAAS,CAACX,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;MAC7B,OAAOI,QAAQ,CAACQ,wBAAwB,CAAC,CAAC;IAC5C,CAAC,MAAM;MACL,OAAO,IAAI;IACb;EACF,CAAC,EAAE,CAAC9B,IAAI,EAAEkB,KAAK,CAAC,CAAC;EACjB,OAAOX,mBAAmB,CAACR,OAAO,EAAEC,IAAI,CAAC;AAC3C,CAAC;AAACQ,OAAA,CAAAQ,iBAAA,GAAAA,iBAAA"}

package/lib/module/external/reanimated/buffers.d.ts

@@ -1,5 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
-export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+type Modifier<T> = (input: T, index: number) => void;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export {};

package/lib/module/external/reanimated/buffers.js

@@ -1,20 +1,30 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { startMapper, stopMapper } from "react-native-reanimated";
 import { Skia } from "../../skia";
-import { useDerivedValue, useSharedValue } from "./moduleWrapper";
+import { useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 const useBuffer = (size, bufferInitializer, modifier) => {
+  var _mod$__closure;
   const buffer = useMemo(() => new Array(size).fill(0).map(bufferInitializer),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [size]);
-  const transforms = useSharedValue(buffer);
-  useDerivedValue(() => {
+  const values = useSharedValue(buffer);
+  const mod = modifier;
+  const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
+  const mapperId = startMapper(() => {
+    "worklet";
+
     buffer.forEach((val, index) => {
       modifier(val, index);
     });
-    // Assuming notifyChange is a function that notifies about the change in transforms.
-    notifyChange(transforms);
-  });
-  return transforms;
+    notifyChange(values);
+  }, deps);
+  useEffect(() => {
+    return () => {
+      stopMapper(mapperId);
+    };
+  }, [mapperId]);
+  return values;
 };
 export const useRectBuffer = (size, modifier) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
 

package/lib/module/external/reanimated/buffers.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Skia","useDerivedValue","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","buffer","Array","fill","map","transforms","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useDerivedValue, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: (input: T, index: number) => void\n) => {\n  const buffer = useMemo(\n    () => new Array(size).fill(0).map(bufferInitializer),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n  const transforms = useSharedValue(buffer);\n\n  useDerivedValue(() => {\n    buffer.forEach((val, index) => {\n      modifier(val, index);\n    });\n    // Assuming notifyChange is a function that notifies about the change in transforms.\n    notifyChange(transforms);\n  });\n\n  return transforms;\n};\n\nexport const useRectBuffer = (\n  size: number,\n  modifier: (input: SkHostRect, index: number) => void\n) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (\n  size: number,\n  modifier: (input: SkRSXform, index: number) => void\n) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (\n  size: number,\n  modifier: (input: SkPoint, index: number) => void\n) => useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (\n  size: number,\n  modifier: (input: SkColor, index: number) => void\n) => useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAG/B,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,eAAe,EAAEC,cAAc,QAAQ,iBAAiB;AACjE,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAA2C,KACxC;EACH,MAAMC,MAAM,GAAGT,OAAO,CACpB,MAAM,IAAIU,KAAK,CAACJ,IAAI,CAAC,CAACK,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACL,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMO,UAAU,GAAGV,cAAc,CAACM,MAAM,CAAC;EAEzCP,eAAe,CAAC,MAAM;IACpBO,MAAM,CAACK,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BR,QAAQ,CAACO,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF;IACAZ,YAAY,CAACS,UAAU,CAAC;EAC1B,CAAC,CAAC;EAEF,OAAOA,UAAU;AACnB,CAAC;AAED,OAAO,MAAMI,aAAa,GAAGA,CAC3BX,IAAY,EACZE,QAAoD,KACjDH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACiB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEV,QAAQ,CAAC;;AAE/D;AACA,OAAO,MAAMW,gBAAgB,GAAGA,CAC9Bb,IAAY,EACZE,QAAmD,KAChDH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACmB,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEZ,QAAQ,CAAC;;AAE9D;AACA,OAAO,MAAMa,cAAc,GAAGA,CAC5Bf,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACqB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEd,QAAQ,CAAC;;AAEtD;AACA,OAAO,MAAMe,cAAc,GAAGA,CAC5BjB,IAAY,EACZE,QAAiD,KAC9CH,SAAS,CAACC,IAAI,EAAE,MAAML,IAAI,CAACuB,KAAK,CAAC,OAAO,CAAC,EAAEhB,QAAQ,CAAC"}
+{"version":3,"names":["useEffect","useMemo","startMapper","stopMapper","Skia","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","Array","fill","map","values","mod","deps","Object","__closure","mapperId","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { startMapper, stopMapper } from \"react-native-reanimated\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: Modifier<T>\n) => {\n  const buffer = useMemo(\n    () => new Array(size).fill(0).map(bufferInitializer),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n  const values = useSharedValue(buffer);\n  const mod = modifier as WorkletFunction;\n  const deps = Object.values(mod.__closure ?? {});\n  const mapperId = startMapper(() => {\n    \"worklet\";\n    buffer.forEach((val, index) => {\n      modifier(val, index);\n    });\n    notifyChange(values);\n  }, deps);\n\n  useEffect(() => {\n    return () => {\n      stopMapper(mapperId);\n    };\n  }, [mapperId]);\n\n  return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n  useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n  useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,UAAU,QAAQ,yBAAyB;AAIjE,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGX,OAAO,CACpB,MAAM,IAAIY,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,MAAM,GAAGX,cAAc,CAACO,MAAM,CAAC;EACrC,MAAMK,GAAG,GAAGP,QAA2B;EACvC,MAAMQ,IAAI,GAAGC,MAAM,CAACH,MAAM,EAAAL,cAAA,GAACM,GAAG,CAACG,SAAS,cAAAT,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMU,QAAQ,GAAGnB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTU,MAAM,CAACU,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7Bd,QAAQ,CAACa,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFlB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXG,UAAU,CAACkB,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMS,aAAa,GAAGA,CAACjB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMJ,IAAI,CAACsB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEhB,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMiB,gBAAgB,GAAGA,CAACnB,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMJ,IAAI,CAACwB,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMmB,cAAc,GAAGA,CAACrB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMJ,IAAI,CAAC0B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMJ,IAAI,CAAC4B,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}

package/lib/module/external/reanimated/textures.d.ts

@@ -1,5 +1,8 @@
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
-export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
-export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
+import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
+export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;

package/lib/module/external/reanimated/textures.js

@@ -1,22 +1,64 @@
 import { useEffect, useMemo } from "react";
 import { drawAsImageFromPicture, drawAsPicture } from "../../renderer/Offscreen";
+import { Skia, useImage } from "../../skia";
 import { runOnUI, useSharedValue } from "./moduleWrapper";
-const createTextureValue = (texture, picture, size) => {
+const createTexture = (texture, picture, size) => {
   "worklet";
 
   texture.value = drawAsImageFromPicture(picture, size);
 };
-export const useTextureValue = (element, size) => {
+export const useTexture = (element, size) => {
   const picture = useMemo(() => {
     return drawAsPicture(element);
   }, [element]);
-  return useTextureValueFromPicture(picture, size);
+  return usePictureAsTexture(picture, size);
+};
+export const useTextureAsValue = (element, size) => {
+  console.warn("useTextureAsValue has been renamed to use useTexture");
+  return useTexture(element, size);
 };
 export const useTextureValueFromPicture = (picture, size) => {
+  console.warn("useTextureValueFromPicture has been renamed to use usePictureAsTexture");
+  return usePictureAsTexture(picture, size);
+};
+export const usePictureAsTexture = (picture, size) => {
   const texture = useSharedValue(null);
   useEffect(() => {
-    runOnUI(createTextureValue)(texture, picture, size);
+    if (picture !== null) {
+      runOnUI(createTexture)(texture, picture, size);
+    }
   }, [texture, picture, size]);
   return texture;
 };
+export const useImageAsTexture = source => {
+  const image = useImage(source);
+  const size = useMemo(() => {
+    if (image) {
+      return {
+        width: image.width(),
+        height: image.height()
+      };
+    }
+    return {
+      width: 0,
+      height: 0
+    };
+  }, [image]);
+  const picture = useMemo(() => {
+    if (image) {
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording({
+        x: 0,
+        y: 0,
+        width: size.width,
+        height: size.height
+      });
+      canvas.drawImage(image, 0, 0);
+      return recorder.finishRecordingAsPicture();
+    } else {
+      return null;
+    }
+  }, [size, image]);
+  return usePictureAsTexture(picture, size);
+};
 //# sourceMappingURL=textures.js.map

package/lib/module/external/reanimated/textures.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","drawAsImageFromPicture","drawAsPicture","runOnUI","useSharedValue","createTextureValue","texture","picture","size","value","useTextureValue","element","useTextureValueFromPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { SkImage, SkPicture, SkSize } from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTextureValue = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTextureValue = (element: ReactElement, size: SkSize) => {\n  const picture = useMemo(() => {\n    return drawAsPicture(element);\n  }, [element]);\n  return useTextureValueFromPicture(picture, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    runOnUI(createTextureValue)(texture, picture, size);\n  }, [texture, picture, size]);\n  return texture;\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAK1C,SACEC,sBAAsB,EACtBC,aAAa,QACR,0BAA0B;AAEjC,SAASC,OAAO,EAAEC,cAAc,QAAQ,iBAAiB;AAEzD,MAAMC,kBAAkB,GAAGA,CACzBC,OAAoC,EACpCC,OAAkB,EAClBC,IAAY,KACT;EACH,SAAS;;EACTF,OAAO,CAACG,KAAK,GAAGR,sBAAsB,CAACM,OAAO,EAAEC,IAAI,CAAC;AACvD,CAAC;AAED,OAAO,MAAME,eAAe,GAAGA,CAACC,OAAqB,EAAEH,IAAY,KAAK;EACtE,MAAMD,OAAO,GAAGP,OAAO,CAAC,MAAM;IAC5B,OAAOE,aAAa,CAACS,OAAO,CAAC;EAC/B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACb,OAAOC,0BAA0B,CAACL,OAAO,EAAEC,IAAI,CAAC;AAClD,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGA,CACxCL,OAAkB,EAClBC,IAAY,KACT;EACH,MAAMF,OAAO,GAAGF,cAAc,CAAiB,IAAI,CAAC;EACpDL,SAAS,CAAC,MAAM;IACdI,OAAO,CAACE,kBAAkB,CAAC,CAACC,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC;EACrD,CAAC,EAAE,CAACF,OAAO,EAAEC,OAAO,EAAEC,IAAI,CAAC,CAAC;EAC5B,OAAOF,OAAO;AAChB,CAAC"}
+{"version":3,"names":["useEffect","useMemo","drawAsImageFromPicture","drawAsPicture","Skia","useImage","runOnUI","useSharedValue","createTexture","texture","picture","size","value","useTexture","element","usePictureAsTexture","useTextureAsValue","console","warn","useTextureValueFromPicture","useImageAsTexture","source","image","width","height","recorder","PictureRecorder","canvas","beginRecording","x","y","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  DataSourceParam,\n  SkImage,\n  SkPicture,\n  SkSize,\n} from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n  const picture = useMemo(() => {\n    return drawAsPicture(element);\n  }, [element]);\n  return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n  console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n  return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  console.warn(\n    \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n  );\n  return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    if (picture !== null) {\n      runOnUI(createTexture)(texture, picture, size);\n    }\n  }, [texture, picture, size]);\n  return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n  const image = useImage(source);\n  const size = useMemo(() => {\n    if (image) {\n      return { width: image.width(), height: image.height() };\n    }\n    return { width: 0, height: 0 };\n  }, [image]);\n  const picture = useMemo(() => {\n    if (image) {\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording({\n        x: 0,\n        y: 0,\n        width: size.width,\n        height: size.height,\n      });\n      canvas.drawImage(image, 0, 0);\n      return recorder.finishRecordingAsPicture();\n    } else {\n      return null;\n    }\n  }, [size, image]);\n  return usePictureAsTexture(picture, size);\n};\n"],"mappings":"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"}

package/lib/typescript/src/external/reanimated/buffers.d.ts

@@ -1,5 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
-export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+type Modifier<T> = (input: T, index: number) => void;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export {};

package/lib/typescript/src/external/reanimated/textures.d.ts

@@ -1,5 +1,8 @@
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
-export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
-export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
+import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
+export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.238",
+  "version": "0.1.239",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/external/reanimated/buffers.ts

@@ -1,53 +1,56 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { startMapper, stopMapper } from "react-native-reanimated";
+import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
 
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";
 
-import { useDerivedValue, useSharedValue } from "./moduleWrapper";
+import { useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 
+type Modifier<T> = (input: T, index: number) => void;
+
 const useBuffer = <T>(
   size: number,
   bufferInitializer: () => T,
-  modifier: (input: T, index: number) => void
+  modifier: Modifier<T>
 ) => {
   const buffer = useMemo(
     () => new Array(size).fill(0).map(bufferInitializer),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size]
   );
-  const transforms = useSharedValue(buffer);
-
-  useDerivedValue(() => {
+  const values = useSharedValue(buffer);
+  const mod = modifier as WorkletFunction;
+  const deps = Object.values(mod.__closure ?? {});
+  const mapperId = startMapper(() => {
+    "worklet";
     buffer.forEach((val, index) => {
       modifier(val, index);
     });
-    // Assuming notifyChange is a function that notifies about the change in transforms.
-    notifyChange(transforms);
-  });
+    notifyChange(values);
+  }, deps);
 
-  return transforms;
+  useEffect(() => {
+    return () => {
+      stopMapper(mapperId);
+    };
+  }, [mapperId]);
+
+  return values;
 };
 
-export const useRectBuffer = (
-  size: number,
-  modifier: (input: SkHostRect, index: number) => void
-) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
+export const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>
+  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
 
 // Usage for RSXform Buffer
-export const useRSXformBuffer = (
-  size: number,
-  modifier: (input: SkRSXform, index: number) => void
-) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
+export const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>
+  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
 
 // Usage for Point Buffer
-export const usePointBuffer = (
-  size: number,
-  modifier: (input: SkPoint, index: number) => void
-) => useBuffer(size, () => Skia.Point(0, 0), modifier);
+export const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>
+  useBuffer(size, () => Skia.Point(0, 0), modifier);
 
 // Usage for Color Buffer
-export const useColorBuffer = (
-  size: number,
-  modifier: (input: SkColor, index: number) => void
-) => useBuffer(size, () => Skia.Color("black"), modifier);
+export const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>
+  useBuffer(size, () => Skia.Color("black"), modifier);

package/src/external/reanimated/textures.tsx

@@ -2,15 +2,21 @@ import { useEffect, useMemo } from "react";
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
+import type {
+  DataSourceParam,
+  SkImage,
+  SkPicture,
+  SkSize,
+} from "../../skia/types";
 import {
   drawAsImageFromPicture,
   drawAsPicture,
 } from "../../renderer/Offscreen";
+import { Skia, useImage } from "../../skia";
 
 import { runOnUI, useSharedValue } from "./moduleWrapper";
 
-const createTextureValue = (
+const createTexture = (
   texture: SharedValue<SkImage | null>,
   picture: SkPicture,
   size: SkSize
@@ -19,20 +25,63 @@ const createTextureValue = (
   texture.value = drawAsImageFromPicture(picture, size);
 };
 
-export const useTextureValue = (element: ReactElement, size: SkSize) => {
+export const useTexture = (element: ReactElement, size: SkSize) => {
   const picture = useMemo(() => {
     return drawAsPicture(element);
   }, [element]);
-  return useTextureValueFromPicture(picture, size);
+  return usePictureAsTexture(picture, size);
+};
+
+export const useTextureAsValue = (element: ReactElement, size: SkSize) => {
+  console.warn("useTextureAsValue has been renamed to use useTexture");
+  return useTexture(element, size);
 };
 
 export const useTextureValueFromPicture = (
-  picture: SkPicture,
+  picture: SkPicture | null,
+  size: SkSize
+) => {
+  console.warn(
+    "useTextureValueFromPicture has been renamed to use usePictureAsTexture"
+  );
+  return usePictureAsTexture(picture, size);
+};
+
+export const usePictureAsTexture = (
+  picture: SkPicture | null,
   size: SkSize
 ) => {
   const texture = useSharedValue<SkImage | null>(null);
   useEffect(() => {
-    runOnUI(createTextureValue)(texture, picture, size);
+    if (picture !== null) {
+      runOnUI(createTexture)(texture, picture, size);
+    }
   }, [texture, picture, size]);
   return texture;
 };
+
+export const useImageAsTexture = (source: DataSourceParam) => {
+  const image = useImage(source);
+  const size = useMemo(() => {
+    if (image) {
+      return { width: image.width(), height: image.height() };
+    }
+    return { width: 0, height: 0 };
+  }, [image]);
+  const picture = useMemo(() => {
+    if (image) {
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording({
+        x: 0,
+        y: 0,
+        width: size.width,
+        height: size.height,
+      });
+      canvas.drawImage(image, 0, 0);
+      return recorder.finishRecordingAsPicture();
+    } else {
+      return null;
+    }
+  }, [size, image]);
+  return usePictureAsTexture(picture, size);
+};