@shopify/react-native-skia 2.8.0 → 2.9.1-next.1

package/lib/typescript/lib/commonjs/skia/types/Data/Data.d.ts

@@ -1,2 +1,3 @@
 export const __esModule: boolean;
 export function isRNModule(mod: any): mod is number;
+export function unwrapModule(mod: any): any;

package/lib/typescript/lib/commonjs/skia/web/JsiSkFont.d.ts

@@ -1,7 +1,7 @@
 export const __esModule: boolean;
 export class JsiSkFont extends _Host.HostObject {
     constructor(CanvasKit: any, ref: any);
-    measureText(_text: any, _paint: any): jest.Mock<any, any, any>;
+    measureText(text: any, paint: any): _JsiSkRect.JsiSkRect;
     getTextWidth(text: any, paint: any): any;
     getMetrics(): {
         ascent: any;

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

@@ -195,6 +195,7 @@ export function Mock(CanvasKit: any): {
     rrect: (r: any, rx: any, ry: any) => import("../../..").SkRRect;
     processTransform2d: (transforms: any) => any;
     isRNModule: (mod: any) => mod is number;
+    unwrapModule: (mod: any) => any;
     ColorSpace: {
         SRGB: string;
         DisplayP3: string;

package/lib/typescript/lib/module/skia/types/Data/Data.d.ts

@@ -1 +1,2 @@
 export function isRNModule(mod: any): mod is number;
+export function unwrapModule(mod: any): any;

package/lib/typescript/lib/module/skia/web/JsiSkFont.d.ts

@@ -1,6 +1,6 @@
 export class JsiSkFont extends HostObject {
     constructor(CanvasKit: any, ref: any);
-    measureText(_text: any, _paint: any): jest.Mock<any, any, any>;
+    measureText(text: any, paint: any): JsiSkRect;
     getTextWidth(text: any, paint: any): any;
     getMetrics(): {
         ascent: any;

package/lib/typescript/src/skia/core/Font.d.ts

@@ -1,18 +1,33 @@
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 /**
  * Returns a Skia Font object
  * */
 export declare const useFont: (font: DataSourceParam, size?: number, onError?: (err: Error) => void) => import("../types").SkFont | null;
-type Slant = "normal" | "italic" | "oblique";
-type Weight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-interface RNFontStyle {
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | FontWeight;
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
     fontFamily: string;
     fontSize: number;
-    fontStyle: Slant;
-    fontWeight: Weight;
+    fontStyle: RNFontSlant;
+    fontWeight: RNFontWeight;
 }
 export declare const matchFont: (inputStyle?: Partial<RNFontStyle>, fontMgr?: SkFontMgr) => import("../types").SkFont;
 export declare const listFontFamilies: (fontMgr?: SkFontMgr) => string[];
 export declare const useFonts: (sources: Record<string, DataModule[]>) => SkTypefaceFontProvider | null;
-export {};

package/lib/typescript/src/skia/types/Data/Data.d.ts

@@ -1,17 +1,18 @@
 import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 type RNModule = number;
-type ESModule = {
-    __esModule: true;
-    default: string;
-};
 type MetroAsset = {
     uri: string;
     width: number;
     height: number;
 };
+type ESModule = {
+    __esModule: true;
+    default: RNModule | MetroAsset | string;
+};
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
 export type DataSourceParam = DataSource | null | undefined;
 export declare const isRNModule: (mod: DataModule) => mod is RNModule;
+export declare const unwrapModule: (mod: DataModule) => RNModule | MetroAsset | string;
 export {};

package/lib/typescript/src/skia/web/JsiSkFont.d.ts

@@ -5,7 +5,7 @@ import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
-    measureText(_text: string, _paint?: SkPaint | undefined): SkRect;
+    measureText(text: string, paint?: SkPaint | undefined): SkRect;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

package/libs/.graphite

@@ -0,0 +1 @@
+m150

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.8.0",
+  "version": "2.9.1-next.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -32,7 +32,8 @@
     "cpp/**/*.{h,cpp}",
     "apple/**",
     "react-native-skia.podspec",
-    "dist/**"
+    "dist/**",
+    "libs/.graphite"
   ],
   "scripts": {
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
@@ -134,12 +135,16 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.41.0",
-    "react-native-skia-android": "150.0.0",
-    "react-native-skia-apple-ios": "150.0.0",
-    "react-native-skia-apple-macos": "150.0.0",
-    "react-native-skia-apple-tvos": "150.0.0",
+    "react-native-skia-graphite-android": "150.0.0",
+    "react-native-skia-graphite-apple-ios": "150.0.0",
+    "react-native-skia-graphite-apple-macos": "150.0.0",
     "react-reconciler": "0.31.0"
   },
+  "graphiteDependencies": {
+    "react-native-skia-graphite-android": "150.0.0",
+    "react-native-skia-graphite-apple-ios": "150.0.0",
+    "react-native-skia-graphite-apple-macos": "150.0.0"
+  },
   "eslintIgnore": [
     "node_modules/",
     "lib/"
@@ -176,5 +181,6 @@
         }
       ]
     ]
-  }
+  },
+  "stableVersion": "0.0.0"
 }

