@shopify/react-native-skia 0.1.139 → 0.1.142

package/lib/module/skia/web/JsiSkRect.js

@@ -2,10 +2,10 @@ import { HostObject } from "./Host";
 export class JsiSkRect extends HostObject {
   static fromValue(CanvasKit, rect) {
     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, ref) {

package/lib/module/skia/web/JsiSkRect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["JsiSkRect.ts"],"names":["HostObject","JsiSkRect","fromValue","CanvasKit","rect","XYWHRect","x","y","width","height","constructor","ref"],"mappings":"AAIA,SAASA,UAAT,QAA2B,QAA3B;AAEA,OAAO,MAAMC,SAAN,SAAwBD,UAAxB,CAAmE;AACxD,SAATE,SAAS,CAACC,SAAD,EAAuBC,IAAvB,EAAqC;AACnD,QAAIA,IAAI,YAAYH,SAApB,EAA+B;AAC7B,aAAOG,IAAP;AACD;;AACD,WAAO,IAAIH,SAAJ,CACLE,SADK,EAELA,SAAS,CAACE,QAAV,CAAmBD,IAAI,CAACE,CAAxB,EAA2BF,IAAI,CAACG,CAAhC,EAAmCH,IAAI,CAACI,KAAxC,EAA+CJ,IAAI,CAACK,MAApD,CAFK,CAAP;AAID;;AAEDC,EAAAA,WAAW,CAACP,SAAD,EAAuBQ,GAAvB,EAAkC;AAC3C,UAAMR,SAAN,EAAiBQ,GAAjB,EAAsB,MAAtB;AACD;;AAEI,MAADL,CAAC,GAAG;AACN,WAAO,KAAKK,GAAL,CAAS,CAAT,CAAP;AACD;;AAEI,MAADJ,CAAC,GAAG;AACN,WAAO,KAAKI,GAAL,CAAS,CAAT,CAAP;AACD;;AAEQ,MAALH,KAAK,GAAG;AACV,WAAO,KAAKG,GAAL,CAAS,CAAT,IAAc,KAAKA,GAAL,CAAS,CAAT,CAArB;AACD;;AAES,MAANF,MAAM,GAAG;AACX,WAAO,KAAKE,GAAL,CAAS,CAAT,IAAc,KAAKA,GAAL,CAAS,CAAT,CAArB;AACD;;AA7BuE","sourcesContent":["import type { CanvasKit, Rect } from \"canvaskit-wasm\";\n\nimport type { SkRect } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkRect extends HostObject<Rect, \"Rect\"> implements SkRect {\n  static fromValue(CanvasKit: CanvasKit, rect: SkRect) {\n    if (rect instanceof JsiSkRect) {\n      return rect;\n    }\n    return new JsiSkRect(\n      CanvasKit,\n      CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height)\n    );\n  }\n\n  constructor(CanvasKit: CanvasKit, ref: Rect) {\n    super(CanvasKit, ref, \"Rect\");\n  }\n\n  get x() {\n    return this.ref[0];\n  }\n\n  get y() {\n    return this.ref[1];\n  }\n\n  get width() {\n    return this.ref[2] - this.ref[0];\n  }\n\n  get height() {\n    return this.ref[3] - this.ref[1];\n  }\n}\n"]}
+{"version":3,"sources":["JsiSkRect.ts"],"names":["HostObject","JsiSkRect","fromValue","CanvasKit","rect","ref","XYWHRect","x","y","width","height","constructor"],"mappings":"AAIA,SAASA,UAAT,QAA2B,QAA3B;AAEA,OAAO,MAAMC,SAAN,SAAwBD,UAAxB,CAAmE;AACxD,SAATE,SAAS,CAACC,SAAD,EAAuBC,IAAvB,EAAqC;AACnD,QAAIA,IAAI,YAAYH,SAApB,EAA+B;AAC7B,aAAOG,IAAI,CAACC,GAAZ;AACD;;AACD,WAAOF,SAAS,CAACG,QAAV,CAAmBF,IAAI,CAACG,CAAxB,EAA2BH,IAAI,CAACI,CAAhC,EAAmCJ,IAAI,CAACK,KAAxC,EAA+CL,IAAI,CAACM,MAApD,CAAP;AACD;;AAEDC,EAAAA,WAAW,CAACR,SAAD,EAAuBE,GAAvB,EAAkC;AAC3C,UAAMF,SAAN,EAAiBE,GAAjB,EAAsB,MAAtB;AACD;;AAEI,MAADE,CAAC,GAAG;AACN,WAAO,KAAKF,GAAL,CAAS,CAAT,CAAP;AACD;;AAEI,MAADG,CAAC,GAAG;AACN,WAAO,KAAKH,GAAL,CAAS,CAAT,CAAP;AACD;;AAEQ,MAALI,KAAK,GAAG;AACV,WAAO,KAAKJ,GAAL,CAAS,CAAT,IAAc,KAAKA,GAAL,CAAS,CAAT,CAArB;AACD;;AAES,MAANK,MAAM,GAAG;AACX,WAAO,KAAKL,GAAL,CAAS,CAAT,IAAc,KAAKA,GAAL,CAAS,CAAT,CAArB;AACD;;AA1BuE","sourcesContent":["import type { CanvasKit, Rect } from \"canvaskit-wasm\";\n\nimport type { SkRect } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkRect extends HostObject<Rect, \"Rect\"> implements SkRect {\n  static fromValue(CanvasKit: CanvasKit, rect: SkRect) {\n    if (rect instanceof JsiSkRect) {\n      return rect.ref;\n    }\n    return CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height);\n  }\n\n  constructor(CanvasKit: CanvasKit, ref: Rect) {\n    super(CanvasKit, ref, \"Rect\");\n  }\n\n  get x() {\n    return this.ref[0];\n  }\n\n  get y() {\n    return this.ref[1];\n  }\n\n  get width() {\n    return this.ref[2] - this.ref[0];\n  }\n\n  get height() {\n    return this.ref[3] - this.ref[1];\n  }\n}\n"]}

package/lib/module/values/hooks/useComputedValue.js

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

package/lib/module/values/hooks/useComputedValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComputedValue.ts"],"names":["useMemo","ValueApi","isValue","useComputedValue","cb","values","createComputedValue","filter"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,sCAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC9BL,OAAO,CACL,MAAMC,QAAQ,CAACK,mBAAT,CAAgCF,EAAhC,EAAoCC,MAAM,CAACE,MAAP,CAAcL,OAAd,CAApC,CADD,EAEL;AACAG,MAHK,CADF","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors/Animations\";\n\n/**\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) =>\n  useMemo(\n    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n"]}
+{"version":3,"sources":["useComputedValue.ts"],"names":["useEffect","useMemo","ValueApi","isValue","useComputedValue","cb","values","value","createComputedValue","filter","__invalidate"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,sCAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAAuC;AACrE,QAAMC,KAAK,GAAGN,OAAO,CACnB,MAAMC,QAAQ,CAACM,mBAAT,CAAgCH,EAAhC,EAAoCC,MAAM,CAACG,MAAP,CAAcN,OAAd,CAApC,CADa,EAEnB;AACAG,EAAAA,MAHmB,CAArB;AAKAN,EAAAA,SAAS,CAAC,MAAM,MAAMO,KAAK,CAACG,YAAN,EAAb,EAAmC,CAACH,KAAD,CAAnC,CAAT;AACA,SAAOA,KAAP;AACD,CARM","sourcesContent":["import { useEffect, useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors/Animations\";\n\n/**\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) => {\n  const value = useMemo(\n    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n  useEffect(() => () => value.__invalidate(), [value]);\n  return value;\n};\n"]}

package/lib/module/values/index.js

@@ -1,4 +1,5 @@
 export * from "./types";
 export * from "./hooks";
 export * from "./api";
+export * from "./selector";
 //# sourceMappingURL=index.js.map

package/lib/module/values/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,OAAd","sourcesContent":["export * from \"./types\";\nexport * from \"./hooks\";\nexport * from \"./api\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,OAAd;AACA,cAAc,YAAd","sourcesContent":["export * from \"./types\";\nexport * from \"./hooks\";\nexport * from \"./api\";\nexport * from \"./selector\";\n"]}

