@shopify/react-native-skia 2.0.0-next.1 → 2.0.0-next.2

package/package.json

@@ -5,10 +5,10 @@
     "provenance": true
   },
   "bin": {
-    "setup-skia-web": "./scripts/setup-canvaskit.js"
+    "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -29,7 +29,7 @@
     "jestSetup.mjs",
     "jestEnv.mjs",
     "cpp/**/*.{h,cpp}",
-    "ios/**",
+    "apple/**",
     "libs/apple/*.xcframework/**",
     "react-native-skia.podspec",
     "scripts/setup-canvaskit.js",
@@ -46,7 +46,7 @@
     "build-skia": "ts-node ./scripts/build-skia.ts",
     "copy-skia-headers": "ts-node ./scripts/copy-skia-headers.ts",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
-    "clang-format-ios": "find ios/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
+    "clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-common": "find cpp/ \\( -path 'cpp//skia' -prune \\) -o \\( -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' \\) -print | xargs clang-format -i",
     "workflow-copy-libs": "yarn ts-node ./scripts/workflow-copy-libs.ts",
@@ -91,6 +91,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/exec": "^7.0.3",
     "@semantic-release/github": "^10.3.3",
     "@semantic-release/release-notes-generator": "^14.0.1",
     "@types/jest": "29.5.6",
@@ -121,7 +122,7 @@
     "ws": "8.18.0"
   },
   "dependencies": {
-    "canvaskit-wasm": "0.39.1",
+    "canvaskit-wasm": "0.40.0",
     "react-reconciler": "0.31.0"
   },
   "eslintIgnore": [

package/react-native-skia.podspec

@@ -41,7 +41,7 @@ Pod::Spec.new do |s|
     "Christian Falch" => "christian.falch@gmail.com",
     "William Candillon" => "wcandillon@gmail.com"
   }
