@shopify/react-native-skia 2.3.5 → 2.3.7

package/scripts/install-skia.mjs

@@ -2,6 +2,7 @@ import fs from "fs";
 import https from "https";
 import path from "path";
 import os from "os";
+import crypto from "crypto";
 import { spawn } from "child_process";
 import { fileURLToPath } from "url";
 
@@ -9,10 +10,34 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const repo = "shopify/react-native-skia";
 
-const getSkiaVersion = () => {
-  const packageJsonPath = path.join(__dirname, "..", "package.json");
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
-  return packageJson.skiaVersion;
+const packageJsonPath = path.join(__dirname, "..", "package.json");
+
+const getPackageJson = () => {
+  return JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+};
+
+const getSkiaConfig = (graphite = false) => {
+  const packageJson = getPackageJson();
+  return graphite ? packageJson["skia-graphite"] : packageJson.skia;
+};
+
+const getSkiaVersion = (graphite = false) => {
+  const packageJson = getPackageJson();
+  const skiaConfig = getSkiaConfig(graphite);
+  return skiaConfig?.version || packageJson.skiaVersion;
+};
+
+const updateSkiaChecksums = (checksums, graphite = false) => {
+  const packageJson = getPackageJson();
+  const field = graphite ? "skia-graphite" : "skia";
+
+  if (!packageJson[field]) {
+    packageJson[field] = { version: packageJson[field]?.version || "m142", checksums: {} };
+  }
+
+  packageJson[field].checksums = checksums;
+
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n", "utf8");
 };
 
 const GRAPHITE = !!process.env.SK_GRAPHITE;
@@ -25,13 +50,13 @@ const names = [
   `${prefix}-apple-xcframeworks`,
 ];
 if (GRAPHITE) {
-  names.push("skia-graphite-headers");
+  names.push(`${prefix}-headers`);
 }
 
-const skiaVersion = getSkiaVersion();
-const releaseTag = `skia-${skiaVersion}`;
+const skiaVersion = getSkiaVersion(GRAPHITE);
+const releaseTag = GRAPHITE ? `skia-graphite-${skiaVersion}` : `skia-${skiaVersion}`;
 console.log(
-  `📦 Downloading Skia prebuilt binaries for version: ${skiaVersion}`
+  `📦 Downloading Skia prebuilt binaries for ${releaseTag}`
 );
 
 const runCommand = (command, args) => {
@@ -52,64 +77,89 @@ const runCommand = (command, args) => {
   });
 };
 
