@shopify/react-native-skia 0.1.132 → 0.1.136

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.132",
+  "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",
@@ -70,8 +71,8 @@
     "@types/react-reconciler": "^0.26.4",
     "eslint": "7.32.0",
     "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",
@@ -79,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

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+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";
+
+class Stub {
+  constructor() {
+    return new Proxy(() => {}, {
+      get: () => new Stub(),
+      apply: () => new Stub(),
+      set: () => true,
+    });
+  }
+}
+
+const Noop: () => any = () => {};
+
+export const Skia: SkiaApi = new Stub() as any;
+
+export const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });
+
+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,
+
+  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/core/Data.ts

@@ -11,71 +11,88 @@ const resolveAsset = (source: ReturnType<typeof require>) => {
     : Image.resolveAssetSource(source).uri;
 };
 
-export const useDataCollection = <T>(
-  sources: DataSource[],
-  factory: (data: SkData[]) => T,
-  deps: DependencyList = []
+const factoryWrapper = <T>(
+  data2: SkData,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
 ) => {
-  const [data, setData] = useState<T | null>(null);
-  useEffect(() => {
-    const bytesOrURIs = sources.map((source) => {
-      if (source instanceof Uint8Array) {
-        return source;
-      }
-      return typeof source === "string" ? source : resolveAsset(source);
-    });
-    Promise.all(
-      bytesOrURIs.map((bytesOrURI) =>
-        bytesOrURI instanceof Uint8Array
-          ? Skia.Data.fromBytes(bytesOrURI)
-          : Skia.Data.fromURI(bytesOrURI)
-      )
-    ).then((d) => setData(factory(d)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-  return data;
+  const factoryResult = factory(data2);
+  if (factoryResult === null) {
+    onError && onError(new Error("Could not load data"));
+    return null;
+  } else {
+    return factoryResult;
+  }
 };
 
-export const useRawData = <T>(
-  source: DataSource | null | undefined,
+const loadDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
+): Promise<(T | null)[]> =>
+  Promise.all(sources.map((source) => loadData(source, factory, onError)));
+
+const loadData = <T>(
+  source: DataSource,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
+): Promise<T | null> => {
+  if (source instanceof Uint8Array) {
+    return new Promise((resolve) =>
+      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
+    );
+  } else {
+    const uri = typeof source === "string" ? source : resolveAsset(source);
+    return Skia.Data.fromURI(uri).then((d) =>
+      factoryWrapper(d, factory, onError)
+    );
+  }
+};
+
+type Source = DataSource | null | undefined;
+
+const useLoading = <T>(
+  source: Source,
+  loader: () => Promise<T | null>,
+  deps: DependencyList = []
 ) => {
   const [data, setData] = useState<T | null>(null);
-  const prevSourceRef = useRef<DataSource | null | undefined>();
+  const prevSourceRef = useRef<Source>();
   useEffect(() => {
-    // Track to avoid re-fetching the same data
     if (prevSourceRef.current !== source) {
       prevSourceRef.current = source;
-      if (source !== null && source !== undefined) {
-        const factoryWrapper = (data2: SkData) => {
-          const factoryResult = factory(data2);
-          if (factoryResult === null) {
-            onError && onError(new Error("Could not load data"));
-            setData(null);
-          } else {
-            setData(factoryResult);
-          }
-        };
-        if (source instanceof Uint8Array) {
-          factoryWrapper(Skia.Data.fromBytes(source));
-        } else {
-          const uri =
-            typeof source === "string" ? source : resolveAsset(source);
-          Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
-        }
-      } else {
-        // new source is null or undefined -> remove cached data
-        setData(null);
-      }
+      loader().then(setData);
+    } else {
+      setData(null);
     }
-  }, [factory, onError, source]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
   return data;
 };
 
+export const useDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) =>
+  useLoading(
+    sources,
+    () => loadDataCollection(sources, factory, onError),
+    deps
+  );
+
+export const useRawData = <T>(
+  source: DataSource | null | undefined,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) => useLoading(source, () => loadData(source, factory, onError), deps);
+
 const identity = (data: SkData) => data;
 
 export const useData = (
   source: DataSource | null | undefined,
-  onError?: (err: Error) => void
-) => useRawData(source, identity, onError);
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) => useRawData(source, identity, onError, deps);

package/src/skia/core/Typeface.ts

@@ -8,4 +8,9 @@ import { useRawData } from "./Data";
 export const useTypeface = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) => useRawData(source, Skia.Typeface.MakeFreeTypeFaceFromData, onError);
+) =>
+  useRawData(
+    source,
+    Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface),
+    onError
+  );

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

@@ -4,8 +4,8 @@ import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 
 export enum FilterMode {
-  Linear,
   Nearest,
+  Linear,
 }
 
 export enum MipmapMode {
@@ -15,9 +15,9 @@ export enum MipmapMode {
 }
 
 export enum ImageFormat {
-  PNG,
-  JPEG,
-  WEBP,
+  JPEG = 3,
+  PNG = 4,
+  WEBP = 6,
 }
 
 export interface SkImage extends SkJSIInstance<"Image"> {

package/src/skia/types/Paint/Paint.ts

@@ -20,9 +20,9 @@ export enum StrokeCap {
 }
 
 export enum StrokeJoin {
-  Bevel,
   Miter,
   Round,
+  Bevel,
 }
 
 export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>

package/src/skia/types/Path/Path.ts

@@ -44,7 +44,6 @@ export enum PathVerb {
   Conic,
   Cubic,
   Close,
-  Done,
 }
 
 export type PathCommand = number[];

package/src/skia/types/RuntimeEffect/RuntimeEffect.ts

@@ -7,6 +7,7 @@ export interface SkSLUniform {
   rows: number;
   /** The index into the uniforms array that this uniform begins. */
   slot: number;
+  isInteger: boolean;
 }
 
 export interface SkRuntimeShaderBuilder

package/src/skia/types/Shader/Shader.ts

@@ -40,11 +40,9 @@ export const processUniforms = (
       if (value === undefined) {
         throw new Error(`No value specified for uniform ${name}`);
       }
-      let result: number | readonly number[];
-      if (Array.isArray(value)) {
-        result = value.flatMap(processValue);
-      }
-      result = processValue(value as UniformValue);
+      const result = Array.isArray(value)
+        ? value.flatMap(processValue)
+        : processValue(value as UniformValue);
       builder?.setUniform(name, typeof result === "number" ? [result] : result);
       return result;
     });

package/src/skia/types/Skia.ts

@@ -48,7 +48,7 @@ export interface Skia {
   PictureRecorder: () => SkPictureRecorder;
   Picture: PictureFactory;
   Path: PathFactory;
-  Matrix: (matrix?: number[]) => SkMatrix;
+  Matrix: (matrix?: readonly number[]) => SkMatrix;
   ColorFilter: ColorFilterFactory;
   Font: (typeface?: SkTypeface, size?: number) => SkFont;
   Typeface: TypefaceFactory;

package/src/skia/web/JsiSkCanvas.ts

@@ -1,4 +1,4 @@
-import type { Canvas, Image, Paint, CanvasKit } from "canvaskit-wasm";
+import type { Canvas, Image, CanvasKit, Paint } from "canvaskit-wasm";
 
 import type {
   BlendMode,
@@ -250,7 +250,7 @@ export class JsiSkCanvas
   ) {
     this.ref.drawGlyphs(
       glyphs,
-      toValue(positions),
+      positions.map((p) => [p.x, p.y]).flat(),
       x,
       y,
       toValue(font),

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/skia/web/JsiSkFontMgr.ts

@@ -9,10 +9,6 @@ export class JsiSkFontMgr
   implements SkFontMgr
 {
   constructor(CanvasKit: CanvasKit) {
-    console.warn(
-      // eslint-disable-next-line max-len
-      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
-    );
     super(CanvasKit, null, "FontMgr");
   }
 

package/src/skia/web/JsiSkImage.ts

@@ -1,3 +1,4 @@
+/*global btoa, atob*/
 import type { CanvasKit, Image } from "canvaskit-wasm";
 
 import type {
@@ -10,7 +11,8 @@ import type {
   TileMode,
 } from "../types";
 
-import { ckEnum, HostObject } from "./Host";
+import { ckEnum, HostObject, toValue } from "./Host";
+import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   constructor(CanvasKit: CanvasKit, ref: Image) {
@@ -26,26 +28,44 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   }
 
   makeShaderOptions(
-    _tx: TileMode,
-    _ty: TileMode,
-    _fm: FilterMode,
-    _mm: MipmapMode,
-    _localMatrix?: SkMatrix
+    tx: TileMode,
+    ty: TileMode,
+    fm: FilterMode,
+    mm: MipmapMode,
+    localMatrix?: SkMatrix
   ): SkShader {
-    throw new Error("Not implemented yet");
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.ref.makeShaderOptions(
+        ckEnum(tx),
+        ckEnum(ty),
+        ckEnum(fm),
+        ckEnum(mm),
+        localMatrix ? toValue(localMatrix) : undefined
+      )
+    );
   }
 
   makeShaderCubic(
-    _tx: TileMode,
-    _ty: TileMode,
-    _B: number,
-    _C: number,
-    _localMatrix?: SkMatrix
+    tx: TileMode,
+    ty: TileMode,
+    B: number,
+    C: number,
+    localMatrix?: SkMatrix
   ): SkShader {
-    throw new Error("Not implemented yet");
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.ref.makeShaderCubic(
+        ckEnum(tx),
+        ckEnum(ty),
+        B,
+        C,
+        localMatrix ? toValue(localMatrix) : undefined
+      )
+    );
   }
 
-  encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array {
+  encodeToBytes(fmt?: ImageFormat, quality?: number) {
     let result: Uint8Array | null;
     if (fmt && quality) {
       result = this.ref.encodeToBytes(ckEnum(fmt), quality);
@@ -60,7 +80,8 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return result;
   }
 
-  encodeToBase64(_fmt?: ImageFormat, _quality?: number): string {
-    throw new Error("Not implemented yet");
+  encodeToBase64(fmt?: ImageFormat, quality?: number) {
+    const bytes = this.encodeToBytes(fmt, quality);
+    return btoa(String.fromCharCode(...bytes));
   }
 }

package/src/skia/web/JsiSkPaint.ts

@@ -1,6 +1,7 @@
 import type { CanvasKit, Paint } from "canvaskit-wasm";
 
 import type {
+  StrokeJoin,
   BlendMode,
   SkColor,
   SkColorFilter,
@@ -8,7 +9,6 @@ import type {
   SkPaint,
   SkShader,
   StrokeCap,
-  StrokeJoin,
   PaintStyle,
   SkMaskFilter,
   SkPathEffect,