@shopify/react-native-skia 1.7.6 → 1.7.7

package/src/dom/nodes/datatypes/Transform.ts

@@ -1,5 +1,7 @@
+"worklet";
+
 import type { TransformProps } from "../../types";
-import type { SkMatrix } from "../../../skia/types";
+import type { Skia, SkMatrix } from "../../../skia/types";
 import { processTransform } from "../../../skia/types";
 
 export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
@@ -22,3 +24,29 @@ export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
     }
   }
 };
+
+export const processTransformProps2 = (Skia: Skia, props: TransformProps) => {
+  const { transform, origin, matrix } = props;
+  if (matrix) {
+    const m3 = Skia.Matrix();
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+      m3.concat(matrix);
+      m3.translate(-origin.x, -origin.y);
+    } else {
+      m3.concat(matrix);
+    }
+    return m3;
+  } else if (transform) {
+    const m3 = Skia.Matrix();
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+    }
+    processTransform(m3, transform);
+    if (origin) {
+      m3.translate(-origin.x, -origin.y);
+    }
+    return m3;
+  }
+  return null;
+};

package/src/dom/nodes/drawings/Box.ts

@@ -1,4 +1,3 @@
-import type { SkRRect, Skia } from "../../../skia/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { DrawingContext } from "../../types";
 import { NodeType } from "../../types";
@@ -7,34 +6,7 @@ import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import { JsiRenderNode } from "../RenderNode";
 import type { DeclarationContext } from "../../types/DeclarationContext";
