@shopify/react-native-skia 2.2.6 → 2.2.7

package/lib/typescript/lib/module/sksg/Container.d.ts

@@ -1,26 +1,5 @@
-export class Container {
-    constructor(Skia: any);
-    Skia: any;
-    set root(value: any);
-    get root(): any;
-    _root: any;
-    mount(): void;
-    unmounted: boolean | undefined;
-    unmount(): void;
-    drawOnCanvas(canvas: any): void;
-}
-export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
-declare class StaticContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    recording: {
-        commands: any;
-        paintPool: never[];
-        animationValues: any;
-    } | undefined;
-}
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | ReanimatedContainer;
+import { StaticContainer } from "./StaticContainer";
 declare class ReanimatedContainer extends Container {
     constructor(Skia: any, nativeId: any, onSize: any);
     nativeId: any;
@@ -32,11 +11,5 @@ declare class ReanimatedContainer extends Container {
     } | undefined;
     mapperId: any;
 }
-declare class NativeReanimatedContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    mapperId: any;
-}
+import { Container } from "./StaticContainer";
 export {};

package/lib/typescript/lib/module/sksg/Container.native.d.ts

@@ -0,0 +1,11 @@
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | NativeReanimatedContainer;
+import { StaticContainer } from "./StaticContainer";
+declare class NativeReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    mapperId: any;
+}
+import { Container } from "./StaticContainer";
+export {};

package/lib/typescript/lib/module/sksg/Reconciler.d.ts

