@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libsksg.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libsksg.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libsksg.a</string>
+			<key>LibraryIdentifier</key>
+			<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>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

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

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libskshaper.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskshaper.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>BinaryPath</key>
+			<string>libskshaper.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskshaper.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

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

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libsvg.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libsvg.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libsvg.a</string>
+			<key>LibraryIdentifier</key>
+			<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>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/package.json

@@ -7,18 +7,15 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "files": [
-    "src",
-    "lib",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
+    "src/**",
+    "lib/**",
     "README.md",
     "LICENSE.md",
     "android/build.gradle",
@@ -31,14 +28,14 @@
     "jestSetup.mjs",
     "jestEnv.mjs",
     "cpp/**/*.{h,cpp}",
-    "ios",
-    "libs/ios/libskia.xcframework",
-    "libs/ios/libskshaper.xcframework",
-    "libs/ios/libsvg.xcframework",
-    "libs/ios/libskottie.xcframework",
-    "libs/ios/libsksg.xcframework",
-    "libs/ios/libskparagraph.xcframework",
-    "libs/ios/libskunicode.xcframework",
+    "ios/**",
+    "libs/ios/libskia.xcframework/**",
+    "libs/ios/libskshaper.xcframework/**",
+    "libs/ios/libsvg.xcframework/**",
+    "libs/ios/libskottie.xcframework/**",
+    "libs/ios/libsksg.xcframework/**",
+    "libs/ios/libskparagraph.xcframework/**",
+    "libs/ios/libskunicode.xcframework/**",
     "react-native-skia.podspec",
     "scripts/setup-canvaskit.js",
     "dist/**"
@@ -54,10 +51,8 @@
     "build-skia-ios": "ts-node ./scripts/build-skia-ios.ts && yarn build-skia-ios-framework",
     "build-skia-android": "ts-node ./scripts/build-skia-android.ts",
     "clean-skia": "yarn rimraf ./libs && yarn rimraf ../../externals/skia/out",
-    "copy-skia-include-headers": "yarn rimraf ./cpp/skia/include/ && cp -a ../../externals/skia/include/. ./cpp/skia/include",
-    "copy-skia-module-headers": "ts-node ./scripts/copy-skia-module-headers.ts",
-    "copy-skia-headers": "yarn copy-skia-include-headers && yarn copy-skia-module-headers",
-    "build-skia": "yarn build-skia-ios && yarn build-skia-android && yarn copy-skia-headers",
+    "copy-skia-headers": "ts-node ./scripts/copy-skia-module-headers.ts",
+    "build-skia": "yarn rimraf ./libs && yarn build-skia-ios && yarn build-skia-android && yarn copy-skia-headers",
     "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-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",

package/react-native-skia.podspec

@@ -35,7 +35,8 @@ Pod::Spec.new do |s|
     'libs/ios/libsvg.xcframework', 
     'libs/ios/libskshaper.xcframework',
     'libs/ios/libskparagraph.xcframework',
-    'libs/ios/libskunicode.xcframework',
+    'libs/ios/libskunicode_core.xcframework',
+    'libs/ios/libskunicode_libgrapheme.xcframework',
   ]
 
   # All iOS cpp/h files

package/src/__tests__/globalSetup.ts

@@ -0,0 +1,51 @@
+import type { Server, WebSocket } from "ws";
+import { WebSocketServer } from "ws";
+
+declare global {
+  var testServer: Server;
+  var testClient: WebSocket;
+  var testOS: "ios" | "android" | "web" | "node";
+  var testArch: "paper" | "fabric";
+}
+
+const isOS = (os: string): os is "android" | "ios" | "web" => {
+  return ["ios", "android", "web"].indexOf(os) !== -1;
+};
+
+const isArch = (arc: string): arc is "paper" | "fabric" => {
+  return ["paper", "fabric"].indexOf(arc) !== -1;
+};
+
+const globalSetup = () => {
+  return new Promise<void>((resolve) => {
+    if (process.env.E2E !== "true") {
+      resolve();
+    } else {
+      const port = 4242;
+      global.testServer = new WebSocketServer({ port });
+      console.log(
+        `\n\nTest server listening on port ${port} (waiting for the example app to open on E2E tests screen)`
+      );
+      global.testServer.on("connection", (client) => {
+        global.testClient = client;
+        client.once("message", (msg) => {
+          const obj = JSON.parse(msg.toString("utf8"));
+          const { OS, arch } = obj;
+          if (!isOS(OS)) {
+            throw new Error("Unknown testing platform: " + OS);
+          }
+          if (!isArch(arch)) {
+            throw new Error("Unknown testing architecture: " + arch);
+          }
+          global.testOS = OS;
+          global.testArch = arch;
+          console.log(`${OS} device connected (${arch})`);
+          resolve();
+        });
+      });
+    }
+  });
+};
+
+// eslint-disable-next-line import/no-default-export
+export default globalSetup;

