@shopify/react-native-skia 2.2.9 → 2.2.11

package/lib/module/views/SkiaBaseWebView.js

@@ -1,136 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/* global HTMLCanvasElement */
-import React from "react";
-import { JsiSkSurface } from "../skia/web/JsiSkSurface";
-import { Platform } from "../Platform";
-const pd = Platform.PixelRatio;
-export class SkiaBaseWebView extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "_surface", null);
-    _defineProperty(this, "_unsubscriptions", []);
-    _defineProperty(this, "_canvas", null);
-    _defineProperty(this, "_canvasRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "_redrawRequests", 0);
-    _defineProperty(this, "requestId", 0);
-    _defineProperty(this, "width", 0);
-    _defineProperty(this, "height", 0);
-    _defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
-  }
-  unsubscribeAll() {
-    this._unsubscriptions.forEach(u => u());
-    this._unsubscriptions = [];
-  }
-  onLayoutEvent(evt) {
-    const {
-      CanvasKit
-    } = global;
-    // Reset canvas / surface on layout change
-    const canvas = this._canvasRef.current;
-    if (canvas) {
-      this.width = canvas.clientWidth;
-      this.height = canvas.clientHeight;
-      canvas.width = this.width * pd;
-      canvas.height = this.height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
-      const ctx = canvas.getContext("webgl2");
-      if (ctx) {
-        ctx.drawingBufferColorSpace = "display-p3";
-      }
-      if (!surface) {
-        throw new Error("Could not create surface");
-      }
-      this._surface = new JsiSkSurface(CanvasKit, surface);
-      this._canvas = this._surface.getCanvas();
-      this.redraw();
-    }
-    // Call onLayout callback if it exists
-    if (this.props.onLayout) {
-      this.props.onLayout(evt);
-    }
-  }
-  getSize() {
-    return {
-      width: this.width,
-      height: this.height
-    };
-  }
-  componentDidMount() {
-    // Start render loop
-    this.tick();
-  }
-  componentDidUpdate() {
-    this.redraw();
-  }
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    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$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr === void 0 || _this$_canvasRef$curr.loseContext();
-    }
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  makeImageSnapshot(rect) {
-    var _this$_surface, _this$_surface2;
-    this._canvas.clear(CanvasKit.TRANSPARENT);
-    this.renderInCanvas(this._canvas);
-    (_this$_surface = this._surface) === null || _this$_surface === void 0 || _this$_surface.ref.flush();
-    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
-  }
-
-  /**
-   * Override to render
-   */
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  tick() {
-    if (this._redrawRequests > 0) {
-      this._redrawRequests = 0;
-      if (this._canvas) {
-        var _this$_surface3;
-        const canvas = this._canvas;
-        canvas.clear(Float32Array.of(0, 0, 0, 0));
-        canvas.save();
-        canvas.scale(pd, pd);
-        this.renderInCanvas(canvas);
-        canvas.restore();
-        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 || _this$_surface3.ref.flush();
-      }
-    }
-    this.requestId = requestAnimationFrame(this.tick.bind(this));
-  }
-  redraw() {
-    this._redrawRequests++;
-  }
-  render() {
-    const {
-      debug = false,
-      ...viewProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
-      onLayout: this.onLayout
-    }), /*#__PURE__*/React.createElement("canvas", {
-      ref: this._canvasRef,
-      style: {
-        display: "flex",
-        flex: 1
-      }
-    }));
-  }
-}
-//# sourceMappingURL=SkiaBaseWebView.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["React","JsiSkSurface","Platform","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_defineProperty","createRef","onLayoutEvent","bind","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } 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  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\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      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\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  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(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\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);\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  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,aAAa;AAItC,MAAMC,EAAE,GAAGD,QAAQ,CAACE,UAAU;AAE9B,OAAO,MAAeC,eAAe,SAE3BL,KAAK,CAACM,SAAS,CAAS;EAChCC,WAAWA,CAACC,KAAa,EAAE;IACzB,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,mBAGyB,IAAI;IAAAA,eAAA,2BACE,EAAE;IAAAA,eAAA,kBACb,IAAI;IAAAA,eAAA,kCAClBT,KAAK,CAACU,SAAS,CAAoB,CAAC;IAAAD,eAAA,0BAC/B,CAAC;IAAAA,eAAA,oBACP,CAAC;IAAAA,eAAA,gBAEH,CAAC;IAAAA,eAAA,iBACA,CAAC;IAAAA,eAAA,mBAsGD,IAAI,CAACE,aAAa,CAACC,IAAI,CAAC,IAAI,CAAC;EAhHhD;EAYQC,cAAcA,CAAA,EAAG;IACvB,IAAI,CAACC,gBAAgB,CAACC,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAAC,CAAC,CAAC;IACzC,IAAI,CAACF,gBAAgB,GAAG,EAAE;EAC5B;EAEQH,aAAaA,CAACM,GAAsB,EAAE;IAC5C,MAAM;MAAEC;IAAU,CAAC,GAAGC,MAAM;IAC5B;IACA,MAAMC,MAAM,GAAG,IAAI,CAACC,UAAU,CAACC,OAAO;IACtC,IAAIF,MAAM,EAAE;MACV,IAAI,CAACG,KAAK,GAAGH,MAAM,CAACI,WAAW;MAC/B,IAAI,CAACC,MAAM,GAAGL,MAAM,CAACM,YAAY;MACjCN,MAAM,CAACG,KAAK,GAAG,IAAI,CAACA,KAAK,GAAGpB,EAAE;MAC9BiB,MAAM,CAACK,MAAM,GAAG,IAAI,CAACA,MAAM,GAAGtB,EAAE;MAChC,MAAMwB,OAAO,GAAGT,SAAS,CAACU,sBAAsB,CAACR,MAAM,CAAC;MACxD,MAAMS,GAAG,GAAGT,MAAM,CAACU,UAAU,CAAC,QAAQ,CAAC;MACvC,IAAID,GAAG,EAAE;QACPA,GAAG,CAACE,uBAAuB,GAAG,YAAY;MAC5C;MACA,IAAI,CAACJ,OAAO,EAAE;QACZ,MAAM,IAAIK,KAAK,CAAC,0BAA0B,CAAC;MAC7C;MACA,IAAI,CAACC,QAAQ,GAAG,IAAIhC,YAAY,CAACiB,SAAS,EAAES,OAAO,CAAC;MACpD,IAAI,CAACO,OAAO,GAAG,IAAI,CAACD,QAAQ,CAACE,SAAS,CAAC,CAAC;MACxC,IAAI,CAACC,MAAM,CAAC,CAAC;IACf;IACA;IACA,IAAI,IAAI,CAAC5B,KAAK,CAAC6B,QAAQ,EAAE;MACvB,IAAI,CAAC7B,KAAK,CAAC6B,QAAQ,CAACpB,GAAG,CAAC;IAC1B;EACF;EAEAqB,OAAOA,CAAA,EAAG;IACR,OAAO;MAAEf,KAAK,EAAE,IAAI,CAACA,KAAK;MAAEE,MAAM,EAAE,IAAI,CAACA;IAAO,CAAC;EACnD;EAEAc,iBAAiBA,CAAA,EAAG;IAClB;IACA,IAAI,CAACC,IAAI,CAAC,CAAC;EACb;EAEAC,kBAAkBA,CAAA,EAAG;IACnB,IAAI,CAACL,MAAM,CAAC,CAAC;EACf;EAEAM,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAAC7B,cAAc,CAAC,CAAC;IACrB8B,oBAAoB,CAAC,IAAI,CAACC,SAAS,CAAC;IACpC;IACA;IACA;IACA;IACA,IAAI,IAAI,CAACX,QAAQ,EAAE;MAAA,IAAAY,qBAAA;MACjB,CAAAA,qBAAA,OAAI,CAACxB,UAAU,CAACC,OAAO,cAAAuB,qBAAA,gBAAAA,qBAAA,GAAvBA,qBAAA,CACIf,UAAU,CAAC,QAAQ,CAAC,cAAAe,qBAAA,gBAAAA,qBAAA,GADxBA,qBAAA,CAEIC,YAAY,CAAC,oBAAoB,CAAC,cAAAD,qBAAA,eAFtCA,qBAAA,CAGIE,WAAW,CAAC,CAAC;IACnB;EACF;;EAEA;AACF;AACA;AACA;AACA;EACSC,iBAAiBA,CAACC,IAAa,EAAE;IAAA,IAAAC,cAAA,EAAAC,eAAA;IACtC,IAAI,CAACjB,OAAO,CAAEkB,KAAK,CAAClC,SAAS,CAACmC,WAAW,CAAC;IAC1C,IAAI,CAACC,cAAc,CAAC,IAAI,CAACpB,OAAQ,CAAC;IAClC,CAAAgB,cAAA,OAAI,CAACjB,QAAQ,cAAAiB,cAAA,eAAbA,cAAA,CAAeK,GAAG,CAACC,KAAK,CAAC,CAAC;IAC1B,QAAAL,eAAA,GAAO,IAAI,CAAClB,QAAQ,cAAAkB,eAAA,uBAAbA,eAAA,CAAeH,iBAAiB,CAACC,IAAI,CAAC;EAC/C;;EAEA;AACF;AACA;;EAGE;AACF;AACA;EACUT,IAAIA,CAAA,EAAG;IACb,IAAI,IAAI,CAACiB,eAAe,GAAG,CAAC,EAAE;MAC5B,IAAI,CAACA,eAAe,GAAG,CAAC;MACxB,IAAI,IAAI,CAACvB,OAAO,EAAE;QAAA,IAAAwB,eAAA;QAChB,MAAMtC,MAAM,GAAG,IAAI,CAACc,OAAQ;QAC5Bd,MAAM,CAACgC,KAAK,CAACO,YAAY,CAACC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACzCxC,MAAM,CAACyC,IAAI,CAAC,CAAC;QACbzC,MAAM,CAAC0C,KAAK,CAAC3D,EAAE,EAAEA,EAAE,CAAC;QACpB,IAAI,CAACmD,cAAc,CAAClC,MAAM,CAAC;QAC3BA,MAAM,CAAC2C,OAAO,CAAC,CAAC;QAChB,CAAAL,eAAA,OAAI,CAACzB,QAAQ,cAAAyB,eAAA,eAAbA,eAAA,CAAeH,GAAG,CAACC,KAAK,CAAC,CAAC;MAC5B;IACF;IACA,IAAI,CAACZ,SAAS,GAAGoB,qBAAqB,CAAC,IAAI,CAACxB,IAAI,CAAC5B,IAAI,CAAC,IAAI,CAAC,CAAC;EAC9D;EAEOwB,MAAMA,CAAA,EAAG;IACd,IAAI,CAACqB,eAAe,EAAE;EACxB;EAIAQ,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK,GAAG,KAAK;MAAE,GAAGC;IAAU,CAAC,GAAG,IAAI,CAAC3D,KAAK;IAClD,oBACER,KAAA,CAAAoE,aAAA,CAAClE,QAAQ,CAACmE,IAAI,EAAAC,QAAA,KAAKH,SAAS;MAAE9B,QAAQ,EAAE,IAAI,CAACA;IAAS,iBACpDrC,KAAA,CAAAoE,aAAA;MAAQb,GAAG,EAAE,IAAI,CAAClC,UAAW;MAACkD,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,IAAI,EAAE;MAAE;IAAE,CAAE,CACvD,CAAC;EAEpB;AACF","ignoreList":[]}