package/lib/module/values/selector.js

@@ -0,0 +1,15 @@
+/**
+ * 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 = (value, selector) => {
+  return {
+    selector,
+    value
+  };
+};
+//# sourceMappingURL=selector.js.map

package/lib/module/values/selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["selector.ts"],"names":["Selector","value","selector"],"mappings":"AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,QAAQ,GAAG,CACtBC,KADsB,EAEtBC,QAFsB,KAGY;AAClC,SAAO;AACLA,IAAAA,QADK;AAELD,IAAAA;AAFK,GAAP;AAID,CARM","sourcesContent":["import type { SkiaValue } from \"./types\";\n\nexport type SkiaSelector<TReturn, TInput = unknown> = {\n  value: SkiaValue<TInput>;\n  selector: (v: TInput) => TReturn;\n};\n\n/**\n * Wraps a Skia Value with a selector function. The selector function can access the\n * inner values of the Skia Value so that we can dynamically ready array values and\n * object values when doing animations in Skia.\n * @param value Dependant value\n * @param selector Selector function to calculate new value from the Skia Value's value\n * @returns A descriptor that will be used by the reconciler to calculate the value\n */\nexport const Selector = <TInput, TReturn>(\n  value: SkiaValue<TInput>,\n  selector: (v: TInput) => TReturn\n): SkiaSelector<TReturn, TInput> => {\n  return {\n    selector,\n    value,\n  };\n};\n"]}

