@shopify/react-native-skia 0.1.133 → 0.1.137

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

@@ -1 +1 @@
-{"version":3,"sources":["JsiSkia.ts"],"names":["JsiSkPoint","JsiSkPaint","JsiSkRect","Color","JsiSkSurfaceFactory","JsiSkRRect","JsiSkRSXform","toValue","JsiSkContourMeasureIter","JsiSkPictureRecorder","JsiSkPictureFactory","JsiSkPathFactory","JsiSkMatrix","JsiSkColorFilterFactory","JsiSkTypefaceFactory","JsiSkMaskFilterFactory","JsiSkRuntimeEffectFactory","JsiSkImageFilterFactory","JsiSkShaderFactory","JsiSkPathEffectFactory","JsiSkDataFactory","JsiSkImageFactory","JsiSkSVGFactory","JsiSkTextBlobFactory","JsiSkFontMgrFactory","JsiSkFont","MakeVertices","JsiSkApi","CanvasKit","Point","x","y","Float32Array","of","RuntimeShaderBuilder","_","Error","RRectXY","rect","rx","ry","RSXform","scos","ssin","tx","ty","ContourMeasureIter","path","forceClosed","resScale","Paint","PictureRecorder","Picture","Path","Matrix","matrix","identity","ColorFilter","Font","typeface","size","undefined","Typeface","MaskFilter","RuntimeEffect","ImageFilter","Shader","PathEffect","bind","Data","Image","SVG","TextBlob","FontMgr","XYWHRect","width","height","Surface"],"mappings":"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","sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type {\n  SkContourMeasureIter,\n  Skia,\n  SkPath,\n  SkRect,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n  SkTypeface,\n} from \"../types\";\n\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { Color } from \"./JsiSkColor\";\nimport { JsiSkSurfaceFactory } from \"./JsiSkSurfaceFactory\";\nimport { JsiSkRRect } from \"./JsiSkRRect\";\nimport { JsiSkRSXform } from \"./JsiSkRSXform\";\nimport { toValue } from \"./Host\";\nimport { JsiSkContourMeasureIter } from \"./JsiSkContourMeasureIter\";\nimport { JsiSkPictureRecorder } from \"./JsiSkPictureRecorder\";\nimport { JsiSkPictureFactory } from \"./JsiSkPictureFactory\";\nimport { JsiSkPathFactory } from \"./JsiSkPathFactory\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkColorFilterFactory } from \"./JsiSkColorFilterFactory\";\nimport { JsiSkTypefaceFactory } from \"./JsiSkTypefaceFactory\";\nimport { JsiSkMaskFilterFactory } from \"./JsiSkMaskFilterFactory\";\nimport { JsiSkRuntimeEffectFactory } from \"./JsiSkRuntimeEffectFactory\";\nimport { JsiSkImageFilterFactory } from \"./JsiSkImageFilterFactory\";\nimport { JsiSkShaderFactory } from \"./JsiSkShaderFactory\";\nimport { JsiSkPathEffectFactory } from \"./JsiSkPathEffectFactory\";\nimport { JsiSkDataFactory } from \"./JsiSkDataFactory\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\nimport { JsiSkSVGFactory } from \"./JsiSkSVGFactory\";\nimport { JsiSkTextBlobFactory } from \"./JsiSkTextBlobFactory\";\nimport { JsiSkFontMgrFactory } from \"./JsiSkFontMgrFactory\";\nimport { JsiSkFont } from \"./JsiSkFont\";\nimport { MakeVertices } from \"./JsiSkVerticesFactory\";\n\nexport const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({\n  Point: (x: number, y: number) =>\n    new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),\n  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {\n    throw new Error(\"Not implemented on React Native Web\");\n  },\n  RRectXY: (rect: SkRect, rx: number, ry: number) =>\n    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>\n    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),\n  Color,\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ): SkContourMeasureIter =>\n    new JsiSkContourMeasureIter(\n      CanvasKit,\n      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)\n    ),\n  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),\n  PictureRecorder: () =>\n    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),\n  Picture: new JsiSkPictureFactory(CanvasKit),\n  Path: new JsiSkPathFactory(CanvasKit),\n  Matrix: (matrix?: number[]) =>\n    new JsiSkMatrix(\n      CanvasKit,\n      matrix\n        ? Float32Array.of(...matrix)\n        : Float32Array.of(...CanvasKit.Matrix.identity())\n    ),\n  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),\n  Font: (typeface?: SkTypeface, size?: number) =>\n    new JsiSkFont(\n      CanvasKit,\n      new CanvasKit.Font(\n        typeface === undefined ? null : toValue(typeface),\n        size\n      )\n    ),\n  Typeface: new JsiSkTypefaceFactory(CanvasKit),\n  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),\n  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),\n  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),\n  Shader: new JsiSkShaderFactory(CanvasKit),\n  PathEffect: new JsiSkPathEffectFactory(CanvasKit),\n  MakeVertices: MakeVertices.bind(null, CanvasKit),\n  Data: new JsiSkDataFactory(CanvasKit),\n  Image: new JsiSkImageFactory(CanvasKit),\n  SVG: new JsiSkSVGFactory(CanvasKit),\n  TextBlob: new JsiSkTextBlobFactory(CanvasKit),\n  FontMgr: new JsiSkFontMgrFactory(CanvasKit),\n  XYWHRect: (x: number, y: number, width: number, height: number) => {\n    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));\n  },\n  Surface: new JsiSkSurfaceFactory(CanvasKit),\n});\n"]}
+{"version":3,"sources":["JsiSkia.ts"],"names":["JsiSkPoint","JsiSkPaint","JsiSkRect","Color","JsiSkSurfaceFactory","JsiSkRRect","JsiSkRSXform","toValue","JsiSkContourMeasureIter","JsiSkPictureRecorder","JsiSkPictureFactory","JsiSkPathFactory","JsiSkMatrix","JsiSkColorFilterFactory","JsiSkTypefaceFactory","JsiSkMaskFilterFactory","JsiSkRuntimeEffectFactory","JsiSkImageFilterFactory","JsiSkShaderFactory","JsiSkPathEffectFactory","JsiSkDataFactory","JsiSkImageFactory","JsiSkSVGFactory","JsiSkTextBlobFactory","JsiSkFontMgrFactory","JsiSkFont","MakeVertices","JsiSkApi","CanvasKit","Point","x","y","Float32Array","of","RuntimeShaderBuilder","_","Error","RRectXY","rect","rx","ry","RSXform","scos","ssin","tx","ty","ContourMeasureIter","path","forceClosed","resScale","Paint","PictureRecorder","Picture","Path","Matrix","matrix","identity","ColorFilter","Font","typeface","size","undefined","Typeface","MaskFilter","RuntimeEffect","ImageFilter","Shader","PathEffect","bind","Data","Image","SVG","TextBlob","FontMgr","XYWHRect","width","height","Surface"],"mappings":"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","sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type {\n  SkContourMeasureIter,\n  Skia,\n  SkPath,\n  SkRect,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n  SkTypeface,\n} from \"../types\";\n\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { Color } from \"./JsiSkColor\";\nimport { JsiSkSurfaceFactory } from \"./JsiSkSurfaceFactory\";\nimport { JsiSkRRect } from \"./JsiSkRRect\";\nimport { JsiSkRSXform } from \"./JsiSkRSXform\";\nimport { toValue } from \"./Host\";\nimport { JsiSkContourMeasureIter } from \"./JsiSkContourMeasureIter\";\nimport { JsiSkPictureRecorder } from \"./JsiSkPictureRecorder\";\nimport { JsiSkPictureFactory } from \"./JsiSkPictureFactory\";\nimport { JsiSkPathFactory } from \"./JsiSkPathFactory\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkColorFilterFactory } from \"./JsiSkColorFilterFactory\";\nimport { JsiSkTypefaceFactory } from \"./JsiSkTypefaceFactory\";\nimport { JsiSkMaskFilterFactory } from \"./JsiSkMaskFilterFactory\";\nimport { JsiSkRuntimeEffectFactory } from \"./JsiSkRuntimeEffectFactory\";\nimport { JsiSkImageFilterFactory } from \"./JsiSkImageFilterFactory\";\nimport { JsiSkShaderFactory } from \"./JsiSkShaderFactory\";\nimport { JsiSkPathEffectFactory } from \"./JsiSkPathEffectFactory\";\nimport { JsiSkDataFactory } from \"./JsiSkDataFactory\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\nimport { JsiSkSVGFactory } from \"./JsiSkSVGFactory\";\nimport { JsiSkTextBlobFactory } from \"./JsiSkTextBlobFactory\";\nimport { JsiSkFontMgrFactory } from \"./JsiSkFontMgrFactory\";\nimport { JsiSkFont } from \"./JsiSkFont\";\nimport { MakeVertices } from \"./JsiSkVerticesFactory\";\n\nexport const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({\n  Point: (x: number, y: number) =>\n    new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),\n  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {\n    throw new Error(\"Not implemented on React Native Web\");\n  },\n  RRectXY: (rect: SkRect, rx: number, ry: number) =>\n    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>\n    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),\n  Color,\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ): SkContourMeasureIter =>\n    new JsiSkContourMeasureIter(\n      CanvasKit,\n      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)\n    ),\n  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),\n  PictureRecorder: () =>\n    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),\n  Picture: new JsiSkPictureFactory(CanvasKit),\n  Path: new JsiSkPathFactory(CanvasKit),\n  Matrix: (matrix?: readonly number[]) =>\n    new JsiSkMatrix(\n      CanvasKit,\n      matrix\n        ? Float32Array.of(...matrix)\n        : Float32Array.of(...CanvasKit.Matrix.identity())\n    ),\n  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),\n  Font: (typeface?: SkTypeface, size?: number) =>\n    new JsiSkFont(\n      CanvasKit,\n      new CanvasKit.Font(\n        typeface === undefined ? null : toValue(typeface),\n        size\n      )\n    ),\n  Typeface: new JsiSkTypefaceFactory(CanvasKit),\n  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),\n  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),\n  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),\n  Shader: new JsiSkShaderFactory(CanvasKit),\n  PathEffect: new JsiSkPathEffectFactory(CanvasKit),\n  MakeVertices: MakeVertices.bind(null, CanvasKit),\n  Data: new JsiSkDataFactory(CanvasKit),\n  Image: new JsiSkImageFactory(CanvasKit),\n  SVG: new JsiSkSVGFactory(CanvasKit),\n  TextBlob: new JsiSkTextBlobFactory(CanvasKit),\n  FontMgr: new JsiSkFontMgrFactory(CanvasKit),\n  XYWHRect: (x: number, y: number, width: number, height: number) => {\n    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));\n  },\n  Surface: new JsiSkSurfaceFactory(CanvasKit),\n});\n"]}