package/lib/typescript/lib/commonjs/views/SkiaBaseWebView.d.ts

@@ -1,39 +0,0 @@
-export const __esModule: boolean;
-declare const SkiaBaseWebView_base: any;
-export class SkiaBaseWebView extends SkiaBaseWebView_base {
-    [x: string]: any;
-    constructor(props: any);
-    unsubscribeAll(): void;
-    _unsubscriptions: any[] | undefined;
-    onLayoutEvent(evt: any): void;
-    width: any;
-    height: any;
-    _surface: _JsiSkSurface.JsiSkSurface | undefined;
-    _canvas: import("../skia/web/JsiSkCanvas").JsiSkCanvas | undefined;
-    getSize(): {
-        width: any;
-        height: any;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect: any): import("../skia/web/JsiSkImage").JsiSkImage | undefined;
-    /**
-     * Override to render
-     */
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    tick(): void;
-    _redrawRequests: number | undefined;
-    requestId: number | undefined;
-    redraw(): void;
-    render(): any;
-}
-import _JsiSkSurface = require("../skia/web/JsiSkSurface");
-export {};

package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts

@@ -1,36 +0,0 @@
-export class SkiaBaseWebView extends React.Component<any, any, any> {
-    constructor(props: any);
-    unsubscribeAll(): void;
-    _unsubscriptions: any[] | undefined;
-    onLayoutEvent(evt: any): void;
-    width: any;
-    height: any;
-    _surface: JsiSkSurface | undefined;
-    _canvas: import("../skia/web/JsiSkCanvas").JsiSkCanvas | undefined;
-    getSize(): {
-        width: any;
-        height: any;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect: any): import("..").JsiSkImage | undefined;
-    /**
-     * Override to render
-     */
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    tick(): void;
-    _redrawRequests: number | undefined;
-    requestId: number | undefined;
-    redraw(): void;
-    render(): React.CElement<import("react-native").ViewProps, import("react-native").View>;
-}
-import React from "react";
-import { JsiSkSurface } from "../skia/web/JsiSkSurface";

