@shopify/react-native-skia 0.1.190 → 0.1.192

package/lib/module/values/types.d.ts

@@ -11,7 +11,7 @@ export interface SkiaValue<T = number> {
     /**
      * Invalidates the value. Has different meaning depending on the type of the value.
      */
-    __invalidate: () => void;
+    dispose: () => void;
     /**
      * Field to make typechecking easier
      */

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SkiaValue<T = number> {\n  /**\n   * Gets the value hold by the Value object\n   */\n  readonly current: T;\n  /**\n   * Adds a listener that is called when value changes.\n   * Returns unsubscribe method.\n   */\n  addListener: (cb: (value: T) => void) => () => void;\n  /**\n   * Invalidates the value. Has different meaning depending on the type of the value.\n   */\n  __invalidate: () => void;\n  /**\n   * Field to make typechecking easier\n   */\n  __typename__: \"RNSkValue\";\n}\n\nexport interface SkiaMutableValue<T = number> extends SkiaValue<T> {\n  /**\n   * Get/sets the value hold by the Value object\n   */\n  current: T;\n  /**\n   * Get/sets the animation controlling the value\n   * */\n  animation: SkiaAnimation | undefined;\n}\n\nexport interface SkiaClockValue extends SkiaValue<number> {\n  start: () => void;\n  stop: () => void;\n}\n\nexport interface SkiaAnimation extends SkiaClockValue {\n  cancel: () => void;\n}\n\nexport interface AnimationState {\n  current: number;\n  finished: boolean;\n}\n\nexport interface ISkiaValueApi {\n  /**\n   * Creates a new value that holds the initial value and that\n   * can be changed.\n   */\n  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;\n  /**\n   * Creates a computed value. This is a calculated value that returns the result of\n   * a function that is called with the values of the dependencies.\n   */\n  createComputedValue: <R>(\n    cb: () => R,\n    values: Array<SkiaValue<unknown>>\n  ) => SkiaValue<R>;\n  /**\n   * Creates a clock value where the value is the number of milliseconds elapsed\n   * since the clock was created\n   */\n  createClockValue: () => SkiaClockValue;\n  /**\n   * Creates an animation that is driven from a clock and updated every frame.\n   * @param cb Callback to calculate next value from time.\n   * @returns An animation object that can control a value.\n   */\n  createAnimation: <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ) => SkiaAnimation;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SkiaValue<T = number> {\n  /**\n   * Gets the value hold by the Value object\n   */\n  readonly current: T;\n  /**\n   * Adds a listener that is called when value changes.\n   * Returns unsubscribe method.\n   */\n  addListener: (cb: (value: T) => void) => () => void;\n  /**\n   * Invalidates the value. Has different meaning depending on the type of the value.\n   */\n  dispose: () => void;\n  /**\n   * Field to make typechecking easier\n   */\n  __typename__: \"RNSkValue\";\n}\n\nexport interface SkiaMutableValue<T = number> extends SkiaValue<T> {\n  /**\n   * Get/sets the value hold by the Value object\n   */\n  current: T;\n  /**\n   * Get/sets the animation controlling the value\n   * */\n  animation: SkiaAnimation | undefined;\n}\n\nexport interface SkiaClockValue extends SkiaValue<number> {\n  start: () => void;\n  stop: () => void;\n}\n\nexport interface SkiaAnimation extends SkiaClockValue {\n  cancel: () => void;\n}\n\nexport interface AnimationState {\n  current: number;\n  finished: boolean;\n}\n\nexport interface ISkiaValueApi {\n  /**\n   * Creates a new value that holds the initial value and that\n   * can be changed.\n   */\n  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;\n  /**\n   * Creates a computed value. This is a calculated value that returns the result of\n   * a function that is called with the values of the dependencies.\n   */\n  createComputedValue: <R>(\n    cb: () => R,\n    values: Array<SkiaValue<unknown>>\n  ) => SkiaValue<R>;\n  /**\n   * Creates a clock value where the value is the number of milliseconds elapsed\n   * since the clock was created\n   */\n  createClockValue: () => SkiaClockValue;\n  /**\n   * Creates an animation that is driven from a clock and updated every frame.\n   * @param cb Callback to calculate next value from time.\n   * @returns An animation object that can control a value.\n   */\n  createAnimation: <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ) => SkiaAnimation;\n}\n"],"mappings":""}