package/lib/module/values/api.js

@@ -2,8 +2,4 @@ const {
   SkiaValueApi
 } = global;
 export const ValueApi = SkiaValueApi;
-export const {
-  createValue,
-  createDerivedValue
-} = ValueApi;
 //# sourceMappingURL=api.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["api.ts"],"names":["SkiaValueApi","global","ValueApi","createValue","createDerivedValue"],"mappings":"AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAmBC,MAAzB;AACA,OAAO,MAAMC,QAAQ,GAAGF,YAAjB;AAEP,OAAO,MAAM;AAAEG,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAAsCF,QAA5C","sourcesContent":["import type { ISkiaValueApi } from \"./types\";\n\ndeclare global {\n  var SkiaValueApi: ISkiaValueApi;\n}\n\nconst { SkiaValueApi } = global;\nexport const ValueApi = SkiaValueApi;\n\nexport const { createValue, createDerivedValue } = ValueApi;\n"]}
+{"version":3,"sources":["api.ts"],"names":["SkiaValueApi","global","ValueApi"],"mappings":"AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAmBC,MAAzB;AACA,OAAO,MAAMC,QAAQ,GAAGF,YAAjB","sourcesContent":["import type { ISkiaValueApi } from \"./types\";\n\ndeclare global {\n  var SkiaValueApi: ISkiaValueApi;\n}\n\nconst { SkiaValueApi } = global;\nexport const ValueApi = SkiaValueApi;\n"]}

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

