@shopify/react-native-skia 1.7.6 → 1.8.0

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

@@ -18,12 +18,15 @@ export interface Uniforms {
   [name: string]: Uniform;
 }
 
-const isVector = (obj: unknown): obj is Vector =>
+const isVector = (obj: unknown): obj is Vector => {
+  "worklet";
   // 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) {
+  "worklet";
   if (typeof value === "number") {
     values.push(value);
   } else if (Array.isArray(value)) {
@@ -33,13 +36,14 @@ const processValue = (values: number[], value: Uniform) => {
   } else if (value instanceof Float32Array) {
     values.push(...value);
   }
-};
+}
 
 export const processUniforms = (
   source: SkRuntimeEffect,
   uniforms: Uniforms,
   builder?: SkRuntimeShaderBuilder
 ) => {
+  "worklet";
   const result: number[] = [];
   const uniformsCount = source.getUniformCount();
   for (let i = 0; i < uniformsCount; i++) {

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 { createDrawingContext } 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 = createDrawingContext(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 = createDrawingContext(this.Skia, canvas);
+    this.root.forEach((node) => {
+      draw(ctx, node);
+    });
+  }
+}

package/src/sksg/DeclarationContext.ts

@@ -0,0 +1,85 @@
+import type {
+  SkShader,
+  SkPaint,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPathEffect,
+  Skia,
+  SkColorFilter,
+} from "../skia/types";
+
+type Composer<T> = (outer: T, inner: T) => T;
+
+export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
+  "worklet";
+  const len = filters.length;
+  if (len <= 1) {
+    return filters[0];
+  }
+  return filters.reduceRight((inner, outer) =>
+    inner ? composer(outer, inner) : outer
+  );
+};
+
+const createDeclaration = <T>(composer?: Composer<T>) => {
+  "worklet";
+  const state = {
+    decls: [] as T[],
+    indexes: [0],
+  };
+
+  return {
+    save: () => {
+      state.indexes.push(state.decls.length);
+    },
+    restore: () => {
+      state.indexes.pop();
+    },
+    pop: () => state.decls.pop(),
+    push: (decl: T) => {
+      state.decls.push(decl);
+    },
+    popAll: () => {
+      const idx = state.indexes[state.indexes.length - 1];
+      return state.decls.splice(idx, state.decls.length - idx);
+    },
+    popAllAsOne: () => {
+      if (state.decls.length === 0) {
+        return undefined;
+      }
+      if (!composer) {
+        throw new Error("No composer for this type of declaration");
+      }
+      if (!state.decls.length) {
+        return undefined;
+      }
+      if (!composer) {
+        throw new Error("No composer for this type of declaration");
+      }
+
+      const idx = state.indexes[state.indexes.length - 1];
+      const decls = state.decls.splice(idx, state.decls.length - idx);
+      return composeDeclarations(decls, composer);
+    },
+  };
+};
+
+export const createDeclarationContext = (Skia: Skia) => {
+  "worklet";
+  const composers = {
+    pathEffect: Skia.PathEffect.MakeCompose.bind(Skia.PathEffect),
+    imageFilter: Skia.ImageFilter.MakeCompose.bind(Skia.ImageFilter),
+    colorFilter: Skia.ColorFilter.MakeCompose.bind(Skia.ColorFilter),
+  };
+  return {
+    Skia,
+    paints: createDeclaration<SkPaint>(),
+    maskFilters: createDeclaration<SkMaskFilter>(),
+    shaders: createDeclaration<SkShader>(),
+    pathEffects: createDeclaration<SkPathEffect>(composers.pathEffect),
+    imageFilters: createDeclaration<SkImageFilter>(composers.imageFilter),
+    colorFilters: createDeclaration<SkColorFilter>(composers.colorFilter),
+  };
+};
+
+export type DeclarationContext = ReturnType<typeof createDeclarationContext>;

package/src/sksg/DrawingContext.ts