package/react-native-skia.podspec

@@ -29,10 +29,8 @@ end
 # re-copied and CocoaPods picks up the change. This is best-effort: if `pod install`
 # does not detect the change, a clean reinstall fixes it (acceptable until the upcoming
 # Swift Package Manager migration).
-install_apple_skia_libs = lambda do |base_dir|
-  { 'ios' => 'react-native-skia-apple-ios',
-    'macos' => 'react-native-skia-apple-macos',
-    'tvos' => 'react-native-skia-apple-tvos' }.each do |platform, pkg_name|
+install_apple_skia_libs = lambda do |base_dir, packages|
+  packages.each do |platform, pkg_name|
     pkg_dir = resolve_node_package.call(pkg_name, base_dir)
     next if pkg_dir.nil?
 
@@ -54,9 +52,18 @@ install_apple_skia_libs = lambda do |base_dir|
   end
 end
 
-# Graphite downloads its binaries directly into libs/; only the default build needs
-# the npm packages copied in.
-install_apple_skia_libs.call(__dir__) unless use_graphite
+# The default (Ganesh) build ships its binaries in the react-native-skia-apple-*
+# npm packages, the Graphite build in react-native-skia-graphite-apple-* (no tvOS).
+# During in-repo development install-skia-graphite downloads the binaries directly
+# into libs/ and the graphite packages are absent from node_modules, in which case
+# the copy below is a no-op and the downloaded binaries are used as-is.
+apple_skia_packages = use_graphite ?
+  { 'ios' => 'react-native-skia-graphite-apple-ios',
+    'macos' => 'react-native-skia-graphite-apple-macos' } :
+  { 'ios' => 'react-native-skia-apple-ios',
+    'macos' => 'react-native-skia-apple-macos',
+    'tvos' => 'react-native-skia-apple-tvos' }
+install_apple_skia_libs.call(__dir__, apple_skia_packages)
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ?
@@ -71,14 +78,15 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
 # Add Dawn library for Graphite builds (contains dawn::native symbols)
 framework_names += ['libdawn_combined'] if use_graphite
 
-# Verify that the prebuilt binaries are available (copied in above, or downloaded by
-# install-skia-graphite for Graphite builds).
+# Verify that the prebuilt binaries are available (copied in above from the npm
+# packages, or downloaded by install-skia-graphite for in-repo Graphite builds).
 unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
+  expected_packages = apple_skia_packages.values.join(', ')
   Pod::UI.warn "#{'-' * 72}"
   Pod::UI.warn "react-native-skia: Skia prebuilt binaries not found in libs/!"
   Pod::UI.warn ""
   Pod::UI.warn "Make sure dependencies are installed (yarn install / npm install) so that"
-  Pod::UI.warn "the react-native-skia-apple-* packages are present, then run `pod install` again."
+  Pod::UI.warn "the #{expected_packages} packages are present, then run `pod install` again."
   Pod::UI.warn "#{'-' * 72}"
   raise "react-native-skia: Skia prebuilt binaries not found. Run `yarn install` then `pod install` to fix this."
 end

package/src/Platform/Platform.ts

