@shopify/react-native-skia 0.1.131 → 0.1.134

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

@@ -16,9 +16,9 @@ export declare enum StrokeCap {
     Square = 2
 }
 export declare enum StrokeJoin {
-    Bevel = 0,
-    Miter = 1,
-    Round = 2
+    Miter = 0,
+    Round = 1,
+    Bevel = 2
 }
 export declare const isPaint: (obj: SkJSIInstance<string> | null) => obj is SkPaint;
 export interface SkPaint extends SkJSIInstance<"Paint"> {

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

@@ -38,8 +38,7 @@ export declare enum PathVerb {
     Quad = 2,
     Conic = 3,
     Cubic = 4,
-    Close = 5,
-    Done = 6
+    Close = 5
 }
 export declare type PathCommand = number[];
 export declare const isPath: (obj: SkJSIInstance<string> | null) => obj is SkPath;

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

@@ -6,6 +6,7 @@ export interface SkSLUniform {
     rows: number;
     /** The index into the uniforms array that this uniform begins. */
     slot: number;
+    isInteger: boolean;
 }
 export interface SkRuntimeShaderBuilder extends SkJSIInstance<"RuntimeShaderBuilder"> {
     setUniform(name: string, value: readonly number[]): void;

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

@@ -39,7 +39,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/lib/typescript/src/skia/web/JsiSkFont.d.ts

@@ -13,7 +13,7 @@ export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFon
         bounds: JsiSkRect | undefined;
     };
     getGlyphIDs(str: string, numCodePoints?: number): number[];
-    getGlyphWidths(glyphs: number[], paint?: SkPaint | null): Float32Array;
+    getGlyphWidths(glyphs: number[], paint?: SkPaint | null): number[];
     getGlyphIntercepts(glyphs: number[], positions: SkPoint[], top: number, bottom: number): number[];
     getScaleX(): number;
     getSize(): number;

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

@@ -5,8 +5,8 @@ export declare class JsiSkImage extends HostObject<Image, "Image"> implements Sk
     constructor(CanvasKit: CanvasKit, ref: Image);
     height(): number;
     width(): number;
-    makeShaderOptions(_tx: TileMode, _ty: TileMode, _fm: FilterMode, _mm: MipmapMode, _localMatrix?: SkMatrix): SkShader;
-    makeShaderCubic(_tx: TileMode, _ty: TileMode, _B: number, _C: number, _localMatrix?: SkMatrix): SkShader;
+    makeShaderOptions(tx: TileMode, ty: TileMode, fm: FilterMode, mm: MipmapMode, localMatrix?: SkMatrix): SkShader;
+    makeShaderCubic(tx: TileMode, ty: TileMode, B: number, C: number, localMatrix?: SkMatrix): SkShader;
     encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array;
-    encodeToBase64(_fmt?: ImageFormat, _quality?: number): string;
+    encodeToBase64(fmt?: ImageFormat, quality?: number): string;
 }

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

@@ -1,5 +1,5 @@
 import type { CanvasKit, Paint } from "canvaskit-wasm";
-import type { BlendMode, SkColor, SkColorFilter, SkImageFilter, SkPaint, SkShader, StrokeCap, StrokeJoin, PaintStyle, SkMaskFilter, SkPathEffect } from "../types";
+import type { StrokeJoin, BlendMode, SkColor, SkColorFilter, SkImageFilter, SkPaint, SkShader, StrokeCap, PaintStyle, SkMaskFilter, SkPathEffect } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     constructor(CanvasKit: CanvasKit, ref: Paint);

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

@@ -3,4 +3,4 @@ declare global {
     var SkiaValueApi: ISkiaValueApi;
 }
 export declare const ValueApi: ISkiaValueApi;
-export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createDerivedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;
+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/values/api.web.d.ts

@@ -1,2 +1,2 @@
 export declare const ValueApi: import("./types").ISkiaValueApi;
