@shopify/react-native-skia 0.1.196 → 0.1.199

package/libs/ios/libsksg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.196",
+  "version": "0.1.199",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -34,7 +34,6 @@
     "libs/ios/libskottie.xcframework",
     "libs/ios/libsksg.xcframework",
     "react-native-skia.podspec",
-    "scripts/install-npm.js",
     "scripts/setup-canvaskit.js",
     "dist/**"
   ],
@@ -43,8 +42,8 @@
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
     "test": "jest",
     "e2e": "E2E=true yarn test -i e2e",
-    "postinstall": "node scripts/install-npm.js",
-    "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module"
+    "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module",
+    "postinstall": "node scripts/install-npm.js"
   },
   "repository": {
     "type": "git",

package/src/renderer/Canvas.tsx

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
+  useLayoutEffect,
 } from "react";
 import type {
   RefObject,
@@ -31,29 +32,34 @@ export interface CanvasProps extends SkiaBaseViewProps {
   onTouch?: TouchHandler;
 }
 
+const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
+  const onSize = useValue({
+    width: 0,
+    height: 0,
+  });
+
+  useLayoutEffect(() => {
+    if (!resultValue) {
+      return;
+    }
+    return onSize.addListener((newValue) => {
+      if (isValue(resultValue)) {
+        resultValue.current = newValue;
+      } else {
+        resultValue.value = newValue;
+      }
+    });
+  }, [resultValue, onSize]);
+
+  return onSize;
+};
+
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    {
-      children,
-      style,
-      debug,
-      mode,
-      onTouch,
-      onSize: onSizeReanimatedOrSkia,
-      ...props
-    },
+    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },
     forwardedRef
   ) => {
-    const size = useValue({ width: 0, height: 0 });
-    const onSize = isValue(onSizeReanimatedOrSkia)
-      ? onSizeReanimatedOrSkia
-      : size;
-    useEffect(() => {
-      if (!isValue(onSizeReanimatedOrSkia) && onSizeReanimatedOrSkia) {
-        return size.addListener((v) => (onSizeReanimatedOrSkia.value = v));
-      }
-      return undefined;
-    }, [onSizeReanimatedOrSkia, size]);
+    const onSize = useOnSizeEvent(_onSize);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {

package/src/skia/core/Data.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSourceParam, BaseSkJSIInstance } from "../types";
+import type { SkData, DataSourceParam, SkJSIInstance } from "../types";
 import { Platform } from "../../Platform";
 
 const factoryWrapper = <T>(
@@ -37,7 +37,7 @@ const loadData = <T>(
     );
   }
 };