@@ -7,7 +7,7 @@ import {
 } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -15,12 +15,11 @@ export const Platform: IPlatform = {
   OS: RNPlatform.OS,
   PixelRatio: PixelRatio.get(),
   resolveAsset: (source: DataModule) => {
-    // eslint-disable-next-line no-nested-ternary
-    return isRNModule(source)
-      ? Image.resolveAssetSource(source).uri
-      : "uri" in source
-        ? source.uri
-        : source.default;
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    return isRNModule(asset) ? Image.resolveAssetSource(asset).uri : asset.uri;
   },
   findNodeHandle,
   View,

package/src/Platform/Platform.web.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import type { ViewComponent, ViewProps } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -40,12 +40,16 @@ export const Platform: IPlatform = {
   OS: "web",
   PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
   resolveAsset: (source: DataModule) => {
-    if (isRNModule(source)) {
-      if (typeof source === "number" && typeof require === "function") {
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    if (isRNModule(asset)) {
+      if (typeof require === "function") {
         const {
           getAssetByID,
         } = require("react-native/Libraries/Image/AssetRegistry");
-        const { httpServerLocation, name, type } = getAssetByID(source);
+        const { httpServerLocation, name, type } = getAssetByID(asset);
         const uri = `${httpServerLocation}/${name}.${type}`;
         return uri;
       }
@@ -53,10 +57,7 @@ export const Platform: IPlatform = {
         "Asset source is a number - this is not supported on the web"
       );
     }
-    if ("uri" in source) {
-      return source.uri;
-    }
-    return source.default;
+    return asset.uri;
   },
   findNodeHandle: () => {
     throw new Error("findNodeHandle is not supported on the web");

package/src/skia/core/Font.ts

@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../Skia";
-import { FontSlant } from "../types";
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import { Platform } from "../../Platform";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
@@ -29,8 +29,18 @@ export const useFont = (
   }, [size, typeface]);
 };
 
-type Slant = "normal" | "italic" | "oblique";
-type Weight =
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight =
   | "normal"
   | "bold"
   | "100"
@@ -41,13 +51,20 @@ type Weight =
   | "600"
   | "700"
   | "800"
-  | "900";
+  | "900"
+  | FontWeight;
 
-interface RNFontStyle {
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
   fontFamily: string;
   fontSize: number;
-  fontStyle: Slant;
-  fontWeight: Weight;
+  fontStyle: RNFontSlant;
+  fontWeight: RNFontWeight;
 }
 
 const defaultFontStyle: RNFontStyle = {
@@ -57,8 +74,10 @@ const defaultFontStyle: RNFontStyle = {
   fontWeight: "normal",
 };
 
-const slant = (s: Slant) => {
-  if (s === "italic") {
+const slant = (s: RNFontSlant): FontSlant => {
+  if (typeof s === "number") {
+    return s;
+  } else if (s === "italic") {
     return FontSlant.Italic;
   } else if (s === "oblique") {
     return FontSlant.Oblique;
@@ -67,14 +86,16 @@ const slant = (s: Slant) => {
   }
 };
 
-const weight = (fontWeight: Weight) => {
+const weight = (fontWeight: RNFontWeight): FontWeight => {
   switch (fontWeight) {
     case "normal":
-      return 400;
+      return FontWeight.Normal;
     case "bold":
-      return 700;
+      return FontWeight.Bold;
     default:
-      return parseInt(fontWeight, 10);
+      return typeof fontWeight === "number"
+        ? fontWeight
+        : (parseInt(fontWeight, 10) as FontWeight);
   }
 };
 

package/src/skia/types/Data/Data.ts

@@ -3,15 +3,15 @@ import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 
 type RNModule = number;
-type ESModule = {
-  __esModule: true;
-  default: string;
-};
 type MetroAsset = {
   uri: string;
   width: number;
   height: number;
 };
+type ESModule = {
+  __esModule: true;
+  default: RNModule | MetroAsset | string;
+};
 
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
@@ -19,3 +19,13 @@ export type DataSourceParam = DataSource | null | undefined;
 
 export const isRNModule = (mod: DataModule): mod is RNModule =>
   typeof mod === "number";
+
+// Since Expo SDK 52, on web, require() may return an ES module interop
+// object ({ default: <asset> }) instead of the asset itself.
+// See https://github.com/Shopify/react-native-skia/issues/2784
+export const unwrapModule = (
+  mod: DataModule
+): RNModule | MetroAsset | string =>
+  typeof mod === "object" && mod !== null && "default" in mod
+    ? mod.default
+    : mod;

package/src/skia/web/JsiSkFont.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Font } from "canvaskit-wasm";
+import type { CanvasKit, Font, Paint } from "canvaskit-wasm";
 
 import type {
   FontEdging,
@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
+import { HostObject, getEnum } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -21,8 +21,52 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint | undefined) {
-    return throwNotImplementedOnRNWeb<SkRect>();
+  measureText(text: string, paint?: SkPaint | undefined): SkRect {
+    // CanvasKit doesn't expose SkFont::measureText directly, so we polyfill
+    // it: for each glyph we take its ink bounds (relative to its own origin),
+    // offset it by the accumulated advance, and union the results. This
+    // matches the bounds computed natively by SkFont::measureText.
+    const glyphs = this.ref.getGlyphIDs(text);
+    if (glyphs.length === 0) {
+      return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
+    }
+    const skPaint = paint ? JsiSkPaint.fromValue<Paint>(paint) : null;
+    // Flattened rectangles: 4 floats (left, top, right, bottom) per glyph.
+    const bounds = this.ref.getGlyphBounds(glyphs, skPaint);
+    const advances = this.ref.getGlyphWidths(glyphs, skPaint);
+    let left = 0;
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    let isEmpty = true;
+    let xPos = 0;
+    for (let i = 0; i < glyphs.length; i++) {
+      const l = bounds[i * 4] + xPos;
+      const t = bounds[i * 4 + 1];
+      const r = bounds[i * 4 + 2] + xPos;
+      const b = bounds[i * 4 + 3];
+      xPos += advances[i];
+      // Skip empty glyph bounds (e.g. whitespace), like SkRect::join does.
+      if (l >= r || t >= b) {
+        continue;
+      }
+      if (isEmpty) {
+        left = l;
+        top = t;
+        right = r;
+        bottom = b;
+        isEmpty = false;
+      } else {
+        left = Math.min(left, l);
+        top = Math.min(top, t);
+        right = Math.max(right, r);
+        bottom = Math.max(bottom, b);
+      }
+    }
+    return new JsiSkRect(
+      this.CanvasKit,
+      this.CanvasKit.LTRBRect(left, top, right, bottom)
+    );
   }
 
   getTextWidth(text: string, paint?: SkPaint | undefined) {