package/lib/module/values/web/RNSkComputedValue.js

@@ -35,6 +35,14 @@ export class RNSkComputedValue extends RNSkReadonlyValue {
 
   unsubscribe() {
     this._unsubscribers.forEach(unsubscribe => unsubscribe());
+
+    this._unsubscribers = [];
+  }
+
+  __invalidate() {
+    this._unsubscribers.forEach(unsubscribe => unsubscribe());
+
+    this._unsubscribers = [];
   }
 
 }

package/lib/module/values/web/RNSkComputedValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkComputedValue.ts"],"names":["RNSkReadonlyValue","RNSkComputedValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe"],"mappings":";;AAEA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,MAAMC,iBAAN,SAAmCD,iBAAnC,CAAwD;AAC7DE,EAAAA,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;AAC3D;AACA;AACA,UAAMC,aAAgC,GAAG,EAAzC;AACA,UAAMC,eAAsD,GAAG;AAC7DC,MAAAA,OAAO,EAAEC;AADoD,KAA/D;AAGAJ,IAAAA,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;AAC5B,UAAI,kBAAkBA,GAAlB,IAAyB,iBAAiBA,GAA9C,EAAmD;AACjDL,QAAAA,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;AAAA;;AAAA,0CAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;AAAA,SAAhD,CADF;AAKD;AACF,KARD;AASA,UAAMH,QAAQ,EAAd;;AAhB2D;;AAAA;;AAiB3D,SAAKU,cAAL,GAAsBR,aAAtB;AACAC,IAAAA,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;AACA,SAAKC,SAAL,GAAiBb,QAAjB;AACD;;AAEOW,EAAAA,gBAAgB,GAAG;AACzB,SAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;AACD;;AAKME,EAAAA,WAAW,GAAG;AACnB,SAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;AACD;;AAhC4D","sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\"__typename__\" in dep && \"addListener\" in dep) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n  }\n}\n"]}
+{"version":3,"sources":["RNSkComputedValue.ts"],"names":["RNSkReadonlyValue","RNSkComputedValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe","__invalidate"],"mappings":";;AAEA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,MAAMC,iBAAN,SAAmCD,iBAAnC,CAAwD;AAC7DE,EAAAA,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;AAC3D;AACA;AACA,UAAMC,aAAgC,GAAG,EAAzC;AACA,UAAMC,eAAsD,GAAG;AAC7DC,MAAAA,OAAO,EAAEC;AADoD,KAA/D;AAGAJ,IAAAA,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;AAC5B,UAAI,kBAAkBA,GAAlB,IAAyB,iBAAiBA,GAA9C,EAAmD;AACjDL,QAAAA,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;AAAA;;AAAA,0CAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;AAAA,SAAhD,CADF;AAKD;AACF,KARD;AASA,UAAMH,QAAQ,EAAd;;AAhB2D;;AAAA;;AAiB3D,SAAKU,cAAL,GAAsBR,aAAtB;AACAC,IAAAA,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;AACA,SAAKC,SAAL,GAAiBb,QAAjB;AACD;;AAEOW,EAAAA,gBAAgB,GAAG;AACzB,SAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;AACD;;AAKME,EAAAA,WAAW,GAAG;AACnB,SAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;AACA,SAAKL,cAAL,GAAsB,EAAtB;AACD;;AAEMM,EAAAA,YAAY,GAAS;AAC1B,SAAKN,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;AACA,SAAKL,cAAL,GAAsB,EAAtB;AACD;;AAtC4D","sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\"__typename__\" in dep && \"addListener\" in dep) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n\n  public __invalidate(): void {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n}\n"]}

