@shopify/react-native-skia 1.7.7 → 1.8.0

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

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

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

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

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

@@ -1,5 +1,3 @@
-"worklet";
-
 import { exhaustiveCheck } from "../../../renderer/typeddash";
 import type { SkRect } from "../../../skia/types";
 import type { Fit } from "../../types";
@@ -10,6 +8,7 @@ export interface Size {
 }
 
 export const size = (width = 0, height = 0) => {
+  "worklet";
   return { width, height };
 };
 
@@ -22,6 +21,7 @@ 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,6 +33,7 @@ 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 {
@@ -44,6 +45,7 @@ const inscribe = (
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
+  "worklet";
   let src = size(),
     dst = size();
   if (
@@ -112,6 +114,7 @@ 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,5 +1,3 @@
-"worklet";
-
 import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 import type { GradientProps, ImageShaderProps } from "../../types";
@@ -7,18 +5,22 @@ import type { GradientProps, ImageShaderProps } from "../../types";
 import { enumKey } from "./Enum";
 import { processTransformProps } from "./Transform";
 
-export const transformOrigin = (origin: Vector, transform: Transforms3d) => [
-  { translateX: origin.x },
-  { translateY: origin.y },
-  ...transform,
-  { translateX: -origin.x },
-  { translateY: -origin.y },
-];
+export const transformOrigin = (origin: Vector, transform: Transforms3d) => {
+  "worklet";
+  return [
+    { translateX: origin.x },
+    { translateY: origin.y },
+    ...transform,
+    { translateX: -origin.x },
+    { translateY: -origin.y },
+  ];
+};
 
 export const processGradientProps = (
   Skia: Skia,
   { colors, positions, mode, flags, ...transform }: GradientProps
 ) => {
+  "worklet";
   const localMatrix = Skia.Matrix();
   processTransformProps(localMatrix, transform);
   return {
@@ -34,6 +36,7 @@ export const getRect = (
   Skia: Skia,
   props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
 ): SkRect | undefined => {
+  "worklet";
   const { x, y, width, height } = props;
   if (props.rect) {
     return props.rect;

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

@@ -1,10 +1,9 @@
-"worklet";
-
 import type { Skia } from "../../../skia/types";
 import { isPath } from "../../../skia/types";
 import type { PathDef } from "../../types";
 
 export const processPath = (Skia: Skia, rawPath: PathDef) => {
+  "worklet";
   const path =
     typeof rawPath === "string"
       ? Skia.Path.MakeFromSVGString(rawPath)
@@ -17,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 => {
+  "worklet";
   return typeof def === "string" || isPath(def);
 };

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

@@ -1,9 +1,8 @@
-"worklet";
-
 import type { Skia, Vector } from "../../../skia/types";
 import type { Radius } from "../../types";
 
 export const processRadius = (Skia: Skia, radius: Radius): Vector => {
+  "worklet";
   if (typeof radius === "number") {
     return Skia.Point(radius, radius);
   }

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

@@ -1,5 +1,3 @@
-"worklet";
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Skia, SkRect, SkRRect, Vector } from "../../../skia/types";
 import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
@@ -7,6 +5,7 @@ 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
   );
@@ -14,14 +13,17 @@ export const isEdge = (pos: Vector, b: SkRect) => {
 
 // We have an issue to check property existence on JSI backed instances
 const isRRectCtor = (def: RRectDef): def is RRectCtor => {
+  "worklet";
   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 => {
+  "worklet";
   return (def as any).rect === undefined;
 };
 
 export const processRect = (Skia: Skia, def: RectDef) => {
+  "worklet";
   if (isRectCtor(def)) {
     return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);
   } else {
@@ -30,6 +32,7 @@ export const processRect = (Skia: Skia, def: RectDef) => {
 };
 
 export const processRRect = (Skia: Skia, def: RRectDef) => {
+  "worklet";
   if (isRRectCtor(def)) {
     const r = processRadius(Skia, def.r ?? 0);
     return Skia.RRectXY(
@@ -50,6 +53,7 @@ export const inflate = (
   tx = 0,
   ty = 0
 ) => {
+  "worklet";
   return Skia.RRectXY(
     Skia.XYWHRect(
       box.rect.x - dx + tx,
@@ -70,5 +74,6 @@ export const deflate = (
   tx = 0,
   ty = 0
 ) => {
+  "worklet";
   return inflate(Skia, box, -dx, -dy, tx, ty);
 };

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

@@ -1,10 +1,10 @@
-"worklet";
-
 import type { TransformProps } from "../../types";
 import type { Skia, SkMatrix } from "../../../skia/types";
 import { processTransform } from "../../../skia/types";
 
 export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
+  "worklet";
+
   const { transform, origin, matrix } = props;
   if (matrix) {
     if (origin) {
@@ -26,6 +26,8 @@ export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
 };
 
 export const processTransformProps2 = (Skia: Skia, props: TransformProps) => {
+  "worklet";
+
   const { transform, origin, matrix } = props;
   if (matrix) {
     const m3 = Skia.Matrix();

package/src/dom/types/Node.ts

@@ -1,7 +1,6 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "./DeclarationContext";
-import type { DrawingContext } from "./DrawingContext";
+import type { DeclarationContext } from "../../sksg/DeclarationContext";
 
 export interface Node<P> {
   type: NodeType;
@@ -25,6 +24,4 @@ export interface DeclarationNode<P> extends Node<P> {
   setInvalidate(invalidate: Invalidate): void;
 }
 
-export interface RenderNode<P extends GroupProps> extends Node<P> {
-  render(ctx: DrawingContext): void;
-}
+export type RenderNode<P extends GroupProps> = Node<P>;

package/src/dom/types/index.ts

@@ -1,5 +1,3 @@
-export * from "./DrawingContext";
-export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

package/src/headless/index.ts

@@ -4,9 +4,8 @@ import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
 import type { ReactNode } from "react";
 
 import { JsiSkApi } from "../skia/web";
-import { SkiaRoot } from "../renderer/Reconciler";
-import { JsiDrawingContext } from "../dom/types";
 import type { SkSurface } from "../skia";
+import { SkiaSGRoot } from "../sksg/Reconciler";
 
 export * from "../renderer/components";
 
@@ -31,11 +30,10 @@ export const getSkiaExports = () => {
 };
 
 export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
-  const ctx = new JsiDrawingContext(Skia, canvas);
-  root.dom.render(ctx);
+  root.drawOnCanvas(canvas);
   root.unmount();
   surface.flush();
   return surface.makeImageSnapshot();

package/src/index.ts

@@ -2,6 +2,7 @@ import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/src/renderer/Canvas.tsx

@@ -15,12 +15,9 @@ import type {
 import type { LayoutChangeEvent } from "react-native";
 
 import { SkiaDomView } from "../views";
-import { Skia } from "../skia/Skia";
 import type { SkiaBaseViewProps } from "../views";
-import { SkiaJSDomView } from "../views/SkiaJSDomView";
 
 import { SkiaRoot } from "./Reconciler";
-import { NATIVE_DOM } from "./HostComponents";
 
 export const useCanvasRef = () => useRef<SkiaDomView>(null);
 
@@ -74,7 +71,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
     }, [innerRef]);
 
     const root = useMemo(
-      () => new SkiaRoot(Skia, NATIVE_DOM, redraw, getNativeId),
+      () => new SkiaRoot(redraw, getNativeId),
       [redraw, getNativeId]
     );
 
@@ -89,33 +86,17 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
-    if (NATIVE_DOM) {
-      return (
-        <SkiaDomView
-          ref={ref}
-          style={style}
-          root={root.dom}
-          onLayout={onLayout}
-          debug={debug}
-          mode={mode}
-          {...props}
-        />
-      );
-    } else {
-      return (
-        <SkiaJSDomView
-          Skia={Skia}
-          mode={mode}
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ref={ref as any}
-          style={style}
-          root={root.dom}
-          onLayout={onLayout}
-          debug={debug}
-          {...props}
-        />
-      );
-    }
+    return (
+      <SkiaDomView
+        ref={ref}
+        style={style}
+        root={root.dom}
+        onLayout={onLayout}
+        debug={debug}
+        mode={mode}
+        {...props}
+      />
+    );
   }
 ) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
 

package/src/renderer/Canvas.web.tsx

@@ -0,0 +1,134 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+import type { SkiaBaseViewProps } from "../views";
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+// TODO: no need to go through the JS thread for this
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
+
+      if (resultValue) {
+        resultValue.value = { width, height };
+      }
+    },
+    [onLayout, resultValue]
+  );
+};
+
+export interface CanvasProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas = forwardRef(
+  (
+    {
+      mode,
+      debug,
+      opaque,
+      children,
+      onSize,
+      onLayout: _onLayout,
+      ...viewProps
+    }: CanvasProps,
+    ref
+  ) => {
+    const viewRef = useRef<SkiaPictureView>(null);
+    const rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
+
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia), []);
+
+    // Render effects
+    useEffect(() => {
+      root.render(children);
+      if (viewRef.current) {
+        viewRef.current.setPicture(root.getPicture());
+      }
+    }, [children, root]);
+
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (viewRef.current) {
+          viewRef.current.setPicture(root.getPicture());
+        }
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        viewRef.current?.redraw();
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
+    return (
+      <SkiaPictureView
+        ref={viewRef}
+        collapsable={false}
+        nativeID={`${nativeId}`}
+        debug={debug}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
+      />
+    );
+  }
+);

package/src/renderer/Canvas2.tsx

@@ -0,0 +1,128 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+import type { SkiaBaseViewProps } from "../views";
+
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
+
+// TODO: no need to go through the JS thread for this
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
+
+      if (resultValue) {
+        resultValue.value = { width, height };
+      }
+    },
+    [onLayout, resultValue]
+  );
+};
+
+export interface Canvas2Props extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas2 = forwardRef(
+  (
+    {
+      mode,
+      debug,
+      opaque,
+      children,
+      onSize,
+      onLayout: _onLayout,
+      ...viewProps
+    }: Canvas2Props,
+    ref
+  ) => {
+    const rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
+
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+
+    // Render effects
+    useEffect(() => {
+      root.render(children);
+    }, [children, root]);
+
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        SkiaViewApi.requestRedraw(nativeId);
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
+    return (
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${nativeId}`}
+        debug={debug}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
+      />
+    );
+  }
+);

package/src/renderer/Canvas2.web.tsx

@@ -0,0 +1,6 @@
+import type { CanvasProps } from "./Canvas";
+import { Canvas } from "./Canvas";
+
+export type Canvas2Props = CanvasProps;
+
+export const Canvas2 = Canvas;

package/src/renderer/Container.tsx

@@ -1,30 +1,18 @@
 import { JsiSkDOM } from "../dom/nodes";
-import type {
-  GroupProps,
-  DrawingContext,
-  RenderNode,
-  SkDOM,
-} from "../dom/types";
-import type { Skia } from "../skia/types";
+import type { Node, SkDOM } from "../dom/types";
 
 export class Container {
-  private _root: RenderNode<GroupProps>;
+  private _root: Node<unknown>;
   public Sk: SkDOM;
   public unmounted = false;
   constructor(
-    Skia: Skia,
     public redraw: () => void = () => {},
-    public getNativeId: () => number = () => 0,
-    native: boolean
+    public getNativeId: () => number = () => 0
   ) {
-    this.Sk = new JsiSkDOM({ Skia }, native);
+    this.Sk = new JsiSkDOM();
     this._root = this.Sk.Group();
   }
 
-  draw(ctx: DrawingContext) {
-    this._root.render(ctx);
-  }
-
   get root() {
     return this._root;
   }

package/src/renderer/HostComponents.ts

@@ -57,23 +57,15 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
-import type { SkRect, SkRRect } from "../skia/types";
-import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
 
 import type { Container } from "./Container";
 import { exhaustiveCheck } from "./typeddash";
 import type { SkiaProps } from "./processors";
 
-// This flag should only be turned on for debugging/testing
-const shouldUseJSDomOnNative = false;
-export const NATIVE_DOM = shouldUseJSDomOnNative ? false : !!global.SkiaDomApi;
-
 declare global {
   var SkiaDomApi: {
-    RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
-    RRectNode: (
-      props: RoundedRectProps
-    ) => JsiDrawingNode<RoundedRectProps, SkRRect>;
+    RectNode: (props: RectProps) => RenderNode<RectProps>;
+    RRectNode: (props: RoundedRectProps) => RenderNode<RoundedRectProps>;
     GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
     PaintNode: (props: PaintProps) => DeclarationNode<PaintProps>;
     FillNode: (props: PaintProps) => RenderNode<PaintProps>;