@shopify/react-native-skia 2.2.15 → 2.2.17

package/apple/MetalWindowContext.mm

@@ -26,10 +26,20 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
   _layer.drawableSize = CGSizeMake(width, height);
   BOOL supportsWideColor = NO;
   if (useP3ColorSpace) {
+#if !TARGET_OS_OSX
     if (@available(iOS 10.0, *)) {
       supportsWideColor = [UIScreen mainScreen].traitCollection.displayGamut ==
                           UIDisplayGamutP3;
     }
+#else
+    if (@available(macOS 10.12, *)) {
+      NSScreen *screen = [NSScreen mainScreen];
+      NSColorSpace *displayP3 = [NSColorSpace displayP3ColorSpace];
+      if (screen.colorSpace && displayP3) {
+        supportsWideColor = [screen.colorSpace isEqual:displayP3];
+      }
+    }
+#endif // !TARGET_OS_OSX
   }
   if (supportsWideColor) {
     CGColorSpaceRef colorSpace =

package/cpp/api/JsiSkImage.h

@@ -275,21 +275,17 @@ public:
   JsiSkImage(std::shared_ptr<RNSkPlatformContext> context,
              const sk_sp<SkImage> image)
       : JsiSkWrappingSkPtrHostObject<SkImage>(std::move(context),
-                                              std::move(image)),
-        _deletionHandler() {
+                                              std::move(image)) {
     // Drain any pending deletions when creating new images
     ThreadSafeDeletion<SkImage>::drainDeletionQueue();
   }
 
   ~JsiSkImage() override {
     // Handle thread-safe deletion
-    auto objectToDelete = _deletionHandler.handleDeletion(getObject());
-    if (!objectToDelete) {
-      // Object was queued for deletion on another thread
-      // Clear it to prevent base class destructor from deleting it
-      setObject(nullptr);
-    }
-    // If objectToDelete is not null, base destructor will handle cleanup
+    _deletionHandler.handleDeletion(getObject());
+    // Always clear the object to prevent base class destructor from deleting it
+    // handleDeletion takes full responsibility for the object's lifetime
+    setObject(nullptr);
   }
 
   size_t getMemoryPressure() const override {

package/cpp/api/JsiSkSurface.h

@@ -44,13 +44,10 @@ public:
 
   ~JsiSkSurface() override {
     // Handle thread-safe deletion
-    auto objectToDelete = _deletionHandler.handleDeletion(getObject());
-    if (!objectToDelete) {
-      // Object was queued for deletion on another thread
-      // Clear it to prevent base class destructor from deleting it
-      setObject(nullptr);
-    }
-    // If objectToDelete is not null, base destructor will handle cleanup
+    _deletionHandler.handleDeletion(getObject());
+    // Always clear the object to prevent base class destructor from deleting it
+    // handleDeletion takes full responsibility for the object's lifetime
+    setObject(nullptr);
   }
 
   EXPORT_JSI_API_TYPENAME(JsiSkSurface, Surface)

package/cpp/api/JsiSkThreadSafeDeletion.h

@@ -32,18 +32,18 @@ public:
 
   /**
    * Handles deletion of the object. If we're on the wrong thread,
-   * queues it for later deletion. Returns nullptr if object was queued,
-   * or the object itself if it should be deleted immediately.
+   * queues it for later deletion. Otherwise, allows immediate deletion.
+   * The object is always considered handled after this call.
    */
-  sk_sp<T> handleDeletion(sk_sp<T> object) {
+  void handleDeletion(sk_sp<T> object) {
     if (!object) {
-      return nullptr;
+      return;
     }
 
 #ifdef DISABLE_THREAD_SAFE_DELETION
-    // When disabled, always return the object for immediate deletion
+    // When disabled, allow immediate deletion
     // This will likely cause crashes when objects are deleted on wrong thread
-    return object;
+    return;
 #else
     // Always try to drain the queue when handling deletions
     drainDeletionQueue();
@@ -53,11 +53,11 @@ public:
       // Queue for deletion on the correct thread
       std::lock_guard<std::mutex> lock(_queueMutex);
       _deletionQueue.push({object, _creationThreadId});
-      return nullptr; // Signal that object was queued
+      return;
     }
 
-    // We're on the correct thread, return object for immediate deletion
-    return object;
+    // We're on the correct thread, allow immediate deletion via destructor
+    return;
 #endif
   }
 

package/cpp/api/recorder/Convertor.h

@@ -160,6 +160,22 @@ SkColor getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
       auto a = array.getValueAtIndex(runtime, 3).asNumber();
       return SkColorSetARGB(a * 255, r * 255, g * 255, b * 255);
     }
+
+    // Check for properties "0", "1", "2", "3" (even if not an array)
+    auto prop0 = jsi::PropNameID::forAscii(runtime, "0");
+    auto prop1 = jsi::PropNameID::forAscii(runtime, "1");
+    auto prop2 = jsi::PropNameID::forAscii(runtime, "2");
+    auto prop3 = jsi::PropNameID::forAscii(runtime, "3");
+    if (object.hasProperty(runtime, prop0) &&
+        object.hasProperty(runtime, prop1) &&
+        object.hasProperty(runtime, prop2) &&
+        object.hasProperty(runtime, prop3)) {
+      auto r = object.getProperty(runtime, prop0).asNumber();
+      auto g = object.getProperty(runtime, prop1).asNumber();
+      auto b = object.getProperty(runtime, prop2).asNumber();
+      auto a = object.getProperty(runtime, prop3).asNumber();
+      return SkColorSetARGB(a * 255, r * 255, g * 255, b * 255);
+    }
     jsi::ArrayBuffer buffer =
         object
             .getProperty(runtime, jsi::PropNameID::forAscii(runtime, "buffer"))

package/jestSetup.js

@@ -1,4 +1,5 @@
 /* globals jest */
+/* eslint-disable import/no-extraneous-dependencies */
 jest.mock("@shopify/react-native-skia", () => {
   jest.mock("@shopify/react-native-skia/lib/commonjs/Platform", () => {
     const Noop = () => undefined;
@@ -18,9 +19,9 @@ jest.mock("@shopify/react-native-skia", () => {
       matchFont: () => null,
       listFontFamilies: () => [],
       useFonts: () => null,
-    }
+    };
   });
-  return require("@shopify/react-native-skia/lib/commonjs/mock").Mock(
+  return require("@shopify/react-native-skia/lib/module/mock").Mock(
     global.CanvasKit
   );
 });

package/jestSetup.mjs

@@ -1,30 +1,7 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { jest } from "@jest/globals";
+// Note- This can be removed entirely once users adopt adding our jestEnv to their jest configs.
+// This is left for compatibility with the older versions of skia but is not needed anymore.
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-import { Mock } from "@shopify/react-native-skia/lib/module/mock";
-
 global.CanvasKit = await CanvasKitInit({});
 
-jest.mock("@shopify/react-native-skia", () => {
-  jest.mock("@shopify/react-native-skia/lib/commonjs/Platform", () => {
-    const Noop = () => undefined;
-    return {
-      OS: "web",
-      PixelRatio: 1,
-      requireNativeComponent: Noop,
-      resolveAsset: Noop,
-      findNodeHandle: Noop,
-      NativeModules: Noop,
-      View: Noop,
-    };
-  });
-  jest.mock("@shopify/react-native-skia/lib/commonjs/skia/core/Font", () => {
-    return {
-      useFont: () => null,
-      matchFont: () => null,
-      listFontFamilies: () => [],
-      useFonts: () => null,
-    }
-  });
-  return Mock(global.CanvasKit);
-});
+/* eslint-disable-next-line import/extensions */
+import "./jestSetup.js";

package/lib/commonjs/__tests__/globalSetup.d.ts

@@ -2,7 +2,7 @@ import type { Server, WebSocket } from "ws";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;
-    var testOS: "ios" | "android" | "web" | "node";
+    var testOS: "ios" | "android" | "web" | "node" | "macos";
     var testArch: "paper" | "fabric";
 }
 declare const globalSetup: () => Promise<void>;

package/lib/commonjs/mock/__tests__/mock.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/commonjs/mock/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Mock = void 0;
 var _web = require("../skia/web");
+var _JsiSkImage = require("../skia/web/JsiSkImage");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop = () => undefined;
 const NoopValue = () => ({
@@ -28,6 +29,21 @@ const Mock = CanvasKit => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    SkiaPictureView: require("react-native").View,
+    JsiSkImage: _JsiSkImage.JsiSkImage,
+    drawAsPicture: Noop,
+    drawAsImage: Noop,
+    drawAsImageFromPicture: Noop,
+    useCanvasRef: NoopValue,
+    useCanvasSize: () => ({
+      ref: {
+        current: 0
+      },
+      size: {
+        width: 0,
+        height: 0
+      }
+    }),
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,
@@ -37,6 +53,8 @@ const Mock = CanvasKit => {
     useClockValue: NoopValue,
     useValueEffect: Noop,
     // Reanimated hooks
+    isOnMainThread: () => true,
+    isFabric: true,
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
     useImageAsTexture: NoopSharedValue,

package/lib/commonjs/mock/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_web","require","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","JsiSkApi","Skia","Canvas","View","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","useClock","usePathInterpolation","useImageAsTexture","useTextureValue","useTextureValueFromPicture","useRSXformBuffer","usePointBuffer","useColorBuffer","useRectBuffer","useBuffer","useRawData","useData","useFont","Font","useFonts","useTypeface","useImage","useSVG","useVideo","exports"],"sources":["index.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport { JsiSkApi } from \"../skia/web\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Noop: () => any = () => undefined;\nconst NoopValue = () => ({ current: 0 });\nconst NoopSharedValue = () => ({ value: 0 });\n\nexport const Mock = (CanvasKit: CanvasKit) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  global.SkiaApi = JsiSkApi(CanvasKit);\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const Skia = global.SkiaApi;\n  return {\n    Skia,\n    ...require(\"../renderer/components\"),\n    ...require(\"../skia\"),\n    ...require(\"../animation\"),\n    ...require(\"../dom/types\"),\n    ...require(\"../dom/nodes\"),\n    Canvas: require(\"react-native\").View,\n    // Skia Animations\n    useValue: NoopValue,\n    useComputedValue: NoopValue,\n    useTiming: NoopValue,\n    useLoop: NoopValue,\n    useSpring: NoopValue,\n    useClockValue: NoopValue,\n    useValueEffect: Noop,\n    // Reanimated hooks\n    useClock: NoopSharedValue,\n    usePathInterpolation: NoopSharedValue,\n    useImageAsTexture: NoopSharedValue,\n    useTextureValue: NoopSharedValue,\n    useTextureValueFromPicture: NoopSharedValue,\n    useRSXformBuffer: NoopSharedValue,\n    usePointBuffer: NoopSharedValue,\n    useColorBuffer: NoopSharedValue,\n    useRectBuffer: NoopSharedValue,\n    useBuffer: NoopSharedValue,\n    useRawData: Noop,\n    useData: Noop,\n    useFont: () => Skia.Font(undefined, 0),\n    useFonts: Noop,\n    useTypeface: () => null,\n    useImage: () => null,\n    useSVG: () => null,\n    useVideo: () => null,\n  };\n};\n"],"mappings":";;;;;;AAEA,IAAAA,IAAA,GAAAC,OAAA;AAEA;AACA,MAAMC,IAAe,GAAGA,CAAA,KAAMC,SAAS;AACvC,MAAMC,SAAS,GAAGA,CAAA,MAAO;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC;AACxC,MAAMC,eAAe,GAAGA,CAAA,MAAO;EAAEC,KAAK,EAAE;AAAE,CAAC,CAAC;AAErC,MAAMC,IAAI,GAAIC,SAAoB,IAAK;EAC5C;EACA;EACAC,MAAM,CAACC,OAAO,GAAG,IAAAC,aAAQ,EAACH,SAAS,CAAC;EACpC;EACA;EACA,MAAMI,IAAI,GAAGH,MAAM,CAACC,OAAO;EAC3B,OAAO;IACLE,IAAI;IACJ,GAAGZ,OAAO,CAAC,wBAAwB,CAAC;IACpC,GAAGA,OAAO,CAAC,SAAS,CAAC;IACrB,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1Ba,MAAM,EAAEb,OAAO,CAAC,cAAc,CAAC,CAACc,IAAI;IACpC;IACAC,QAAQ,EAAEZ,SAAS;IACnBa,gBAAgB,EAAEb,SAAS;IAC3Bc,SAAS,EAAEd,SAAS;IACpBe,OAAO,EAAEf,SAAS;IAClBgB,SAAS,EAAEhB,SAAS;IACpBiB,aAAa,EAAEjB,SAAS;IACxBkB,cAAc,EAAEpB,IAAI;IACpB;IACAqB,QAAQ,EAAEjB,eAAe;IACzBkB,oBAAoB,EAAElB,eAAe;IACrCmB,iBAAiB,EAAEnB,eAAe;IAClCoB,eAAe,EAAEpB,eAAe;IAChCqB,0BAA0B,EAAErB,eAAe;IAC3CsB,gBAAgB,EAAEtB,eAAe;IACjCuB,cAAc,EAAEvB,eAAe;IAC/BwB,cAAc,EAAExB,eAAe;IAC/ByB,aAAa,EAAEzB,eAAe;IAC9B0B,SAAS,EAAE1B,eAAe;IAC1B2B,UAAU,EAAE/B,IAAI;IAChBgC,OAAO,EAAEhC,IAAI;IACbiC,OAAO,EAAEA,CAAA,KAAMtB,IAAI,CAACuB,IAAI,CAACjC,SAAS,EAAE,CAAC,CAAC;IACtCkC,QAAQ,EAAEnC,IAAI;IACdoC,WAAW,EAAEA,CAAA,KAAM,IAAI;IACvBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;IACpBC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,QAAQ,EAAEA,CAAA,KAAM;EAClB,CAAC;AACH,CAAC;AAACC,OAAA,CAAAlC,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"version":3,"names":["_web","require","_JsiSkImage","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","JsiSkApi","Skia","Canvas","View","SkiaPictureView","JsiSkImage","drawAsPicture","drawAsImage","drawAsImageFromPicture","useCanvasRef","useCanvasSize","ref","size","width","height","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","isOnMainThread","isFabric","useClock","usePathInterpolation","useImageAsTexture","useTextureValue","useTextureValueFromPicture","useRSXformBuffer","usePointBuffer","useColorBuffer","useRectBuffer","useBuffer","useRawData","useData","useFont","Font","useFonts","useTypeface","useImage","useSVG","useVideo","exports"],"sources":["index.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { JsiSkImage } from \"../skia/web/JsiSkImage\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Noop: () => any = () => undefined;\nconst NoopValue = () => ({ current: 0 });\nconst NoopSharedValue = () => ({ value: 0 });\n\nexport const Mock = (CanvasKit: CanvasKit) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  global.SkiaApi = JsiSkApi(CanvasKit);\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const Skia = global.SkiaApi;\n  return {\n    Skia,\n    ...require(\"../renderer/components\"),\n    ...require(\"../skia\"),\n    ...require(\"../animation\"),\n    ...require(\"../dom/types\"),\n    ...require(\"../dom/nodes\"),\n    Canvas: require(\"react-native\").View,\n    SkiaPictureView: require(\"react-native\").View,\n    JsiSkImage: JsiSkImage,\n    drawAsPicture: Noop,\n    drawAsImage: Noop,\n    drawAsImageFromPicture: Noop,\n    useCanvasRef: NoopValue,\n    useCanvasSize: () => ({\n      ref: {\n        current: 0,\n      },\n      size: {\n        width: 0,\n        height: 0,\n      },\n    }),\n    // Skia Animations\n    useValue: NoopValue,\n    useComputedValue: NoopValue,\n    useTiming: NoopValue,\n    useLoop: NoopValue,\n    useSpring: NoopValue,\n    useClockValue: NoopValue,\n    useValueEffect: Noop,\n    // Reanimated hooks\n    isOnMainThread: () => true,\n    isFabric: true,\n    useClock: NoopSharedValue,\n    usePathInterpolation: NoopSharedValue,\n    useImageAsTexture: NoopSharedValue,\n    useTextureValue: NoopSharedValue,\n    useTextureValueFromPicture: NoopSharedValue,\n    useRSXformBuffer: NoopSharedValue,\n    usePointBuffer: NoopSharedValue,\n    useColorBuffer: NoopSharedValue,\n    useRectBuffer: NoopSharedValue,\n    useBuffer: NoopSharedValue,\n    useRawData: Noop,\n    useData: Noop,\n    useFont: () => Skia.Font(undefined, 0),\n    useFonts: Noop,\n    useTypeface: () => null,\n    useImage: () => null,\n    useSVG: () => null,\n    useVideo: () => null,\n  };\n};\n"],"mappings":";;;;;;AAEA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA;AACA,MAAME,IAAe,GAAGA,CAAA,KAAMC,SAAS;AACvC,MAAMC,SAAS,GAAGA,CAAA,MAAO;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC;AACxC,MAAMC,eAAe,GAAGA,CAAA,MAAO;EAAEC,KAAK,EAAE;AAAE,CAAC,CAAC;AAErC,MAAMC,IAAI,GAAIC,SAAoB,IAAK;EAC5C;EACA;EACAC,MAAM,CAACC,OAAO,GAAG,IAAAC,aAAQ,EAACH,SAAS,CAAC;EACpC;EACA;EACA,MAAMI,IAAI,GAAGH,MAAM,CAACC,OAAO;EAC3B,OAAO;IACLE,IAAI;IACJ,GAAGb,OAAO,CAAC,wBAAwB,CAAC;IACpC,GAAGA,OAAO,CAAC,SAAS,CAAC;IACrB,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1Bc,MAAM,EAAEd,OAAO,CAAC,cAAc,CAAC,CAACe,IAAI;IACpCC,eAAe,EAAEhB,OAAO,CAAC,cAAc,CAAC,CAACe,IAAI;IAC7CE,UAAU,EAAEA,sBAAU;IACtBC,aAAa,EAAEhB,IAAI;IACnBiB,WAAW,EAAEjB,IAAI;IACjBkB,sBAAsB,EAAElB,IAAI;IAC5BmB,YAAY,EAAEjB,SAAS;IACvBkB,aAAa,EAAEA,CAAA,MAAO;MACpBC,GAAG,EAAE;QACHlB,OAAO,EAAE;MACX,CAAC;MACDmB,IAAI,EAAE;QACJC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV;IACF,CAAC,CAAC;IACF;IACAC,QAAQ,EAAEvB,SAAS;IACnBwB,gBAAgB,EAAExB,SAAS;IAC3ByB,SAAS,EAAEzB,SAAS;IACpB0B,OAAO,EAAE1B,SAAS;IAClB2B,SAAS,EAAE3B,SAAS;IACpB4B,aAAa,EAAE5B,SAAS;IACxB6B,cAAc,EAAE/B,IAAI;IACpB;IACAgC,cAAc,EAAEA,CAAA,KAAM,IAAI;IAC1BC,QAAQ,EAAE,IAAI;IACdC,QAAQ,EAAE9B,eAAe;IACzB+B,oBAAoB,EAAE/B,eAAe;IACrCgC,iBAAiB,EAAEhC,eAAe;IAClCiC,eAAe,EAAEjC,eAAe;IAChCkC,0BAA0B,EAAElC,eAAe;IAC3CmC,gBAAgB,EAAEnC,eAAe;IACjCoC,cAAc,EAAEpC,eAAe;IAC/BqC,cAAc,EAAErC,eAAe;IAC/BsC,aAAa,EAAEtC,eAAe;IAC9BuC,SAAS,EAAEvC,eAAe;IAC1BwC,UAAU,EAAE5C,IAAI;IAChB6C,OAAO,EAAE7C,IAAI;IACb8C,OAAO,EAAEA,CAAA,KAAMnC,IAAI,CAACoC,IAAI,CAAC9C,SAAS,EAAE,CAAC,CAAC;IACtC+C,QAAQ,EAAEhD,IAAI;IACdiD,WAAW,EAAEA,CAAA,KAAM,IAAI;IACvBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;IACpBC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,QAAQ,EAAEA,CAAA,KAAM;EAClB,CAAC;AACH,CAAC;AAACC,OAAA,CAAA/C,IAAA,GAAAA,IAAA","ignoreList":[]}

package/lib/commonjs/renderer/Canvas.d.ts

@@ -1,7 +1,7 @@
 import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
-import { type SharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 export interface CanvasRef extends FC<CanvasProps> {
     makeImageSnapshot(rect?: SkRect): SkImage;

package/lib/commonjs/renderer/Canvas.js

@@ -11,6 +11,7 @@ var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/S
 var _Reconciler = require("../sksg/Reconciler");
 var _skia = require("../skia");
 var _Platform = require("../Platform");
+var _external = require("../external");
 var _global;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -18,6 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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); }
 const useCanvasRef = () => (0, _react.useRef)(null);
 exports.useCanvasRef = useCanvasRef;
+const useReanimatedFrame = !_external.HAS_REANIMATED_3 ? () => {} : _ReanimatedProxy.default.useFrameCallback;
 const useCanvasSize = userRef => {
   const ourRef = useCanvasRef();
   const ref = userRef !== null && userRef !== void 0 ? userRef : ourRef;
@@ -71,39 +73,22 @@ const Canvas = ({
 
   // Root
   const root = (0, _react.useMemo)(() => new _Reconciler.SkiaSGRoot(_skia.Skia, nativeId), [nativeId]);
-  const updateSize = (0, _react.useCallback)(value => {
-    if (onSize) {
-      onSize.value = value;
-    }
-  }, [onSize]);
+  useReanimatedFrame(() => {
+    "worklet";
+  }, !!onSize);
   (0, _react.useEffect)(() => {
     if (onSize) {
-      const {
-        runOnJS
-      } = _ReanimatedProxy.default;
-      const uiOnSize = _ReanimatedProxy.default.makeMutable({
-        width: 0,
-        height: 0
-      });
       _ReanimatedProxy.default.runOnUI(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        global[`__onSize_${nativeId}`] = uiOnSize;
-        uiOnSize.addListener(nativeId, value => {
-          runOnJS(updateSize)(value);
-        });
+        global[`__onSize_${nativeId}`] = onSize;
       })();
       return () => {
         _ReanimatedProxy.default.runOnUI(() => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
           delete global[`__onSize_${nativeId}`];
-          uiOnSize.removeListener(nativeId);
         })();
       };
     }
     return undefined;
-  }, [onSize, nativeId, updateSize]);
+  }, [onSize, nativeId]);
 
   // Render effects
   (0, _react.useLayoutEffect)(() => {

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_Reconciler","_skia","_Platform","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","updateSize","useCallback","value","useEffect","runOnJS","Rea","uiOnSize","makeMutable","runOnUI","addListener","removeListener","undefined","render","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","onLayoutWeb","Platform","OS","nativeEvent","layout","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport { type SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  const updateSize = useCallback(\n    (value: SkSize) => {\n      if (onSize) {\n        onSize.value = value;\n      }\n    },\n    [onSize]\n  );\n  useEffect(() => {\n    if (onSize) {\n      const { runOnJS } = Rea;\n      const uiOnSize = Rea.makeMutable({ width: 0, height: 0 });\n      Rea.runOnUI(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        global[`__onSize_${nativeId}`] = uiOnSize;\n        uiOnSize.addListener(nativeId, (value) => {\n          runOnJS(updateSize)(value);\n        });\n      })();\n      return () => {\n        Rea.runOnUI(() => {\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-expect-error\n          delete global[`__onSize_${nativeId}`];\n          uiOnSize.removeListener(nativeId);\n        })();\n      };\n    }\n    return undefined;\n  }, [onSize, nativeId, updateSize]);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayoutWeb}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_Reconciler","_skia","_Platform","_external","_global","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useReanimatedFrame","HAS_REANIMATED_3","Rea","useFrameCallback","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","measure","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","useEffect","runOnUI","undefined","render","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","onLayoutWeb","useCallback","Platform","OS","nativeEvent","layout","value","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n  }, !!onSize);\n  useEffect(() => {\n    if (onSize) {\n      Rea.runOnUI(() => {\n        (global as Record<string, unknown>)[`__onSize_${nativeId}`] = onSize;\n      })();\n      return () => {\n        Rea.runOnUI(() => {\n          delete (global as Record<string, unknown>)[`__onSize_${nativeId}`];\n        })();\n      };\n    }\n    return undefined;\n  }, [onSize, nativeId]);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayoutWeb}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/renderer/__tests__/setup.d.ts