@@ -1,42 +1,14 @@
 export class SkiaSGRoot {
     constructor(Skia: any, nativeId: number | undefined, onSize: any);
     Skia: any;
-    container: {
+    container: import("./StaticContainer").StaticContainer | {
         nativeId: any;
         onSize: any;
         redraw(): void;
         recording: {
             commands: any;
             paintPool: never[];
-            animationValues: any;
         } | undefined;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        recording: {
-            commands: any;
-            paintPool: never[];
-        } | undefined;
-        mapperId: any;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
         mapperId: any;
         Skia: any;
         root: any;

package/lib/typescript/lib/module/sksg/StaticContainer.d.ts

@@ -0,0 +1,22 @@
+export class Container {
+    constructor(Skia: any);
+    Skia: any;
+    set root(value: any);
+    get root(): any;
+    _root: any;
+    mount(): void;
+    unmounted: boolean | undefined;
+    unmount(): void;
+    drawOnCanvas(canvas: any): void;
+}
+export class StaticContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    recording: {
+        commands: any;
+        paintPool: never[];
+        animationValues: any;
+    } | undefined;
+}

package/lib/typescript/src/sksg/Container.d.ts

@@ -1,27 +1,6 @@
 import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
-import type { Node } from "./Node";
-import type { Recording } from "./Recorder/Recorder";
-import "../views/api";
-export declare abstract class Container {
-    protected Skia: Skia;
-    private _root;
-    protected recording: Recording | null;
-    protected unmounted: boolean;
-    constructor(Skia: Skia);
-    get root(): Node[];
-    set root(value: Node[]);
-    mount(): void;
-    unmount(): void;
-    drawOnCanvas(canvas: SkCanvas): void;
-    abstract redraw(): void;
-}
-declare class StaticContainer extends Container {
-    private nativeId;
-    private onSize?;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
 declare class ReanimatedContainer extends Container {
     private nativeId;
     private onSize?;
@@ -29,12 +8,5 @@ declare class ReanimatedContainer extends Container {
     constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
     redraw(): void;
 }
-declare class NativeReanimatedContainer extends Container {
-    private nativeId;
-    private onSize?;
-    private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
 export {};

package/lib/typescript/src/sksg/Container.native.d.ts

@@ -0,0 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
+import "../skia/NativeSetup";
+import "../views/api";
+declare class NativeReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | NativeReanimatedContainer;
+export {};

package/lib/typescript/src/sksg/HostConfig.d.ts

@@ -1,7 +1,7 @@
 import type { HostConfig } from "react-reconciler";
 import type { NodeType } from "../dom/types";
 import type { Node } from "./Node";
-import type { Container } from "./Container";
+import type { Container } from "./StaticContainer";
 export declare const debug: (...args: Parameters<typeof console.log>) => void;
 type Instance = Node;
 type Props = object;

package/lib/typescript/src/sksg/StaticContainer.d.ts

@@ -0,0 +1,24 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Node } from "./Node";
+import type { Recording } from "./Recorder/Recorder";
+import "../views/api";
+export declare abstract class Container {
+    protected Skia: Skia;
+    private _root;
+    protected recording: Recording | null;
+    protected unmounted: boolean;
+    constructor(Skia: Skia);
+    get root(): Node[];
+    set root(value: Node[]);
+    mount(): void;
+    unmount(): void;
+    drawOnCanvas(canvas: SkCanvas): void;
+    abstract redraw(): void;
+}
+export declare class StaticContainer extends Container {
+    private nativeId;
+    private onSize?;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/sksg/Container.native.ts

@@ -0,0 +1,86 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import Rea from "../external/reanimated/ReanimatedProxy";
+import type { Skia, SkSize } from "../skia/types";
+import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
+import type { JsiRecorder } from "../skia/types/Recorder";
+
+import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
+import { Container, StaticContainer } from "./StaticContainer";
+import { visit } from "./Recorder/Visitor";
+
+import "../skia/NativeSetup";
+import "../views/api";
+
+const nativeDrawOnscreen = (
+  nativeId: number,
+  recorder: JsiRecorder,
+  onSize?: SharedValue<SkSize>
+) => {
+  "worklet";
+
+  //const start = performance.now();
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
+  const picture = recorder.play();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+class NativeReanimatedContainer extends Container {
+  private mapperId: number | null = null;
+
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
+  }
+
+  redraw() {
+    if (this.mapperId !== null) {
+      Rea.stopMapper(this.mapperId);
+    }
+    if (this.unmounted) {
+      return;
+    }
+    const { nativeId, Skia } = this;
+    const recorder = new ReanimatedRecorder(Skia);
+    visit(recorder, this.root);
+    const sharedValues = recorder.getSharedValues();
+    const sharedRecorder = recorder.getRecorder();
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
+      "worklet";
+      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+    })(this.onSize);
+    if (sharedValues.length > 0) {
+      const { onSize } = this;
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        sharedRecorder.applyUpdates(sharedValues);
+        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+      }, sharedValues);
+    }
+  }
+}
+
+export const createContainer = (
+  Skia: Skia,
+  nativeId: number,
+  onSize?: SharedValue<SkSize>
+) => {
+  if (HAS_REANIMATED_3 && nativeId !== -1) {
+    return new NativeReanimatedContainer(Skia, nativeId, onSize);
+  } else {
+    return new StaticContainer(Skia, nativeId);
+  }
+};

package/src/sksg/Container.ts

@@ -1,19 +1,15 @@
 import type { SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Skia, SkSize } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
-import type { JsiRecorder } from "../skia/types/Recorder";
 
-import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
 import { Recorder } from "./Recorder/Recorder";
 import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
-import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
-
-import "../views/api";
+import { Container, StaticContainer } from "./StaticContainer";
 
 const drawOnscreen = (
   Skia: Skia,
@@ -43,100 +39,6 @@ const drawOnscreen = (
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 
-const nativeDrawOnscreen = (
-  nativeId: number,
-  recorder: JsiRecorder,
-  onSize?: SharedValue<SkSize>
-) => {
-  "worklet";
-
-  //const start = performance.now();
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (
-      size.width !== onSize.value.width ||
-      size.height !== onSize.value.height
-    ) {
-      onSize.value = size;
-    }
-  }
-  const picture = recorder.play();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-
-export abstract class Container {
-  private _root: Node[] = [];
-  protected recording: Recording | null = null;
-  protected unmounted = false;
-
-  constructor(protected Skia: Skia) {}
-
-  get root() {
-    return this._root;
-  }
-
-  set root(value: Node[]) {
-    this._root = value;
-  }
-
-  mount() {
-    this.unmounted = false;
-  }
-
-  unmount() {
-    this.unmounted = true;
-  }
-
-  drawOnCanvas(canvas: SkCanvas) {
-    if (!this.recording) {
-      throw new Error("No recording to draw");
-    }
-    const ctx = createDrawingContext(
-      this.Skia,
-      this.recording.paintPool,
-      canvas
-    );
-    replay(ctx, this.recording.commands);
-  }
-
-  abstract redraw(): void;
-}
-
-class StaticContainer extends Container {
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
-    super(Skia);
-  }
-
-  redraw() {
-    const recorder = new Recorder();
-    visit(recorder, this.root);
-    this.recording = recorder.getRecording();
-    const isOnScreen = this.nativeId !== -1;
-    if (isOnScreen) {
-      if (this.onSize) {
-        const size = SkiaViewApi.size(this.nativeId);
-        if (
-          size.width !== this.onSize.value.width ||
-          size.height !== this.onSize.value.height
-        ) {
-          this.onSize.value = size;
-        }
-      }
-      const rec = this.Skia.PictureRecorder();
-      const canvas = rec.beginRecording();
-      this.drawOnCanvas(canvas);
-      const picture = rec.finishRecordingAsPicture();
-      SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
-    }
-  }
-}
-
 class ReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
@@ -177,56 +79,13 @@ class ReanimatedContainer extends Container {
   }
 }
 
-class NativeReanimatedContainer extends Container {
-  private mapperId: number | null = null;
-
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
-    super(Skia);
-  }
-
-  redraw() {
-    if (this.mapperId !== null) {
-      Rea.stopMapper(this.mapperId);
-    }
-    if (this.unmounted) {
-      return;
-    }
-    const { nativeId, Skia } = this;
-    const recorder = new ReanimatedRecorder(Skia);
-    visit(recorder, this.root);
-    const sharedValues = recorder.getSharedValues();
-    const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
-      "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
-    })(this.onSize);
-    if (sharedValues.length > 0) {
-      const { onSize } = this;
-      this.mapperId = Rea.startMapper(() => {
-        "worklet";
-        sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
-      }, sharedValues);
-    }
-  }
-}
-
 export const createContainer = (
   Skia: Skia,
   nativeId: number,
   onSize?: SharedValue<SkSize>
 ) => {
-  const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    if (!web) {
-      return new NativeReanimatedContainer(Skia, nativeId, onSize);
-    } else {
-      return new ReanimatedContainer(Skia, nativeId, onSize);
-    }
+    return new ReanimatedContainer(Skia, nativeId, onSize);
   } else {
     return new StaticContainer(Skia, nativeId);
   }