-
-const inflate = (
-  Skia: Skia,
-  box: SkRRect,
-  dx: number,
-  dy: number,
-  tx = 0,
-  ty = 0
-) =>
-  Skia.RRectXY(
-    Skia.XYWHRect(
-      box.rect.x - dx + tx,
-      box.rect.y - dy + ty,
-      box.rect.width + 2 * dx,
-      box.rect.height + 2 * dy
-    ),
-    box.rx + dx,
-    box.ry + dy
-  );
-
-const deflate = (
-  Skia: Skia,
-  box: SkRRect,
-  dx: number,
-  dy: number,
-  tx = 0,
-  ty = 0
-) => inflate(Skia, box, -dx, -dy, tx, ty);
+import { deflate, inflate } from "../datatypes";
 
 export class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps> {
   constructor(ctx: NodeContext, props: BoxShadowProps) {

package/src/dom/nodes/drawings/CircleNode.ts

@@ -11,7 +11,7 @@ export class CircleNode extends JsiDrawingNode<CircleProps, SkPoint> {
   }
 
   protected deriveProps() {
-    return processCircle(this.Skia, this.props).c;
+    return processCircle(this.props).c;
   }
 
   draw({ canvas, paint }: DrawingContext) {

package/src/dom/types/DeclarationContext.ts

@@ -1,3 +1,5 @@
+"worklet";
+
 import type {
   SkShader,
   SkPaint,
@@ -25,8 +27,11 @@ export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
 class Declaration<T> {
   private decls: T[] = [];
   private indexes = [0];
+  private composer?: Composer<T>;
 
-  constructor(private composer?: Composer<T>) {}
+  constructor(composer?: Composer<T>) {
+    this.composer = composer;
+  }
 
   private get index() {
     return this.indexes[this.indexes.length - 1];
@@ -53,6 +58,9 @@ class Declaration<T> {
   }
 
   popAllAsOne() {
+    if (this.decls.length === 0) {
+      return undefined;
+    }
     if (!this.composer) {
       throw new Error("No composer for this type of declaration");
     }
@@ -62,6 +70,7 @@ class Declaration<T> {
 }
 
 export class DeclarationContext {
+  public Skia: Skia;
   readonly paints: Declaration<SkPaint>;
   readonly maskFilters: Declaration<SkMaskFilter>;
   readonly shaders: Declaration<SkShader>;
@@ -69,7 +78,8 @@ export class DeclarationContext {
   readonly imageFilters: Declaration<SkImageFilter>;
   readonly colorFilters: Declaration<SkColorFilter>;
 
-  constructor(private Skia: Skia) {
+  constructor(Skia: Skia) {
+    this.Skia = Skia;
     const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
     const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
       this.Skia.ImageFilter

package/src/external/reanimated/renderHelpers.ts

@@ -6,13 +6,17 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-let HAS_REANIMATED = false;
-let HAS_REANIMATED_3 = false;
+export let HAS_REANIMATED = false;
+export let HAS_REANIMATED_3 = false;
 try {
-  require("react-native-reanimated");
-  HAS_REANIMATED = true;
+  // This logic is convoluted but necessary
+  // In most systems, `require("react-native-reanimated")` throws an error, all is well.
+  // In webpack, in some configuration it will return an empty object.
+  // So it will not throw an error and we need to check the version to know if it's there.
   const reanimatedVersion =
     require("react-native-reanimated/package.json").version;
+  require("react-native-reanimated");
+  HAS_REANIMATED = !!reanimatedVersion;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))

package/src/renderer/HostConfig.ts

@@ -1,5 +1,5 @@
 /*global NodeJS*/
-import type { HostConfig } from "react-reconciler";
+import type { Fiber, HostConfig } from "react-reconciler";
 import { DefaultEventPriority } from "react-reconciler/constants";
 
 import type { NodeType, Node } from "../dom/types";
@@ -78,7 +78,6 @@ export const skHostConfig: SkiaHostConfig = {
   /**
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
-  now: Date.now,
   supportsMutation: true,
   isPrimaryRenderer: false,
   supportsPersistence: false,
@@ -242,11 +241,18 @@ export const skHostConfig: SkiaHostConfig = {
   insertBefore: (parent, child, before) => {
     insertBefore(parent, child, before);
   },
+
   // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   getCurrentEventPriority: () => DefaultEventPriority,
   beforeActiveInstanceBlur: () => {},
   afterActiveInstanceBlur: () => {},
   detachDeletedInstance: () => {},
+
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    return null;
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {},
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    return null;
+  },
 };

package/src/renderer/__tests__/documentation/shapes/Box.spec.tsx

@@ -27,7 +27,7 @@ describe("Box", () => {
         </Box>
       </>
     );
-    processResult(surface, docPath("box/shadows.png"), true);
+    processResult(surface, docPath("box/shadows.png"));
   });
   it("should draw a box with red stroke", () => {
     const size = width / 2;
@@ -41,6 +41,6 @@ describe("Box", () => {
         />
       </>
     );
-    processResult(surface, docPath("box/box-stroke.png"), true);
+    processResult(surface, docPath("box/box-stroke.png"));
   });
 });

package/src/renderer/__tests__/setup.tsx

@@ -8,15 +8,13 @@ import type { Server, WebSocket } from "ws";
 
 import type * as SkiaExports from "../../index";
 import { JsiSkApi } from "../../skia/web/JsiSkia";
-import type { Node } from "../../dom/nodes";
-import { JsiSkDOM } from "../../dom/nodes";
 import { Group } from "../components";
 import type { SkImage, SkFont, Skia, SkCanvas } from "../../skia/types";
 import { isPath } from "../../skia/types";
 import { E2E } from "../../__tests__/setup";
-import { SkiaRoot } from "../Reconciler";
-import { JsiDrawingContext } from "../../dom/types/DrawingContext";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
+import { SkiaSGRoot } from "../../sksg/Reconciler";
+import type { Node } from "../../sksg/nodes";
 
 import { SkiaObject } from "./e2e/setup";
 
@@ -172,11 +170,6 @@ export const importSkia = (): typeof SkiaExports => {
   };
 };
 
-export const getSkDOM = () => {
-  const { Skia } = importSkia();
-  return new JsiSkDOM({ Skia }, false);
-};
-
 export const PIXEL_RATIO = 3;
 export const fontSize = 32 * PIXEL_RATIO;
 export const width = 256 * PIXEL_RATIO;
@@ -197,21 +190,20 @@ export const mountCanvas = (element: ReactNode) => {
   expect(ckSurface).toBeDefined();
   const canvas = ckSurface.getCanvas();
 
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
   return {
     surface: ckSurface,
     root,
     draw: () => {
-      const ctx = new JsiDrawingContext(Skia, canvas);
-      root.dom.render(ctx);
+      root.drawOnCanvas(canvas);
     },
   };
 };
 
 export const serialize = (element: ReactNode) => {
   const { root } = mountCanvas(element);
-  const serialized = serializeNode(root.dom);
+  const serialized = serializeNode(root.sg);
   return JSON.stringify(serialized);
 };
 
@@ -228,6 +220,8 @@ interface SerializedNode {
 const serializeSkOjects = (obj: any): any => {
   if (typeof obj === "function") {
     return { __typename__: "Function", source: `${obj.toString()}` };
+  } else if (obj instanceof Float32Array) {
+    return { __typename__: "Float32Array", value: Array.from(obj) };
   } else if (Array.isArray(obj)) {
     return obj.map((item) => serializeSkOjects(item));
   } else if (obj && typeof obj === "object" && "__typename__" in obj) {
@@ -302,13 +296,21 @@ const serializeSkOjects = (obj: any): any => {
         ty: obj.ty,
       };
     }
+  } else if (obj && typeof obj === "object") {
+    const result = Object.keys(obj).reduce((acc, key) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      acc[key] = serializeSkOjects(obj[key]);
+      return acc;
+    }, {});
+    return result;
   }
   return obj;
 };
 
 const serializeNode = (node: Node<any>): SerializedNode => {
   const props: any = {};
-  const ogProps = node.getProps();
+  const ogProps = node.props;
   if (ogProps) {
     Object.keys(ogProps)
       .filter((key) => key !== "children")
@@ -319,7 +321,7 @@ const serializeNode = (node: Node<any>): SerializedNode => {
   return {
     type: node.type,
     props,
-    children: node.children().map((child) => serializeNode(child)),
+    children: node.children.map((child) => serializeNode(child)),
   };
 };
 

package/src/renderer/processors/Animations/Animations.ts

@@ -1,8 +1,4 @@
-export type SharedValueType<T = number> = {
-  value: T;
-};
-
-export type AnimatedProp<T> = T | SharedValueType<T>;
+export type AnimatedProp<T> = T | { value: T };
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"

package/src/renderer/typeddash.ts

@@ -1,5 +1,7 @@
-export const mapKeys = <T extends object>(obj: T) =>
-  Object.keys(obj) as (keyof T)[];
+export const mapKeys = <T extends object>(obj: T) => {
+  "worklet";
+  return Object.keys(obj) as (keyof T)[];
+};
 
 export const exhaustiveCheck = (a: never): never => {
   "worklet";

package/src/skia/__tests__/setup.ts

@@ -1,7 +1,5 @@
-import type { Node } from "../../dom/types";
-import { mapKeys } from "../../renderer/typeddash";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
-import { isMatrix, Skia } from "../types";
+import { Skia } from "../types";
 import { JsiSkApi } from "../web";
 
 let Skia: ReturnType<typeof JsiSkApi>;
@@ -27,51 +25,3 @@ export const setupSkia = (width = 256, height = 256) => {
     CanvasKit: global.CanvasKit,
   };
 };
-
-const asValue = (value: unknown) => {
-  if (value instanceof Float32Array) {
-    return Array.from(value)
-      .map((v) => Math.round(v * 100) / 100)
-      .join(", ");
-  } else if (isMatrix(value)) {
-    // TODO: https://github.com/Shopify/react-native-skia/issues/715
-    return "m3x3";
-  } else if (
-    typeof value === "object" &&
-    value !== null &&
-    "x" in value &&
-    "y" in value
-  ) {
-    const v = value as { x: number; y: number };
-    return `{x:${v.x}, y:${v.y}}`;
-  }
-  return value;
-};
-
-export const printAsXML = (node: Node<unknown>) => {
-  console.log(asXML(node));
-};
-
-// Print nodes as XML tree
-export const asXML = (node: Node<unknown>, indent = 0): string => {
-  // TODO: remove cast
-  const hasChildren = node.children().length > 0;
-  const props = node.getProps() as object;
-  const space = new Array(indent).fill(" ").join("");
-  const keys = mapKeys(props).filter((key) => props[key] !== undefined);
-  if (hasChildren) {
-    return `${space}<${node.type}${keys.length > 0 ? " " : ""}${keys
-      .map((name) => `${name}="${asValue(props[name])}"`)
-      .join(" ")}>
-${node
-  .children()
-
-  .map((child) => asXML(child, indent + 2)).join(`
-`)}
-${space}</${node.type}>`;
-  } else {
-    return `${space}<${node.type} ${keys
-      .map((name) => `${name}="${asValue(props[name])}"`)
-      .join(" ")} />`;
-  }
-};

package/src/skia/types/Path/Path.ts

@@ -47,8 +47,10 @@ export enum PathVerb {
 
 export type PathCommand = number[];
 
-export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath =>
-  obj !== null && obj.__typename__ === "Path";
+export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath => {
+  "worklet";
+  return obj !== null && obj.__typename__ === "Path";
+};
 
 export interface SkPath extends SkJSIInstance<"Path"> {
   /**

package/src/skia/types/Shader/Shader.ts

@@ -1,3 +1,5 @@
+"worklet";
+
 import type { SkJSIInstance } from "../JsiInstance";
 import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
@@ -18,12 +20,13 @@ export interface Uniforms {
   [name: string]: Uniform;
 }
 
-const isVector = (obj: unknown): obj is Vector =>
+const isVector = (obj: unknown): obj is Vector => {
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (obj as any).x !== undefined && (obj as any).y !== undefined;
+  return (obj as any).x !== undefined && (obj as any).y !== undefined;
+};
 
-const processValue = (values: number[], value: Uniform) => {
+function processValue(values: number[], value: Uniform) {
   if (typeof value === "number") {
     values.push(value);
   } else if (Array.isArray(value)) {
@@ -33,7 +36,7 @@ const processValue = (values: number[], value: Uniform) => {
   } else if (value instanceof Float32Array) {
     values.push(...value);
   }
-};
+}
 
 export const processUniforms = (
   source: SkRuntimeEffect,

package/src/sksg/Container.ts

@@ -0,0 +1,102 @@
+import { type SharedValue } from "react-native-reanimated";
+
+import Rea from "../external/reanimated/ReanimatedProxy";
+import type { Skia, SkCanvas } from "../skia/types";
+import {
+  HAS_REANIMATED,
+  HAS_REANIMATED_3,
+} from "../external/reanimated/renderHelpers";
+
+import { DrawingContext } from "./DrawingContext";
+import type { Node } from "./nodes";
+import { draw, isSharedValue } from "./nodes";
+
+const drawOnscreen = (Skia: Skia, nativeId: number, root: Node[]) => {
+  "worklet";
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  // TODO: This is only support from 3.15 and above (check the exact version)
+  // This could be polyfilled in C++ if needed (or in JS via functions only?)
+  const ctx = new DrawingContext(Skia, canvas);
+  root.forEach((node) => {
+    draw(ctx, node);
+  });
+  const picture = rec.finishRecordingAsPicture();
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+export class Container {
+  public _root: Node[] = [];
+  public unmounted = false;
+
+  private values = new Set<SharedValue<unknown>>();
+  private mapperId: number | null = null;
+
+  constructor(public Skia: Skia, private nativeId: number) {}
+
+  get root() {
+    return this._root;
+  }
+
+  set root(root: Node[]) {
+    const isOnscreen = this.nativeId !== -1;
+    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
+      throw new Error("React Native Skia only supports Reanimated 3 and above");
+    }
+    if (isOnscreen) {
+      if (this.mapperId !== null) {
+        Rea.stopMapper(this.mapperId);
+      }
+      const { nativeId, Skia } = this;
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        drawOnscreen(Skia, nativeId, root);
+      }, Array.from(this.values));
+    }
+    this._root = root;
+  }
+
+  clear() {
+    console.log("clear container");
+  }
+
+  redraw() {
+    const isOnscreen = this.nativeId !== -1;
+    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
+      throw new Error("React Native Skia only supports Reanimated 3 and above");
+    }
+    if (isOnscreen) {
+      const { nativeId, Skia, root } = this;
+      Rea.runOnUI(() => {
+        drawOnscreen(Skia, nativeId, root);
+      })();
+    }
+  }
+
+  getNativeId() {
+    return this.nativeId;
+  }
+
+  unregisterValues(values: object) {
+    Object.values(values)
+      .filter(isSharedValue)
+      .forEach((value) => {
+        this.values.delete(value);
+      });
+  }
+
+  registerValues(values: object) {
+    Object.values(values)
+      .filter(isSharedValue)
+      .forEach((value) => {
+        this.values.add(value);
+      });
+  }
+
+  drawOnCanvas(canvas: SkCanvas) {
+    const ctx = new DrawingContext(this.Skia, canvas);
+    this.root.forEach((node) => {
+      draw(ctx, node);
+    });
+  }
+}