@@ -2,6 +2,6 @@ import { ValueApi as ValueApiWeb } from "./web";
 export const ValueApi = ValueApiWeb;
 export const {
   createValue,
-  createDerivedValue
+  createComputedValue
 } = ValueApi;
 //# sourceMappingURL=api.web.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["api.web.ts"],"names":["ValueApi","ValueApiWeb","createValue","createDerivedValue"],"mappings":"AAAA,SAASA,QAAQ,IAAIC,WAArB,QAAwC,OAAxC;AAEA,OAAO,MAAMD,QAAQ,GAAGC,WAAjB;AAEP,OAAO,MAAM;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAAsCH,QAA5C","sourcesContent":["import { ValueApi as ValueApiWeb } from \"./web\";\n\nexport const ValueApi = ValueApiWeb;\n\nexport const { createValue, createDerivedValue } = ValueApi;\n"]}
+{"version":3,"sources":["api.web.ts"],"names":["ValueApi","ValueApiWeb","createValue","createComputedValue"],"mappings":"AAAA,SAASA,QAAQ,IAAIC,WAArB,QAAwC,OAAxC;AAEA,OAAO,MAAMD,QAAQ,GAAGC,WAAjB;AAEP,OAAO,MAAM;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAAuCH,QAA7C","sourcesContent":["import { ValueApi as ValueApiWeb } from \"./web\";\n\nexport const ValueApi = ValueApiWeb;\n\nexport const { createValue, createComputedValue } = ValueApi;\n"]}

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