package/src/sksg/HostConfig.ts

@@ -7,7 +7,7 @@ import type { NodeType } from "../dom/types";
 import { shallowEq } from "../renderer/typeddash";
 
 import type { Node } from "./Node";
-import type { Container } from "./Container";
+import type { Container } from "./StaticContainer";
 
 type EventPriority = number;
 const NoEventPriority = 0;

package/src/sksg/Reconciler.ts

@@ -7,7 +7,7 @@ import type { SkCanvas, Skia, SkSize } from "../skia/types";
 import { NodeType } from "../dom/types";
 
 import { debug, sksgHostConfig } from "./HostConfig";
-import type { Container } from "./Container";
+import type { Container } from "./StaticContainer";
 import { createContainer } from "./Container";
 
 import "./Elements";

package/src/sksg/StaticContainer.ts

@@ -0,0 +1,83 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
+
+import type { Node } from "./Node";
+import type { Recording } from "./Recorder/Recorder";
+import { Recorder } from "./Recorder/Recorder";
+import { visit } from "./Recorder/Visitor";
+import { replay } from "./Recorder/Player";
+import { createDrawingContext } from "./Recorder/DrawingContext";
+
+import "../views/api";
+
+export abstract class Container {
+  private _root: Node[] = [];
+  protected recording: Recording | null = null;
+  protected unmounted = false;
+
+  constructor(protected Skia: Skia) {}
+
+  get root() {
+    return this._root;
+  }
+
+  set root(value: Node[]) {
+    this._root = value;
+  }
+
+  mount() {
+    this.unmounted = false;
+  }
+
+  unmount() {
+    this.unmounted = true;
+  }
+
+  drawOnCanvas(canvas: SkCanvas) {
+    if (!this.recording) {
+      throw new Error("No recording to draw");
+    }
+    const ctx = createDrawingContext(
+      this.Skia,
+      this.recording.paintPool,
+      canvas
+    );
+    replay(ctx, this.recording.commands);
+  }
+
+  abstract redraw(): void;
+}
+
+export class StaticContainer extends Container {
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
+  }
+
+  redraw() {
+    const recorder = new Recorder();
+    visit(recorder, this.root);
+    this.recording = recorder.getRecording();
+    const isOnScreen = this.nativeId !== -1;
+    if (isOnScreen) {
+      if (this.onSize) {
+        const size = SkiaViewApi.size(this.nativeId);
+        if (
+          size.width !== this.onSize.value.width ||
+          size.height !== this.onSize.value.height
+        ) {
+          this.onSize.value = size;
+        }
+      }
+      const rec = this.Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      this.drawOnCanvas(canvas);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
+    }
+  }
+}