@shopify/react-native-skia 0.1.133 → 0.1.137

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

@@ -29,8 +29,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.

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

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

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

@@ -0,0 +1,10 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Suspense } from "react";
+interface WithSkiaProps {
+    fallback: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback }: 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.133",
+  "version": "0.1.137",
   "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": {
@@ -70,8 +75,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 +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

@@ -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/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);

package/src/renderer/processors/Transform.ts

@@ -1,6 +1,6 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
 import { processTransform } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 
 export interface TransformProps {
   transform?: Transforms2d;
@@ -9,25 +9,22 @@ export interface TransformProps {
 }
 
 export const processCanvasTransform = (
-  { canvas, Skia }: DrawingContext,
+  canvas: SkCanvas,
   { transform, origin, matrix }: TransformProps
 ) => {
   if (matrix) {
     if (origin) {
-      const m3 = Skia.Matrix();
-      m3.translate(origin.x, origin.y);
-      m3.concat(matrix);
-      m3.translate(-origin.x, -origin.y);
-      canvas.concat(m3);
+      canvas.translate(origin.x, origin.y);
+      canvas.concat(matrix);
+      canvas.translate(-origin.x, -origin.y);
     } else {
       canvas.concat(matrix);
     }
   } else if (transform) {
-    const m3 = processTransform(
-      Skia.Matrix(),
+    processTransform(
+      canvas,
       origin ? transformOrigin(origin, transform) : transform
     );
-    canvas.concat(m3);
   }
 };
 

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/Matrix.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -11,12 +12,16 @@ export enum MatrixIndex {
   persp2 = 8,
 }
 
+export const isMatrix = (obj: unknown): obj is SkMatrix =>
+  obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
+
 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;
 }
 
 type Transform2dName =
@@ -49,7 +54,10 @@ export interface TransformProp {
   transform?: Transforms2d;
 }
 
-export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+export const processTransform = <T extends SkMatrix | SkCanvas>(
+  m: T,
+  transforms: Transforms2d
+) => {
   for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
@@ -82,7 +90,11 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
       continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      m.rotate(value);
+      if (isMatrix(m)) {
+        m.rotate(value);
+      } else {
+        m.rotate(toDegrees(value), 0, 0);
+      }
       continue;
     }
     exhaustiveCheck(key);
@@ -93,3 +105,7 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
 const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unknown transformation: ${a}`);
 };
+
+export const toDegrees = (rad: number) => {
+  return (rad * 180) / Math.PI;
+};

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;