@shopify/react-native-skia 0.1.141 → 0.1.142

package/src/renderer/DependencyManager.tsx

@@ -3,7 +3,7 @@ import type { RefObject } from "react";
 import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 
-import { isValue } from "./processors";
+import { isSelector, isValue } from "./processors";
 import type { Node } from "./nodes";
 
 type Unsubscribe = () => void;
@@ -29,7 +29,10 @@ export class DependencyManager {
   }
 
   subscribeNode(node: Node, props: Props) {
-    const values = Object.values(props).filter(isValue);
+    const values = Object.values(props)
+      .filter((v) => isValue(v) || isSelector(v))
+      .map((v) => (isSelector(v) ? v.value : (v as SkiaValue<unknown>)));
+
     if (values.length > 0) {
       this.subscriptions.set(node, { values, unsubscribe: null });
     }

package/src/renderer/processors/Animations/Animations.ts

@@ -1,4 +1,4 @@
-import type { SkiaValue } from "../../../values";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 import { mapKeys } from "../../typeddash";
 
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
@@ -17,6 +17,24 @@ export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   return false;
 };
 
+export const isSelector = <T, R>(
+  value: unknown
+): value is {
+  selector: (v: T) => R;
+  value: SkiaValue<T>;
+} => {
+  if (value) {
+    return (
+      typeof value === "object" &&
+      "selector" in value &&
+      "value" in value &&
+      (value as Record<string, unknown>).selector !== undefined &&
+      (value as Record<string, unknown>).value !== undefined
+    );
+  }
+  return false;
+};
+
 export const isAnimated = <T>(props: AnimatedProps<T>) => {
   for (const value of Object.values(props)) {
     if (isValue(value)) {
@@ -29,14 +47,18 @@ export const isAnimated = <T>(props: AnimatedProps<T>) => {
 export const materialize = <T>(props: AnimatedProps<T>) => {
   const result = { ...props };
   mapKeys(props).forEach((key) => {
-    const value = props[key];
-    if (isValue(value)) {
-      result[key] = (value as SkiaValue<T[typeof key]>).current;
+    const prop = props[key];
+    if (isValue(prop)) {
+      result[key] = (prop as SkiaValue<T[typeof key]>).current;
+    } else if (isSelector(prop)) {
+      result[key] = prop.selector(prop.value.current) as T[typeof key];
     }
   });
   return result as T;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 export type AnimatedProps<T> = {
-  [K in keyof T]: T[K] | SkiaValue<T[K]>;
+  [K in keyof T]: AnimatedProp<T[K]>;
 };

package/src/skia/core/Data.ts

@@ -1,14 +1,14 @@
-import type { DependencyList } from "react";
-import { useRef, useEffect, useState } from "react";
-import { Image, Platform } from "react-native";
+import { useEffect, useState } from "react";
+import { Image } from "react-native";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSource } from "../types";
+import { isRNModule } from "../types";
+import type { SkData, DataModule, DataSourceParam } from "../types";
 
-const resolveAsset = (source: ReturnType<typeof require>) => {
-  return Platform.OS === "web"
-    ? source.default
-    : Image.resolveAssetSource(source).uri;
+const resolveAsset = (source: DataModule) => {
+  return isRNModule(source)
+    ? Image.resolveAssetSource(source).uri
+    : source.default;
 };
 
 const factoryWrapper = <T>(
@@ -25,19 +25,12 @@ const factoryWrapper = <T>(
   }
 };
 
-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,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source === null) {
+  if (source === null || source === undefined) {
     return new Promise((resolve) => resolve(null));
   } else if (source instanceof Uint8Array) {
     return new Promise((resolve) =>
@@ -50,51 +43,27 @@ const loadData = <T>(
     );
   }
 };
-
-type Source = DataSource | null | undefined;
-
 const useLoading = <T>(
-  source: Source,
-  loader: () => Promise<T | null>,
-  deps: DependencyList = []
+  source: DataSourceParam,
+  loader: () => Promise<T | null>
 ) => {
   const [data, setData] = useState<T | null>(null);
-  const prevSourceRef = useRef<Source>();
   useEffect(() => {
-    if (prevSourceRef.current !== source) {
-      prevSourceRef.current = source;
-      loader().then(setData);
-    } else {
-      setData(null);
-    }
+    loader().then(setData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [source]);
   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,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useLoading(source, () => loadData(source, factory, onError), deps);
+  onError?: (err: Error) => void
+) => useLoading(source, () => loadData(source, factory, onError));
 
 const identity = (data: SkData) => data;
 
 export const useData = (
-  source: DataSource | null | undefined,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useRawData(source, identity, onError, deps);
+  source: DataSourceParam,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);

package/src/skia/core/Font.ts

@@ -2,7 +2,7 @@
 import { useMemo } from "react";
 
 import { Skia } from "../Skia";
-import type { DataSource, SkFont } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useTypeface } from "./Typeface";
 
@@ -10,10 +10,10 @@ import { useTypeface } from "./Typeface";
  * Returns a Skia Font object
  * */
 export const useFont = (
-  font: DataSource | null | undefined,
+  font: DataSourceParam,
   size?: number,
   onError?: (err: Error) => void
-): SkFont | null => {
+) => {
   const typeface = useTypeface(font, onError);
   return useMemo(() => {
     if (typeface && size) {
@@ -23,6 +23,5 @@ export const useFont = (
     } else {
       return null;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [typeface]);
+  }, [size, typeface]);
 };

package/src/skia/core/Image.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
@@ -9,6 +9,6 @@ const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
  * Returns a Skia Image object
  * */
 export const useImage = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, imgFactory, onError);

package/src/skia/core/SVG.ts

@@ -1,11 +1,11 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
 const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
 
 export const useSVG = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, svgFactory, onError);

package/src/skia/core/Typeface.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
@@ -9,6 +9,6 @@ const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
  * Returns a Skia Typeface object
  * */
 export const useTypeface = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, tfFactory, onError);

package/src/skia/types/Data/Data.ts

@@ -2,4 +2,14 @@ import type { SkJSIInstance } from "../JsiInstance";
 
 export type SkData = SkJSIInstance<"Data">;
 
-export type DataSource = ReturnType<typeof require> | string | Uint8Array;
+type RNModule = number;
+type ESModule = {
+  __esModule: true;
+  default: string;
+};
+export type DataModule = RNModule | ESModule;
+export type DataSource = DataModule | string | Uint8Array;
+export type DataSourceParam = DataSource | null | undefined;
+
+export const isRNModule = (mod: DataModule): mod is RNModule =>
+  typeof mod === "number";

package/src/skia/web/JsiSkCanvas.ts

@@ -32,6 +32,7 @@ import {
   toOptionalValue,
 } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkRRect } from "./JsiSkRRect";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -43,7 +44,7 @@ export class JsiSkCanvas
 
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
-      JsiSkRect.fromValue(this.CanvasKit, rect).ref,
+      JsiSkRect.fromValue(this.CanvasKit, rect),
       toValue<Paint>(paint)
     );
   }
@@ -61,8 +62,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRect(
       toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       toValue<Paint>(paint),
       fastSample
     );
@@ -130,8 +131,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRectCubic(
       toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       B,
       C,
       toOptionalValue(paint)
@@ -148,8 +149,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRectOptions(
       toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(fm),
       ckEnum(mm),
       toOptionalValue(paint)
@@ -217,7 +218,10 @@ export class JsiSkCanvas
   }
 
   drawRRect(rrect: SkRRect, paint: SkPaint) {
-    this.ref.drawRRect(toValue(rrect), toValue(paint));
+    this.ref.drawRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, rrect),
+      toValue(paint)
+    );
   }
 
   drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
@@ -313,11 +317,19 @@ export class JsiSkCanvas
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipRect(toValue(rect), ckEnum(op), doAntiAlias);
+    this.ref.clipRect(
+      JsiSkRect.fromValue(this.CanvasKit, rect),
+      ckEnum(op),
+      doAntiAlias
+    );
   }
 
   clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipRRect(toValue(rrect), ckEnum(op), doAntiAlias);
