@shopify/react-native-skia 1.7.6 → 1.8.0

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

@@ -1,10 +1,36 @@
 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) => {
+  "worklet";
+
+  const { transform, origin, matrix } = props;
+  if (matrix) {
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+      m3.concat(matrix);
+      m3.translate(-origin.x, -origin.y);
+    } else {
+      m3.concat(matrix);
+    }
+  } else if (transform) {
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+    }
+    processTransform(m3, transform);
+    if (origin) {
+      m3.translate(-origin.x, -origin.y);
+    }
+  }
+};
+
+export const processTransformProps2 = (Skia: Skia, props: TransformProps) => {
+  "worklet";
+
   const { transform, origin, matrix } = props;
   if (matrix) {
+    const m3 = Skia.Matrix();
     if (origin) {
       m3.translate(origin.x, origin.y);
       m3.concat(matrix);
@@ -12,7 +38,9 @@ export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
     } else {
       m3.concat(matrix);
     }
+    return m3;
   } else if (transform) {
+    const m3 = Skia.Matrix();
     if (origin) {
       m3.translate(origin.x, origin.y);
     }
@@ -20,5 +48,7 @@ export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
     if (origin) {
       m3.translate(-origin.x, -origin.y);
     }
+    return m3;
   }
+  return null;
 };

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/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/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>;

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/Offscreen.tsx

@@ -1,11 +1,9 @@
 import type { ReactElement } from "react";
 
-import { JsiDrawingContext } from "../dom/types";
 import type { SkPicture, SkRect, SkSize } from "../skia/types";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
-
-import { SkiaRoot } from "./Reconciler";
+import { SkiaSGRoot } from "../sksg/Reconciler";
 
 // We call it main thread because on web main is JS thread
 export const isOnMainThread = () => {
@@ -19,10 +17,9 @@ export const isOnMainThread = () => {
 export const drawAsPicture = (element: ReactElement, bounds?: SkRect) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording(bounds);
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
-  const ctx = new JsiDrawingContext(Skia, canvas);
-  root.dom.render(ctx);
+  root.drawOnCanvas(canvas);
   const picture = recorder.finishRecordingAsPicture();
   root.unmount();
   return picture;

package/src/renderer/Reconciler.tsx

@@ -2,8 +2,6 @@ import type { ReactNode } from "react";
 import type { OpaqueRoot } from "react-reconciler";
 import ReactReconciler from "react-reconciler";
 
-import type { Skia } from "../skia/types";
-
 import { skHostConfig, debug as hostDebug } from "./HostConfig";
 import { Container } from "./Container";
 
@@ -20,12 +18,10 @@ export class SkiaRoot {
   private container: Container;
 
   constructor(
-    Skia: Skia,
-    native = false,
     redraw: () => void = () => {},
     getNativeId: () => number = () => 0
   ) {
-    this.container = new Container(Skia, redraw, getNativeId, native);
+    this.container = new Container(redraw, getNativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,

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