package/lib/module/values/web/RNSkComputedValue.d.ts

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["RNSkReadonlyValue","RNSkComputedValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe","__invalidate"],"sources":["RNSkComputedValue.ts"],"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 (\n        dep &&\n        typeof dep === \"object\" &&\n        \"__typename__\" in dep &&\n        \"addListener\" in dep\n      ) {\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"],"mappings":";;AAEA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,MAAMC,iBAAN,SAAmCD,iBAAnC,CAAwD;EAC7DE,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;IAC3D;IACA;IACA,MAAMC,aAAgC,GAAG,EAAzC;IACA,MAAMC,eAAsD,GAAG;MAC7DC,OAAO,EAAEC;IADoD,CAA/D;IAGAJ,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;MAC5B,IACEA,GAAG,IACH,OAAOA,GAAP,KAAe,QADf,IAEA,kBAAkBA,GAFlB,IAGA,iBAAiBA,GAJnB,EAKE;QACAL,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;UAAA;;UAAA,gCAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;QAAA,CAAhD,CADF;MAKD;IACF,CAbD;IAcA,MAAMH,QAAQ,EAAd;;IArB2D;;IAAA;;IAsB3D,KAAKU,cAAL,GAAsBR,aAAtB;IACAC,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;IACA,KAAKC,SAAL,GAAiBb,QAAjB;EACD;;EAEOW,gBAAgB,GAAG;IACzB,KAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;EACD;;EAKME,WAAW,GAAG;IACnB,KAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;EAEMM,YAAY,GAAS;IAC1B,KAAKN,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;AA3C4D"}
+{"version":3,"names":["RNSkReadonlyValue","RNSkComputedValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe","dispose"],"sources":["RNSkComputedValue.ts"],"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 (\n        dep &&\n        typeof dep === \"object\" &&\n        \"__typename__\" in dep &&\n        \"addListener\" in dep\n      ) {\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 dispose(): void {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n}\n"],"mappings":";;AAEA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,MAAMC,iBAAN,SAAmCD,iBAAnC,CAAwD;EAC7DE,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;IAC3D;IACA;IACA,MAAMC,aAAgC,GAAG,EAAzC;IACA,MAAMC,eAAsD,GAAG;MAC7DC,OAAO,EAAEC;IADoD,CAA/D;IAGAJ,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;MAC5B,IACEA,GAAG,IACH,OAAOA,GAAP,KAAe,QADf,IAEA,kBAAkBA,GAFlB,IAGA,iBAAiBA,GAJnB,EAKE;QACAL,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;UAAA;;UAAA,gCAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;QAAA,CAAhD,CADF;MAKD;IACF,CAbD;IAcA,MAAMH,QAAQ,EAAd;;IArB2D;;IAAA;;IAsB3D,KAAKU,cAAL,GAAsBR,aAAtB;IACAC,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;IACA,KAAKC,SAAL,GAAiBb,QAAjB;EACD;;EAEOW,gBAAgB,GAAG;IACzB,KAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;EACD;;EAKME,WAAW,GAAG;IACnB,KAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;EAEMM,OAAO,GAAS;IACrB,KAAKN,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;AA3C4D"}

package/lib/module/values/web/RNSkReadonlyValue.d.ts

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

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

@@ -34,7 +34,7 @@ export class RNSkReadonlyValue {
     };
   }
 
-  __invalidate() {
+  dispose() {
     this._listeners = [];
   }
 

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

@@ -1 +1 @@
-{"version":3,"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf","__invalidate"],"sources":["RNSkReadonlyValue.ts"],"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    if (this._current !== nextValue) {\n      this._current = nextValue;\n      this.notifyListeners();\n    }\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"],"mappings":";;AAEA,OAAO,MAAMA,iBAAN,CAAmD;EACxDC,WAAW,CAACC,KAAD,EAAW;IAAA;;IAAA,oCAK0B,EAL1B;;IAAA,sCAkBS,WAlBT;;IACpB,KAAKC,QAAL,GAAgBD,KAAhB;EACD;;EAKOE,eAAe,GAAS;IAC9B,KAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;EACD;;EAESK,MAAM,CAACC,SAAD,EAAqB;IACnC,IAAI,KAAKN,QAAL,KAAkBM,SAAtB,EAAiC;MAC/B,KAAKN,QAAL,GAAgBM,SAAhB;MACA,KAAKL,eAAL;IACD;EACF;;EAIiB,IAAPM,OAAO,GAAM;IACtB,OAAO,KAAKP,QAAZ;EACD;;EAEMQ,WAAW,CAACJ,EAAD,EAAyB;IACzC,KAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;IACA,OAAO,MAAM;MACX,KAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;IACD,CAFD;EAGD;;EAEMQ,YAAY,GAAS;IAC1B,KAAKV,UAAL,GAAkB,EAAlB;EACD;;AAlCuD"}
+{"version":3,"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf","dispose"],"sources":["RNSkReadonlyValue.ts"],"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    if (this._current !== nextValue) {\n      this._current = nextValue;\n      this.notifyListeners();\n    }\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 dispose(): void {\n    this._listeners = [];\n  }\n}\n"],"mappings":";;AAEA,OAAO,MAAMA,iBAAN,CAAmD;EACxDC,WAAW,CAACC,KAAD,EAAW;IAAA;;IAAA,oCAK0B,EAL1B;;IAAA,sCAkBS,WAlBT;;IACpB,KAAKC,QAAL,GAAgBD,KAAhB;EACD;;EAKOE,eAAe,GAAS;IAC9B,KAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;EACD;;EAESK,MAAM,CAACC,SAAD,EAAqB;IACnC,IAAI,KAAKN,QAAL,KAAkBM,SAAtB,EAAiC;MAC/B,KAAKN,QAAL,GAAgBM,SAAhB;MACA,KAAKL,eAAL;IACD;EACF;;EAIiB,IAAPM,OAAO,GAAM;IACtB,OAAO,KAAKP,QAAZ;EACD;;EAEMQ,WAAW,CAACJ,EAAD,EAAyB;IACzC,KAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;IACA,OAAO,MAAM;MACX,KAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;IACD,CAFD;EAGD;;EAEMQ,OAAO,GAAS;IACrB,KAAKV,UAAL,GAAkB,EAAlB;EACD;;AAlCuD"}