+    this.ref.clipRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, rrect),
+      ckEnum(op),
+      doAntiAlias
+    );
   }
 
   concat(m: SkMatrix) {

package/src/skia/web/JsiSkPath.ts

@@ -16,6 +16,7 @@ import type {
 import { ckEnum, HostObject, optEnum, toValue } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkRRect } from "./JsiSkRRect";
 
 const CommandCount = {
   [PathVerb.Move]: 3,
@@ -50,12 +51,20 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     startAngleInDegrees: number,
     sweepAngleInDegrees: number
   ) {
-    this.ref.addArc(toValue(oval), startAngleInDegrees, sweepAngleInDegrees);
+    this.ref.addArc(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      startAngleInDegrees,
+      sweepAngleInDegrees
+    );
     return this;
   }
 
   addOval(oval: SkRect, isCCW?: boolean, startIndex?: number) {
-    this.ref.addOval(toValue(oval), isCCW, startIndex);
+    this.ref.addOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      isCCW,
+      startIndex
+    );
     return this;
   }
 
@@ -183,7 +192,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     forceMoveTo: boolean
   ) {
     this.ref.arcToOval(
-      toValue(oval),
+      JsiSkRect.fromValue(this.CanvasKit, oval),
       startAngleInDegrees,
       sweepAngleInDegrees,
       forceMoveTo
@@ -263,11 +272,11 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   addRect(rect: SkRect, isCCW?: boolean) {
-    this.ref.addRect(toValue(rect), isCCW);
+    this.ref.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
   }
 
   addRRect(rrect: SkRRect, isCCW?: boolean) {
-    this.ref.addRRect(toValue(rrect), isCCW);
+    this.ref.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
     return this;
   }
 

package/src/skia/web/JsiSkRRect.ts

@@ -6,6 +6,17 @@ import { HostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+  static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
+    if (rect instanceof JsiSkRect) {
+      return rect.ref;
+    }
+    return CanvasKit.RRectXY(
+      JsiSkRect.fromValue(CanvasKit, rect.rect),
+      rect.rx,
+      rect.ry
+    );
+  }
+
   constructor(CanvasKit: CanvasKit, ref: RRect) {
     super(CanvasKit, ref, "RRect");
   }

package/src/skia/web/JsiSkRect.ts

@@ -7,12 +7,9 @@ import { HostObject } from "./Host";
 export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
   static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
     if (rect instanceof JsiSkRect) {
-      return rect;
+      return rect.ref;
     }
-    return new JsiSkRect(
-      CanvasKit,
-      CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height)
-    );
+    return CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height);
   }
 
   constructor(CanvasKit: CanvasKit, ref: Rect) {

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 = [];
+  }
 }