package/lib/module/values/web/RNSkReadonlyValue.js

@@ -32,5 +32,9 @@ export class RNSkReadonlyValue {
     };
   }
 
+  __invalidate() {
+    this._listeners = [];
+  }
+
 }
 //# sourceMappingURL=RNSkReadonlyValue.js.map

package/lib/module/values/web/RNSkReadonlyValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkReadonlyValue.ts"],"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf"],"mappings":";;AAEA,OAAO,MAAMA,iBAAN,CAAmD;AACxDC,EAAAA,WAAW,CAACC,KAAD,EAAW;AAAA;;AAAA,wCAK0B,EAL1B;;AAAA,0CAgBS,WAhBT;;AACpB,SAAKC,QAAL,GAAgBD,KAAhB;AACD;;AAKOE,EAAAA,eAAe,GAAS;AAC9B,SAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;AACD;;AAESK,EAAAA,MAAM,CAACC,SAAD,EAAqB;AACnC,SAAKN,QAAL,GAAgBM,SAAhB;AACA,SAAKL,eAAL;AACD;;AAIiB,MAAPM,OAAO,GAAM;AACtB,WAAO,KAAKP,QAAZ;AACD;;AAEMQ,EAAAA,WAAW,CAACJ,EAAD,EAAyB;AACzC,SAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;AACA,WAAO,MAAM;AACX,WAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;AACD,KAFD;AAGD;;AA5BuD","sourcesContent":["import type { SkiaValue } from \"../types\";\n\nexport class RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    this._current = value;\n  }\n\n  private _current: T;\n  private _listeners: Array<(value: T) => void> = [];\n\n  private notifyListeners(): void {\n    this._listeners.forEach((cb) => cb(this._current));\n  }\n\n  protected update(nextValue: T): void {\n    this._current = nextValue;\n    this.notifyListeners();\n  }\n\n  public readonly __typename__ = \"RNSkValue\";\n\n  public get current(): T {\n    return this._current;\n  }\n\n  public addListener(cb: (value: T) => void) {\n    this._listeners.push(cb);\n    return () => {\n      this._listeners.splice(this._listeners.indexOf(cb), 1);\n    };\n  }\n}\n"]}
+{"version":3,"sources":["RNSkReadonlyValue.ts"],"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf","__invalidate"],"mappings":";;AAEA,OAAO,MAAMA,iBAAN,CAAmD;AACxDC,EAAAA,WAAW,CAACC,KAAD,EAAW;AAAA;;AAAA,wCAK0B,EAL1B;;AAAA,0CAgBS,WAhBT;;AACpB,SAAKC,QAAL,GAAgBD,KAAhB;AACD;;AAKOE,EAAAA,eAAe,GAAS;AAC9B,SAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;AACD;;AAESK,EAAAA,MAAM,CAACC,SAAD,EAAqB;AACnC,SAAKN,QAAL,GAAgBM,SAAhB;AACA,SAAKL,eAAL;AACD;;AAIiB,MAAPM,OAAO,GAAM;AACtB,WAAO,KAAKP,QAAZ;AACD;;AAEMQ,EAAAA,WAAW,CAACJ,EAAD,EAAyB;AACzC,SAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;AACA,WAAO,MAAM;AACX,WAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;AACD,KAFD;AAGD;;AAEMQ,EAAAA,YAAY,GAAS;AAC1B,SAAKV,UAAL,GAAkB,EAAlB;AACD;;AAhCuD","sourcesContent":["import type { SkiaValue } from \"../types\";\n\nexport class RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    this._current = value;\n  }\n\n  private _current: T;\n  private _listeners: Array<(value: T) => void> = [];\n\n  private notifyListeners(): void {\n    this._listeners.forEach((cb) => cb(this._current));\n  }\n\n  protected update(nextValue: T): void {\n    this._current = nextValue;\n    this.notifyListeners();\n  }\n\n  public readonly __typename__ = \"RNSkValue\";\n\n  public get current(): T {\n    return this._current;\n  }\n\n  public addListener(cb: (value: T) => void) {\n    this._listeners.push(cb);\n    return () => {\n      this._listeners.splice(this._listeners.indexOf(cb), 1);\n    };\n  }\n\n  public __invalidate(): void {\n    this._listeners = [];\n  }\n}\n"]}

