@shopify/react-native-skia 0.1.141 → 0.1.145

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -3,7 +3,8 @@ import type { CanvasKit, RuntimeEffect } from "canvaskit-wasm";
 import type { SkMatrix, SkShader } from "../types";
 import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkRuntimeEffect
@@ -19,7 +20,9 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShader(
         uniforms,
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }
@@ -33,8 +36,10 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShaderWithChildren(
         uniforms,
-        children?.map((child) => toValue(child)),
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        children?.map((child) => JsiSkShader.fromValue(child)),
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }

package/src/skia/web/JsiSkShaderFactory.ts

@@ -10,7 +10,9 @@ import type {
 } from "../types";
 import type { ShaderFactory } from "../types/Shader/ShaderFactory";
 
-import { Host, toValue, ckEnum } from "./Host";
+import { Host, ckEnum } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkShaderFactory extends Host implements ShaderFactory {
@@ -30,12 +32,14 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeLinearGradient(
-        toValue(start),
-        toValue(end),
+        JsiSkPoint.fromValue(start),
+        JsiSkPoint.fromValue(end),
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -53,12 +57,14 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeRadialGradient(
-        toValue(center),
+        JsiSkPoint.fromValue(center),
         radius,
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -78,14 +84,16 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeTwoPointConicalGradient(
-        toValue(start),
+        JsiSkPoint.fromValue(start),
         startRadius,
-        toValue(end),
+        JsiSkPoint.fromValue(end),
         endRadius,
         colors,
         pos,
         ckEnum(mode),
-        localMatrix === undefined ? undefined : toValue(localMatrix),
+        localMatrix === undefined
+          ? undefined
+          : JsiSkMatrix.fromValue(localMatrix),
         flags
       )
     );
@@ -112,7 +120,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         ckEnum(mode),
         localMatrix === undefined || localMatrix === null
           ? undefined
-          : toValue(localMatrix),
+          : JsiSkMatrix.fromValue(localMatrix),
         flags,
         startAngleInDegrees,
         endAngleInDegrees
@@ -165,17 +173,18 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
   MakeBlend(mode: BlendMode, one: SkShader, two: SkShader) {
     return new JsiSkShader(
       this.CanvasKit,
-      this.CanvasKit.Shader.MakeBlend(ckEnum(mode), toValue(one), toValue(two))
+      this.CanvasKit.Shader.MakeBlend(
+        ckEnum(mode),
+        JsiSkShader.fromValue(one),
+        JsiSkShader.fromValue(two)
+      )
     );
   }
 
   MakeColor(color: SkColor) {
     return new JsiSkShader(
       this.CanvasKit,
-      this.CanvasKit.Shader.MakeColor(
-        toValue(color),
-        this.CanvasKit.ColorSpace.SRGB
-      )
+      this.CanvasKit.Shader.MakeColor(color, this.CanvasKit.ColorSpace.SRGB)
     );
   }
 }

package/src/skia/web/JsiSkSurface.ts

@@ -2,9 +2,10 @@ import type { CanvasKit, Surface } from "canvaskit-wasm";
 
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 
-import { HostObject, toUndefinedableValue } from "./Host";
+import { HostObject } from "./Host";
 import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkSurface
   extends HostObject<Surface, "Surface">
@@ -19,7 +20,11 @@ export class JsiSkSurface
   }
 
   makeImageSnapshot(bounds?: SkRect): SkImage {
-    const image = this.ref.makeImageSnapshot(toUndefinedableValue(bounds));
+    const image = this.ref.makeImageSnapshot(
+      bounds
+        ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))
+        : undefined
+    );
     return new JsiSkImage(this.CanvasKit, image);
   }
 }

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -1,10 +1,14 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { SkFont, SkRSXform } from "../types";
+import type { SkFont } from "../types";
 import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
 
-import { Host, toValue } from "./Host";
+import { Host } from "./Host";
+import { JsiSkFont } from "./JsiSkFont";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import type { RSXform } from "./JsiSkRSXform";
+import { JsiSkRSXform } from "./JsiSkRSXform";
 
 export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -14,14 +18,14 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
   MakeFromText(str: string, font: SkFont) {
     return new JsiSkTextBlob(
       this.CanvasKit,
-      this.CanvasKit.TextBlob.MakeFromText(str, toValue(font))
+      this.CanvasKit.TextBlob.MakeFromText(str, JsiSkFont.fromValue(font))
     );
   }
 
   MakeFromGlyphs(glyphs: number[], font: SkFont) {
     return new JsiSkTextBlob(
       this.CanvasKit,
-      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, toValue(font))
+      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, JsiSkFont.fromValue(font))
     );
   }
 
@@ -30,8 +34,10 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXform(
         str,
-        rsxforms.map((f) => Array.from(toValue<Float32Array>(f))).flat(),
-        toValue(font)
+        rsxforms
+          .map((f) => Array.from(JsiSkRSXform.fromValue<RSXform>(f)))
+          .flat(),
+        JsiSkFont.fromValue(font)
       )
     );
   }
@@ -41,8 +47,8 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXformGlyphs(
         glyphs,
-        rsxforms.map((f) => toValue(f)),
-        toValue(font)
+        rsxforms.map((f) => JsiSkRSXform.fromValue(f)),
+        JsiSkFont.fromValue(font)
       )
     );
   }