@@ -0,0 +1,226 @@
+import {
+  enumKey,
+  isPathDef,
+  processPath,
+  processTransformProps2,
+} from "../dom/nodes";
+import type { ClipDef, DrawingNodeProps, GroupProps } from "../dom/types";
+import {
+  BlendMode,
+  ClipOp,
+  isRRect,
+  PaintStyle,
+  StrokeCap,
+  StrokeJoin,
+} from "../skia/types";
+import type {
+  SkPath,
+  SkRect,
+  SkRRect,
+  SkCanvas,
+  Skia,
+  SkPaint,
+} from "../skia/types";
+
+import type { DeclarationContext } from "./DeclarationContext";
+
+const computeClip = (
+  Skia: Skia,
+  clip: ClipDef | undefined
+):
+  | undefined
+  | { clipPath: SkPath }
+  | { clipRect: SkRect }
+  | { clipRRect: SkRRect } => {
+  "worklet";
+  if (clip) {
+    if (isPathDef(clip)) {
+      return { clipPath: processPath(Skia, clip) };
+    } else if (isRRect(clip)) {
+      return { clipRRect: clip };
+    } else {
+      return { clipRect: clip };
+    }
+  }
+  return undefined;
+};
+
+const processColor = (
+  Skia: Skia,
+  color: number | string | Float32Array | number[]
+) => {
+  "worklet";
+  if (typeof color === "string" || typeof color === "number") {
+    return Skia.Color(color);
+  } else if (Array.isArray(color) || color instanceof Float32Array) {
+    return color instanceof Float32Array ? color : new Float32Array(color);
+  } else {
+    throw new Error(
+      `Invalid color type: ${typeof color}. Expected number, string, or array.`
+    );
+  }
+};
+
+export const createDrawingContext = (Skia: Skia, canvas: SkCanvas) => {
+  "worklet";
+  const state = {
+    paints: [Skia.Paint()],
+  };
+
+  const getPaint = () => {
+    return state.paints[state.paints.length - 1];
+  };
+
+  const processPaint = (
+    {
+      opacity,
+      color,
+      strokeWidth,
+      blendMode,
+      style,
+      strokeJoin,
+      strokeCap,
+      strokeMiter,
+      antiAlias,
+      dither,
+      paint: paintProp,
+    }: DrawingNodeProps,
+    declCtx: DeclarationContext
+  ) => {
+    if (paintProp) {
+      declCtx.paints.push(paintProp);
+      return true;
+    }
+    let shouldRestore = false;
+    const colorFilter = declCtx.colorFilters.popAllAsOne();
+    const imageFilter = declCtx.imageFilters.popAllAsOne();
+    const shader = declCtx.shaders.pop();
+    const maskFilter = declCtx.maskFilters.pop();
+    const pathEffect = declCtx.pathEffects.popAllAsOne();
+
+    if (
+      opacity !== undefined ||
+      color !== undefined ||
+      strokeWidth !== undefined ||
+      blendMode !== undefined ||
+      style !== undefined ||
+      strokeJoin !== undefined ||
+      strokeCap !== undefined ||
+      strokeMiter !== undefined ||
+      antiAlias !== undefined ||
+      dither !== undefined ||
+      colorFilter !== undefined ||
+      imageFilter !== undefined ||
+      shader !== undefined ||
+      maskFilter !== undefined ||
+      pathEffect !== undefined
+    ) {
+      if (!shouldRestore) {
+        state.paints.push(getPaint().copy());
+        shouldRestore = true;
+      }
+    }
+
+    const paint = getPaint();
+    if (opacity !== undefined) {
+      paint.setAlphaf(paint.getAlphaf() * opacity);
+    }
+    if (color !== undefined) {
+      const currentOpacity = paint.getAlphaf();
+      paint.setShader(null);
+      paint.setColor(processColor(Skia, color));
+      paint.setAlphaf(currentOpacity * paint.getAlphaf());
+    }
+    if (strokeWidth !== undefined) {
+      paint.setStrokeWidth(strokeWidth);
+    }
+    if (blendMode !== undefined) {
+      paint.setBlendMode(BlendMode[enumKey(blendMode)]);
+    }
+    if (style !== undefined) {
+      paint.setStyle(PaintStyle[enumKey(style)]);
+    }
+    if (strokeJoin !== undefined) {
+      paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);
+    }
+    if (strokeCap !== undefined) {
+      paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);
+    }
+    if (strokeMiter !== undefined) {
+      paint.setStrokeMiter(strokeMiter);
+    }
+    if (antiAlias !== undefined) {
+      paint.setAntiAlias(antiAlias);
+    }
+    if (dither !== undefined) {
+      paint.setDither(dither);
+    }
+    if (colorFilter) {
+      paint.setColorFilter(colorFilter);
+    }
+    if (imageFilter) {
+      paint.setImageFilter(imageFilter);
+    }
+    if (shader) {
+      paint.setShader(shader);
+    }
+    if (maskFilter) {
+      paint.setMaskFilter(maskFilter);
+    }
+    if (pathEffect) {
+      paint.setPathEffect(pathEffect);
+    }
+    return shouldRestore;
+  };
+
+  const processMatrixAndClipping = (
+    props: GroupProps,
+    layer?: boolean | SkPaint
+  ) => {
+    const hasTransform =
+      props.matrix !== undefined || props.transform !== undefined;
+    const clip = computeClip(Skia, props.clip);
+    const hasClip = clip !== undefined;
+    const op = props.invertClip ? ClipOp.Difference : ClipOp.Intersect;
+    const m3 = processTransformProps2(Skia, props);
+    const shouldSave = hasTransform || hasClip || !!layer;
+
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          canvas.saveLayer();
+        } else {
+          canvas.saveLayer(layer);
+        }
+      } else {
+        canvas.save();
+      }
+    }
+
+    if (m3) {
+      canvas.concat(m3);
+    }
+    if (clip) {
+      if ("clipRect" in clip) {
+        canvas.clipRect(clip.clipRect, op, true);
+      } else if ("clipRRect" in clip) {
+        canvas.clipRRect(clip.clipRRect, op, true);
+      } else {
+        canvas.clipPath(clip.clipPath, op, true);
+      }
+    }
+    return shouldSave;
+  };
+
+  return {
+    Skia,
+    canvas,
+    save: () => state.paints.push(getPaint().copy()),
+    restore: () => state.paints.pop(),
+    getPaint,
+    processPaint,
+    processMatrixAndClipping,
+  };
+};
+
+export type DrawingContext = ReturnType<typeof createDrawingContext>;