@shopify/react-native-skia 1.7.5 → 1.7.7

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

@@ -1,14 +1,16 @@
-import type { Skia } from "../../../skia/types";
+"worklet";
+
 import type { CircleDef, ScalarCircleDef } from "../../types";
 
-export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef => {
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx !== undefined;
+  return (def as any).cx !== undefined;
+};
 
-export const processCircle = (Skia: Skia, def: CircleDef) => {
+export const processCircle = (def: CircleDef) => {
   if (isCircleScalarDef(def)) {
-    return { c: Skia.Point(def.cx, def.cy), r: def.r };
+    return { c: { x: def.cx, y: def.cy }, r: def.r };
   }
   return { ...def, c: def.c ?? { x: 0, y: 0 } };
 };

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

@@ -1,2 +1,4 @@
+"worklet";
+
 export const enumKey = <K extends string>(k: K) =>
   (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;

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

@@ -1,3 +1,5 @@
+"worklet";
+
 import { exhaustiveCheck } from "../../../renderer/typeddash";
 import type { SkRect } from "../../../skia/types";
 import type { Fit } from "../../types";
@@ -8,7 +10,6 @@ export interface Size {
 }
 
 export const size = (width = 0, height = 0) => {
-  "worklet";
   return { width, height };
 };
 
@@ -21,7 +22,6 @@ export const rect2rect = (
   { scaleX: number },
   { scaleY: number }
 ] => {
-  "worklet";
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
@@ -33,7 +33,6 @@ const inscribe = (
   { width, height }: Size,
   rect: { x: number; y: number; width: number; height: number }
 ) => {
-  "worklet";
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
   return {
@@ -45,7 +44,6 @@ const inscribe = (
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
-  "worklet";
   let src = size(),
     dst = size();
   if (
@@ -114,7 +112,6 @@ export const fitRects = (
   rect: SkRect,
   { x, y, width, height }: SkRect
 ) => {
-  "worklet";
   const sizes = applyBoxFit(
     fit,
     { width: rect.width, height: rect.height },

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

@@ -1,3 +1,5 @@
+"worklet";
+
 import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 import type { GradientProps, ImageShaderProps } from "../../types";
@@ -35,13 +37,8 @@ export const getRect = (
   const { x, y, width, height } = props;
   if (props.rect) {
     return props.rect;
-  } else if (
-    x !== undefined &&
-    y !== undefined &&
-    width !== undefined &&
-    height !== undefined
-  ) {
-    return Skia.XYWHRect(x, y, width, height);
+  } else if (width !== undefined && height !== undefined) {
+    return Skia.XYWHRect(x ?? 0, y ?? 0, width, height);
   } else {
     return undefined;
   }

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

@@ -1,3 +1,5 @@
+"worklet";
+
 import type { Skia } from "../../../skia/types";
 import { isPath } from "../../../skia/types";
 import type { PathDef } from "../../types";
@@ -14,5 +16,6 @@ export const processPath = (Skia: Skia, rawPath: PathDef) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isPathDef = (def: any): def is PathDef =>
-  typeof def === "string" || isPath(def);
+export const isPathDef = (def: any): def is PathDef => {
+  return typeof def === "string" || isPath(def);
+};

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

@@ -1,3 +1,5 @@
+"worklet";
+
 import type { Skia, Vector } from "../../../skia/types";
 import type { Radius } from "../../types";
 

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

@@ -1,22 +1,25 @@
+"worklet";
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Skia, SkRect, Vector } from "../../../skia/types";
+import type { Skia, SkRect, SkRRect, Vector } from "../../../skia/types";
 import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 
 import { processRadius } from "./Radius";
 
 export const isEdge = (pos: Vector, b: SkRect) => {
-  "worklet";
   return (
     pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
   );
 };
 
 // We have an issue to check property existence on JSI backed instances
-const isRRectCtor = (def: RRectDef): def is RRectCtor =>
-  (def as any).rect === undefined;
+const isRRectCtor = (def: RRectDef): def is RRectCtor => {
+  return (def as any).rect === undefined;
+};
 // We have an issue to check property existence on JSI backed instances
-const isRectCtor = (def: RectDef): def is RectCtor =>
-  (def as any).rect === undefined;
+const isRectCtor = (def: RectDef): def is RectCtor => {
+  return (def as any).rect === undefined;
+};
 
 export const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {
@@ -38,3 +41,34 @@ export const processRRect = (Skia: Skia, def: RRectDef) => {
     return def.rect;
   }
 };
+
+export const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => {
+  return 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
+  );
+};
+
+export const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => {
+  return inflate(Skia, box, -dx, -dy, tx, ty);
+};

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/RRect.ts

@@ -18,6 +18,12 @@ export interface NonUniformRRect {
 export type InputRRect = SkRRect | NonUniformRRect;
 
 // We have an issue to check property existence on JSI backed instances
-export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).rect !== undefined;
+export const isRRect = (def: unknown): def is SkRRect => {
+  "worklet";
+  return (
+    typeof def === "object" &&
+    def !== null &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    typeof (def as any).rect === "object"
+  );
+};

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/skia/web/JsiSkParagraphStyle.ts

@@ -19,9 +19,7 @@ export class JsiSkParagraphStyle {
     ps.replaceTabCharacters =
       value.replaceTabCharacters ?? ps.replaceTabCharacters;
     ps.textAlign =
-      value.textAlign !== undefined
-        ? { value: value.textAlign }
-        : undefined ?? ps.textAlign;
+      value.textAlign !== undefined ? { value: value.textAlign } : ps.textAlign;
     ps.textDirection =
       value.textDirection !== undefined
         ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 }