package/src/__tests__/globalTeardown.ts

@@ -0,0 +1,11 @@
+const globalTeardown = () => {
+  if (global.testClient) {
+    global.testClient.close();
+  }
+  if (global.testServer) {
+    global.testServer.close();
+  }
+};
+
+// eslint-disable-next-line import/no-default-export
+export default globalTeardown;

package/src/__tests__/setup.ts

@@ -0,0 +1,129 @@
+import path from "path";
+import fs from "fs";
+
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+import { diff } from "jest-diff";
+
+import type { SkSurface, SkImage } from "../skia/types";
+
+export const E2E = process.env.E2E === "true";
+export const CI = process.env.CI === "true";
+export const itFailsE2e = E2E ? it.failing : it;
+export const itRunsE2eOnly = E2E ? it : it.skip;
+export const itRunsNodeOnly = E2E ? it.skip : it;
+export const itRunsCIAndNodeOnly = CI || !E2E ? it : it.skip;
+
+export const docPath = (relPath: string) =>
+  path.resolve(process.cwd(), `../../apps/docs/static/img/${relPath}`);
+
+export const processResult = (
+  surface: SkSurface,
+  relPath: string,
+  overwrite = false
+) => {
+  surface.flush();
+  const image = surface.makeImageSnapshot();
+  surface.getCanvas().clear(Float32Array.of(0, 0, 0, 0));
+  const result = checkImage(image, relPath, { overwrite });
+  image.dispose();
+  return result;
+};
+
+interface CheckImageOptions {
+  maxPixelDiff?: number;
+  threshold?: number;
+  overwrite?: boolean;
+  mute?: boolean;
+  shouldFail?: boolean;
+}
+
+// On Github Action, the image decoding is slightly different
+// all tests that show the oslo.jpg have small differences but look ok
+const defaultCheckImageOptions = {
+  maxPixelDiff: 200,
+  threshold: 0.1,
+  overwrite: false,
+  mute: false,
+  shouldFail: false,
+};
+
+export const checkImage = (
+  image: SkImage,
+  relPath: string,
+  opts?: CheckImageOptions
+) => {
+  const options = { ...defaultCheckImageOptions, ...opts };
+  const { overwrite, threshold, mute, maxPixelDiff, shouldFail } = options;
+  const png = image.encodeToBytes();
+  const p = path.resolve(__dirname, relPath);
+  if (fs.existsSync(p) && !overwrite) {
+    const ref = fs.readFileSync(p);
+    const baseline = PNG.sync.read(ref);
+    const toTest = PNG.sync.read(Buffer.from(image.encodeToBytes()));
+    const diffImage = new PNG({
+      width: baseline.width,
+      height: baseline.height,
+    });
+    if (baseline.width !== toTest.width || baseline.height !== toTest.height) {
+      throw new Error(
+        `Image sizes don't match: ${baseline.width}x${baseline.height} vs ${toTest.width}x${toTest.height}`
+      );
+    }
+    const diffPixelsCount = pixelmatch(
+      baseline.data,
+      toTest.data,
+      diffImage.data,
+      baseline.width,
+      baseline.height,
+      { threshold }
+    );
+    if (!mute) {
+      if (diffPixelsCount > maxPixelDiff && !shouldFail) {
+        console.log(`${p} didn't match`);
+        fs.writeFileSync(`${p}.test.png`, PNG.sync.write(toTest));
+        fs.writeFileSync(`${p}-diff-test.png`, PNG.sync.write(diffImage));
+      }
+      if (shouldFail) {
+        expect(diffPixelsCount).not.toBeLessThanOrEqual(maxPixelDiff);
+      } else {
+        expect(diffPixelsCount).toBeLessThanOrEqual(maxPixelDiff);
+      }
+    }
+    return diffPixelsCount;
+  } else {
+    fs.writeFileSync(p, png);
+  }
+  return 0;
+};
+
+expect.extend({
+  toBeApproximatelyEqual(_received, _argument, tolerance = 0.1) {
+    const received =
+      Array.isArray(_received) || _received instanceof Float32Array
+        ? _received
+        : [_received];
+    const argument =
+      Array.isArray(_argument) || _received instanceof Float32Array
+        ? _argument
+        : [_argument];
+    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]) ||
+        isNaN(received[i]) ||
+        Math.abs(received[i] - argument[i]) > tolerance
+      ) {
+        const diffString = diff(received, argument);
+        return {
+          pass: false,
+          message: () => `Element at index ${i} differ more than ${tolerance}:
+${diffString}`,
+        };
+      }
+    }
+    return { pass: true, message: () => "Arrays are approximately equal" };
+  },
+});