@shopify/react-native-skia 0.1.134 → 0.1.136

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

@@ -1,47 +1,16 @@
-/**
- * Mock implementation for test runners.
- *
- * Example:
- *
- * ```js
- * jest.mock('@shopify/react-native-skia', () => require('@shopify/react-native-skia/lib/commonjs/mock'));
- * ```
- */
-import type { Skia as SkiaApi, SkRect } from "../skia/types";
+import type { Skia as SkiaApi } 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 { ShaderLib } from "../renderer/components/shaders/ShaderLib";
 export declare const Skia: SkiaApi;
-export declare const vec: (x: number, y: number) => {
+export declare const vec: (x?: number | undefined, y?: number | undefined) => {
     x: number;
     y: number;
 };
-export declare const rect: (x: number, y: number, width: number, height: number) => {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export declare const rrect: (r: SkRect, rx: number, ry: number) => {
-    rect: SkRect;
-    rx: number;
-    ry: number;
+export declare const Mock: typeof SkiaExports & typeof ExternalExports & typeof ValueExports & typeof AnimationExports & {
+    createDrawing: () => any;
+    createDeclaration: () => any;
+    ShaderLib: typeof ShaderLib;
 };
-export declare const useTouchHandler: () => any;
-export declare const useComputedValue: () => any;
-export declare const useValue: () => any;
-export declare const useClockValue: () => any;
-export declare const useValueEffect: () => any;
-export declare const useTiming: () => any;
-export declare const runTiming: () => any;
-export declare const timing: () => any;
-export declare const useSpring: () => any;
-export declare const runSpring: () => any;
-export declare const spring: () => any;
-export declare const runDecay: () => any;
-export declare const decay: () => any;
-export declare const useSharedValueEffect: () => any;
-export declare const useData: () => any;
-export declare const useDataCollection: () => any;
-export declare const useFont: () => any;
-export declare const useImage: () => any;
-export declare const usePicture: () => any;
-export declare const useSVG: () => any;
-export declare const useTypeface: () => any;

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -13,4 +13,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     onTouch?: TouchHandler;
     fontMgr?: SkFontMgr;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "mode" | "debug" | "onDraw" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;

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/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/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.134",
+  "version": "0.1.136",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -21,6 +21,7 @@
     "android/src/**",
     "libs/android/**",
     "index.js",
+    "jestSetup.js",
     "cpp/**/*.{h,cpp}",
     "ios",
     "libs/ios/libskia.xcframework",
@@ -72,7 +73,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 +80,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.34.0",
+    "canvaskit-wasm": "^0.35.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

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/skia/types/Font/Font.ts

@@ -12,6 +12,13 @@ export interface FontMetrics {
 }
 
 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/src/skia/web/JsiSkFont.ts

@@ -27,6 +27,12 @@ Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
     return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
   }
 
+  getTextWidth(text: string, paint?: SkPaint | undefined) {
+    const ids = this.getGlyphIDs(text);
+    const widths = this.getGlyphWidths(ids, paint);
+    return widths.reduce((a, b) => a + b, 0);
+  }
+
   getMetrics() {
     const result = this.ref.getMetrics();
     return {

package/src/values/api.ts

@@ -6,5 +6,3 @@ declare global {
 
 const { SkiaValueApi } = global;
 export const ValueApi = SkiaValueApi;
-
-export const { createValue, createComputedValue } = ValueApi;

package/src/values/hooks/useComputedValue.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { ValueApi } from "../api";
-import { isValue } from "../../renderer/processors";
+import { isValue } from "../../renderer/processors/Animations";
 
 /**
  * Creates a new computed value - a value that will calculate its value depending

package/src/views/SkiaView.web.tsx

@@ -36,24 +36,27 @@ export class SkiaView extends React.Component<
   }
 
   private onLayout(evt: LayoutChangeEvent) {
-    this.setState({
-      width: evt.nativeEvent.layout.width,
-      height: evt.nativeEvent.layout.height,
-    });
-    // Reset canvas / surface on layout change
-    if (this._canvasRef.current) {
-      // Create surface
-      this._surface = new JsiSkSurface(
-        global.CanvasKit,
-        global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)!
-      );
-      // Get canvas and repaint
-      if (this._surface) {
-        this._canvas = this._surface.getCanvas();
-        this.requestRedraw();
-        this.redraw();
+    this.setState(
+      {
+        width: evt.nativeEvent.layout.width,
+        height: evt.nativeEvent.layout.height,
+      },
+      () => {
+        // Reset canvas / surface on layout change
+        if (this._canvasRef.current) {
+          // Create surface
+          this._surface = new JsiSkSurface(
+            global.CanvasKit,
+            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!
+          );
+          // Get canvas and repaint
+          if (this._surface) {
+            this._canvas = this._surface.getCanvas();
+            this.requestRedraw();
+          }
+        }
       }
-    }
+    );
   }
 
   componentDidMount() {