-  s.platforms    = { :ios => "13.0", :tvos => "13.0" }
+  s.platforms    = { :ios => "13.0", :tvos => "13.0", :osx => "11" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true
@@ -54,13 +54,13 @@ Pod::Spec.new do |s|
 
   s.frameworks = ['MetalKit', 'AVFoundation', 'AVKit', 'CoreMedia']
 
-  s.vendored_frameworks = use_graphite ?
+  s.vendored_frameworks = use_graphite ? 
   base_frameworks + graphite_frameworks :
   base_frameworks
 
   # All iOS cpp/h files
   s.source_files = [
-    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "apple/**/*.{h,c,cc,cpp,m,mm,swift}",  
     "cpp/**/*.{h,cpp}"
   ]
 

package/src/__tests__/setup.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import path from "path";
 import fs from "fs";
 
@@ -97,8 +98,69 @@ export const checkImage = (
   return 0;
 };
 
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      /**
+       * Checks if values are approximately equal within the given tolerance.
+       * Works with:
+       * - Single numbers
+       * - Arrays of numbers
+       * - Float32Arrays
+       * - SVG path strings (compares numeric values with tolerance)
+       *
+       * @param expected - The expected value to compare against
+       * @param tolerance - The maximum allowed difference between elements (default: 0.01)
+       */
+      toBeApproximatelyEqual(
+        expected: number | number[] | Float32Array | string,
+        tolerance?: number
+      ): R;
+    }
+  }
+}
+
 expect.extend({
-  toBeApproximatelyEqual(_received, _argument, tolerance = 0.1) {
+  toBeApproximatelyEqual(_received, _argument, tolerance = 0.01) {
+    // Handle SVG path strings
+    if (typeof _received === "string" && typeof _argument === "string") {
+      // Parse SVG path strings to extract numerical values
+      const parsePathString = (pathStr: string): number[] => {
+        // Extract all numeric values (including decimals) from the path string
+        const numbers = pathStr.match(/-?\d+(?:\.\d+)?/g) || [];
+        return numbers.map(Number);
+      };
+
+      const receivedPoints = parsePathString(_received);
+      const argumentPoints = parsePathString(_argument);
+
+      if (receivedPoints.length !== argumentPoints.length) {
+        return {
+          pass: false,
+          message: () =>
+            `SVG paths have different number of points: ${receivedPoints.length} vs ${argumentPoints.length}`,
+        };
+      }
+
+      for (let i = 0; i < receivedPoints.length; i++) {
+        if (
+          isNaN(receivedPoints[i]) ||
+          isNaN(argumentPoints[i]) ||
+          Math.abs(receivedPoints[i] - argumentPoints[i]) > tolerance
+        ) {
+          return {
+            pass: false,
+            message: () =>
+              `SVG path points differ more than ${tolerance} at position ${i}: ${receivedPoints[i]} vs ${argumentPoints[i]}`,
+          };
+        }
+      }
+
+      return { pass: true, message: () => "SVG paths are approximately equal" };
+    }
+
+    // Original logic for numbers and arrays
     const received =
       Array.isArray(_received) || _received instanceof Float32Array
         ? _received
@@ -110,6 +172,7 @@ expect.extend({
     if (received.length !== argument.length) {
       return { pass: false, message: () => "Arrays have different lengths" };
     }
+
     for (let i = 0; i < received.length; i++) {
       if (
         isNaN(argument[i]) ||
@@ -127,3 +190,6 @@ ${diffString}`,
     return { pass: true, message: () => "Arrays are approximately equal" };
   },
 });
+
+// Export empty object to make this a module
+export {};

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -40,10 +40,11 @@ export const useAnimatedImageValue = (
 
     // Update the current frame
     animatedImage.decodeNextFrame();
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
+    const oldFrame = currentFrame.value;
     currentFrame.value = animatedImage.getCurrentFrame();
+    if (oldFrame) {
+      oldFrame.dispose();
+    }
 
     // Update the last timestamp
     lastTimestamp.value = timestamp;

package/src/headless/index.ts

@@ -3,11 +3,12 @@
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
 import type { ReactNode } from "react";
 
-import { JsiSkApi } from "../skia/web";
 import type { SkSurface } from "../skia";
+import { JsiSkApi } from "../skia/web";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 
 export * from "../renderer/components";
+export * from "../skia/types";
 
 let Skia: ReturnType<typeof JsiSkApi>;
 

package/src/mock/index.ts

@@ -21,8 +21,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../animation"),
     ...require("../dom/types"),
     ...require("../dom/nodes"),
-    // We could use the real Canvas if we mock the SkiaView component for node
-    Canvas: Noop,
+    Canvas: require("react-native").View,
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,

package/src/renderer/Canvas.tsx

@@ -73,9 +73,10 @@ export const Canvas = ({
   // Root
   const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
+  // Render effects
   useLayoutEffect(() => {
     root.render(children);
-  }, [root, children]);
+  }, [children, root]);
 
   useEffect(() => {
     return () => {

package/src/renderer/__tests__/e2e/Matrix4.spec.tsx

@@ -217,8 +217,7 @@ describe("Matrix4", () => {
       },
       { matrix }
     );
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, jest/valid-expect
-    (expect(result) as any).toBeApproximatelyEqual(
+    expect(result).toBeApproximatelyEqual(
       toMatrix3(
         processTransform3d([
           { translate: [width / 2, height / 2] },

package/src/renderer/__tests__/e2e/Paths.spec.tsx

@@ -110,7 +110,7 @@ describe("Paths", () => {
       path.trim(0.0001, 1.00001, false);
       return path.toSVGString();
     });
-    expect(result).toEqual("M20 20.0048L20 40L40 20");
+    expect(result).toBeApproximatelyEqual("M20 20.0048L20 40L40 20");
   });
   it("should accept [0, 1.2] as trim value", async () => {
     const result = await surface.eval((Skia) => {
@@ -142,17 +142,19 @@ describe("Paths", () => {
         path.interpolate(path2, 1.0001)!.toSVGString(),
         path.interpolate(path2, 1.2)!.toSVGString(),
         path.interpolate(path2, 2)!.toSVGString(),
-      ];
+      ].join(" ");
     });
-    expect(result).toEqual([
-      "M-20 -20L20 0L0 60",
-      "M0 0L20 20L20 40",
-      "M0.002 0.002L20 20.002L20.002 39.998",
-      "M20 20L20 40L40 20",
-      "M20.002 20.002L20 40.002L40.002 19.998",
-      "M24 24L20 44L44 16",
-      "M40 40L20 60L60 0",
-    ]);
+    expect(result).toBeApproximatelyEqual(
+      [
+        "M-20 -20L20 0L0 60",
+        "M0 0L20 20L20 40",
+        "M0.002 0.002L20 20.002L20.002 39.998",
+        "M20 20L20 40L40 20",
+        "M20.002 20.002L20 40.002L40.002 19.998",
+        "M24 24L20 44L44 16",
+        "M40 40L20 60L60 0",
+      ].join(" ")
+    );
   });
   it("should add a path", async () => {
     const result = await surface.eval((Skia) => {

package/src/skia/__tests__/Enums.spec.ts

@@ -4,6 +4,7 @@ import {
   AlphaType,
   BlurStyle,
   ClipOp,
+  ColorType,
   FillType,
   FilterMode,
   FontEdging,
@@ -26,7 +27,6 @@ import {
 import { Path1DEffectStyle } from "../types/PathEffect";
 import { BlendMode } from "../types/Paint/BlendMode";
 import { mapKeys } from "../../renderer/typeddash";
-import { ColorTypeCanvasKit } from "../types/Image/ColorType.web";
 
 import { setupSkia } from "./setup";
 
@@ -71,7 +71,7 @@ describe("Enums", () => {
   });
   it("Should match Image enums values with CanvasKit", () => {
     const { CanvasKit } = setupSkia();
-    checkEnum(ColorTypeCanvasKit, CanvasKit.ColorType);
+    checkEnum(ColorType, CanvasKit.ColorType);
     checkEnum(AlphaType, CanvasKit.AlphaType);
     checkEnum(ImageFormat, CanvasKit.ImageFormat);
     checkEnum(MipmapMode, CanvasKit.MipmapMode);
@@ -111,4 +111,26 @@ describe("Enums", () => {
     );
     checkEnum(ClipOp, CanvasKit.ClipOp);
   });
+  it("Should match color types with CanvasKit", () => {
+    const { CanvasKit } = setupSkia();
+    //expect(CanvasKit.ColorType.Unknown.value).toBe(ColorType.Unknown);
+    expect(CanvasKit.ColorType.Alpha_8.value).toBe(ColorType.Alpha_8);
+    expect(CanvasKit.ColorType.RGB_565.value).toBe(ColorType.RGB_565);
+    //expect(CanvasKit.ColorType.ARGB_4444.value).toBe(ColorType.ARGB_4444);
+    expect(CanvasKit.ColorType.RGBA_8888.value).toBe(ColorType.RGBA_8888);
+    //expect(CanvasKit.ColorType.RGB_888x.value).toBe(ColorType.RGB_888x);
+    expect(CanvasKit.ColorType.BGRA_8888.value).toBe(ColorType.BGRA_8888);
+    expect(CanvasKit.ColorType.RGBA_1010102.value).toBe(ColorType.RGBA_1010102);
+    //expect(CanvasKit.ColorType.BGRA_1010102.value).toBe(ColorType.BGRA_1010102);
+    expect(CanvasKit.ColorType.RGB_101010x.value).toBe(ColorType.RGB_101010x);
+    //expect(CanvasKit.ColorType.BGR_101010x.value).toBe(ColorType.BGR_101010x);
+    //expect(CanvasKit.ColorType.BGR_101010x_XR.value).toBe(ColorType.BGR_101010x_XR);
+    //expect(CanvasKit.ColorType.BGRA_10101010_XR.value).toBe(ColorType.BGRA_10101010_XR);
+    //expect(CanvasKit.ColorType.RGBA_10x6.value).toBe(ColorType.RGBA_10x6);
+    expect(CanvasKit.ColorType.Gray_8.value).toBe(ColorType.Gray_8);
+    //expect(CanvasKit.ColorType.RGBA_F16Norm.value).toBe(ColorType.RGBA_F16Norm);
+    expect(CanvasKit.ColorType.RGBA_F16.value).toBe(ColorType.RGBA_F16);
+    //expect(CanvasKit.ColorType.RGB_F16F16F16x.value).toBe(ColorType.RGB_F16F16F16x);
+    expect(CanvasKit.ColorType.RGBA_F32.value).toBe(ColorType.RGBA_F32);
+  });
 });

package/src/skia/__tests__/Path.spec.ts

@@ -18,14 +18,14 @@ describe("Path", () => {
     const svg2 =
       "M128 191.877C104.213 216.339 80.8869 228.058 66.7826 219.915C52.6783 211.772 51.1647 185.712 60.4559 152.88C27.3773 144.511 5.56522 130.17 5.56522 113.884C5.56522 97.5975 27.3773 83.2565 60.4559 74.8871C51.1647 42.0555 52.6783 15.9952 66.7826 7.85209C80.8869 -0.291009 104.213 11.4283 128 35.8905C151.787 11.4283 175.113 -0.291018 189.217 7.85208C203.322 15.9952 204.835 42.0555 195.544 74.8871C228.623 83.2565 250.435 97.5975 250.435 113.884C250.435 130.17 228.623 144.511 195.544 152.88C204.835 185.712 203.322 211.772 189.217 219.915C175.113 228.058 151.787 216.339 128 191.877ZM71.7826 211.255C69.497 209.936 67.0111 206.926 65.6137 200.393C64.2166 193.861 64.1969 184.917 65.9598 173.914C66.9004 168.042 68.3234 161.739 70.2187 155.109C79.9755 157.106 90.5237 158.614 101.637 159.545C108.001 168.704 114.58 177.085 121.189 184.536C116.395 189.493 111.647 193.877 107.033 197.627C98.385 204.655 90.6292 209.111 84.2739 211.167C77.9172 213.223 74.0682 212.575 71.7826 211.255ZM185.781 72.6589C187.677 66.0285 189.1 59.7251 190.04 53.8539C191.803 42.8506 191.783 33.9062 190.386 27.3744C188.989 20.8411 186.503 17.8319 184.217 16.5123C181.932 15.1928 178.083 14.5444 171.726 16.6009C165.371 18.6569 157.615 23.112 148.967 30.1404C144.353 33.8906 139.605 38.2747 134.811 43.2312C141.42 50.6819 147.999 59.0631 154.363 68.2223C165.476 69.1534 176.025 70.6611 185.781 72.6589ZM121.189 43.2312C116.395 38.2747 111.647 33.8906 107.033 30.1404C98.385 23.112 90.6292 18.6569 84.2739 16.6009C77.9172 14.5445 74.0682 15.1928 71.7826 16.5123C69.497 17.8319 67.0111 20.8411 65.6137 27.3744C64.2166 33.9062 64.1969 42.8506 65.9598 53.8539C66.9004 59.7251 68.3234 66.0286 70.2187 72.6589C79.9755 70.6611 90.5237 69.1534 101.637 68.2223C108.001 59.0631 114.58 50.682 121.189 43.2312ZM114.51 67.4164C118.965 61.3763 123.485 55.7626 128 50.6258C132.515 55.7626 137.035 61.3763 141.49 67.4164C137.06 67.231 132.559 67.1359 128 67.1359C123.441 67.1359 118.94 67.231 114.51 67.4164ZM94.503 78.9676C87.0448 79.8054 79.9231 80.9132 73.2171 82.2548C75.4082 88.7331 78.0097 95.4546 81.0133 102.333C83.0676 98.4035 85.2357 94.4581 87.5152 90.5098C89.7947 86.5615 92.1276 82.7112 94.503 78.9676ZM86.3696 113.884C89.3439 107.821 92.6143 101.678 96.1754 95.5098C99.7366 89.3416 103.422 83.4378 107.185 77.8307C113.922 77.3752 120.878 77.1359 128 77.1359C135.122 77.1359 142.078 77.3752 148.815 77.8307C152.578 83.4378 156.263 89.3416 159.825 95.5098C163.386 101.678 166.656 107.821 169.63 113.884C166.656 119.946 163.386 126.089 159.825 132.258C156.263 138.426 152.578 144.33 148.815 149.937C142.078 150.392 135.122 150.632 128 150.632C120.878 150.632 113.922 150.392 107.185 149.937C103.422 144.33 99.7366 138.426 96.1754 132.258C92.6143 126.089 89.3439 119.946 86.3696 113.884ZM75.2747 113.884C70.5243 103.793 66.5558 93.9046 63.4076 84.4561C56.7179 86.1298 50.5474 88.0492 44.9926 90.1702C34.5819 94.1452 26.8457 98.6344 21.8875 103.11C16.9283 107.587 15.5652 111.245 15.5652 113.884C15.5652 116.523 16.9283 120.18 21.8875 124.657C26.8457 129.133 34.5819 133.622 44.9926 137.597C50.5474 139.718 56.7179 141.638 63.4076 143.311C66.5558 133.863 70.5243 123.974 75.2747 113.884ZM73.2171 145.513C75.4082 139.034 78.0097 132.313 81.0133 125.435C83.0676 129.364 85.2357 133.309 87.5152 137.258C89.7947 141.206 92.1276 145.056 94.503 148.8C87.0448 147.962 79.9231 146.854 73.2171 145.513ZM154.363 159.545C165.476 158.614 176.024 157.106 185.781 155.109C187.677 161.739 189.1 168.042 190.04 173.914C191.803 184.917 191.783 193.861 190.386 200.393C188.989 206.926 186.503 209.936 184.217 211.255C181.932 212.575 178.083 213.223 171.726 211.167C165.371 209.111 157.615 204.655 148.967 197.627C144.353 193.877 139.605 189.493 134.811 184.536C141.42 177.085 147.999 168.704 154.363 159.545ZM141.49 160.351C137.035 166.391 132.515 172.005 128 177.142C123.485 172.005 118.965 166.391 114.51 160.351C118.94 160.536 123.441 160.632 128 160.632C132.559 160.632 137.06 160.536 141.49 160.351ZM161.497 148.8C163.872 145.056 166.205 141.206 168.485 137.258C170.764 133.309 172.932 129.364 174.987 125.435C177.99 132.313 180.592 139.034 182.783 145.513C176.077 146.854 168.955 147.962 161.497 148.8ZM180.725 113.884C185.476 123.974 189.444 133.863 192.592 143.311C199.282 141.638 205.453 139.718 211.007 137.597C221.418 133.622 229.154 129.133 234.112 124.657C239.072 120.18 240.435 116.523 240.435 113.884C240.435 111.245 239.072 107.587 234.112 103.11C229.154 98.6344 221.418 94.1452 211.007 90.1702C205.453 88.0492 199.282 86.1298 192.592 84.4561C189.444 93.9046 185.476 103.793 180.725 113.884ZM174.987 102.333C177.99 95.4546 180.592 88.7331 182.783 82.2548C176.077 80.9132 168.955 79.8054 161.497 78.9676C163.872 82.7112 166.205 86.5615 168.485 90.5098C170.764 94.4581 172.932 98.4035 174.987 102.333Z";
     const p1 = roundtrip(Skia, Skia.Path.MakeFromSVGString(svg1)!);
-    expect(p1.toSVGString()).toBe(svg1);
+    expect(p1.toSVGString()).toBeApproximatelyEqual(svg1);
 
     const paint = Skia.Paint();
     paint.setAntiAlias(true);
     paint.setColor(Skia.Color("cyan"));
     canvas.drawPath(p1, paint);
     const p2 = roundtrip(Skia, Skia.Path.MakeFromSVGString(svg2)!);
-    expect(p2.toSVGString()).toBe(svg2);
+    expect(p2.toSVGString()).toBeApproximatelyEqual(svg2);
 
     p2.setFillType(FillType.EvenOdd);
     canvas.drawPath(p2, paint);

package/src/skia/web/Host.ts

@@ -1,12 +1,13 @@
-import type { CanvasKit, EmbindEnumEntity, EmbindEnum } from "canvaskit-wasm";
+import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
-export class NotImplementedOnRNWeb extends Error {
-  constructor(msg?: string) {
-    super(msg ?? "Not implemented on React Native Web");
+export const throwNotImplementedOnRNWeb = <T>(): T => {
+  if (typeof jest !== "undefined") {
+    return jest.fn() as unknown as T;
   }
-}
+  throw new Error("Not implemented on React Native Web");
+};
 
 export abstract class Host {
   readonly CanvasKit: CanvasKit;
@@ -41,11 +42,28 @@ export abstract class HostObject<T, N extends string> extends BaseHostObject<
   }
 }
 
-export const getEnum = (e: EmbindEnum, v: number): EmbindEnumEntity =>
-  Object.values(e).find(({ value }) => value === v);
+export const getEnum = (
+  CanvasKit: CanvasKit,
+  name: keyof CanvasKit,
+  v: number
+): EmbindEnumEntity => {
+  const e = CanvasKit[name];
+  if (typeof e !== "function") {
+    throw new Error(`${name} is not an number`);
+  }
+  const result = Object.values(e).find(({ value }) => value === v);
+  if (!result) {
+    throw new Error(
+      `Enum ${name} does not have value ${v} on React Native Web`
+    );
+  }
+  return result;
+};
 
 export const optEnum = (
-  e: EmbindEnum,
-  value: number | undefined
-): EmbindEnumEntity | undefined =>
-  value === undefined ? undefined : getEnum(e, value);
+  CanvasKit: CanvasKit,
+  name: keyof CanvasKit,
+  v: number | undefined
+): EmbindEnumEntity | undefined => {
+  return v === undefined ? undefined : getEnum(CanvasKit, name, v);
+};

package/src/skia/web/JsiSkCanvas.ts

@@ -124,8 +124,8 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       left,
       top,
-      getEnum(this.CanvasKit.FilterMode, fm),
-      getEnum(this.CanvasKit.MipmapMode, mm),
+      getEnum(this.CanvasKit, "FilterMode", fm),
+      getEnum(this.CanvasKit, "MipmapMode", mm),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -141,7 +141,7 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       Array.from(JsiSkRect.fromValue(this.CanvasKit, center)),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      getEnum(this.CanvasKit.FilterMode, filter),
+      getEnum(this.CanvasKit, "FilterMode", filter),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -176,8 +176,8 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      getEnum(this.CanvasKit.FilterMode, fm),
-      getEnum(this.CanvasKit.MipmapMode, mm),
+      getEnum(this.CanvasKit, "FilterMode", fm),
+      getEnum(this.CanvasKit, "MipmapMode", mm),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -197,7 +197,7 @@ export class JsiSkCanvas
   drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
     this.ref.drawVertices(
       JsiSkVertices.fromValue(verts),
-      getEnum(this.CanvasKit.BlendMode, mode),
+      getEnum(this.CanvasKit, "BlendMode", mode),
       JsiSkPaint.fromValue(paint)
     );
   }
@@ -213,7 +213,7 @@ export class JsiSkCanvas
       cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
       texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
-      mode ? getEnum(this.CanvasKit.BlendMode, mode) : null,
+      mode ? getEnum(this.CanvasKit, "BlendMode", mode) : null,
       paint ? JsiSkPaint.fromValue(paint) : undefined
     );
   }
@@ -224,7 +224,7 @@ export class JsiSkCanvas
 
   drawPoints(mode: PointMode, points: SkPoint[], paint: SkPaint) {
     this.ref.drawPoints(
-      getEnum(this.CanvasKit.PointMode, mode),
+      getEnum(this.CanvasKit, "PointMode", mode),
       points.map(({ x, y }) => [x, y]).flat(),
       JsiSkPaint.fromValue(paint)
     );
@@ -357,7 +357,7 @@ export class JsiSkCanvas
   drawColor(color: SkColor, blendMode?: BlendMode) {
     this.ref.drawColor(
       color,
-      blendMode ? getEnum(this.CanvasKit.BlendMode, blendMode) : undefined
+      blendMode ? getEnum(this.CanvasKit, "BlendMode", blendMode) : undefined
     );
   }
 
@@ -368,7 +368,7 @@ export class JsiSkCanvas
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipPath(
       JsiSkPath.fromValue(path),
-      getEnum(this.CanvasKit.PathOp, op),
+      getEnum(this.CanvasKit, "PathOp", op),
       doAntiAlias
     );
   }
@@ -376,7 +376,7 @@ export class JsiSkCanvas
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),
-      getEnum(this.CanvasKit.PathOp, op),
+      getEnum(this.CanvasKit, "PathOp", op),
       doAntiAlias
     );
   }
@@ -384,7 +384,7 @@ export class JsiSkCanvas
   clipRRect(rrect: InputRRect, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
-      getEnum(this.CanvasKit.PathOp, op),
+      getEnum(this.CanvasKit, "PathOp", op),
       doAntiAlias
     );
   }
@@ -426,9 +426,9 @@ export class JsiSkCanvas
       ckSampling = sampling;
     } else if (sampling) {
       ckSampling = {
-        filter: getEnum(this.CanvasKit.FilterMode, sampling.filter),
+        filter: getEnum(this.CanvasKit, "FilterMode", sampling.filter),
         mipmap: sampling.mipmap
-          ? getEnum(this.CanvasKit.MipmapMode, sampling.mipmap)
+          ? getEnum(this.CanvasKit, "MipmapMode", sampling.mipmap)
           : this.CanvasKit.MipmapMode.None,
       };
     }
@@ -438,7 +438,7 @@ export class JsiSkCanvas
       dst,
       JsiSkPaint.fromValue(paint),
       blendMode
-        ? getEnum(this.CanvasKit.BlendMode, blendMode)
+        ? getEnum(this.CanvasKit, "BlendMode", blendMode)
         : this.CanvasKit.BlendMode.DstOver,
       cls,
       ckSampling
@@ -450,8 +450,8 @@ export class JsiSkCanvas
       width: imageInfo.width,
       height: imageInfo.height,
       colorSpace: this.CanvasKit.ColorSpace.SRGB,
-      alphaType: getEnum(this.CanvasKit.AlphaType, imageInfo.alphaType),
-      colorType: getEnum(this.CanvasKit.ColorType, imageInfo.colorType),
+      alphaType: getEnum(this.CanvasKit, "AlphaType", imageInfo.alphaType),
+      colorType: getEnum(this.CanvasKit, "ColorType", imageInfo.colorType),
     };
     return this.ref.readPixels(srcX, srcY, pxInfo);
   }

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -31,7 +31,7 @@ export class JsiSkColorFilterFactory
       this.CanvasKit,
       this.CanvasKit.ColorFilter.MakeBlend(
         color,
-        getEnum(this.CanvasKit.BlendMode, mode)
+        getEnum(this.CanvasKit, "BlendMode", mode)
       )
     );
   }

package/src/skia/web/JsiSkFont.ts

@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb, getEnum } from "./Host";
+import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -21,8 +21,8 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint | undefined): SkRect {
-    throw new NotImplementedOnRNWeb();
+  measureText(_text: string, _paint?: SkPaint | undefined) {
+    return throwNotImplementedOnRNWeb<SkRect>();
   }
 
   dispose = () => {
@@ -100,7 +100,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setEdging(edging: FontEdging) {
-    this.ref.setEdging(getEnum(this.CanvasKit.FontEdging, edging));
+    this.ref.setEdging(getEnum(this.CanvasKit, "FontEdging", edging));
   }
 
   setEmbeddedBitmaps(embeddedBitmaps: boolean) {
@@ -108,7 +108,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setHinting(hinting: FontHinting) {
-    this.ref.setHinting(getEnum(this.CanvasKit.FontHinting, hinting));
+    this.ref.setHinting(getEnum(this.CanvasKit, "FontHinting", hinting));
   }
 
   setLinearMetrics(linearMetrics: boolean) {

package/src/skia/web/JsiSkFontMgr.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, FontMgr } from "canvaskit-wasm";
 
 import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb } from "./Host";
+import { HostObject, throwNotImplementedOnRNWeb } from "./Host";
 
 export class JsiSkFontMgr
   extends HostObject<FontMgr, "FontMgr">
@@ -20,7 +20,7 @@ export class JsiSkFontMgr
   getFamilyName(index: number) {
     return this.ref.getFamilyName(index);
   }
-  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle): SkTypeface {
-    throw new NotImplementedOnRNWeb();
+  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle) {
+    return throwNotImplementedOnRNWeb<SkTypeface>();
   }
 }

package/src/skia/web/JsiSkImage.ts

@@ -77,10 +77,10 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return new JsiSkShader(
       this.CanvasKit,
       this.ref.makeShaderOptions(
-        getEnum(this.CanvasKit.TileMode, tx),
-        getEnum(this.CanvasKit.TileMode, ty),
-        getEnum(this.CanvasKit.FilterMode, fm),
-        getEnum(this.CanvasKit.MipmapMode, mm),
+        getEnum(this.CanvasKit, "TileMode", tx),
+        getEnum(this.CanvasKit, "TileMode", ty),
+        getEnum(this.CanvasKit, "FilterMode", fm),
+        getEnum(this.CanvasKit, "MipmapMode", mm),
         localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
@@ -96,8 +96,8 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return new JsiSkShader(
       this.CanvasKit,
       this.ref.makeShaderCubic(
-        getEnum(this.CanvasKit.TileMode, tx),
-        getEnum(this.CanvasKit.TileMode, ty),
+        getEnum(this.CanvasKit, "TileMode", tx),
+        getEnum(this.CanvasKit, "TileMode", ty),
         B,
         C,
         localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
@@ -109,11 +109,13 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     let result: Uint8Array | null;
     if (fmt && quality) {
       result = this.ref.encodeToBytes(
-        getEnum(this.CanvasKit.ImageFormat, fmt),
+        getEnum(this.CanvasKit, "ImageFormat", fmt),
         quality
       );
     } else if (fmt) {
-      result = this.ref.encodeToBytes(getEnum(this.CanvasKit.ImageFormat, fmt));
+      result = this.ref.encodeToBytes(
+        getEnum(this.CanvasKit, "ImageFormat", fmt)
+      );
     } else {
       result = this.ref.encodeToBytes();
     }
@@ -137,11 +139,13 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
       width: imageInfo?.width ?? info.width,
       height: imageInfo?.height ?? info.height,
       alphaType: getEnum(
-        this.CanvasKit.AlphaType,
+        this.CanvasKit,
+        "AlphaType",
         (imageInfo ?? info).alphaType
       ),
       colorType: getEnum(
-        this.CanvasKit.ColorType,
+        this.CanvasKit,
+        "ColorType",
         (imageInfo ?? info).colorType
       ),
     };