@shopify/react-native-skia 0.1.134 → 0.1.138

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

@@ -10,6 +10,12 @@ export interface FontMetrics {
     bounds?: SkRect;
 }
 export interface SkFont extends SkJSIInstance<"Font"> {
+    /**
+     * Retrieves the total width of the provided text
+     * @param text
+     * @param paint
+     */
+    getTextWidth(text: string, paint?: SkPaint): number;
     /**
      * Retrieves the advanceX measurements for each glyph.
      * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.

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

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export declare enum MatrixIndex {
     ScaleX = 0,
     SkewX = 1,
@@ -8,14 +9,16 @@ export declare enum MatrixIndex {
     TransY = 5,
     Persp0 = 6,
     Persp1 = 7,
-    persp2 = 8
+    Persp2 = 8
 }
+export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     concat: (matrix: SkMatrix) => void;
     translate: (x: number, y: number) => void;
     scale: (x: number, y?: number) => void;
     skew: (x: number, y: number) => void;
     rotate: (theta: number) => void;
+    identity: () => void;
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
 declare type Transformations = {
@@ -25,5 +28,6 @@ export declare type Transforms2d = readonly (Pick<Transformations, "translateX">
 export interface TransformProp {
     transform?: Transforms2d;
 }
-export declare const processTransform: (m: SkMatrix, transforms: Transforms2d) => SkMatrix;
+export declare const processTransform: <T extends SkMatrix | SkCanvas>(m: T, transforms: Transforms2d) => T;
+export declare const toDegrees: (rad: number) => number;
 export {};

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

@@ -1,5 +1,2 @@
 import type { SkJSIInstance } from "../JsiInstance";
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-    readonly bold: boolean;
-    readonly italic: boolean;
-}
+export declare type SkTypeface = SkJSIInstance<"Typeface">;

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

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

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

@@ -8,4 +8,5 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     scale(x: number, y?: number): void;
     skew(x: number, y: number): void;
     rotate(value: number): void;
+    identity(): void;
 }

package/lib/typescript/src/values/api.d.ts

@@ -3,4 +3,3 @@ declare global {
     var SkiaValueApi: ISkiaValueApi;
 }
 export declare const ValueApi: ISkiaValueApi;
-export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createComputedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -3,6 +3,7 @@ import type { PointerEvent } from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import type { DrawMode, SkiaViewProps } from "./types";
+import { TouchType } from "./types";
 export declare class SkiaView extends React.Component<SkiaViewProps, {
     width: number;
     height: number;
@@ -29,8 +30,8 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
     /**
      * Sends a redraw request to the native SkiaView.
      */
-    private redraw;
-    requestRedraw(): void;
+    private tick;
+    redraw(): void;
     /**
      * Updates the drawing mode for the skia view. This is the same
      * as declaratively setting the mode property on the SkiaView.
@@ -48,9 +49,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
      */
     registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
-    handleTouchStart(evt: PointerEvent): void;
-    handleTouchMove(evt: PointerEvent): void;
-    handleTouchEnd(evt: PointerEvent): void;
-    handleTouchCancel(evt: PointerEvent): void;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
     render(): JSX.Element;
 }

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
+declare global {
+    var CanvasKit: CanvasKitType;
+}
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+interface WithSkiaProps {
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
+export {};

package/lib/typescript/src/web/index.d.ts

@@ -1,5 +1,2 @@
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
-declare global {
-    var CanvasKit: CanvasKitType;
-}
-export declare const LoadSkia: () => Promise<void>;
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";

package/package.json

@@ -3,8 +3,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "setup-skia-web": "./scripts/setup-canvaskit.js"
+  },
   "title": "React Native Skia",
-  "version": "0.1.134",
+  "version": "0.1.138",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -21,6 +24,7 @@
     "android/src/**",
     "libs/android/**",
     "index.js",
+    "jestSetup.js",
     "cpp/**/*.{h,cpp}",
     "ios",
     "libs/ios/libskia.xcframework",
@@ -28,6 +32,7 @@
     "libs/ios/libsvg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