package/lib/typescript/src/views/SkiaBaseWebView.d.ts

@@ -1,40 +0,0 @@
-import React from "react";
-import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaBaseViewProps } from "./types";
-export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
-    constructor(props: TProps);
-    private _surface;
-    private _unsubscriptions;
-    private _canvas;
-    private _canvasRef;
-    private _redrawRequests;
-    private requestId;
-    protected width: number;
-    protected height: number;
-    private unsubscribeAll;
-    private onLayoutEvent;
-    getSize(): {
-        width: number;
-        height: number;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
-    /**
-     * Override to render
-     */
-    protected abstract renderInCanvas(canvas: SkCanvas): void;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    private tick;
-    redraw(): void;
-    private onLayout;
-    render(): React.JSX.Element;
-}

package/src/views/SkiaBaseWebView.tsx

@@ -1,140 +0,0 @@
-/* global HTMLCanvasElement */
-import React from "react";
-import type { LayoutChangeEvent } from "react-native";
-
-import type { SkRect, SkCanvas } from "../skia/types";
-import { JsiSkSurface } from "../skia/web/JsiSkSurface";
-import { Platform } from "../Platform";
-
-import type { SkiaBaseViewProps } from "./types";
-
-const pd = Platform.PixelRatio;
-
-export abstract class SkiaBaseWebView<
-  TProps extends SkiaBaseViewProps
-> extends React.Component<TProps> {
-  constructor(props: TProps) {
-    super(props);
-  }
-
-  private _surface: JsiSkSurface | null = null;
-  private _unsubscriptions: Array<() => void> = [];
-  private _canvas: SkCanvas | null = null;
-  private _canvasRef = React.createRef<HTMLCanvasElement>();
-  private _redrawRequests = 0;
-  private requestId = 0;
-
-  protected width = 0;
-  protected height = 0;
-
-  private unsubscribeAll() {
-    this._unsubscriptions.forEach((u) => u());
-    this._unsubscriptions = [];
-  }
-
-  private onLayoutEvent(evt: LayoutChangeEvent) {
-    const { CanvasKit } = global;
-    // Reset canvas / surface on layout change
-    const canvas = this._canvasRef.current;
-    if (canvas) {
-      this.width = canvas.clientWidth;
-      this.height = canvas.clientHeight;
-      canvas.width = this.width * pd;
-      canvas.height = this.height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
-      const ctx = canvas.getContext("webgl2");
-      if (ctx) {
-        ctx.drawingBufferColorSpace = "display-p3";
-      }
-      if (!surface) {
-        throw new Error("Could not create surface");
-      }
-      this._surface = new JsiSkSurface(CanvasKit, surface);
-      this._canvas = this._surface.getCanvas();
-      this.redraw();
-    }
-    // Call onLayout callback if it exists
-    if (this.props.onLayout) {
-      this.props.onLayout(evt);
-    }
-  }
-
-  getSize() {
-    return { width: this.width, height: this.height };
-  }
-
-  componentDidMount() {
-    // Start render loop
-    this.tick();
-  }
-
-  componentDidUpdate() {
-    this.redraw();
-  }
-
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    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) {
-      this._canvasRef.current
-        ?.getContext("webgl2")
-        ?.getExtension("WEBGL_lose_context")
-        ?.loseContext();
-    }
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  public makeImageSnapshot(rect?: SkRect) {
-    this._canvas!.clear(CanvasKit.TRANSPARENT);
-    this.renderInCanvas(this._canvas!);
-    this._surface?.ref.flush();
-    return this._surface?.makeImageSnapshot(rect);
-  }
-
-  /**
-   * Override to render
-   */
-  protected abstract renderInCanvas(canvas: SkCanvas): void;
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  private tick() {
-    if (this._redrawRequests > 0) {
-      this._redrawRequests = 0;
-      if (this._canvas) {
-        const canvas = this._canvas!;
-        canvas.clear(Float32Array.of(0, 0, 0, 0));
-        canvas.save();
-        canvas.scale(pd, pd);
-        this.renderInCanvas(canvas);
-        canvas.restore();
-        this._surface?.ref.flush();
-      }
-    }
-    this.requestId = requestAnimationFrame(this.tick.bind(this));
-  }
-
-  public redraw() {
-    this._redrawRequests++;
-  }
-
-  private onLayout = this.onLayoutEvent.bind(this);
-
-  render() {
-    const { debug = false, ...viewProps } = this.props;
-    return (
-      <Platform.View {...viewProps} onLayout={this.onLayout}>
-        <canvas ref={this._canvasRef} style={{ display: "flex", flex: 1 }} />
-      </Platform.View>
-    );
-  }
-}