-const useLoading = <T extends BaseSkJSIInstance>(
+const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   loader: () => Promise<T | null>
 ) => {
@@ -61,7 +61,7 @@ const useLoading = <T extends BaseSkJSIInstance>(
   return data;
 };
 
-export const useRawData = <T extends BaseSkJSIInstance>(
+export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
   onError?: (err: Error) => void

package/src/skia/core/RRect.tsx

@@ -1,5 +1,7 @@
 import { Skia } from "../Skia";
 import type { SkRect } from "../types";
 
-export const rrect = (r: SkRect, rx: number, ry: number) =>
-  Skia.RRectXY(r, rx, ry);
+export const rrect = (r: SkRect, rx: number, ry: number) => {
+  "worklet";
+  return Skia.RRectXY(r, rx, ry);
+};

package/src/skia/core/Rect.ts

@@ -4,10 +4,13 @@ import { isRRect } from "../types";
 
 import { vec } from "./Vector";
 
-export const rect = (x: number, y: number, width: number, height: number) =>
-  Skia.XYWHRect(x, y, width, height);
+export const rect = (x: number, y: number, width: number, height: number) => {
+  "worklet";
+  return Skia.XYWHRect(x, y, width, height);
+};
 
 export const bounds = (rects: SkRect[]) => {
+  "worklet";
   const x = Math.min(...rects.map((r) => r.x));
   const y = Math.min(...rects.map((r) => r.y));
   const width = Math.max(...rects.map((r) => r.x + r.width));
@@ -15,19 +18,33 @@ export const bounds = (rects: SkRect[]) => {
   return rect(x, y, width - x, height - y);
 };
 
-export const topLeft = (r: SkRect | SkRRect) =>
-  isRRect(r) ? vec(r.rect.x, r.rect.y) : vec(r.x, r.y);
-export const topRight = (r: SkRect | SkRRect) =>
-  isRRect(r) ? vec(r.rect.x + r.rect.width, r.rect.y) : vec(r.x + r.width, r.y);
-export const bottomLeft = (r: SkRect | SkRRect) =>
-  isRRect(r)
+export const topLeft = (r: SkRect | SkRRect) => {
+  "worklet";
+  return isRRect(r) ? vec(r.rect.x, r.rect.y) : vec(r.x, r.y);
+};
+
+export const topRight = (r: SkRect | SkRRect) => {
+  "worklet";
+  return isRRect(r)
+    ? vec(r.rect.x + r.rect.width, r.rect.y)
+    : vec(r.x + r.width, r.y);
+};
+
+export const bottomLeft = (r: SkRect | SkRRect) => {
+  "worklet";
+  return isRRect(r)
     ? vec(r.rect.x, r.rect.y + r.rect.height)
     : vec(r.x, r.y + r.height);
-export const bottomRight = (r: SkRect | SkRRect) =>
-  isRRect(r)
+};
+export const bottomRight = (r: SkRect | SkRRect) => {
+  "worklet";
+  return isRRect(r)
     ? vec(r.rect.x + r.rect.width, r.rect.y + r.rect.height)
     : vec(r.x + r.width, r.y + r.height);
-export const center = (r: SkRect | SkRRect) =>
-  isRRect(r)
+};
+export const center = (r: SkRect | SkRRect) => {
+  "worklet";
+  return isRRect(r)
     ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
     : vec(r.x + r.width / 2, r.y + r.height / 2);
+};

package/src/skia/types/Color.ts

@@ -1,4 +1,4 @@
 // This is the JSI color
 export type SkColor = Float32Array;
-// Input colors can be string, number or Float32Array
+// Input colors can be string, number, number[] or Float32Array
 export type Color = string | Float32Array | number | number[];

package/src/skia/types/JsiInstance.ts

@@ -1,7 +1,4 @@
-export interface BaseSkJSIInstance {
-  dispose: () => void;
-}
-
-export interface SkJSIInstance<T extends string> extends BaseSkJSIInstance {
+export interface SkJSIInstance<T extends string> {
   __typename__: T;
+  dispose(): void;
 }

package/cpp/skia/include/effects/SkTableColorFilter.h

@@ -1,29 +0,0 @@
-/*
-* Copyright 2015 Google Inc.
-*
-* Use of this source code is governed by a BSD-style license that can be
-* found in the LICENSE file.
-*/
-
-#ifndef SkTableColorFilter_DEFINED
-#define SkTableColorFilter_DEFINED
-
-#include "include/core/SkColorFilter.h"
-
-// (DEPRECATED) These factory functions are deprecated. Please use the ones in
-// SkColorFilters (i.e., Table and TableARGB).
-class SK_API SkTableColorFilter {
-public:
-    static sk_sp<SkColorFilter> Make(const uint8_t table[256]) {
-        return SkColorFilters::Table(table);
-    }
-
-    static sk_sp<SkColorFilter> MakeARGB(const uint8_t tableA[256],
-                                         const uint8_t tableR[256],
-                                         const uint8_t tableG[256],
-                                         const uint8_t tableB[256]) {
-        return SkColorFilters::TableARGB(tableA, tableR, tableG, tableB);
-    }
-};
-
-#endif

package/cpp/skia/include/private/SkOpts_spi.h

@@ -1,23 +0,0 @@
-/*
- * Copyright 2020 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef SkOpts_spi_DEFINED
-#define SkOpts_spi_DEFINED
-
-#include "include/private/base/SkAPI.h"
-
-#include <cstddef>
-
-// These are exposed as SK_SPI (e.g. SkParagraph), the rest of SkOpts is
-// declared in src/core
-
-namespace SkOpts {
-    // The fastest high quality 32-bit hash we can provide on this platform.
-    extern uint32_t SK_SPI (*hash_fn)(const void* data, size_t bytes, uint32_t seed);
-} // namespace SkOpts
-
-#endif

package/cpp/skia/include/private/SkSpinlock.h

@@ -1,57 +0,0 @@
-/*
- * Copyright 2015 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef SkSpinlock_DEFINED
-#define SkSpinlock_DEFINED
-
-#include "include/core/SkTypes.h"
-#include "include/private/base/SkThreadAnnotations.h"
-#include <atomic>
-
-class SK_CAPABILITY("mutex") SkSpinlock {
-public:
-    constexpr SkSpinlock() = default;
-
-    void acquire() SK_ACQUIRE() {
-        // To act as a mutex, we need an acquire barrier when we acquire the lock.
-        if (fLocked.exchange(true, std::memory_order_acquire)) {
-            // Lock was contended.  Fall back to an out-of-line spin loop.
-            this->contendedAcquire();
-        }
-    }
-
-    // Acquire the lock or fail (quickly). Lets the caller decide to do something other than wait.
-    bool tryAcquire() SK_TRY_ACQUIRE(true) {
-        // To act as a mutex, we need an acquire barrier when we acquire the lock.
-        if (fLocked.exchange(true, std::memory_order_acquire)) {
-            // Lock was contended. Let the caller decide what to do.
-            return false;
-        }
-        return true;
-    }
-
-    void release() SK_RELEASE_CAPABILITY() {
-        // To act as a mutex, we need a release barrier when we release the lock.
-        fLocked.store(false, std::memory_order_release);
-    }
-
-private:
-    SK_API void contendedAcquire();
-
-    std::atomic<bool> fLocked{false};
-};
-
-class SK_SCOPED_CAPABILITY SkAutoSpinlock {
-public:
-    SkAutoSpinlock(SkSpinlock& mutex) SK_ACQUIRE(mutex) : fSpinlock(mutex) { fSpinlock.acquire(); }
-    ~SkAutoSpinlock() SK_RELEASE_CAPABILITY() { fSpinlock.release(); }
-
-private:
-    SkSpinlock& fSpinlock;
-};
-
-#endif//SkSpinlock_DEFINED

package/cpp/skia/include/private/chromium/GrSlug.h

@@ -1,16 +0,0 @@
-/*
- * Copyright 2021 Google LLC
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef GrSlug_DEFINED
-#define GrSlug_DEFINED
-
-#include "include/private/chromium/Slug.h"
-
-// TODO: Update Chrome to use sktext::gpu classes and remove these
-using GrSlug = sktext::gpu::Slug;
-
-#endif  // GrSlug_DEFINED

package/scripts/install-npm.js

@@ -1,33 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-console.log("Updating symlinks for Android build...");
-
-const createSymlink = (p) => {
-  console.log(`Creating symlink to ${p}`, __dirname, process.cwd());
-  const srcDir = path.resolve(`./cpp/${p}`);
-  const dstDir = path.resolve(`./android/cpp/${p}`);
-
-  // Case in PNPM which might turn symlink into a directory:
-  // In that case, remove the directory before creating the symlink
-  if (fs.existsSync(dstDir)) {
-    const lstat = fs.lstatSync(dstDir);
-    const isSymbolicLink = lstat.isSymbolicLink();
-    if (lstat.isDirectory() && !isSymbolicLink) {
-      fs.rmSync(dstDir, { recursive: true });
-    }
-  }
-
-  if (!fs.existsSync(dstDir)) {
-    fs.symlinkSync(srcDir, dstDir, "junction");
-  }
-};
-
-// Copy common cpp files from the package root to the android folder
-createSymlink("api");
-createSymlink("jsi");
-createSymlink("rnskia");
-createSymlink("skia");
-createSymlink("utils");
-
-console.log("Symlinks created successfully.");