@@ -1,5 +1,5 @@
 export * from "./useClockValue";
-export * from "./useDerivedValue";
+export * from "./useComputedValue";
 export * from "./useValue";
 export * from "./useValueEffect";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAd;AACA,cAAc,mBAAd;AACA,cAAc,YAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from \"./useClockValue\";\nexport * from \"./useDerivedValue\";\nexport * from \"./useValue\";\nexport * from \"./useValueEffect\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAd;AACA,cAAc,oBAAd;AACA,cAAc,YAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from \"./useClockValue\";\nexport * from \"./useComputedValue\";\nexport * from \"./useValue\";\nexport * from \"./useValueEffect\";\n"]}

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

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { ValueApi } from "../api";
+import { isValue } from "../../renderer/processors/Animations";
+/**
+ * Creates a new computed value - a value that will calculate its value depending
+ * on other values.
+ * @param cb Callback to calculate new value
+ * @param values Dependant values
+ * @returns A readonly value
+ */
+
+export const useComputedValue = (cb, values) => useMemo(() => ValueApi.createComputedValue(cb, values.filter(isValue)), // eslint-disable-next-line react-hooks/exhaustive-deps
+values);
+export const useDerivedValue = (cb, values) => {
+  console.warn("useDerivedValue is deprecated. Use useComputedValue instead.");
+  return useComputedValue(cb, values);
+};
+//# sourceMappingURL=useComputedValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useComputedValue.ts"],"names":["useMemo","ValueApi","isValue","useComputedValue","cb","values","createComputedValue","filter","useDerivedValue","console","warn"],"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;AAOP,OAAO,MAAMG,eAAe,GAAG,CAAIJ,EAAJ,EAAiBC,MAAjB,KAAuC;AACpEI,EAAAA,OAAO,CAACC,IAAR,CAAa,8DAAb;AACA,SAAOP,gBAAgB,CAACC,EAAD,EAAKC,MAAL,CAAvB;AACD,CAHM","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\nexport const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {\n  console.warn(\"useDerivedValue is deprecated. Use useComputedValue instead.\");\n  return useComputedValue(cb, values);\n};\n"]}

package/lib/module/values/web/{RNSkDerivedValue.js → RNSkComputedValue.js}

