@shopify/react-native-skia 2.2.6 → 2.2.8

package/src/skia/types/Recorder.ts

@@ -48,7 +48,11 @@ export interface BaseRecorder {
     colorFilterType: NodeType,
     props: AnimatedProps<unknown>
   ): void;
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ): void;
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
   composePathEffect(): void;
   composeColorFilter(): void;

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,233 +1,13 @@
 import type { SharedValue } from "react-native-reanimated";
 
-import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
-import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
-import type { JsiRecorder } from "../skia/types/Recorder";
+import type { Skia, 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 { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
-
-import "../views/api";
-
-const drawOnscreen = (
-  Skia: Skia,
-  nativeId: number,
-  recording: Recording,
-  onSize?: SharedValue<SkSize>
-) => {
-  "worklet";
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (
-      size.width !== onSize.value.width ||
-      size.height !== onSize.value.height
-    ) {
-      onSize.value = size;
-    }
-  }
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
-  //const start = performance.now();
-
-  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
-  replay(ctx, recording.commands);
-  const picture = rec.finishRecordingAsPicture();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  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;
-
-  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 recorder = new Recorder();
-    visit(recorder, this.root);
-    const record = recorder.getRecording();
-    const { animationValues } = record;
-    this.recording = {
-      commands: record.commands,
-      paintPool: record.paintPool,
-    };
-    const { nativeId, Skia, recording } = this;
-    if (animationValues.size > 0) {
-      this.mapperId = Rea.startMapper(() => {
-        "worklet";
-        drawOnscreen(Skia, nativeId, recording!);
-      }, Array.from(animationValues));
-    }
-    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
-      "worklet";
-      drawOnscreen(Skia, nativeId, recording!, onSize);
-    })(this.onSize);
-  }
-}
-
-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);
-    }
-  }
-}
+import { StaticContainer } from "./StaticContainer";
 
 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);
-    }
-  } else {
-    return new StaticContainer(Skia, nativeId);
-  }
+  return new StaticContainer(Skia, nativeId, onSize);
 };

package/src/sksg/Container.web.ts

@@ -0,0 +1,95 @@
+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 { 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 { Container, StaticContainer } from "./StaticContainer";
+
+import "../skia/NativeSetup";
+import "../views/api";
+
+const drawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recording: Recording,
+  onSize?: SharedValue<SkSize>
+) => {
+  "worklet";
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  //const start = performance.now();
+
+  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
+  replay(ctx, recording.commands);
+  const picture = rec.finishRecordingAsPicture();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+class ReanimatedContainer 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 recorder = new Recorder();
+    visit(recorder, this.root);
+    const record = recorder.getRecording();
+    const { animationValues } = record;
+    this.recording = {
+      commands: record.commands,
+      paintPool: record.paintPool,
+    };
+    const { nativeId, Skia, recording } = this;
+    if (animationValues.size > 0) {
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        drawOnscreen(Skia, nativeId, recording!);
+      }, Array.from(animationValues));
+    }
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
+      "worklet";
+      drawOnscreen(Skia, nativeId, recording!, onSize);
+    })(this.onSize);
+  }
+}
+
+export const createContainer = (
+  Skia: Skia,
+  nativeId: number,
+  onSize?: SharedValue<SkSize>
+) => {
+  if (HAS_REANIMATED_3 && nativeId !== -1) {
+    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/Recorder/ReanimatedRecorder.ts

@@ -111,9 +111,13 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.recorder.pushColorFilter(colorFilterType, props);
   }
 
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void {
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ): void {
     this.processAnimationValues(props);
-    this.recorder.pushShader(shaderType, props);
+    this.recorder.pushShader(shaderType, props, children);
   }
 
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void {

package/src/sksg/Recorder/Recorder.ts

@@ -152,11 +152,15 @@ export class Recorder implements BaseRecorder {
     });
   }
 
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>) {
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ) {
     if (!isShader(shaderType) && !(shaderType === NodeType.Blend)) {
       throw new Error("Invalid color filter type: " + shaderType);
     }
-    this.add({ type: CommandType.PushShader, shaderType, props });
+    this.add({ type: CommandType.PushShader, shaderType, props, children });
   }
 
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>) {

package/src/sksg/Recorder/Visitor.ts

@@ -160,7 +160,7 @@ const pushImageFilters = (
     if (isImageFilter(imageFilter.type)) {
       recorder.pushImageFilter(imageFilter.type, imageFilter.props);
     } else if (isShader(imageFilter.type)) {
-      recorder.pushShader(imageFilter.type, imageFilter.props);
+      recorder.pushShader(imageFilter.type, imageFilter.props, 0);
     }
     const needsComposition =
       imageFilter.type !== NodeType.BlendImageFilter &&
@@ -176,7 +176,7 @@ const pushShaders = (recorder: BaseRecorder, shaders: Node<any>[]) => {
     if (shader.children.length > 0) {
       pushShaders(recorder, shader.children);
     }
-    recorder.pushShader(shader.type, shader.props);
+    recorder.pushShader(shader.type, shader.props, shader.children.length);
   });
 };
 

package/src/sksg/Recorder/commands/Shaders.ts

@@ -34,14 +34,18 @@ import type { Command } from "../Core";
 import { CommandType } from "../Core";
 import type { DrawingContext } from "../DrawingContext";
 
-const declareShader = (ctx: DrawingContext, props: ShaderProps) => {
+const declareShader = (
+  ctx: DrawingContext,
+  props: ShaderProps,
+  children: number
+) => {
   "worklet";
   const { source, uniforms, ...transform } = props;
   const m3 = ctx.Skia.Matrix();
   processTransformProps(m3, transform);
   const shader = source.makeShaderWithChildren(
     processUniforms(source, uniforms),
-    ctx.shaders.splice(0, ctx.shaders.length),
+    ctx.shaders.splice(0, children),
     m3
   );
   ctx.shaders.push(shader);
@@ -257,6 +261,7 @@ interface PushShader<T extends keyof Props>
   extends Command<CommandType.PushShader> {
   shaderType: T;
   props: Props[T];
+  children: number;
 }
 
 const isShader = <T extends keyof Props>(
@@ -273,7 +278,7 @@ export const pushShader = (
 ) => {
   "worklet";
   if (isShader(command, NodeType.Shader)) {
-    declareShader(ctx, command.props);
+    declareShader(ctx, command.props, command.children);
   } else if (isShader(command, NodeType.ImageShader)) {
     declareImageShader(ctx, command.props);
   } else if (isShader(command, NodeType.ColorShader)) {

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);
+    }
+  }
+}