package/lib/module/views/useTouchHandler.js

@@ -12,30 +12,29 @@ const useInternalTouchHandler = function (handlers) {
     history.forEach(touches => {
       // Enumerate touches
       for (let i = 0; i < touches.length; i++) {
-        var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouchInfoRef$cur3, _prevTouchInfoRef$cur4, _prevTouchInfoRef$cur5, _prevTouchInfoRef$cur6, _prevVelocityRef$curr, _prevVelocityRef$curr2;
+        var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouch$x, _prevTouch$y, _prevVelocityRef$curr, _prevVelocityRef$curr2, _prevVelocityRef$curr3, _prevVelocityRef$curr4;
 
         if (!multiTouch && i > 0) {
           break;
         }
 
-        const touch = touches[i]; // Calculate the velocity from the previous touch.
+        const touch = touches[i];
+        const prevTouch = prevTouchInfoRef.current[touch.id]; // Calculate the velocity from the previous touch.
 
         const timeDiffseconds = touch.timestamp - ((_prevTouchInfoRef$cur = (_prevTouchInfoRef$cur2 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
-        const distX = touch.x - ((_prevTouchInfoRef$cur3 = (_prevTouchInfoRef$cur4 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur4 === void 0 ? void 0 : _prevTouchInfoRef$cur4.x) !== null && _prevTouchInfoRef$cur3 !== void 0 ? _prevTouchInfoRef$cur3 : touch.x);
-        const distY = touch.y - ((_prevTouchInfoRef$cur5 = (_prevTouchInfoRef$cur6 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur6 === void 0 ? void 0 : _prevTouchInfoRef$cur6.y) !== null && _prevTouchInfoRef$cur5 !== void 0 ? _prevTouchInfoRef$cur5 : touch.y);
+        const distX = touch.x - ((_prevTouch$x = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.x) !== null && _prevTouch$x !== void 0 ? _prevTouch$x : touch.x);
+        const distY = touch.y - ((_prevTouch$y = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.y) !== null && _prevTouch$y !== void 0 ? _prevTouch$y : touch.y);
 
-        if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled) {
-          if (timeDiffseconds > 0) {
-            prevVelocityRef.current[touch.id] = {
-              x: distX / timeDiffseconds / PixelRatio.get(),
-              y: distY / timeDiffseconds / PixelRatio.get()
-            };
-          }
+        if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled && timeDiffseconds > 0) {
+          prevVelocityRef.current[touch.id] = {
+            x: distX / timeDiffseconds / PixelRatio.get(),
+            y: distY / timeDiffseconds / PixelRatio.get()
+          };
         }
 
         const extendedTouchInfo = { ...touch,
-          velocityX: (_prevVelocityRef$curr = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr === void 0 ? void 0 : _prevVelocityRef$curr.x,
-          velocityY: (_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.y
+          velocityX: (_prevVelocityRef$curr = (_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.x) !== null && _prevVelocityRef$curr !== void 0 ? _prevVelocityRef$curr : 0,
+          velocityY: (_prevVelocityRef$curr3 = (_prevVelocityRef$curr4 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr4 === void 0 ? void 0 : _prevVelocityRef$curr4.y) !== null && _prevVelocityRef$curr3 !== void 0 ? _prevVelocityRef$curr3 : 0
         }; // Save previous touch
 
         prevTouchInfoRef.current[touch.id] = touch;
@@ -46,7 +45,6 @@ const useInternalTouchHandler = function (handlers) {
         } else if (touch.type === TouchType.Active) {
           handlers.onActive && handlers.onActive(extendedTouchInfo);
         } else {
-          handlers.onActive && handlers.onActive(extendedTouchInfo);
           handlers.onEnd && handlers.onEnd(extendedTouchInfo);
         }
       }

package/lib/module/views/useTouchHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});\n  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(\n    {}\n  );\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX =\n          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);\n        const distY =\n          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled\n        ) {\n          if (timeDiffseconds > 0) {\n            prevVelocityRef.current[touch.id] = {\n              x: distX / timeDiffseconds / PixelRatio.get(),\n              y: distY / timeDiffseconds / PixelRatio.get(),\n            };\n          }\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x,\n          velocityY: prevVelocityRef.current[touch.id]?.y,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}
+{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"AACA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAUA,SAASC,SAAT,QAA0B,SAA1B;;AAEA,MAAMC,uBAAuB,GAAG,UAC9BC,QAD8B,EAIb;AAAA,MAFjBC,IAEiB,uEAFM,EAEN;AAAA,MADjBC,UACiB,uEADJ,KACI;AACjB,QAAMC,gBAAgB,GAAGP,MAAM,CAA2C,EAA3C,CAA/B;AACA,QAAMQ,eAAe,GAAGR,MAAM,CAAwC,EAAxC,CAA9B;AAEA,SAAOD,WAAW,CAAEU,OAAD,IAAsC;AACvD;AACAA,IAAAA,OAAO,CAACC,OAAR,CAAiBC,OAAD,IAAa;AAC3B;AACA,WAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,OAAO,CAACE,MAA5B,EAAoCD,CAAC,EAArC,EAAyC;AAAA;;AACvC,YAAI,CAACN,UAAD,IAAeM,CAAC,GAAG,CAAvB,EAA0B;AACxB;AACD;;AAED,cAAME,KAAK,GAAGH,OAAO,CAACC,CAAD,CAArB;AACA,cAAMG,SAAS,GAAGR,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,CAAlB,CANuC,CAOvC;;AACA,cAAMC,eAAe,GACnBJ,KAAK,CAACK,SAAN,uDACCZ,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,CADD,2DACC,uBAAoCE,SADrC,yEACkDL,KAAK,CAACK,SADxD,CADF;AAIA,cAAMC,KAAK,GAAGN,KAAK,CAACO,CAAN,oBAAWN,SAAX,aAAWA,SAAX,uBAAWA,SAAS,CAAEM,CAAtB,uDAA2BP,KAAK,CAACO,CAAjC,CAAd;AACA,cAAMC,KAAK,GAAGR,KAAK,CAACS,CAAN,oBAAWR,SAAX,aAAWA,SAAX,uBAAWA,SAAS,CAAEQ,CAAtB,uDAA2BT,KAAK,CAACS,CAAjC,CAAd;;AAEA,YACET,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACuB,KAAzB,IACAX,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACwB,GADzB,IAEAZ,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACyB,SAFzB,IAGAT,eAAe,GAAG,CAJpB,EAKE;AACAV,UAAAA,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,IAAoC;AAClCI,YAAAA,CAAC,EAAED,KAAK,GAAGF,eAAR,GAA0BjB,UAAU,CAAC2B,GAAX,EADK;AAElCL,YAAAA,CAAC,EAAED,KAAK,GAAGJ,eAAR,GAA0BjB,UAAU,CAAC2B,GAAX;AAFK,WAApC;AAID;;AAED,cAAMC,iBAAoC,GAAG,EAC3C,GAAGf,KADwC;AAE3CgB,UAAAA,SAAS,qDAAEtB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,CAAF,2DAAE,uBAAmCI,CAArC,yEAA0C,CAFR;AAG3CU,UAAAA,SAAS,sDAAEvB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,CAAF,2DAAE,uBAAmCM,CAArC,2EAA0C;AAHR,SAA7C,CA3BuC,CAiCvC;;AACAhB,QAAAA,gBAAgB,CAACS,OAAjB,CAAyBF,KAAK,CAACG,EAA/B,IAAqCH,KAArC;;AAEA,YAAIA,KAAK,CAACU,IAAN,KAAetB,SAAS,CAACuB,KAA7B,EAAoC;AAClC,iBAAOjB,eAAe,CAACQ,OAAhB,CAAwBF,KAAK,CAACG,EAA9B,CAAP;AACAb,UAAAA,QAAQ,CAAC4B,OAAT,IAAoB5B,QAAQ,CAAC4B,OAAT,CAAiBlB,KAAjB,CAApB;AACD,SAHD,MAGO,IAAIA,KAAK,CAACU,IAAN,KAAetB,SAAS,CAAC+B,MAA7B,EAAqC;AAC1C7B,UAAAA,QAAQ,CAAC8B,QAAT,IAAqB9B,QAAQ,CAAC8B,QAAT,CAAkBL,iBAAlB,CAArB;AACD,SAFM,MAEA;AACLzB,UAAAA,QAAQ,CAAC+B,KAAT,IAAkB/B,QAAQ,CAAC+B,KAAT,CAAeN,iBAAf,CAAlB;AACD;AACF;AACF,KA/CD,EAFuD,CAkDvD;AACD,GAnDiB,EAmDfxB,IAnDe,CAAlB;AAoDD,CA5DD;AA8DA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAM+B,eAAe,GAAG,UAC7BhC,QAD6B,EAGZ;AAAA,MADjBC,IACiB,uEADM,EACN;AACjB,SAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,KAAjB,CAA9B;AACD,CALM;AAOP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMgC,oBAAoB,GAAG,UAClCjC,QADkC,EAGjB;AAAA,MADjBC,IACiB,uEADM,EACN;AACjB,SAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,IAAjB,CAA9B;AACD,CALM","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type { Vector } from \"../skia/types\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n  const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n        const prevTouch = prevTouchInfoRef.current[touch.id];\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX = touch.x - (prevTouch?.x ?? touch.x);\n        const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled &&\n          timeDiffseconds > 0\n        ) {\n          prevVelocityRef.current[touch.id] = {\n            x: distX / timeDiffseconds / PixelRatio.get(),\n            y: distY / timeDiffseconds / PixelRatio.get(),\n          };\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n          velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}

package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts

@@ -1,7 +1,12 @@
-import type { SkiaValue } from "../../../values";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
+export declare const isSelector: <T, R>(value: unknown) => value is {
+    selector: (v: T) => R;
+    value: SkiaValue<T>;
+};
 export declare const isAnimated: <T>(props: AnimatedProps<T>) => boolean;
 export declare const materialize: <T>(props: AnimatedProps<T>) => T;
+export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 export declare type AnimatedProps<T> = {
-    [K in keyof T]: T[K] | SkiaValue<T[K]>;
+    [K in keyof T]: AnimatedProp<T[K]>;
 };

package/lib/typescript/src/skia/core/Data.d.ts

@@ -1,5 +1,3 @@
-import type { DependencyList } from "react";
-import type { SkData, DataSource } from "../types";
-export declare const useDataCollection: <T>(sources: DataSource[], factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => (T | null)[] | null;
-export declare const useRawData: <T>(source: DataSource | null | undefined, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => T | null;
-export declare const useData: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => SkData | null;
+import type { SkData, DataSourceParam } from "../types";
+export declare const useRawData: <T>(source: DataSourceParam, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined) => T | null;
+export declare const useData: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkData | null;

package/lib/typescript/src/skia/core/Font.d.ts

@@ -1,5 +1,5 @@
-import type { DataSource, SkFont } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Font object
  * */
-export declare const useFont: (font: DataSource | null | undefined, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => SkFont | null;
+export declare const useFont: (font: DataSourceParam, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;

package/lib/typescript/src/skia/core/Image.d.ts

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

package/lib/typescript/src/skia/core/SVG.d.ts

@@ -1,2 +1,2 @@
-import type { DataSource } from "../types";
-export declare const useSVG: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;
+import type { DataSourceParam } from "../types";
+export declare const useSVG: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;

package/lib/typescript/src/skia/core/Typeface.d.ts

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

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

@@ -1,5 +1,12 @@
-/// <reference types="node" />
-/// <reference types="react-native" />
 import type { SkJSIInstance } from "../JsiInstance";
 export declare type SkData = SkJSIInstance<"Data">;
-export declare type DataSource = ReturnType<typeof require> | string | Uint8Array;
+declare type RNModule = number;
+declare type ESModule = {
+    __esModule: true;
+    default: string;
+};
+export declare type DataModule = RNModule | ESModule;
+export declare type DataSource = DataModule | string | Uint8Array;
+export declare type DataSourceParam = DataSource | null | undefined;
+export declare const isRNModule: (mod: DataModule) => mod is number;
+export {};

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

@@ -3,6 +3,7 @@ import type { SkRRect } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+    static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: RRect);
     get rx(): number;
     get ry(): number;

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

@@ -2,7 +2,7 @@ import type { CanvasKit, Rect } from "canvaskit-wasm";
 import type { SkRect } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
-    static fromValue(CanvasKit: CanvasKit, rect: SkRect): JsiSkRect;
+    static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     get x(): number;
     get y(): number;

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

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

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

@@ -0,0 +1,14 @@
+import type { SkiaValue } from "./types";
+export declare 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 declare const Selector: <TInput, TReturn>(value: SkiaValue<TInput>, selector: (v: TInput) => TReturn) => SkiaSelector<TReturn, TInput>;

package/lib/typescript/src/values/types.d.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/lib/typescript/src/values/web/RNSkComputedValue.d.ts

@@ -6,4 +6,5 @@ export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     private _callback;
     private _unsubscribers;
     unsubscribe(): void;
+    __invalidate(): void;
 }

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -8,4 +8,5 @@ export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
     readonly __typename__ = "RNSkValue";
     get current(): T;
     addListener(cb: (value: T) => void): () => void;
+    __invalidate(): void;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.139",
+  "version": "0.1.142",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "tsc": "tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
     "test": "jest",
     "postinstall": "node scripts/install-npm.js",
     "build": "bob build"
@@ -69,18 +69,23 @@
     "react-native": ">=0.63.0-rc.0 <1.0.x",
     "react-native-reanimated": ">=2.0.0"
   },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^28.1.6",
     "@types/react-native": "^0.65.0",
     "@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",
+    "eslint": "8.21.0",
+    "eslint-config-react-native-wcandillon": "3.9.0",
+    "eslint-plugin-reanimated": "2.0.0",
+    "jest": "28.1.3",
     "react": "17.0.2",
     "react-native": "0.66.2",
     "react-native-builder-bob": "^0.18.2",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^28.0.7",
     "typescript": "^4.6.4"
   },
   "dependencies": {

package/src/mock/index.ts

@@ -3,6 +3,7 @@
 import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
 import * as Values from "../values/web";
 import * as ValuesHooks from "../values/hooks";
+import { Selector } from "../values/selector";
 import * as BaseSkia from "../skia/types";
 import type * as SkiaExports from "../skia";
 import type * as ExternalExports from "../external";
@@ -46,7 +47,6 @@ export const Mock: typeof SkiaExports &
   Skia,
   ...BaseSkia,
   // 2. Hooks
-  useDataCollection: Noop,
   useRawData: Noop,
   useData: Noop,
   useFont: Noop,
@@ -87,6 +87,7 @@ export const Mock: typeof SkiaExports &
   // ValueExports
   ...Values,
   ...ValuesHooks,
+  Selector,
   // Animations
   ...timingFunctions,
   ...springFunctions,

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]>;
 };