@@ -1,7 +1,7 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
-export class RNSkDerivedValue extends RNSkReadonlyValue {
+export class RNSkComputedValue extends RNSkReadonlyValue {
   constructor(callback, dependencies) {
     // Initialize dependencies - we can't call this yet, since
     // super if not called and it requires a start value to be set.
@@ -38,4 +38,4 @@ export class RNSkDerivedValue extends RNSkReadonlyValue {
   }
 
 }
-//# sourceMappingURL=RNSkDerivedValue.js.map
+//# sourceMappingURL=RNSkComputedValue.js.map

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

@@ -0,0 +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"]}

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

@@ -1,13 +1,13 @@
 import { RNSkAnimation } from "./RNSkAnimation";
 import { RNSkClockValue } from "./RNSkClockValue";
-import { RNSkDerivedValue } from "./RNSkDerivedValue";
+import { RNSkComputedValue } from "./RNSkComputedValue";
 import { RNSkValue } from "./RNSkValue";
 export const ValueApi = {
   createValue: function (initialValue) {
     return new RNSkValue(initialValue);
   },
-  createDerivedValue: function (cb, values) {
-    return new RNSkDerivedValue(cb, values);
+  createComputedValue: function (cb, values) {
+    return new RNSkComputedValue(cb, values);
   },
   createClockValue: function () {
     return new RNSkClockValue(requestAnimationFrame.bind(window));

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

@@ -1 +1 @@
-{"version":3,"sources":["api.ts"],"names":["RNSkAnimation","RNSkClockValue","RNSkDerivedValue","RNSkValue","ValueApi","createValue","initialValue","createDerivedValue","cb","values","createClockValue","requestAnimationFrame","bind","window","createAnimation"],"mappings":"AASA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,QAAuB,GAAG;AACrCC,EAAAA,WAAW,EAAE,UAAaC,YAAb,EAAmD;AAC9D,WAAO,IAAIH,SAAJ,CAAcG,YAAd,CAAP;AACD,GAHoC;AAIrCC,EAAAA,kBAAkB,EAAE,UAClBC,EADkB,EAElBC,MAFkB,EAGJ;AACd,WAAO,IAAIP,gBAAJ,CAAqBM,EAArB,EAAyBC,MAAzB,CAAP;AACD,GAToC;AAUrCC,EAAAA,gBAAgB,EAAE,YAA4B;AAC5C,WAAO,IAAIT,cAAJ,CAAmBU,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAnB,CAAP;AACD,GAZoC;AAarCC,EAAAA,eAAe,EAAE,UACfN,EADe,EAEA;AACf,WAAO,IAAIR,aAAJ,CAAkBQ,EAAlB,EAAsBG,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAtB,CAAP;AACD;AAjBoC,CAAhC","sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkDerivedValue } from \"./RNSkDerivedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createDerivedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkDerivedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame.bind(window));\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));\n  },\n};\n"]}
+{"version":3,"sources":["api.ts"],"names":["RNSkAnimation","RNSkClockValue","RNSkComputedValue","RNSkValue","ValueApi","createValue","initialValue","createComputedValue","cb","values","createClockValue","requestAnimationFrame","bind","window","createAnimation"],"mappings":"AASA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,QAAuB,GAAG;AACrCC,EAAAA,WAAW,EAAE,UAAaC,YAAb,EAAmD;AAC9D,WAAO,IAAIH,SAAJ,CAAcG,YAAd,CAAP;AACD,GAHoC;AAIrCC,EAAAA,mBAAmB,EAAE,UACnBC,EADmB,EAEnBC,MAFmB,EAGL;AACd,WAAO,IAAIP,iBAAJ,CAAsBM,EAAtB,EAA0BC,MAA1B,CAAP;AACD,GAToC;AAUrCC,EAAAA,gBAAgB,EAAE,YAA4B;AAC5C,WAAO,IAAIT,cAAJ,CAAmBU,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAnB,CAAP;AACD,GAZoC;AAarCC,EAAAA,eAAe,EAAE,UACfN,EADe,EAEA;AACf,WAAO,IAAIR,aAAJ,CAAkBQ,EAAlB,EAAsBG,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAtB,CAAP;AACD;AAjBoC,CAAhC","sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkComputedValue } from \"./RNSkComputedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createComputedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkComputedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame.bind(window));\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));\n  },\n};\n"]}

package/lib/module/views/SkiaView.web.js

@@ -46,23 +46,23 @@ export class SkiaView extends React.Component {
     this.setState({
       width: evt.nativeEvent.layout.width,
       height: evt.nativeEvent.layout.height
-    }); // Reset canvas / surface on layout change
-
-    if (this._canvasRef.current) {
-      // Create surface
-      this._surface = new JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
-
-      if (this._surface) {
-        this._canvas = this._surface.getCanvas();
-        this.requestRedraw();
-        this.redraw();
+    }, () => {
+      // Reset canvas / surface on layout change
+      if (this._canvasRef.current) {
+        // Create surface
+        this._surface = new JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
+
+        if (this._surface) {
+          this._canvas = this._surface.getCanvas();
+          this.redraw();
+        }
       }
-    }
+    });
   }
 
   componentDidMount() {
     // Start render loop
-    this.redraw();
+    this.tick();
   }
 
   componentWillUnmount() {
@@ -88,7 +88,7 @@ export class SkiaView extends React.Component {
    */
 
 
-  redraw() {
+  tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
 
@@ -110,11 +110,11 @@ export class SkiaView extends React.Component {
 
 
     if (!this._unmounted) {
-      requestAnimationFrame(this.redraw.bind(this));
+      requestAnimationFrame(this.tick.bind(this));
     }
   }
 
-  requestRedraw() {
+  redraw() {
     this._redrawRequests++;
   }
   /**
@@ -130,7 +130,7 @@ export class SkiaView extends React.Component {
 
   setDrawMode(mode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
   /**
    * Registers one or move values as a dependant value of the Skia View. The view will
@@ -145,7 +145,7 @@ export class SkiaView extends React.Component {
 
     _values.forEach(v => {
       this._unsubscriptions.push(v.addListener(() => {
-        this.requestRedraw();
+        this.redraw();
       }));
     });
   }
@@ -160,7 +160,7 @@ export class SkiaView extends React.Component {
       timestamp: Date.now()
     });
 
-    this.requestRedraw();
+    this.redraw();
   }
 
   handleTouchStart(evt) {

package/lib/module/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeCanvasSurface","_canvas","getCanvas","requestRedraw","redraw","componentDidMount","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState({\n      width: evt.nativeEvent.layout.width,\n      height: evt.nativeEvent.layout.height,\n    });\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      // Create surface\n      this._surface = new JsiSkSurface(\n        global.CanvasKit,\n        global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)!\n      );\n      // Get canvas and repaint\n      if (this._surface) {\n        this._canvas = this._surface.getCanvas();\n        this.requestRedraw();\n        this.redraw();\n      }\n    }\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private redraw() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.redraw.bind(this));\n    }\n  }\n\n  public requestRedraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.redraw();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.requestRedraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.requestRedraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}

package/lib/module/web/LoadSkiaWeb.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
+export const LoadSkiaWeb = async () => {
+  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+
+  global.CanvasKit = CanvasKit;
+}; // We keep this function for backward compatibility
+
+export const LoadSkia = LoadSkiaWeb;
+//# sourceMappingURL=LoadSkiaWeb.js.map

package/lib/module/web/LoadSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADqC,CAErC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;AACA,OAAO,MAAME,QAAQ,GAAGH,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}

package/lib/module/web/WithSkiaWeb.js

@@ -0,0 +1,22 @@
+import React, { useMemo, lazy, Suspense } from "react";
+import { Platform } from "react-native";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+export const WithSkiaWeb = _ref => {
+  let {
+    getComponent,
+    fallback
+  } = _ref;
+  const Inner = useMemo(() => /*#__PURE__*/lazy(async () => {
+    if (Platform.OS === "web") {
+      await LoadSkiaWeb();
+    } else {
+      console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
+    }
+
+    return getComponent();
+  }), [getComponent]);
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: fallback
+  }, /*#__PURE__*/React.createElement(Inner, null));
+};
+//# sourceMappingURL=WithSkiaWeb.js.map

package/lib/module/web/WithSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAOA,OAAO,MAAMC,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAGR,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACM,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAML,WAAW,EAAjB;AACD,KAFD,MAEO;AACLM,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOL,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,oBAAC,KAAD,OADF,CADF;AAKD,CApBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n}\n\nexport const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb();\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent]\n  );\n  return (\n    <Suspense fallback={fallback}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}