-const downloadToFile = (url, destPath) => {
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+const downloadToFile = (url, destPath, maxRetries = 5) => {
   fs.mkdirSync(path.dirname(destPath), { recursive: true });
-  return new Promise((resolve, reject) => {
-    const request = (currentUrl) => {
-      https
-        .get(currentUrl, { headers: { "User-Agent": "node" } }, (res) => {
-          if (
-            res.statusCode &&
-            [301, 302, 303, 307, 308].includes(res.statusCode)
-          ) {
-            const { location } = res.headers;
-            if (location) {
-              res.resume();
-              request(location);
-            } else {
-              reject(new Error(`Redirect without location for ${currentUrl}`));
+
+  const attemptDownload = (retryCount = 0) => {
+    return new Promise((resolve, reject) => {
+      const request = (currentUrl) => {
+        https
+          .get(currentUrl, { headers: { "User-Agent": "node" } }, (res) => {
+            if (
+              res.statusCode &&
+              [301, 302, 303, 307, 308].includes(res.statusCode)
+            ) {
+              const { location } = res.headers;
+              if (location) {
+                res.resume();
+                request(location);
+              } else {
+                reject(new Error(`Redirect without location for ${currentUrl}`));
+              }
+              return;
             }
-            return;
-          }
 
-          if (res.statusCode !== 200) {
-            reject(
-              new Error(
+            if (res.statusCode !== 200) {
+              const error = new Error(
                 `Failed to download: ${res.statusCode} ${res.statusMessage}`
-              )
-            );
-            res.resume();
-            return;
-          }
-
-          const fileStream = fs.createWriteStream(destPath);
-          res.pipe(fileStream);
+              );
+              error.statusCode = res.statusCode;
+              reject(error);
+              res.resume();
+              return;
+            }
 
-          fileStream.on("finish", () => {
-            fileStream.close((err) => {
-              if (err) {
-                // If closing the stream errors, perform the same cleanup and reject.
-                fileStream.destroy();
-                fs.unlink(destPath, () => reject(err));
-              } else {
-                resolve();
-              }
+            const fileStream = fs.createWriteStream(destPath);
+            res.pipe(fileStream);
+
+            fileStream.on("finish", () => {
+              fileStream.close((err) => {
+                if (err) {
+                  // If closing the stream errors, perform the same cleanup and reject.
+                  fileStream.destroy();
+                  fs.unlink(destPath, () => reject(err));
+                } else {
+                  resolve();
+                }
+              });
             });
-          });
 
-          const cleanup = (error) => {
-            fileStream.destroy();
-            fs.unlink(destPath, () => reject(error));
-          };
+            const cleanup = (error) => {
+              fileStream.destroy();
+              fs.unlink(destPath, () => reject(error));
+            };
 
-          res.on("error", cleanup);
-          fileStream.on("error", cleanup);
-        })
-        .on("error", reject);
-    };
+            res.on("error", cleanup);
+            fileStream.on("error", cleanup);
+          })
+          .on("error", reject);
+      };
 
-    request(url);
-  });
+      request(url);
+    });
+  };
+
+  const downloadWithRetry = async (retryCount = 0) => {
+    try {
+      await attemptDownload(retryCount);
+    } catch (error) {
+      const isRateLimit = error.statusCode === 403 || error.message.includes('rate limit');
+      const shouldRetry = retryCount < maxRetries && (isRateLimit || error.code === 'ECONNRESET' || error.code === 'ETIMEDOUT');
+
+      if (shouldRetry) {
+        const delay = Math.pow(2, retryCount) * 1000; // 1s, 2s, 4s, 8s, 16s
+        console.log(`   ⚠️  Download failed (${error.message}), retrying in ${delay/1000}s... (attempt ${retryCount + 1}/${maxRetries})`);
+        await sleep(delay);
+        return downloadWithRetry(retryCount + 1);
+      } else {
+        throw error;
+      }
+    }
+  };
+
+  return downloadWithRetry();
 };
 
 const extractTarGz = async (archivePath, destDir) => {
@@ -178,6 +228,92 @@ const artifactsDir = path.resolve(
 
 const libsDir = path.resolve(__dirname, "../libs");
 
+// Function to calculate the checksum of a directory
+const calculateDirectoryChecksum = (directory) => {
+  if (!fs.existsSync(directory)) {
+    return null;
+  }
+
+  const hash = crypto.createHash("sha256");
+  const files = [];
+
+  const collectFiles = (dir) => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        collectFiles(fullPath);
+      } else if (entry.isFile()) {
+        files.push(fullPath);
+      }
+    }
+  };
+
+  collectFiles(directory);
+  files.sort();
+
+  for (const file of files) {
+    const relativePath = path.relative(directory, file);
+    hash.update(relativePath);
+    hash.update(fs.readFileSync(file));
+  }
+
+  return hash.digest("hex");
+};
+
+// Function to calculate all library checksums
+const calculateLibraryChecksums = () => {
+  const checksums = {};
+
+  // Android architectures
+  const androidArchs = ["armeabi-v7a", "arm64-v8a", "x86", "x86_64"];
+  for (const arch of androidArchs) {
+    const archDir = path.join(libsDir, "android", arch);
+    const checksum = calculateDirectoryChecksum(archDir);
+    if (checksum) {
+      const checksumKey = `android-${arch}`;
+      checksums[checksumKey] = checksum;
+    }
+  }
+
+  // Apple frameworks
+  const appleDir = path.join(libsDir, "apple");
+  const appleChecksum = calculateDirectoryChecksum(appleDir);
+  if (appleChecksum) {
+    checksums["apple-xcframeworks"] = appleChecksum;
+  }
+
+  return checksums;
+};
+
+// Function to verify if checksums match
+const verifyChecksums = () => {
+  const skiaConfig = getSkiaConfig(GRAPHITE);
+  const expectedChecksums = skiaConfig?.checksums || {};
+
+  // If no checksums in package.json, we need to download
+  if (Object.keys(expectedChecksums).length === 0) {
+    console.log("⚠️  No checksums found in package.json");
+    return false;
+  }
+
+  const actualChecksums = calculateLibraryChecksums();
+
+  // Check if all expected checksums match
+  for (const [key, expectedChecksum] of Object.entries(expectedChecksums)) {
+    const actualChecksum = actualChecksums[key];
+    if (actualChecksum !== expectedChecksum) {
+      console.log(`⚠️  Checksum mismatch for ${key}`);
+      console.log(`   Expected: ${expectedChecksum}`);
+      console.log(`   Actual: ${actualChecksum || "missing"}`);
+      return false;
+    }
+  }
+
+  console.log("✅ All checksums match");
+  return true;
+};
+
 // Function to check if prebuilt binaries are already installed
 const areBinariesInstalled = () => {
   if (!fs.existsSync(libsDir)) {
@@ -223,17 +359,14 @@ const clearDirectory = (directory) => {
 };
 
 const main = async () => {
-  const forceReinstall = process.argv.includes("--force");
-
-  // Check if binaries are already installed
-  if (!forceReinstall && areBinariesInstalled()) {
-    console.log("✅ Prebuilt binaries already installed, skipping download");
-    console.log("   Use --force to reinstall");
+  // Check if binaries are installed and checksums match
+  if (areBinariesInstalled() && verifyChecksums()) {
+    console.log("✅ Prebuilt binaries already installed with matching checksums, skipping download");
     return;
   }
 
-  if (forceReinstall) {
-    console.log("🔄 Force reinstall requested");
+  if (areBinariesInstalled()) {
+    console.log("⚠️  Binaries installed but checksums don't match, re-downloading...");
   }
 
   console.log("🧹 Clearing existing artifacts...");
@@ -270,22 +403,50 @@ const main = async () => {
   fs.mkdirSync(androidDir, { recursive: true });
 
   // Copy android artifacts
-  const androidArchs = [
-    { src: "skia-android-arm", dest: "armeabi-v7a" },
-    { src: "skia-android-arm-64", dest: "arm64-v8a" },
-    { src: "skia-android-arm-x86", dest: "x86" },
-    { src: "skia-android-arm-x64", dest: "x86_64" },
+  const androidArchs = GRAPHITE ? [
+    { artifact: `${prefix}-android-arm`, srcSubdir: "arm", dest: "armeabi-v7a" },
+    { artifact: `${prefix}-android-arm-64`, srcSubdir: "arm64", dest: "arm64-v8a" },
+    { artifact: `${prefix}-android-arm-x86`, srcSubdir: "x86", dest: "x86" },
+    { artifact: `${prefix}-android-arm-x64`, srcSubdir: "x64", dest: "x86_64" },
+  ] : [
+    { artifact: `${prefix}-android-arm`, srcSubdir: "armeabi-v7a", dest: "armeabi-v7a" },
+    { artifact: `${prefix}-android-arm-64`, srcSubdir: "arm64-v8a", dest: "arm64-v8a" },
+    { artifact: `${prefix}-android-arm-x86`, srcSubdir: "x86", dest: "x86" },
+    { artifact: `${prefix}-android-arm-x64`, srcSubdir: "x86_64", dest: "x86_64" },
   ];
 
-  androidArchs.forEach(({ src, dest }) => {
-    // The tar file extracts to artifactName/dest (e.g., skia-android-arm/armeabi-v7a)
-    const srcDir = path.join(artifactsDir, src, dest);
+  androidArchs.forEach(({ artifact, srcSubdir, dest }) => {
+    // The tar file extracts to artifactName/srcSubdir
+    const srcDir = path.join(artifactsDir, artifact, srcSubdir);
     const destDir = path.join(androidDir, dest);
+    console.log(`   Checking ${srcDir} -> ${destDir}`);
     if (fs.existsSync(srcDir)) {
+      console.log(`   ✓ Copying ${artifact}/${srcSubdir}`);
       fs.mkdirSync(destDir, { recursive: true });
-      fs.readdirSync(srcDir).forEach((file) => {
-        fs.copyFileSync(path.join(srcDir, file), path.join(destDir, file));
-      });
+
+      const copyDir = (srcPath, destPath) => {
+        fs.mkdirSync(destPath, { recursive: true });
+        fs.readdirSync(srcPath).forEach((file) => {
+          const srcFile = path.join(srcPath, file);
+          const destFile = path.join(destPath, file);
+          const stat = fs.lstatSync(srcFile);
+
+          // Skip sockets and other special files
+          if (stat.isSocket() || stat.isFIFO() || stat.isCharacterDevice() || stat.isBlockDevice()) {
+            return;
+          }
+
+          if (stat.isDirectory()) {
+            copyDir(srcFile, destFile);
+          } else {
+            fs.copyFileSync(srcFile, destFile);
+          }
+        });
+      };
+
+      copyDir(srcDir, destDir);
+    } else {
+      console.log(`   ✗ Source directory not found: ${srcDir}`);
     }
   });
 
@@ -294,7 +455,7 @@ const main = async () => {
   // The tar file extracts to skia-apple-xcframeworks/apple
   const appleSrcDir = path.join(
     artifactsDir,
-    "skia-apple-xcframeworks",
+    `${prefix}-apple-xcframeworks`,
     "apple"
   );
   if (fs.existsSync(appleSrcDir)) {
@@ -326,7 +487,90 @@ const main = async () => {
     });
   }
 
-  console.log("✅ Done");
+  // Copy Graphite headers if using Graphite
+  if (GRAPHITE) {
+    console.log("📦 Copying Graphite headers...");
+    const cppDir = path.resolve(__dirname, "../cpp");
+    const headersSrcDir = path.join(artifactsDir, `${prefix}-headers`);
+
+    console.log(`   Looking for headers in: ${headersSrcDir}`);
+    console.log(`   Headers dir exists: ${fs.existsSync(headersSrcDir)}`);
+
+    if (fs.existsSync(headersSrcDir)) {
+      console.log(`   Contents: ${fs.readdirSync(headersSrcDir).join(", ")}`);
+
+      // The asset contains packages/skia/cpp structure, so we need to navigate into it
+      const packagesDir = path.join(headersSrcDir, "packages", "skia", "cpp");
+      console.log(`   Looking for packages dir: ${packagesDir}`);
+      console.log(`   Packages dir exists: ${fs.existsSync(packagesDir)}`);
+
+      if (fs.existsSync(packagesDir)) {
+        console.log(`   Packages contents: ${fs.readdirSync(packagesDir).join(", ")}`);
+
+        // Copy dawn/include
+        const dawnIncludeSrc = path.join(packagesDir, "dawn", "include");
+        const dawnIncludeDest = path.join(cppDir, "dawn", "include");
+        console.log(`   Dawn source: ${dawnIncludeSrc}`);
+        console.log(`   Dawn source exists: ${fs.existsSync(dawnIncludeSrc)}`);
+
+        if (fs.existsSync(dawnIncludeSrc)) {
+          const copyDir = (src, dest) => {
+            fs.mkdirSync(dest, { recursive: true });
+            fs.readdirSync(src).forEach((file) => {
+              const srcFile = path.join(src, file);
+              const destFile = path.join(dest, file);
+              if (fs.lstatSync(srcFile).isDirectory()) {
+                copyDir(srcFile, destFile);
+              } else {
+                fs.copyFileSync(srcFile, destFile);
+              }
+            });
+          };
+          copyDir(dawnIncludeSrc, dawnIncludeDest);
+          console.log("   ✓ Dawn headers copied");
+        } else {
+          console.log("   ✗ Dawn headers not found");
+        }
+
+        // Copy graphite headers
+        const graphiteSrc = path.join(packagesDir, "skia", "src", "gpu", "graphite");
+        const graphiteDest = path.join(cppDir, "skia", "src", "gpu", "graphite");
+        console.log(`   Graphite source: ${graphiteSrc}`);
+        console.log(`   Graphite source exists: ${fs.existsSync(graphiteSrc)}`);
+
+        if (fs.existsSync(graphiteSrc)) {
+          const copyDir = (src, dest) => {
+            fs.mkdirSync(dest, { recursive: true });
+            fs.readdirSync(src).forEach((file) => {
+              const srcFile = path.join(src, file);
+              const destFile = path.join(dest, file);
+              if (fs.lstatSync(srcFile).isDirectory()) {
+                copyDir(srcFile, destFile);
+              } else {
+                fs.copyFileSync(srcFile, destFile);
+              }
+            });
+          };
+          copyDir(graphiteSrc, graphiteDest);
+          console.log("   ✓ Graphite headers copied");
+        } else {
+          console.log("   ✗ Graphite headers not found");
+        }
+      } else {
+        console.log("   ✗ Packages directory not found in headers asset");
+      }
+    } else {
+      console.log("   ✗ Headers directory not found");
+    }
+  }
+
+  console.log("✅ Completed installation of Skia prebuilt binaries.");
+
+  // Calculate and update checksums in package.json
+  console.log("🔐 Calculating and updating checksums...");
+  const newChecksums = calculateLibraryChecksums();
+  updateSkiaChecksums(newChecksums, GRAPHITE);
+  console.log("✅ Checksums updated in package.json");
 
   // Clean up artifacts directory
   console.log("🗑️  Cleaning up artifacts directory...");
@@ -338,4 +582,4 @@ const main = async () => {
 main().catch((error) => {
   console.error("❌ Error:", error);
   process.exit(1);
-});
+});

package/src/skia/types/Canvas.ts

@@ -14,7 +14,7 @@ import type { SkColor } from "./Color";
 import type { InputRRect } from "./RRect";
 import type { BlendMode } from "./Paint/BlendMode";
 import type { SkPoint, PointMode } from "./Point";
-import type { InputMatrix } from "./Matrix";
+import type { InputMatrix, SkMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
@@ -241,6 +241,12 @@ export interface SkCanvas {
    */
   restoreToCount(saveCount: number): void;
 
+  /**
+   * Legacy version of getLocalToDevice(), which strips away any Z information, and
+   * just returns a 3x3 version.
+   */
+  getTotalMatrix(): SkMatrix;
+
   /**
    * Draws the given points using the current clip, current matrix, and the provided paint.
    *

package/src/skia/web/JsiSkCanvas.ts

@@ -218,6 +218,13 @@ export class JsiSkCanvas
     this.ref.restoreToCount(saveCount);
   }
 
+  getTotalMatrix(): SkMatrix {
+    return new JsiSkMatrix(
+      this.CanvasKit,
+      Float32Array.of(...this.ref.getTotalMatrix())
+    );
+  }
+
   drawPoints(mode: PointMode, points: SkPoint[], paint: SkPaint) {
     this.ref.drawPoints(
       getEnum(this.CanvasKit, "PointMode", mode),