-export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createDerivedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;
+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/values/hooks/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./useClockValue";
-export * from "./useDerivedValue";
+export * from "./useComputedValue";
 export * from "./useValue";
 export * from "./useValueEffect";

package/lib/typescript/src/values/hooks/{useDerivedValue.d.ts → useComputedValue.d.ts}

@@ -1,8 +1,9 @@
 /**
- * Creates a new derived value - a value that will calculate its value depending
+ * Creates a new computed value - a value that will calculate its value depending
  * on other values.
  * @param cb Callback to calculate new value
  * @param values Dependant values
  * @returns A readonly value
  */
+export declare const useComputedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;
 export declare const useDerivedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;

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

@@ -41,10 +41,10 @@ export interface ISkiaValueApi {
      */
     createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
     /**
-     * Creates a derived value. This is a calculated value that returns the result of
+     * Creates a computed value. This is a calculated value that returns the result of
      * a function that is called with the values of the dependencies.
      */
-    createDerivedValue: <R>(cb: () => R, values: Array<SkiaValue<unknown>>) => SkiaValue<R>;
+    createComputedValue: <R>(cb: () => R, values: Array<SkiaValue<unknown>>) => SkiaValue<R>;
     /**
      * Creates a clock value where the value is the number of milliseconds elapsed
      * since the clock was created

package/lib/typescript/src/values/web/{RNSkDerivedValue.d.ts → RNSkComputedValue.d.ts}

@@ -1,6 +1,6 @@
 import type { DependencyList } from "react";
 import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
-export declare class RNSkDerivedValue<T> extends RNSkReadonlyValue<T> {
+export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     constructor(callback: () => T, dependencies: DependencyList);
     private dependecyUpdated;
     private _callback;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.131",
+  "version": "0.1.134",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -70,6 +70,7 @@
     "@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",

package/src/mock/index.ts

@@ -0,0 +1,156 @@
+/**
+ * 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";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MockJSIInstance: any = {};
+const Noop = () => MockJSIInstance;
+
+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 });
+
+export const rect = (x: number, y: number, width: number, height: number) => ({
+  x,
+  y,
+  width,
+  height,
+});
+
+export const rrect = (r: SkRect, rx: number, ry: number) => ({
+  rect: r,
+  rx,
+  ry,
+});
+
+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 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;

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,15 @@ export interface FontMetrics {
 }
 
 export interface SkFont extends SkJSIInstance<"Font"> {
+  /**
+   * Retrieves the advanceX measurements for each glyph.
+   * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
+   * One width per glyph is returned in the returned array.
+   * @param glyphs
+   * @param paint
+   */
+  getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
+
   /** Returns the advance width of text.
       The advance is the normal distance to move before drawing additional text.
       Returns the bounding box of text if bounds is not nullptr. The paint
@@ -39,20 +48,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
    */
   getGlyphIDs(str: string, numCodePoints?: number): number[];
 
-  /**
-   * Retrieves the advanceX measurements for each glyph.
-   * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
-   * One width per glyph is returned in the returned array.
-   * @param glyphs
-   * @param paint
-   * @param output - if provided, the results will be copied into this array.
-   */
-  getGlyphWidths(
-    glyphs: number[],
-    paint?: SkPaint | null,
-    output?: Float32Array
-  ): Float32Array;
-
   /**
    * Computes any intersections of a thick "line" and a run of positionsed glyphs.
    * The thick line is represented as a top and bottom coordinate (positive for

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

@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb, toValue, ckEnum } from "./Host";
+import { HostObject, toValue, ckEnum } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
@@ -20,7 +20,11 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   measureText(_text: string, _paint?: SkPaint): SkRect {
-    throw new NotImplementedOnRNWeb();
+    console.warn(
+      `measureText() is deprecated an returns an empty rectangle on React Native Web.
+Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
+    );
+    return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
   }
 
   getMetrics() {
@@ -42,7 +46,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
 
   // TODO: Fix return value in the C++ implementation, it return float32
   getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
-    return this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null);
+    return [...this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null)];
   }
 
   getGlyphIntercepts(

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");
   }