package/lib/module/web/index.js

@@ -1,10 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-export const LoadSkia = async () => {
-  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
-  // to create the JsiSKApi in the Skia.web.ts file.
-
-  global.CanvasKit = CanvasKit;
-};
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["CanvasKitInit","LoadSkia","CanvasKit","global"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,QAAQ,GAAG,YAAY;AAClC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADkC,CAElC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkia = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,eAAd","sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"]}

package/lib/typescript/jestSetup.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/src/animation/functions/interpolate.d.ts

@@ -7,5 +7,11 @@ export interface ExtrapolationConfig {
     extrapolateLeft?: Extrapolate | string;
     extrapolateRight?: Extrapolate | string;
 }
+interface RequiredExtrapolationConfig {
+    extrapolateLeft: Extrapolate;
+    extrapolateRight: Extrapolate;
+}
 export declare type ExtrapolationType = ExtrapolationConfig | Extrapolate | string | undefined;
+export declare function validateInterpolationOptions(type: ExtrapolationType): RequiredExtrapolationConfig;
 export declare function interpolate(x: number, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;
+export {};

package/lib/typescript/src/animation/functions/interpolatePaths.d.ts

@@ -1,9 +1,11 @@
 import type { SkPath } from "../../skia/types";
+import type { ExtrapolationType } from "./interpolate";
 /**
  * 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();
@@ -14,4 +16,4 @@ import type { SkPath } from "../../skia/types";
  * path2.lineTo(0, 100);
  * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
  */
-export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[]) => SkPath;
+export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SkPath;

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

@@ -0,0 +1,16 @@
+import type { Skia as SkiaApi } 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 { ShaderLib } from "../renderer/components/shaders/ShaderLib";
+export declare const Skia: SkiaApi;
+export declare const vec: (x?: number | undefined, y?: number | undefined) => {
+    x: number;
+    y: number;
+};
+export declare const Mock: typeof SkiaExports & typeof ExternalExports & typeof ValueExports & typeof AnimationExports & {
+    createDrawing: () => any;
+    createDeclaration: () => any;
+    ShaderLib: typeof ShaderLib;
+};

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -13,4 +13,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     onTouch?: TouchHandler;
     fontMgr?: SkFontMgr;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "mode" | "debug" | "onDraw" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;

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

@@ -1,11 +1,11 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 export interface TransformProps {
     transform?: Transforms2d;
     origin?: Vector;
     matrix?: SkMatrix;
 }
-export declare const processCanvasTransform: ({ canvas, Skia }: DrawingContext, { transform, origin, matrix }: TransformProps) => void;
+export declare const processCanvasTransform: (canvas: SkCanvas, { transform, origin, matrix }: TransformProps) => void;
 export declare const localMatrix: (m: SkMatrix, { transform, origin }: TransformProps) => SkMatrix | undefined;
 export declare const transformOrigin: (origin: Vector, transform: Transforms2d) => (Pick<{
     readonly translateX: number;

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

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

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

@@ -10,6 +10,12 @@ export interface FontMetrics {
     bounds?: SkRect;
 }
 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/lib/typescript/src/skia/types/Matrix.d.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export declare enum MatrixIndex {
     ScaleX = 0,
     SkewX = 1,
@@ -10,12 +11,14 @@ export declare enum MatrixIndex {
     Persp1 = 7,
     persp2 = 8
 }
+export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 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;
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
 declare type Transformations = {
@@ -25,5 +28,6 @@ export declare type Transforms2d = readonly (Pick<Transformations, "translateX">
 export interface TransformProp {
     transform?: Transforms2d;
 }
-export declare const processTransform: (m: SkMatrix, transforms: Transforms2d) => SkMatrix;
+export declare const processTransform: <T extends SkMatrix | SkCanvas>(m: T, transforms: Transforms2d) => T;
+export declare const toDegrees: (rad: number) => number;
 export {};

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

@@ -39,7 +39,7 @@ export interface Skia {
     PictureRecorder: () => SkPictureRecorder;
     Picture: PictureFactory;
     Path: PathFactory;
-    Matrix: (matrix?: number[]) => SkMatrix;
+    Matrix: (matrix?: readonly number[]) => SkMatrix;
     ColorFilter: ColorFilterFactory;
     Font: (typeface?: SkTypeface, size?: number) => SkFont;
     Typeface: TypefaceFactory;

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

@@ -6,6 +6,7 @@ import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
     measureText(_text: string, _paint?: SkPaint): SkRect;
+    getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;
         descent: number;

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

@@ -8,4 +8,5 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     scale(x: number, y?: number): void;
     skew(x: number, y: number): void;
     rotate(value: number): void;
+    identity(): void;
 }

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

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

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

@@ -1,2 +1,2 @@
 export declare const ValueApi: import("./types").ISkiaValueApi;
-export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createDerivedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;
+export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createComputedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;

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

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

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

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

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

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

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

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