package/src/skia/web/JsiSkTypefaceFactory.tsx

@@ -2,7 +2,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkData, TypefaceFactory } from "../types";
 
-import { Host, toValue } from "./Host";
+import { Host } from "./Host";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
 export class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
@@ -11,7 +11,9 @@ export class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
   }
 
   MakeFreeTypeFaceFromData(data: SkData) {
-    const tf = this.CanvasKit.Typeface.MakeFreeTypeFaceFromData(toValue(data));
+    const tf = this.CanvasKit.Typeface.MakeFreeTypeFaceFromData(
+      JsiSkTypeface.fromValue(data)
+    );
     if (tf === null) {
       return null;
     }

package/src/skia/web/JsiSkia.ts

@@ -17,7 +17,6 @@ import { Color } from "./JsiSkColor";
 import { JsiSkSurfaceFactory } from "./JsiSkSurfaceFactory";
 import { JsiSkRRect } from "./JsiSkRRect";
 import { JsiSkRSXform } from "./JsiSkRSXform";
-import { toValue } from "./Host";
 import { JsiSkContourMeasureIter } from "./JsiSkContourMeasureIter";
 import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
 import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
@@ -36,6 +35,8 @@ import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
 import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
 import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkTypeface } from "./JsiSkTypeface";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -44,7 +45,10 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     throw new Error("Not implemented on React Native Web");
   },
   RRectXY: (rect: SkRect, rx: number, ry: number) =>
-    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),
+    new JsiSkRRect(
+      CanvasKit,
+      CanvasKit.RRectXY(JsiSkRect.fromValue(CanvasKit, rect), rx, ry)
+    ),
   RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
     new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
   Color,
@@ -55,9 +59,17 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   ): SkContourMeasureIter =>
     new JsiSkContourMeasureIter(
       CanvasKit,
-      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)
+      new CanvasKit.ContourMeasureIter(
+        JsiSkPath.fromValue(path),
+        forceClosed,
+        resScale
+      )
     ),
-  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),
+  Paint: () => {
+    const paint = new JsiSkPaint(CanvasKit, new CanvasKit.Paint());
+    paint.setAntiAlias(true);
+    return paint;
+  },
   PictureRecorder: () =>
     new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
   Picture: new JsiSkPictureFactory(CanvasKit),
@@ -74,7 +86,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     new JsiSkFont(
       CanvasKit,
       new CanvasKit.Font(
-        typeface === undefined ? null : toValue(typeface),
+        typeface === undefined ? null : JsiSkTypeface.fromValue(typeface),
         size
       )
     ),

package/src/values/hooks/useComputedValue.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 import { ValueApi } from "../api";
 import { isValue } from "../../renderer/processors/Animations";
@@ -10,9 +10,12 @@ import { isValue } from "../../renderer/processors/Animations";
  * @param values Dependant values
  * @returns A readonly value
  */
-export const useComputedValue = <R>(cb: () => R, values: unknown[]) =>
-  useMemo(
+export const useComputedValue = <R>(cb: () => R, values: unknown[]) => {
+  const value = useMemo(
     () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     values
   );
+  useEffect(() => () => value.__invalidate(), [value]);
+  return value;
+};

package/src/values/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./hooks";
 export * from "./api";
+export * from "./selector";

package/src/values/selector.ts

@@ -0,0 +1,24 @@
+import type { SkiaValue } from "./types";
+
+export type SkiaSelector<TReturn, TInput = unknown> = {
+  value: SkiaValue<TInput>;
+  selector: (v: TInput) => TReturn;
+};
+
+/**
+ * Wraps a Skia Value with a selector function. The selector function can access the
+ * inner values of the Skia Value so that we can dynamically ready array values and
+ * object values when doing animations in Skia.
+ * @param value Dependant value
+ * @param selector Selector function to calculate new value from the Skia Value's value
+ * @returns A descriptor that will be used by the reconciler to calculate the value
+ */
+export const Selector = <TInput, TReturn>(
+  value: SkiaValue<TInput>,
+  selector: (v: TInput) => TReturn
+): SkiaSelector<TReturn, TInput> => {
+  return {
+    selector,
+    value,
+  };
+};

package/src/values/types.ts

@@ -8,6 +8,10 @@ export interface SkiaValue<T = number> {
    * Returns unsubscribe method.
    */
   addListener: (cb: (value: T) => void) => () => void;
+  /**
+   * Invalidates the value. Has different meaning depending on the type of the value.
+   */
+  __invalidate: () => void;
   /**
    * Field to make typechecking easier
    */

package/src/values/web/RNSkComputedValue.ts

@@ -34,5 +34,11 @@ export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
 
   public unsubscribe() {
     this._unsubscribers.forEach((unsubscribe) => unsubscribe());
+    this._unsubscribers = [];
+  }
+
+  public __invalidate(): void {
+    this._unsubscribers.forEach((unsubscribe) => unsubscribe());
+    this._unsubscribers = [];
   }
 }

package/src/values/web/RNSkReadonlyValue.ts

@@ -29,4 +29,8 @@ export class RNSkReadonlyValue<T> implements SkiaValue<T> {
       this._listeners.splice(this._listeners.indexOf(cb), 1);
     };
   }
+
+  public __invalidate(): void {
+    this._listeners = [];
+  }
 }