+    "scripts/setup-canvaskit.js",
     "dist/**"
   ],
   "scripts": {
@@ -72,7 +77,6 @@
     "eslint-config-react-native-wcandillon": "^3.7.2",
     "eslint-plugin-reanimated": "^1.2.6",
     "jest": "^27.4.3",
-    "patch-package": "^6.4.7",
     "react": "17.0.2",
     "react-native": "0.66.2",
     "react-native-builder-bob": "^0.18.2",
@@ -80,7 +84,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.34.0",
+    "canvaskit-wasm": "^0.35.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/scripts/setup-canvaskit.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/* eslint-disable max-len */
+
+/**
+ * A script to automate the setup of `@shopify/react-native-skia` for web.
+ * The only requirement is that your project supports a 'static' folder (often named '/public').
+ * In `@expo/webpack-config` this is `./web` (default for now).
+ *
+ * This script does the following:
+ * 1. Resolve the public path relative to wherever the script is being run.
+ * 2. Log out some useful info about the web setup, just in case anything goes wrong.
+ * 3. Resolve the installed wasm file `canvaskit-wasm/bin/full/canvaskit.wasm`
+ *  from `@shopify/react-native-skia -> canvaskit`.
+ * 4. Recursively ensure the path exists and copy the file into the desired location.
+ *
+ *
+ * Usage:
+ * $ `npx <script> web`
+ *
+ * -> Copies the file to `<project>/web/static/js/canvaskit.wasm`
+ *
+ * Tooling that uses `/public`:
+ * $ `npx <script> public`
+ *
+ * -> Copies the file to `<project>/public/static/js/canvaskit.wasm`
+ */
+const fs = require("fs");
+const path = require("path");
+
+const args = process.argv.slice(2);
+
+const gray = (text) => `\x1b[90m${text}\x1b[0m`;
+const lime = (text) => `\x1b[32m${text}\x1b[0m`;
+
+function getWasmFilePath() {
+  try {
+    return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
+  } catch (error) {
+    console.error(
+      `Could not find 'canvaskit-wasm'. Please install '@shopify/react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
+    );
+    process.exit(1);
+  }
+}
+
+function getOutputFilePath() {
+  // Default to using `web` public path.
+  const publicFolder = path.resolve(args[0] || "web");
+  const publicLocation = "./static/js/canvaskit.wasm";
+  const output = path.join(publicFolder, publicLocation);
+
+  console.log(
+    `› Copying 'canvaskit.wasm' file to static folder:\n  ${gray(output)}\n`
+  );
+  return output;
+}
+
+function copyFile(from, to) {
+  const data = fs.readFileSync(from);
+  fs.mkdirSync(path.dirname(to), { recursive: true });
+  fs.writeFileSync(to, data);
+}
+
+// Copy the WASM file to `<static>/static/js/canvaskit.wasm`
+(() => {
+  copyFile(getWasmFilePath(), getOutputFilePath());
+
+  console.log(lime("› Success! You are almost there:"));
+  console.log(
+    gray(
+      "› To load React Native Skia Web, follow these instructions : https://shopify.github.io/react-native-skia/docs/getting-started/web"
+    )
+  );
+})();

package/src/animation/functions/interpolate.ts

@@ -60,7 +60,9 @@ function isExtrapolate(value: string): value is Extrapolate {
 
 // validates extrapolations type
 // if type is correct, converts it to ExtrapolationConfig
-function validateType(type: ExtrapolationType): RequiredExtrapolationConfig {
+export function validateInterpolationOptions(
+  type: ExtrapolationType
+): RequiredExtrapolationConfig {
   // initialize extrapolationConfig with default extrapolation
   const extrapolationConfig: RequiredExtrapolationConfig = {
     extrapolateLeft: Extrapolate.EXTEND,
@@ -151,7 +153,7 @@ export function interpolate(
     );
   }
 
-  const extrapolationConfig = validateType(type);
+  const extrapolationConfig = validateInterpolationOptions(type);
   const { length } = input;
   const narrowedInput: InterpolationNarrowedInput = {
     leftEdgeInput: input[0],

package/src/animation/functions/interpolateColors.ts

@@ -1,4 +1,4 @@
-import { mix } from "../../renderer";
+import { mix } from "../../renderer/processors/math";
 import type { Color, SkColor } from "../../skia";
 import { Skia } from "../../skia";
 

package/src/animation/functions/interpolatePaths.ts

@@ -1,10 +1,26 @@
 import type { SkPath } from "../../skia/types";
+import { exhaustiveCheck } from "../../renderer/typeddash";
+
+import type { ExtrapolationType } from "./interpolate";
+import { validateInterpolationOptions, Extrapolate } from "./interpolate";
+
+const lerp = (
+  value: number,
+  from: number,
+  to: number,
+  p1: SkPath,
+  p2: SkPath
+) => {
+  const t = (value - from) / (to - from);
+  return p2.interpolate(p1, t)!;
+};
 
 /**
  * Maps an input value within a range to an output path within a path range.
  * @param value - The input value.
  * @param inputRange - The range of the input value.
  * @param outputRange - The range of the output path.
+ * @param options - Extrapolation options
  * @returns The output path.
  * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
  * const path1 = new Path();
@@ -18,21 +34,54 @@ import type { SkPath } from "../../skia/types";
 export const interpolatePaths = (
   value: number,
   input: number[],
-  outputRange: SkPath[]
+  outputRange: SkPath[],
+  options?: ExtrapolationType
 ) => {
+  const extrapolation = validateInterpolationOptions(options);
+  if (value < input[0]) {
+    switch (extrapolation.extrapolateLeft) {
+      case Extrapolate.CLAMP:
+        return outputRange[0];
+      case Extrapolate.EXTEND:
+        return lerp(value, input[0], input[1], outputRange[0], outputRange[1]);
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateLeft);
+    }
+  } else if (value > input[input.length - 1]) {
+    switch (extrapolation.extrapolateRight) {
+      case Extrapolate.CLAMP:
+        return outputRange[outputRange.length - 1];
+      case Extrapolate.EXTEND:
+        return lerp(
+          value,
+          input[input.length - 2],
+          input[input.length - 1],
+          outputRange[input.length - 2],
+          outputRange[input.length - 1]
+        );
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateRight);
+    }
+  }
   let i = 0;
   for (; i <= input.length - 1; i++) {
     if (value >= input[i] && value <= input[i + 1]) {
       break;
     }
-    if (i === input.length - 1) {
-      if (value < input[0]) {
-        return outputRange[0];
-      } else {
-        return outputRange[i];
-      }
-    }
   }
-  const t = (value - input[i]) / (input[i + 1] - input[i]);
-  return outputRange[i + 1].interpolate(outputRange[i], t)!;
+  return lerp(
+    value,
+    input[i],
+    input[i + 1],
+    outputRange[i],
+    outputRange[i + 1]
+  );
 };

package/src/mock/index.ts

@@ -1,156 +1,110 @@
-/**
- * Mock implementation for test runners.
- *
- * Example:
- *
- * ```js
- * jest.mock('@shopify/react-native-skia', () => require('@shopify/react-native-skia/lib/commonjs/mock'));
- * ```
- */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { Skia as SkiaApi, SkRect } from "../skia/types";
+import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
+import * as Values from "../values/web";
+import * as ValuesHooks from "../values/hooks";
+import * as BaseSkia from "../skia/types";
+import type * as SkiaExports from "../skia";
+import type * as ExternalExports from "../external";
+import type * as ValueExports from "../values";
+import type * as AnimationExports from "../animation";
+import { useSharedValueEffect } from "../external/reanimated/useSharedValueEffect";
+import * as timingFunctions from "../animation/timing";
+import * as springFunctions from "../animation/spring";
+import * as decayFunctions from "../animation/decay";
+import * as interpolateFn from "../animation/functions/interpolate";
+import * as interpolatePathFn from "../animation/functions/interpolatePaths";
+import * as interpolateVectorFn from "../animation/functions/interpolateVector";
+import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const MockJSIInstance: any = {};
-const Noop = () => MockJSIInstance;
+class Stub {
+  constructor() {
+    return new Proxy(() => {}, {
+      get: () => new Stub(),
+      apply: () => new Stub(),
+      set: () => true,
+    });
+  }
+}
 
-export const Skia: SkiaApi = {
-  Point: Noop,
-  XYWHRect: Noop,
-  RuntimeShaderBuilder: Noop,
-  RRectXY: Noop,
-  RSXform: Noop,
-  Color: Noop,
-  ContourMeasureIter: Noop,
-  Paint: Noop,
-  PictureRecorder: Noop,
-  Picture: {
-    MakePicture: Noop,
-  },
-  Path: {
-    Make: Noop,
-    MakeFromSVGString: Noop,
-    MakeFromOp: Noop,
-    MakeFromCmds: Noop,
-    MakeFromText: Noop,
-  },
-  Matrix: Noop,
-  ColorFilter: {
-    MakeMatrix: Noop,
-    MakeBlend: Noop,
-    MakeCompose: Noop,
-    MakeLerp: Noop,
-    MakeLinearToSRGBGamma: Noop,
-    MakeSRGBToLinearGamma: Noop,
-    MakeLumaColorFilter: Noop,
-  },
-  Font: Noop,
-  Typeface: {
-    MakeFreeTypeFaceFromData: Noop,
-  },
-  MaskFilter: {
-    MakeBlur: Noop,
-  },
-  RuntimeEffect: {
-    Make: Noop,
-  },
-  ImageFilter: {
-    MakeOffset: Noop,
-    MakeDisplacementMap: Noop,
-    MakeShader: Noop,
-    MakeBlur: Noop,
-    MakeColorFilter: Noop,
-    MakeCompose: Noop,
-    MakeDropShadow: Noop,
-    MakeDropShadowOnly: Noop,
-    MakeErode: Noop,
-    MakeDilate: Noop,
-    MakeBlend: Noop,
-    MakeRuntimeShader: Noop,
-  },
-  Shader: {
-    MakeLinearGradient: Noop,
-    MakeRadialGradient: Noop,
-    MakeTwoPointConicalGradient: Noop,
-    MakeSweepGradient: Noop,
-    MakeTurbulence: Noop,
-    MakeFractalNoise: Noop,
-    MakeBlend: Noop,
-    MakeColor: Noop,
-  },
-  PathEffect: {
-    MakeCorner: Noop,
-    MakeDash: Noop,
-    MakeDiscrete: Noop,
-    MakeCompose: Noop,
-    MakeSum: Noop,
-    MakeLine2D: Noop,
-    MakePath1D: Noop,
-    MakePath2D: Noop,
-  },
-  MakeVertices: Noop,
-  Data: {
-    fromURI: Noop,
-    fromBytes: Noop,
-    fromBase64: Noop,
-  },
-  Image: {
-    MakeImageFromEncoded: Noop,
-    MakeImage: Noop,
-  },
-  SVG: {
-    MakeFromData: Noop,
-    MakeFromString: Noop,
-  },
-  FontMgr: {
-    RefDefault: Noop,
-  },
-  TextBlob: {
-    MakeFromText: Noop,
-    MakeFromGlyphs: Noop,
-    MakeFromRSXform: Noop,
-    MakeFromRSXformGlyphs: Noop,
-  },
-  Surface: {
-    Make: Noop,
-  },
-};
-
-export const vec = (x: number, y: number) => ({ x, y });
+const Noop: () => any = () => {};
 
-export const rect = (x: number, y: number, width: number, height: number) => ({
-  x,
-  y,
-  width,
-  height,
-});
+export const Skia: SkiaApi = new Stub() as any;
 
-export const rrect = (r: SkRect, rx: number, ry: number) => ({
-  rect: r,
-  rx,
-  ry,
-});
+export const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });
 
-export const useTouchHandler = Noop;
-export const useComputedValue = Noop;
-export const useValue = Noop;
-export const useClockValue = Noop;
-export const useValueEffect = Noop;
-export const useTiming = Noop;
-export const runTiming = Noop;
-export const timing = Noop;
-export const useSpring = Noop;
-export const runSpring = Noop;
-export const spring = Noop;
-export const runDecay = Noop;
-export const decay = Noop;
+export const Mock: typeof SkiaExports &
+  typeof ExternalExports &
+  typeof ValueExports &
+  typeof AnimationExports & {
+    createDrawing: () => any;
+    createDeclaration: () => any;
+    ShaderLib: typeof ShaderLib;
+  } = {
+  // SkiaExports
+  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc
+  Skia,
+  ...BaseSkia,
+  // 2. Hooks
+  useDataCollection: Noop,
+  useRawData: Noop,
+  useData: Noop,
+  useFont: Noop,
+  useTypeface: Noop,
+  useImage: Noop,
+  usePath: Noop,
+  useSVG: Noop,
+  useTextPath: Noop,
+  usePaint: Noop,
+  usePicture: Noop,
+  useSvgPath: Noop,
+  // 3. Point/Rect/Transform utilities
+  vec,
+  rect: (x: number, y: number, width: number, height: number) => ({
+    x,
+    y,
+    width,
+    height,
+  }),
+  rrect: (r: SkRect, rx: number, ry: number) => ({
+    rect: r,
+    rx,
+    ry,
+  }),
+  point: vec,
+  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),
+  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),
+  neg: (a: Vector) => vec(-a.x, -a.y),
+  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),
+  translate: ({ x, y }: Vector) =>
+    [{ translateX: x }, { translateY: y }] as const,
 
-export const useSharedValueEffect = Noop;
-
-export const useData = Noop;
-export const useDataCollection = Noop;
-export const useFont = Noop;
-export const useImage = Noop;
-export const usePicture = Noop;
-export const useSVG = Noop;
-export const useTypeface = Noop;
+  bounds: Noop,
+  topLeft: Noop,
+  topRight: Noop,
+  bottomLeft: Noop,
+  bottomRight: Noop,
+  center: Noop,
+  processTransform2d: Noop,
+  // ExternalExports
+  useSharedValueEffect,
+  // ValueExports
+  ...Values,
+  ...ValuesHooks,
+  // Animations
+  ...timingFunctions,
+  ...springFunctions,
+  ...decayFunctions,
+  ...interpolateFn,
+  ...interpolatePathFn,
+  ...interpolateVectorFn,
+  interpolateColors: (
+    _value: number,
+    _inputRange: number[],
+    _outputRange: Color[]
+  ) => Float32Array.of(0, 0, 0, 0),
+  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),
+  ShaderLib,
+  createDrawing: Noop,
+  createDeclaration: Noop,
+};

package/src/renderer/components/Group.tsx

@@ -58,7 +58,7 @@ const onDraw = createDrawing<GroupProps>(
       } else {
         canvas.save();
       }
-      processCanvasTransform(ctx, groupProps);
+      processCanvasTransform(canvas, groupProps);
       if (clip) {
         const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
         processClip(Skia, canvas, clip, op);