@@ -3,7 +3,7 @@ import type { Server, WebSocket } from "ws";
 import type * as SkiaExports from "../../index";
 import type { SkImage, SkFont, Skia, SkCanvas } from "../../skia/types";
 import { SkiaSGRoot } from "../../sksg/Reconciler";
-type TestOS = "ios" | "android" | "web" | "node";
+type TestOS = "ios" | "android" | "web" | "node" | "macos";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;

package/lib/module/__tests__/globalSetup.d.ts

@@ -2,7 +2,7 @@ import type { Server, WebSocket } from "ws";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;
-    var testOS: "ios" | "android" | "web" | "node";
+    var testOS: "ios" | "android" | "web" | "node" | "macos";
     var testArch: "paper" | "fabric";
 }
 declare const globalSetup: () => Promise<void>;

package/lib/module/mock/__tests__/mock.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/module/mock/index.js

@@ -1,4 +1,5 @@
 import { JsiSkApi } from "../skia/web";
+import { JsiSkImage } from "../skia/web/JsiSkImage";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop = () => undefined;
@@ -23,6 +24,21 @@ export const Mock = CanvasKit => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    SkiaPictureView: require("react-native").View,
+    JsiSkImage: JsiSkImage,
+    drawAsPicture: Noop,
+    drawAsImage: Noop,
+    drawAsImageFromPicture: Noop,
+    useCanvasRef: NoopValue,
+    useCanvasSize: () => ({
+      ref: {
+        current: 0
+      },
+      size: {
+        width: 0,
+        height: 0
+      }
+    }),
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,
@@ -32,6 +48,8 @@ export const Mock = CanvasKit => {
     useClockValue: NoopValue,
     useValueEffect: Noop,
     // Reanimated hooks
+    isOnMainThread: () => true,
+    isFabric: true,
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
     useImageAsTexture: NoopSharedValue,

package/lib/module/mock/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkApi","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","Skia","require","Canvas","View","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","useClock","usePathInterpolation","useImageAsTexture","useTextureValue","useTextureValueFromPicture","useRSXformBuffer","usePointBuffer","useColorBuffer","useRectBuffer","useBuffer","useRawData","useData","useFont","Font","useFonts","useTypeface","useImage","useSVG","useVideo"],"sources":["index.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport { JsiSkApi } from \"../skia/web\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Noop: () => any = () => undefined;\nconst NoopValue = () => ({ current: 0 });\nconst NoopSharedValue = () => ({ value: 0 });\n\nexport const Mock = (CanvasKit: CanvasKit) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  global.SkiaApi = JsiSkApi(CanvasKit);\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const Skia = global.SkiaApi;\n  return {\n    Skia,\n    ...require(\"../renderer/components\"),\n    ...require(\"../skia\"),\n    ...require(\"../animation\"),\n    ...require(\"../dom/types\"),\n    ...require(\"../dom/nodes\"),\n    Canvas: require(\"react-native\").View,\n    // Skia Animations\n    useValue: NoopValue,\n    useComputedValue: NoopValue,\n    useTiming: NoopValue,\n    useLoop: NoopValue,\n    useSpring: NoopValue,\n    useClockValue: NoopValue,\n    useValueEffect: Noop,\n    // Reanimated hooks\n    useClock: NoopSharedValue,\n    usePathInterpolation: NoopSharedValue,\n    useImageAsTexture: NoopSharedValue,\n    useTextureValue: NoopSharedValue,\n    useTextureValueFromPicture: NoopSharedValue,\n    useRSXformBuffer: NoopSharedValue,\n    usePointBuffer: NoopSharedValue,\n    useColorBuffer: NoopSharedValue,\n    useRectBuffer: NoopSharedValue,\n    useBuffer: NoopSharedValue,\n    useRawData: Noop,\n    useData: Noop,\n    useFont: () => Skia.Font(undefined, 0),\n    useFonts: Noop,\n    useTypeface: () => null,\n    useImage: () => null,\n    useSVG: () => null,\n    useVideo: () => null,\n  };\n};\n"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,aAAa;;AAEtC;AACA,MAAMC,IAAe,GAAGA,CAAA,KAAMC,SAAS;AACvC,MAAMC,SAAS,GAAGA,CAAA,MAAO;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC;AACxC,MAAMC,eAAe,GAAGA,CAAA,MAAO;EAAEC,KAAK,EAAE;AAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,IAAI,GAAIC,SAAoB,IAAK;EAC5C;EACA;EACAC,MAAM,CAACC,OAAO,GAAGV,QAAQ,CAACQ,SAAS,CAAC;EACpC;EACA;EACA,MAAMG,IAAI,GAAGF,MAAM,CAACC,OAAO;EAC3B,OAAO;IACLC,IAAI;IACJ,GAAGC,OAAO,CAAC,wBAAwB,CAAC;IACpC,GAAGA,OAAO,CAAC,SAAS,CAAC;IACrB,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1BC,MAAM,EAAED,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IACpC;IACAC,QAAQ,EAAEZ,SAAS;IACnBa,gBAAgB,EAAEb,SAAS;IAC3Bc,SAAS,EAAEd,SAAS;IACpBe,OAAO,EAAEf,SAAS;IAClBgB,SAAS,EAAEhB,SAAS;IACpBiB,aAAa,EAAEjB,SAAS;IACxBkB,cAAc,EAAEpB,IAAI;IACpB;IACAqB,QAAQ,EAAEjB,eAAe;IACzBkB,oBAAoB,EAAElB,eAAe;IACrCmB,iBAAiB,EAAEnB,eAAe;IAClCoB,eAAe,EAAEpB,eAAe;IAChCqB,0BAA0B,EAAErB,eAAe;IAC3CsB,gBAAgB,EAAEtB,eAAe;IACjCuB,cAAc,EAAEvB,eAAe;IAC/BwB,cAAc,EAAExB,eAAe;IAC/ByB,aAAa,EAAEzB,eAAe;IAC9B0B,SAAS,EAAE1B,eAAe;IAC1B2B,UAAU,EAAE/B,IAAI;IAChBgC,OAAO,EAAEhC,IAAI;IACbiC,OAAO,EAAEA,CAAA,KAAMvB,IAAI,CAACwB,IAAI,CAACjC,SAAS,EAAE,CAAC,CAAC;IACtCkC,QAAQ,EAAEnC,IAAI;IACdoC,WAAW,EAAEA,CAAA,KAAM,IAAI;IACvBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;IACpBC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,QAAQ,EAAEA,CAAA,KAAM;EAClB,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["JsiSkApi","JsiSkImage","Noop","undefined","NoopValue","current","NoopSharedValue","value","Mock","CanvasKit","global","SkiaApi","Skia","require","Canvas","View","SkiaPictureView","drawAsPicture","drawAsImage","drawAsImageFromPicture","useCanvasRef","useCanvasSize","ref","size","width","height","useValue","useComputedValue","useTiming","useLoop","useSpring","useClockValue","useValueEffect","isOnMainThread","isFabric","useClock","usePathInterpolation","useImageAsTexture","useTextureValue","useTextureValueFromPicture","useRSXformBuffer","usePointBuffer","useColorBuffer","useRectBuffer","useBuffer","useRawData","useData","useFont","Font","useFonts","useTypeface","useImage","useSVG","useVideo"],"sources":["index.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { JsiSkImage } from \"../skia/web/JsiSkImage\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Noop: () => any = () => undefined;\nconst NoopValue = () => ({ current: 0 });\nconst NoopSharedValue = () => ({ value: 0 });\n\nexport const Mock = (CanvasKit: CanvasKit) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  global.SkiaApi = JsiSkApi(CanvasKit);\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  const Skia = global.SkiaApi;\n  return {\n    Skia,\n    ...require(\"../renderer/components\"),\n    ...require(\"../skia\"),\n    ...require(\"../animation\"),\n    ...require(\"../dom/types\"),\n    ...require(\"../dom/nodes\"),\n    Canvas: require(\"react-native\").View,\n    SkiaPictureView: require(\"react-native\").View,\n    JsiSkImage: JsiSkImage,\n    drawAsPicture: Noop,\n    drawAsImage: Noop,\n    drawAsImageFromPicture: Noop,\n    useCanvasRef: NoopValue,\n    useCanvasSize: () => ({\n      ref: {\n        current: 0,\n      },\n      size: {\n        width: 0,\n        height: 0,\n      },\n    }),\n    // Skia Animations\n    useValue: NoopValue,\n    useComputedValue: NoopValue,\n    useTiming: NoopValue,\n    useLoop: NoopValue,\n    useSpring: NoopValue,\n    useClockValue: NoopValue,\n    useValueEffect: Noop,\n    // Reanimated hooks\n    isOnMainThread: () => true,\n    isFabric: true,\n    useClock: NoopSharedValue,\n    usePathInterpolation: NoopSharedValue,\n    useImageAsTexture: NoopSharedValue,\n    useTextureValue: NoopSharedValue,\n    useTextureValueFromPicture: NoopSharedValue,\n    useRSXformBuffer: NoopSharedValue,\n    usePointBuffer: NoopSharedValue,\n    useColorBuffer: NoopSharedValue,\n    useRectBuffer: NoopSharedValue,\n    useBuffer: NoopSharedValue,\n    useRawData: Noop,\n    useData: Noop,\n    useFont: () => Skia.Font(undefined, 0),\n    useFonts: Noop,\n    useTypeface: () => null,\n    useImage: () => null,\n    useSVG: () => null,\n    useVideo: () => null,\n  };\n};\n"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,wBAAwB;;AAEnD;AACA,MAAMC,IAAe,GAAGA,CAAA,KAAMC,SAAS;AACvC,MAAMC,SAAS,GAAGA,CAAA,MAAO;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC;AACxC,MAAMC,eAAe,GAAGA,CAAA,MAAO;EAAEC,KAAK,EAAE;AAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,IAAI,GAAIC,SAAoB,IAAK;EAC5C;EACA;EACAC,MAAM,CAACC,OAAO,GAAGX,QAAQ,CAACS,SAAS,CAAC;EACpC;EACA;EACA,MAAMG,IAAI,GAAGF,MAAM,CAACC,OAAO;EAC3B,OAAO;IACLC,IAAI;IACJ,GAAGC,OAAO,CAAC,wBAAwB,CAAC;IACpC,GAAGA,OAAO,CAAC,SAAS,CAAC;IACrB,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1B,GAAGA,OAAO,CAAC,cAAc,CAAC;IAC1BC,MAAM,EAAED,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IACpCC,eAAe,EAAEH,OAAO,CAAC,cAAc,CAAC,CAACE,IAAI;IAC7Cd,UAAU,EAAEA,UAAU;IACtBgB,aAAa,EAAEf,IAAI;IACnBgB,WAAW,EAAEhB,IAAI;IACjBiB,sBAAsB,EAAEjB,IAAI;IAC5BkB,YAAY,EAAEhB,SAAS;IACvBiB,aAAa,EAAEA,CAAA,MAAO;MACpBC,GAAG,EAAE;QACHjB,OAAO,EAAE;MACX,CAAC;MACDkB,IAAI,EAAE;QACJC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV;IACF,CAAC,CAAC;IACF;IACAC,QAAQ,EAAEtB,SAAS;IACnBuB,gBAAgB,EAAEvB,SAAS;IAC3BwB,SAAS,EAAExB,SAAS;IACpByB,OAAO,EAAEzB,SAAS;IAClB0B,SAAS,EAAE1B,SAAS;IACpB2B,aAAa,EAAE3B,SAAS;IACxB4B,cAAc,EAAE9B,IAAI;IACpB;IACA+B,cAAc,EAAEA,CAAA,KAAM,IAAI;IAC1BC,QAAQ,EAAE,IAAI;IACdC,QAAQ,EAAE7B,eAAe;IACzB8B,oBAAoB,EAAE9B,eAAe;IACrC+B,iBAAiB,EAAE/B,eAAe;IAClCgC,eAAe,EAAEhC,eAAe;IAChCiC,0BAA0B,EAAEjC,eAAe;IAC3CkC,gBAAgB,EAAElC,eAAe;IACjCmC,cAAc,EAAEnC,eAAe;IAC/BoC,cAAc,EAAEpC,eAAe;IAC/BqC,aAAa,EAAErC,eAAe;IAC9BsC,SAAS,EAAEtC,eAAe;IAC1BuC,UAAU,EAAE3C,IAAI;IAChB4C,OAAO,EAAE5C,IAAI;IACb6C,OAAO,EAAEA,CAAA,KAAMnC,IAAI,CAACoC,IAAI,CAAC7C,SAAS,EAAE,CAAC,CAAC;IACtC8C,QAAQ,EAAE/C,IAAI;IACdgD,WAAW,EAAEA,CAAA,KAAM,IAAI;IACvBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;IACpBC,MAAM,EAAEA,CAAA,KAAM,IAAI;IAClBC,QAAQ,EAAEA,CAAA,KAAM;EAClB,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/module/renderer/Canvas.d.ts

@@ -1,7 +1,7 @@
 import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
-import { type SharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 export interface CanvasRef extends FC<CanvasProps> {
     makeImageSnapshot(rect?: SkRect): SkImage;

package/lib/module/renderer/Canvas.js

@@ -7,7 +7,9 @@ import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeCompon
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
+import { HAS_REANIMATED_3 } from "../external";
 export const useCanvasRef = () => useRef(null);
+const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
 export const useCanvasSize = userRef => {
   const ourRef = useCanvasRef();
   const ref = userRef !== null && userRef !== void 0 ? userRef : ourRef;
@@ -60,39 +62,22 @@ export const Canvas = ({
 
   // Root
   const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
-  const updateSize = useCallback(value => {
-    if (onSize) {
-      onSize.value = value;
-    }
-  }, [onSize]);
+  useReanimatedFrame(() => {
+    "worklet";
+  }, !!onSize);
   useEffect(() => {
     if (onSize) {
-      const {
-        runOnJS
-      } = Rea;
-      const uiOnSize = Rea.makeMutable({
-        width: 0,
-        height: 0
-      });
       Rea.runOnUI(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        global[`__onSize_${nativeId}`] = uiOnSize;
-        uiOnSize.addListener(nativeId, value => {
-          runOnJS(updateSize)(value);
-        });
+        global[`__onSize_${nativeId}`] = onSize;
       })();
       return () => {
         Rea.runOnUI(() => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
           delete global[`__onSize_${nativeId}`];
-          uiOnSize.removeListener(nativeId);
         })();
       };
     }
     return undefined;
-  }, [onSize, nativeId, updateSize]);
+  }, [onSize, nativeId]);
 
   // Render effects
   useLayoutEffect(() => {

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","useCanvasRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","measure","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","root","updateSize","value","runOnJS","uiOnSize","makeMutable","runOnUI","addListener","removeListener","undefined","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","onLayoutWeb","e","OS","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport { type SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  const updateSize = useCallback(\n    (value: SkSize) => {\n      if (onSize) {\n        onSize.value = value;\n      }\n    },\n    [onSize]\n  );\n  useEffect(() => {\n    if (onSize) {\n      const { runOnJS } = Rea;\n      const uiOnSize = Rea.makeMutable({ width: 0, height: 0 });\n      Rea.runOnUI(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        global[`__onSize_${nativeId}`] = uiOnSize;\n        uiOnSize.addListener(nativeId, (value) => {\n          runOnJS(updateSize)(value);\n        });\n      })();\n      return () => {\n        Rea.runOnUI(() => {\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-expect-error\n          delete global[`__onSize_${nativeId}`];\n          uiOnSize.removeListener(nativeId);\n        })();\n      };\n    }\n    return undefined;\n  }, [onSize, nativeId, updateSize]);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayoutWeb}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","measure","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","onLayout","viewProps","console","error","viewRef","nativeId","root","runOnUI","undefined","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current","measureInWindow","_viewRef$current2","onLayoutWeb","e","OS","nativeEvent","layout","value","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  colorSpace = \"p3\",\n  ref,\n  // Here know this is a type error but this is done on purpose to check it at runtime\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  if (onLayout && isFabric) {\n    console.error(\n      // eslint-disable-next-line max-len\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useRef<View>(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n  }, !!onSize);\n  useEffect(() => {\n    if (onSize) {\n      Rea.runOnUI(() => {\n        (global as Record<string, unknown>)[`__onSize_${nativeId}`] = onSize;\n      })();\n      return () => {\n        Rea.runOnUI(() => {\n          delete (global as Record<string, unknown>)[`__onSize_${nativeId}`];\n        })();\n      };\n    }\n    return undefined;\n  }, [onSize, nativeId]);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      } as CanvasRef)\n  );\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n\n  return (\n    <SkiaPictureViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayoutWeb}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/renderer/__tests__/setup.d.ts

@@ -3,7 +3,7 @@ import type { Server, WebSocket } from "ws";
 import type * as SkiaExports from "../../index";
 import type { SkImage, SkFont, Skia, SkCanvas } from "../../skia/types";
 import { SkiaSGRoot } from "../../sksg/Reconciler";
-type TestOS = "ios" | "android" | "web" | "node";
+type TestOS = "ios" | "android" | "web" | "node" | "macos";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;

package/lib/typescript/lib/commonjs/mock/index.d.ts

@@ -1,6 +1,23 @@
 export const __esModule: boolean;
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    SkiaPictureView: typeof import("react-native").View;
+    JsiSkImage: typeof _JsiSkImage.JsiSkImage;
+    drawAsPicture: () => undefined;
+    drawAsImage: () => undefined;
+    drawAsImageFromPicture: () => undefined;
+    useCanvasRef: () => {
+        current: number;
+    };
+    useCanvasSize: () => {
+        ref: {
+            current: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        };
+    };
     useValue: () => {
         current: number;
     };
@@ -20,6 +37,8 @@ export function Mock(CanvasKit: any): {
         current: number;
     };
     useValueEffect: () => undefined;
+    isOnMainThread: () => boolean;
+    isFabric: boolean;
     useClock: () => {
         value: number;
     };
@@ -61,3 +80,4 @@ export function Mock(CanvasKit: any): {
     readonly __esModule: boolean;
     readonly Skia: import("../../../src/headless").Skia;
 };
+import _JsiSkImage = require("../skia/web/JsiSkImage");

package/lib/typescript/lib/module/mock/index.d.ts

@@ -1,5 +1,22 @@
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    SkiaPictureView: typeof import("react-native").View;
+    JsiSkImage: typeof JsiSkImage;
+    drawAsPicture: () => undefined;
+    drawAsImage: () => undefined;
+    drawAsImageFromPicture: () => undefined;
+    useCanvasRef: () => {
+        current: number;
+    };
+    useCanvasSize: () => {
+        ref: {
+            current: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        };
+    };
     useValue: () => {
         current: number;
     };
@@ -19,6 +36,8 @@ export function Mock(CanvasKit: any): {
         current: number;
     };
     useValueEffect: () => undefined;
+    isOnMainThread: () => boolean;
+    isFabric: boolean;
     useClock: () => {
         value: number;
     };
@@ -61,7 +80,8 @@ export function Mock(CanvasKit: any): {
     enumKey: (k: any) => any;
     processPath: (Skia: any, rawPath: any) => any;
     isPathDef: (def: any) => boolean;
-    size: (width?: number, height?: number) => {
+    size: (width?: number, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    height?: number) => {
         width: number;
         height: number;
     };
@@ -129,7 +149,8 @@ export function Mock(CanvasKit: any): {
         localMatrix: any;
     };
     getRect: (Skia: any, props: any) => any;
-    processTransformProps: (m3: any, props: any) => void;
+    processTransformProps: (// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    m3: any, props: any) => void;
     processTransformProps2: (Skia: any, props: any) => any;
     validateInterpolationOptions(type: any): {
         extrapolateLeft: any;
@@ -147,22 +168,19 @@ export function Mock(CanvasKit: any): {
         x: any;
         y: any;
     };
-    interpolatePaths: (value: any, input: any, // Reanimated hooks
-    outputRange: any, options: any, output: any) => any;
+    interpolatePaths: (value: any, input: any, outputRange: any, options: any, output: any) => any;
     Skia: import("../../../src/headless").Skia;
     loadData: (source: any, factory: any, onError: any) => Promise<any>;
     useCollectionLoading: (source: any, loader: any) => null;
     matchFont: (inputStyle?: {}, fontMgr?: import("../../..").SkFontMgr) => import("../../..").SkFont;
     listFontFamilies: (fontMgr?: import("../../..").SkFontMgr) => string[];
     makeImageFromView: (viewRef: any, callback?: null) => any;
-    useAnimatedImage: (source: any, // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    onError: any) => null;
+    useAnimatedImage: (source: any, onError: any) => null;
     createPicture: (cb: any, rect: any) => import("../../..").SkPicture;
     vec: (x: number | undefined, y: any) => import("../../..").SkPoint;
     point: (x: number | undefined, y: any) => import("../../..").SkPoint;
     neg: (a: any) => import("../../..").SkPoint;
-    add: (a: any, // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    b: any) => import("../../..").SkPoint;
+    add: (a: any, b: any) => import("../../..").SkPoint;
     sub: (a: any, b: any) => import("../../..").SkPoint;
     dist: (a: any, b: any) => number;
     rect: (x: any, y: any, width: any, height: any) => import("../../..").SkHostRect;
@@ -251,7 +269,8 @@ export function Mock(CanvasKit: any): {
     Path1DEffectStyle: {};
     PointMode: {};
     isRect: (def: any) => boolean;
-    isRRect: (def: any) => boolean;
+    isRRect: (// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    def: any) => boolean;
     PlaceholderAlignment: {};
     TextDirection: {};
     TextAlign: {};
@@ -291,15 +310,13 @@ export function Mock(CanvasKit: any): {
     RoundedRect: (props: any) => import("react").DOMElement<any, Element>;
     DiffRect: (props: any) => import("react").DOMElement<any, Element>;
     Line: (props: any) => import("react").DOMElement<any, Element>;
-    Path: (// @ts-ignore
-    { start, end, ...props }: {
+    Path: ({ start, end, ...props }: {
         [x: string]: any;
         start?: number | undefined;
         end?: number | undefined;
     }) => import("react").DOMElement<any, Element>;
     Oval: (props: any) => import("react").DOMElement<any, Element>;
-    Points: (// @ts-ignore
-    { mode, ...props }: {
+    Points: ({ mode, ...props }: {
         [x: string]: any;
         mode?: string | undefined;
     }) => import("react").DOMElement<any, Element>;
@@ -359,8 +376,7 @@ export function Mock(CanvasKit: any): {
         filter: any;
         children: any;
     }>;
-    Image: (// @ts-ignore
-    { fit, ...props }: {
+    Image: ({ fit, ...props }: {
         [x: string]: any;
         fit?: string | undefined;
     }) => import("react").DOMElement<any, Element>;
@@ -389,8 +405,7 @@ export function Mock(CanvasKit: any): {
         tileWidth?: number | undefined;
         tileHeight?: number | undefined;
     }) => import("react").DOMElement<any, Element>;
-    Shader: (// @ts-ignore
-    { uniforms, ...props }: {
+    Shader: ({ uniforms, ...props }: {
         [x: string]: any;
         uniforms?: {} | undefined;
     }) => import("react").DOMElement<any, Element>;
@@ -398,14 +413,12 @@ export function Mock(CanvasKit: any): {
         Math: string;
         Colors: string;
     };
-    Text: (// @ts-ignore
-    { x, y, ...props }: {
+    Text: ({ x, y, ...props }: {
         [x: string]: any;
         x?: number | undefined;
         y?: number | undefined;
     }) => import("react").DOMElement<any, Element>;
-    Glyphs: (// @ts-ignore
-    { x, y, ...props }: {
+    Glyphs: ({ x, y, ...props }: {
         [x: string]: any;
         x?: number | undefined;
         y?: number | undefined;
@@ -431,13 +444,11 @@ export function Mock(CanvasKit: any): {
         style?: string | undefined;
         respectCTM?: boolean | undefined;
     }) => import("react").DOMElement<any, Element>;
-    Blur: (// @ts-ignore
-    { mode, ...props }: {
+    Blur: ({ mode, ...props }: {
         [x: string]: any;
         mode?: string | undefined;
     }) => import("react").DOMElement<any, Element>;
-    Offset: (// @ts-ignore
-    { x, y, ...props }: {
+    Offset: ({ x, y, ...props }: {
         [x: string]: any;
         x?: number | undefined;
         y?: number | undefined;
@@ -486,7 +497,8 @@ export function Mock(CanvasKit: any): {
     mix: (value: any, x: any, y: any) => number;
     clamp: (value: any, lowerBound: any, upperBound: any) => number;
     saturate: (value: any) => number;
-    rotate: (tr: any, origin: any, rotation: any) => {
+    rotate: (tr: any, origin: any, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rotation: any) => {
         x: any;
         y: any;
     };
@@ -510,3 +522,4 @@ export function Mock(CanvasKit: any): {
     ImageFilter: (props: any) => import("react").DOMElement<any, Element>;
     Paragraph: (props: any) => import("react").DOMElement<any, Element>;
 };
+import { JsiSkImage } from "../skia/web/JsiSkImage";

package/lib/typescript/src/__tests__/globalSetup.d.ts

@@ -2,7 +2,7 @@ import type { Server, WebSocket } from "ws";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;
-    var testOS: "ios" | "android" | "web" | "node";
+    var testOS: "ios" | "android" | "web" | "node" | "macos";
     var testArch: "paper" | "fabric";
 }
 declare const globalSetup: () => Promise<void>;

package/lib/typescript/src/mock/__tests__/mock.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,7 +1,7 @@
 import type { FC, RefObject } from "react";
 import React from "react";
 import type { MeasureInWindowOnSuccessCallback, MeasureOnSuccessCallback, ViewProps } from "react-native";
-import { type SharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 export interface CanvasRef extends FC<CanvasProps> {
     makeImageSnapshot(rect?: SkRect): SkImage;

package/lib/typescript/src/renderer/__tests__/setup.d.ts

@@ -3,7 +3,7 @@ import type { Server, WebSocket } from "ws";
 import type * as SkiaExports from "../../index";
 import type { SkImage, SkFont, Skia, SkCanvas } from "../../skia/types";
 import { SkiaSGRoot } from "../../sksg/Reconciler";
-type TestOS = "ios" | "android" | "web" | "node";
+type TestOS = "ios" | "android" | "web" | "node" | "macos";
 declare global {
     var testServer: Server;
     var testClient: WebSocket;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/__tests__/globalSetup.ts

@@ -4,12 +4,14 @@ import { WebSocketServer } from "ws";
 declare global {
   var testServer: Server;
   var testClient: WebSocket;
-  var testOS: "ios" | "android" | "web" | "node";
+  var testOS: "ios" | "android" | "web" | "node" | "macos";
   var testArch: "paper" | "fabric";
 }
 
-const isOS = (os: string): os is "android" | "ios" | "web" => {
-  return ["ios", "android", "web"].indexOf(os) !== -1;
+const isOS = (
+  os: string
+): os is "android" | "ios" | "web" | "node" | "macos" => {
+  return ["ios", "android", "web", "node", "macos"].indexOf(os) !== -1;
 };
 
 const isArch = (arc: string): arc is "paper" | "fabric" => {

package/src/mock/__tests__/mock.spec.ts

@@ -0,0 +1,47 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+global.CanvasKit = {} as any;
+import { Mock } from "../index";
+
+/**
+ * Added mocks to react-native stuff as needed so we can import the skia library
+ * without issues just to test that our mocks match up accordingly
+ */
+jest.mock("../../skia/NativeSetup", () => ({}));
+jest.mock("../../Platform/Platform", () => ({}));
+jest.mock("react-native", () => ({
+  View: jest.fn(),
+}));
+jest.mock("../../specs/SkiaPictureViewNativeComponent", () => {});
+jest.mock("../../external/reanimated/index", () => {});
+
+describe("Mocks", () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mocked = Mock({} as any);
+  const Skia = require("../../index");
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Mocked module contains all exports", () => {
+    test.each(
+      Object.keys(Skia).map((k) => ({
+        key: k,
+      }))
+    )("$key should be in mock", ({ key }) => {
+      const mockExports = Object.keys(mocked);
+      expect(mockExports.includes(key)).toEqual(true);
+      expect(typeof mocked[key]).toEqual(typeof Skia[key]);
+    });
+  });
+
+  test("Skia mock contains all props", () => {
+    // ts-expect-error
+    const SkiaExports = Object.keys(Skia["Skia" as keyof typeof Skia]);
+    const mockSkia = Object.keys(mocked.Skia);
+
+    for (const skiaExport of SkiaExports) {
+      expect(mockSkia.find((exp) => exp === skiaExport)).toEqual(skiaExport);
+    }
+  });
+});

package/src/mock/index.ts

@@ -1,6 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
 import { JsiSkApi } from "../skia/web";
+import { JsiSkImage } from "../skia/web/JsiSkImage";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop: () => any = () => undefined;
@@ -22,6 +23,21 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    SkiaPictureView: require("react-native").View,
+    JsiSkImage: JsiSkImage,
+    drawAsPicture: Noop,
+    drawAsImage: Noop,
+    drawAsImageFromPicture: Noop,
+    useCanvasRef: NoopValue,
+    useCanvasSize: () => ({
+      ref: {
+        current: 0,
+      },
+      size: {
+        width: 0,
+        height: 0,
+      },
+    }),
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,
@@ -31,6 +47,8 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useClockValue: NoopValue,
     useValueEffect: Noop,
     // Reanimated hooks
+    isOnMainThread: () => true,
+    isFabric: true,
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
     useImageAsTexture: NoopSharedValue,

package/src/renderer/Canvas.tsx

@@ -15,7 +15,7 @@ import type {
   View,
   ViewProps,
 } from "react-native";
-import { type SharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
@@ -24,6 +24,7 @@ import type { SkImage, SkRect, SkSize } from "../skia/types";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
+import { HAS_REANIMATED_3 } from "../external";
 
 export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
@@ -36,6 +37,8 @@ export interface CanvasRef extends FC<CanvasProps> {
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
+const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
+
 export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
   const ourRef = useCanvasRef();
   const ref = userRef ?? ourRef;
@@ -91,37 +94,22 @@ export const Canvas = ({
   // Root
   const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-  const updateSize = useCallback(
-    (value: SkSize) => {
-      if (onSize) {
-        onSize.value = value;
-      }
-    },
-    [onSize]
-  );
+  useReanimatedFrame(() => {
+    "worklet";
+  }, !!onSize);
   useEffect(() => {
     if (onSize) {
-      const { runOnJS } = Rea;
-      const uiOnSize = Rea.makeMutable({ width: 0, height: 0 });
       Rea.runOnUI(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        global[`__onSize_${nativeId}`] = uiOnSize;
-        uiOnSize.addListener(nativeId, (value) => {
-          runOnJS(updateSize)(value);
-        });
+        (global as Record<string, unknown>)[`__onSize_${nativeId}`] = onSize;
       })();
       return () => {
         Rea.runOnUI(() => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          delete global[`__onSize_${nativeId}`];
-          uiOnSize.removeListener(nativeId);
+          delete (global as Record<string, unknown>)[`__onSize_${nativeId}`];
         })();
       };
     }
     return undefined;
-  }, [onSize, nativeId, updateSize]);
+  }, [onSize, nativeId]);
 
   // Render effects
   useLayoutEffect(() => {

package/src/renderer/__tests__/setup.tsx

@@ -21,7 +21,7 @@ import { SkiaObject } from "./e2e/setup";
 
 jest.setTimeout(180 * 1000);
 
-type TestOS = "ios" | "android" | "web" | "node";
+type TestOS = "ios" | "android" | "web" | "node" | "macos";
 
 declare global {
   var testServer: Server;

package/jestEnv.mjs

@@ -1,23 +0,0 @@
-/* eslint-disable import/no-default-export */
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { TestEnvironment } from "jest-environment-node";
-import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-
-const CanvasKit = await CanvasKitInit({});
-
-export default class SkiaEnvironment extends TestEnvironment {
-  constructor(config, context) {
-    super(config, context);
-  }
-
-  async setup() {
-    await super.setup();
-    this.global.CanvasKit = CanvasKit;
-  }
-
-  async teardown() {}
-
-  getVmContext() {
-    return super.getVmContext();
-  }
-}