package/lib/module/views/SkiaBaseWebView.js

@@ -99,12 +99,17 @@ export class SkiaBaseWebView extends React.Component {
   }
 
   componentWillUnmount() {
-    var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
-
     this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    cancelAnimationFrame(this.requestId); // eslint-disable-next-line max-len
+    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
+    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    // We delete the context, only if the context has been intialized
+
+    if (this._surface) {
+      var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
 
-    (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
+      (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
+    }
   }
   /**
    * Creates a snapshot from the canvas in the surface

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

@@ -1 +1 @@
-{"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\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.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    this._canvasRef.current\n      ?.getContext(\"webgl2\")\n      ?.getExtension(\"WEBGL_lose_context\")\n      ?.loseContext();\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    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\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 (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\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  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  private onStart = this.createTouchHandler(TouchType.Start);\n  private onActive = this.createTouchHandler(TouchType.Active);\n  private onCancel = this.createTouchHandler(TouchType.Cancelled);\n  private onEnd = this.createTouchHandler(TouchType.End);\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.onStart}\n          onPointerMove={this.onActive}\n          onPointerUp={this.onEnd}\n          onPointerCancel={this.onCancel}\n          onPointerLeave={this.onEnd}\n          onPointerOut={this.onEnd}\n        />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\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.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\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    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\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 (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\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  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  private onStart = this.createTouchHandler(TouchType.Start);\n  private onActive = this.createTouchHandler(TouchType.Active);\n  private onCancel = this.createTouchHandler(TouchType.Cancelled);\n  private onEnd = this.createTouchHandler(TouchType.End);\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.onStart}\n          onPointerMove={this.onActive}\n          onPointerUp={this.onEnd}\n          onPointerCancel={this.onCancel}\n          onPointerLeave={this.onEnd}\n          onPointerOut={this.onEnd}\n        />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AAMA,SAASC,YAAT,QAA6B,0BAA7B;AACA,SAASC,QAAT,QAAyB,aAAzB;AAGA,SAASC,SAAT,QAA0B,SAA1B;AAEA,MAAMC,EAAE,GAAGF,QAAQ,CAACG,UAApB;AAEA,OAAO,MAAeC,eAAf,SAEGN,KAAK,CAACO,SAFT,CAE2B;EAChCC,WAAW,CAACC,KAAD,EAAgB;IAAA;;IACzB,MAAMA,KAAN;;IADyB,kCAKa,IALb;;IAAA,0CAMmB,EANnB;;IAAA,kCAOU,EAPV;;IAAA,iCAQQ,IARR;;IAAA,iDASNT,KAAK,CAACU,SAAN,EATM;;IAAA;;IAAA,yCAWD,CAXC;;IAAA,mCAYP,CAZO;;IAAA,+BAcT,CAdS;;IAAA,gCAeR,CAfQ;;IAAA,iCAsKT,KAAKC,kBAAL,CAAwBR,SAAS,CAACS,KAAlC,CAtKS;;IAAA,kCAuKR,KAAKD,kBAAL,CAAwBR,SAAS,CAACU,MAAlC,CAvKQ;;IAAA,kCAwKR,KAAKF,kBAAL,CAAwBR,SAAS,CAACW,SAAlC,CAxKQ;;IAAA,+BAyKX,KAAKH,kBAAL,CAAwBR,SAAS,CAACY,GAAlC,CAzKW;;IAAA,kCA0KR,KAAKC,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,CA1KQ;;IAEzB,KAAKC,KAAL,kBAAaT,KAAK,CAACU,IAAnB,qDAA2B,SAA3B;EACD;;EAcOC,cAAc,GAAG;IACvB,KAAKC,gBAAL,CAAsBC,OAAtB,CAA+BC,CAAD,IAAOA,CAAC,EAAtC;;IACA,KAAKF,gBAAL,GAAwB,EAAxB;EACD;;EAEOL,aAAa,CAACQ,GAAD,EAAyB;IAC5C,MAAM;MAAEC;IAAF,IAAgBC,MAAtB,CAD4C,CAE5C;;IACA,MAAMC,MAAM,GAAG,KAAKC,UAAL,CAAgBC,OAA/B;;IACA,IAAIF,MAAJ,EAAY;MACV,KAAKG,KAAL,GAAaH,MAAM,CAACI,WAApB;MACA,KAAKC,MAAL,GAAcL,MAAM,CAACM,YAArB;MACAN,MAAM,CAACG,KAAP,GAAe,KAAKA,KAAL,GAAa1B,EAA5B;MACAuB,MAAM,CAACK,MAAP,GAAgB,KAAKA,MAAL,GAAc5B,EAA9B;MACA,MAAM8B,OAAO,GAAGT,SAAS,CAACU,sBAAV,CAAiCR,MAAjC,CAAhB;;MACA,IAAI,CAACO,OAAL,EAAc;QACZ,MAAM,IAAIE,KAAJ,CAAU,0BAAV,CAAN;MACD;;MACD,KAAKC,QAAL,GAAgB,IAAIpC,YAAJ,CAAiBwB,SAAjB,EAA4BS,OAA5B,CAAhB;MACA,KAAKI,OAAL,GAAe,KAAKD,QAAL,CAAcE,SAAd,EAAf;MACA,KAAKC,MAAL;IACD,CAhB2C,CAiB5C;;;IACA,IAAI,KAAK/B,KAAL,CAAWgC,QAAf,EAAyB;MACvB,KAAKhC,KAAL,CAAWgC,QAAX,CAAoBjB,GAApB;IACD;EACF;;EAESkB,OAAO,GAAG;IAClB,OAAO;MAAEZ,KAAK,EAAE,KAAKA,KAAd;MAAqBE,MAAM,EAAE,KAAKA;IAAlC,CAAP;EACD;;EAEDW,iBAAiB,GAAG;IAClB;IACA,KAAKC,IAAL;EACD;;EAEDC,kBAAkB,GAAG;IACnB,KAAKL,MAAL;EACD;;EAEDM,oBAAoB,GAAG;IACrB,KAAK1B,cAAL;IACA2B,oBAAoB,CAAC,KAAKC,SAAN,CAApB,CAFqB,CAGrB;IACA;IACA;IACA;;IACA,IAAI,KAAKX,QAAT,EAAmB;MAAA;;MACjB,8BAAKT,UAAL,CAAgBC,OAAhB,0GACIoB,UADJ,CACe,QADf,6GAEIC,YAFJ,CAEiB,oBAFjB,mFAGIC,WAHJ;IAID;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSC,iBAAiB,CAACC,IAAD,EAAgB;IAAA;;IACtC,KAAKf,OAAL,CAAcgB,KAAd,CAAoB7B,SAAS,CAAC8B,WAA9B;;IACA,KAAKC,cAAL,CAAoB,KAAKlB,OAAzB,EAAmC,EAAnC;IACA,uBAAKD,QAAL,kEAAeoB,GAAf,CAAmBC,KAAnB;IACA,0BAAO,KAAKrB,QAAZ,oDAAO,gBAAee,iBAAf,CAAiCC,IAAjC,CAAP;EACD;EAED;AACF;AACA;;;EAME;AACF;AACA;EACUT,IAAI,GAAG;IACb,IAAI,KAAK1B,KAAL,KAAe,YAAf,IAA+B,KAAKyC,eAAL,GAAuB,CAA1D,EAA6D;MAC3D,KAAKA,eAAL,GAAuB,CAAvB;;MACA,IAAI,KAAKrB,OAAT,EAAkB;QAAA;;QAChB,MAAMsB,OAAO,GAAG,CAAC,GAAG,KAAKC,QAAT,CAAhB;QACA,KAAKA,QAAL,GAAgB,EAAhB;QACA,MAAMlC,MAAM,GAAG,KAAKW,OAApB;QACAX,MAAM,CAAC2B,KAAP,CAAaQ,YAAY,CAACC,EAAb,CAAgB,CAAhB,EAAmB,CAAnB,EAAsB,CAAtB,EAAyB,CAAzB,CAAb;QACApC,MAAM,CAACqC,IAAP;QACArC,MAAM,CAACsC,KAAP,CAAa7D,EAAb,EAAiBA,EAAjB;QACA,KAAKoD,cAAL,CAAoB7B,MAApB,EAA4BiC,OAA5B;QACAjC,MAAM,CAACuC,OAAP;QACA,wBAAK7B,QAAL,oEAAeoB,GAAf,CAAmBC,KAAnB;MACD;IACF;;IACD,KAAKV,SAAL,GAAiBmB,qBAAqB,CAAC,KAAKvB,IAAL,CAAU3B,IAAV,CAAe,IAAf,CAAD,CAAtC;EACD;;EAEMuB,MAAM,GAAG;IACd,KAAKmB,eAAL;EACD;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;EACSS,WAAW,CAACjD,IAAD,EAAiB;IACjC,KAAKD,KAAL,GAAaC,IAAb;IACA,KAAKyB,IAAL;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSyB,cAAc,CAACC,OAAD,EAAgC;IACnD;IACA,KAAKlD,cAAL,GAFmD,CAGnD;;IACAkD,OAAO,CAAChD,OAAR,CAAiBiD,CAAD,IAAO;MACrB,KAAKlD,gBAAL,CAAsBmD,IAAtB,CACED,CAAC,CAACE,WAAF,CAAc,MAAM;QAClB,KAAKjC,MAAL;MACD,CAFD,CADF;IAKD,CAND;EAOD;;EAEOkC,gBAAgB,CAAClD,GAAD,EAAoBmD,SAApB,EAA0C;IAChE,KAAKd,QAAL,CAAcW,IAAd,CAAmB;MACjBI,EAAE,EAAEpD,GAAG,CAACqD,SADS;MAEjBC,CAAC,EAAEtD,GAAG,CAACuD,OAAJ,GAAcvD,GAAG,CAACwD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCC,IAFtC;MAGjBC,CAAC,EAAE3D,GAAG,CAAC4D,OAAJ,GAAc5D,GAAG,CAACwD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCI,GAHtC;MAIjBC,KAAK,EAAE9D,GAAG,CAAC+D,QAJM;MAKjBC,IAAI,EAAEb,SALW;MAMjBc,SAAS,EAAEC,IAAI,CAACC,GAAL;IANM,CAAnB;;IAQA,KAAKnD,MAAL;EACD;;EAED7B,kBAAkB,CAACgE,SAAD,EAAuB;IACvC,OAAQnD,GAAD,IAAuB,KAAKkD,gBAAL,CAAsBlD,GAAtB,EAA2BmD,SAA3B,CAA9B;EACD;;EAQDiB,MAAM,GAAG;IACP,MAAM;MAAEzE,IAAF;MAAQ0E,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKrF,KAAnD;IACA,oBACE,oBAAC,QAAD,CAAU,IAAV,eAAmBqF,SAAnB;MAA8B,QAAQ,EAAE,KAAKrD;IAA7C,iBACE;MACE,GAAG,EAAE,KAAKb,UADZ;MAEE,KAAK,EAAE;QAAEmE,OAAO,EAAE,MAAX;QAAmBC,IAAI,EAAE;MAAzB,CAFT;MAGE,aAAa,EAAE,KAAKC,OAHtB;MAIE,aAAa,EAAE,KAAKC,QAJtB;MAKE,WAAW,EAAE,KAAKC,KALpB;MAME,eAAe,EAAE,KAAKC,QANxB;MAOE,cAAc,EAAE,KAAKD,KAPvB;MAQE,YAAY,EAAE,KAAKA;IARrB,EADF,CADF;EAcD;;AA7L+B"}

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

@@ -1,5 +1,6 @@
 import { Skia } from "../skia";
 import { JsiDrawingContext } from "../dom/types/DrawingContext";
+import { isValue } from "../renderer/processors/Animations/Animations";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 export class SkiaDomView extends SkiaBaseWebView {
   constructor(props) {
@@ -16,10 +17,18 @@ export class SkiaDomView extends SkiaBaseWebView {
         width,
         height
       } = this.getSize();
-      this.props.onSize.current = {
-        width,
-        height
-      };
+
+      if (isValue(this.props.onSize)) {
+        this.props.onSize.current = {
+          width,
+          height
+        };
+      } else {
+        this.props.onSize.value = {
+          width,
+          height
+        };
+      }
     }
 
     if (this.props.root) {

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

@@ -1 +1 @@
-{"version":3,"names":["Skia","JsiDrawingContext","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.current = { width, height };\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,SAArB;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,OAAO,MAAMC,WAAN,SAA0BD,eAA1B,CAA4D;EACjEE,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;MACA,KAAKR,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;QAAEH,KAAF;QAASC;MAAT,CAA5B;IACD;;IACD,IAAI,KAAKP,KAAL,CAAWU,IAAf,EAAqB;MACnB,MAAMC,GAAG,GAAG,IAAIf,iBAAJ,CAAsBD,IAAtB,EAA4BO,MAA5B,CAAZ;MACA,KAAKF,KAAL,CAAWU,IAAX,CAAgBE,MAAhB,CAAuBD,GAAvB;IACD;EACF;;AAjBgE"}
+{"version":3,"names":["Skia","JsiDrawingContext","isValue","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","value","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\nimport { isValue } from \"../renderer/processors/Animations/Animations\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      if (isValue(this.props.onSize)) {\n        this.props.onSize.current = { width, height };\n      } else {\n        this.props.onSize.value = { width, height };\n      }\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,SAArB;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,OAAT,QAAwB,8CAAxB;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,OAAO,MAAMC,WAAN,SAA0BD,eAA1B,CAA4D;EACjEE,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;;MACA,IAAIZ,OAAO,CAAC,KAAKI,KAAL,CAAWK,MAAZ,CAAX,EAAgC;QAC9B,KAAKL,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;UAAEH,KAAF;UAASC;QAAT,CAA5B;MACD,CAFD,MAEO;QACL,KAAKP,KAAL,CAAWK,MAAX,CAAkBK,KAAlB,GAA0B;UAAEJ,KAAF;UAASC;QAAT,CAA1B;MACD;IACF;;IACD,IAAI,KAAKP,KAAL,CAAWW,IAAf,EAAqB;MACnB,MAAMC,GAAG,GAAG,IAAIjB,iBAAJ,CAAsBD,IAAtB,EAA4BQ,MAA5B,CAAZ;MACA,KAAKF,KAAL,CAAWW,IAAX,CAAgBE,MAAhB,CAAuBD,GAAvB;IACD;EACF;;AArBgE"}

package/lib/module/views/types.d.ts

@@ -2,6 +2,7 @@ import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
@@ -70,7 +71,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * Pass an animated value to the onSize property to get updates when
      * the Skia view is resized.
      */
-    onSize?: SkiaMutableValue<SkSize>;
+    onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
 }
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**

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

@@ -1 +1 @@
-{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { GroupProps, RenderNode } from \"../dom/types\";\nimport type {\n  SkCanvas,\n  SkImage,\n  SkPicture,\n  SkRect,\n  SkSize,\n} from \"../skia/types\";\nimport type { SkiaMutableValue, SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SkiaMutableValue<SkSize>;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewProps extends SkiaBaseViewProps {\n  root?: RenderNode<GroupProps>;\n  onTouch?: TouchHandler;\n}\n"],"mappings":"AAmBA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}
+{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { GroupProps, RenderNode } from \"../dom/types\";\nimport type {\n  SkCanvas,\n  SkImage,\n  SkPicture,\n  SkRect,\n  SkSize,\n} from \"../skia/types\";\nimport type { SkiaMutableValue, SkiaValue } from \"../values\";\nimport type { SharedValueType } from \"../renderer/processors/Animations/Animations\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewProps extends SkiaBaseViewProps {\n  root?: RenderNode<GroupProps>;\n  onTouch?: TouchHandler;\n}\n"],"mappings":"AAoBA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}

package/lib/typescript/src/dom/nodes/drawings/ImageSVG.d.ts

@@ -1,8 +1,13 @@
 import type { DrawingContext, ImageSVGProps } from "../../types";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
-export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
+export declare class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, Pick<ImageSVGProps, "x" | "y" | "width" | "height">> {
     constructor(ctx: NodeContext, props: ImageSVGProps);
-    deriveProps(): null;
+    deriveProps(): import("../../..").SkRect | {
+        x: number | undefined;
+        y: number | undefined;
+        width: number | undefined;
+        height: number | undefined;
+    };
     draw({ canvas }: DrawingContext): void;
 }

package/lib/typescript/src/dom/types/Drawings.d.ts

@@ -50,9 +50,14 @@ export interface VerticesProps extends DrawingNodeProps {
     blendMode?: SkEnum<typeof BlendMode>;
     indices?: number[];
 }
-export declare type ImageSVGProps = RectDef & {
+export interface ImageSVGProps extends DrawingNodeProps {
     svg: SkSVG | null;
-} & DrawingNodeProps;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    rect?: SkRect;
+}
 export interface PictureProps extends DrawingNodeProps {
     picture: SkPicture;
 }

package/lib/typescript/src/renderer/processors/math/Math.d.ts

@@ -13,3 +13,4 @@ export declare const mix: (value: number, x: number, y: number) => number;
     clamp(101, 0, 100); // 100
   */
 export declare const clamp: (value: number, lowerBound: number, upperBound: number) => number;
+export declare const saturate: (value: number) => number;

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

@@ -1,3 +1,3 @@
-import type { SkData, DataSourceParam, JsiDisposable } from "../types";
-export declare const useRawData: <T extends JsiDisposable>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined) => T | null;
+import type { SkData, DataSourceParam, BaseSkJSIInstance } from "../types";
+export declare const useRawData: <T extends BaseSkJSIInstance>(source: DataSourceParam, factory: (data: SkData) => T | null, 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/types/Data/Data.d.ts

@@ -1,5 +1,5 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkData = SkJSIInstance<"Data"> & JsiDisposable;
+import type { SkJSIInstance } from "../JsiInstance";
+export declare type SkData = SkJSIInstance<"Data">;
 declare type RNModule = number;
 declare type ESModule = {
     __esModule: true;

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

@@ -1,5 +1,5 @@
 import type { SkMatrix } from "../Matrix";
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 export declare enum FilterMode {
@@ -16,7 +16,7 @@ export declare enum ImageFormat {
     PNG = 4,
     WEBP = 6
 }
-export interface SkImage extends SkJSIInstance<"Image">, JsiDisposable {
+export interface SkImage extends SkJSIInstance<"Image"> {
     /**
      * Returns the possibly scaled height of the image.
      */

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

@@ -1,6 +1,6 @@
-export interface SkJSIInstance<T extends string> {
-    __typename__: T;
-}
-export interface JsiDisposable {
+export interface BaseSkJSIInstance {
     dispose: () => void;
 }
+export interface SkJSIInstance<T extends string> extends BaseSkJSIInstance {
+    __typename__: T;
+}

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

@@ -1,5 +1,5 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export interface SkSVG extends SkJSIInstance<"SVG">, JsiDisposable {
+import type { SkJSIInstance } from "../JsiInstance";
+export interface SkSVG extends SkJSIInstance<"SVG"> {
     width(): number;
     height(): number;
 }

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

@@ -1,2 +1,2 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkTypeface = SkJSIInstance<"Typeface"> & JsiDisposable;
+import type { SkJSIInstance } from "../JsiInstance";
+export declare type SkTypeface = SkJSIInstance<"Typeface">;

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

@@ -11,6 +11,7 @@ export declare abstract class BaseHostObject<T, N extends string> extends Host i
     readonly __typename__: N;
     ref: T;
     constructor(CanvasKit: CanvasKit, ref: T, typename: N);
+    abstract dispose: () => void;
 }
 export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
     static fromValue<T>(value: SkJSIInstance<string>): T;

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

@@ -3,6 +3,7 @@ import type { BlendMode, ClipOp, FilterMode, MipmapMode, PointMode, SaveLayerFla
 import { HostObject } from "./Host";
 export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements SkCanvas {
     constructor(CanvasKit: CanvasKit, ref: Canvas);
+    dispose: () => void;
     drawRect(rect: SkRect, paint: SkPaint): void;
     drawImage(image: SkImage, x: number, y: number, paint?: SkPaint): void;
     drawImageRect(img: SkImage, src: SkRect, dest: SkRect, paint: SkPaint, fastSample?: boolean): void;

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

@@ -3,4 +3,5 @@ import type { SkColorFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkColorFilter extends HostObject<ColorFilter, "ColorFilter"> implements SkColorFilter {
     constructor(CanvasKit: CanvasKit, ref: ColorFilter);
+    dispose: () => void;
 }

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

@@ -9,4 +9,5 @@ export declare class JsiSkContourMeasure extends HostObject<ContourMeasure, "Con
     getSegment(startD: number, stopD: number, startWithMoveTo: boolean): JsiSkPath;
     isClosed(): boolean;
     length(): number;
+    dispose: () => void;
 }

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

@@ -5,4 +5,5 @@ import { JsiSkContourMeasure } from "./JsiSkContourMeasure";
 export declare class JsiSkContourMeasureIter extends HostObject<ContourMeasureIter, "ContourMeasureIter"> implements SkContourMeasureIter {
     constructor(CanvasKit: CanvasKit, ref: ContourMeasureIter);
     next(): JsiSkContourMeasure | null;
+    dispose: () => void;
 }

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

@@ -4,6 +4,6 @@ import { HostObject } from "./Host";
 declare type Data = ArrayBuffer;
 export declare class JsiSkData extends HostObject<Data, "Data"> implements SkData {
     constructor(CanvasKit: CanvasKit, ref: Data);
-    dispose(): void;
+    dispose: () => void;
 }
 export {};

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

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

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

@@ -10,6 +10,6 @@ export declare class JsiSkImage extends HostObject<Image, "Image"> implements Sk
     makeShaderCubic(tx: TileMode, ty: TileMode, B: number, C: number, localMatrix?: SkMatrix): SkShader;
     encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array;
     encodeToBase64(fmt?: ImageFormat, quality?: number): string;
-    dispose(): void;
+    dispose: () => void;
     makeNonTextureImage(): SkImage;
 }

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

@@ -3,4 +3,5 @@ import type { SkImageFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkImageFilter extends HostObject<ImageFilter, "ImageFilter"> implements SkImageFilter {
     constructor(CanvasKit: CanvasKit, ref: ImageFilter);
+    dispose: () => void;
 }

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

@@ -3,4 +3,5 @@ import type { SkMaskFilter } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMaskFilter extends HostObject<MaskFilter, "MaskFilter"> implements SkMaskFilter {
     constructor(CanvasKit: CanvasKit, ref: MaskFilter);
+    dispose: () => void;
 }

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

@@ -3,6 +3,7 @@ import type { SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
+    dispose: () => void;
     concat(matrix: SkMatrix): this;
     translate(x: number, y: number): this;
     scale(x: number, y?: number): this;

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

@@ -3,6 +3,7 @@ import type { StrokeJoin, BlendMode, SkColor, SkColorFilter, SkImageFilter, SkPa
 import { HostObject } from "./Host";
 export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     constructor(CanvasKit: CanvasKit, ref: Paint);
+    dispose: () => void;
     copy(): JsiSkPaint;
     reset(): void;
     getAlphaf(): number;

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

@@ -5,6 +5,7 @@ import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     constructor(CanvasKit: CanvasKit, ref: Path);
+    dispose: () => void;
     addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): this;
     addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): this;
     addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): this;

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

@@ -3,4 +3,5 @@ import type { SkPathEffect } from "../types/PathEffect";
 import { HostObject } from "./Host";
 export declare class JsiSkPathEffect extends HostObject<PathEffect, "PathEffect"> implements SkPathEffect {
     constructor(CanvasKit: CanvasKit, ref: PathEffect);
+    dispose: () => void;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkPicture extends HostObject<Picture, "Picture"> implements SkPicture {
     constructor(CanvasKit: CanvasKit, ref: Picture);
+    dispose: () => void;
     makeShader(tmx: TileMode, tmy: TileMode, mode: FilterMode, localMatrix?: SkMatrix, tileRect?: SkRect): JsiSkShader;
     serialize(): Uint8Array | null;
 }

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

@@ -6,6 +6,7 @@ import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkPicture } from "./JsiSkPicture";
 export declare class JsiSkPictureRecorder extends HostObject<PictureRecorder, "PictureRecorder"> implements SkPictureRecorder {
     constructor(CanvasKit: CanvasKit, ref: PictureRecorder);
+    dispose: () => void;
     beginRecording(bounds: SkRect): JsiSkCanvas;
     finishRecordingAsPicture(): JsiSkPicture;
 }

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

@@ -4,6 +4,7 @@ import { BaseHostObject } from "./Host";
 export declare class JsiSkPoint extends BaseHostObject<Point, "Point"> implements SkPoint {
     static fromValue(point: SkPoint): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Point);
+    dispose: () => void;
     get x(): number;
     get y(): number;
 }

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

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

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

@@ -4,4 +4,5 @@ import { HostObject } from "./Host";
 export declare type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
+    dispose: () => void;
 }

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

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

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

@@ -6,6 +6,7 @@ import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkRuntimeEffect extends HostObject<RuntimeEffect, "RuntimeEffect"> implements SkRuntimeEffect {
     private sksl;
     constructor(CanvasKit: CanvasKit, ref: RuntimeEffect, sksl: string);
+    dispose: () => void;
     source(): string;
     makeShader(uniforms: number[], localMatrix?: SkMatrix): JsiSkShader;
     makeShaderWithChildren(uniforms: number[], children?: SkShader[], localMatrix?: SkMatrix): JsiSkShader;

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

@@ -3,4 +3,5 @@ import type { SkShader } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkShader extends HostObject<Shader, "Shader"> implements SkShader {
     constructor(CanvasKit: CanvasKit, ref: Shader);
+    dispose: () => void;
 }

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

@@ -3,6 +3,7 @@ import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
     constructor(CanvasKit: CanvasKit, ref: Surface);
+    dispose: () => void;
     flush(): void;
     getCanvas(): SkCanvas;
     makeImageSnapshot(bounds?: SkRect): SkImage;

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

@@ -3,4 +3,5 @@ import type { SkTextBlob } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkTextBlob extends HostObject<TextBlob, "TextBlob"> implements SkTextBlob {
     constructor(CanvasKit: CanvasKit, ref: TextBlob);
+    dispose: () => void;
 }

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

@@ -5,5 +5,5 @@ export declare class JsiSkTypeface extends HostObject<Typeface, "Typeface"> impl
     constructor(CanvasKit: CanvasKit, ref: Typeface);
     get bold(): boolean;
     get italic(): boolean;
-    dispose(): void;
+    dispose: () => void;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkVertices extends HostObject<Vertices, "Vertices"> implements SkVertices {
     constructor(CanvasKit: CanvasKit, ref: Vertices);
+    dispose: () => void;
     bounds(): JsiSkRect;
     uniqueID(): number;
 }

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

@@ -11,7 +11,7 @@ export interface SkiaValue<T = number> {
     /**
      * Invalidates the value. Has different meaning depending on the type of the value.
      */
-    __invalidate: () => void;
+    dispose: () => void;
     /**
      * Field to make typechecking easier
      */

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

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