@shopify/react-native-skia 1.7.7 → 1.8.1

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

@@ -70,6 +70,12 @@ export interface TransformProps {
   matrix?: InputMatrix;
 }
 
+export interface CTMProps extends TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: SkPaint | boolean;
+}
+
 export interface PaintProps extends ChildrenProps {
   color?: Color;
   strokeWidth?: number;
@@ -83,8 +89,4 @@ export interface PaintProps extends ChildrenProps {
   dither?: boolean;
 }
 
-export interface GroupProps extends PaintProps, TransformProps {
-  clip?: ClipDef;
-  invertClip?: boolean;
-  layer?: SkPaint | boolean;
-}
+export interface GroupProps extends PaintProps, CTMProps {}

package/src/dom/types/ImageFilters.ts

@@ -24,8 +24,9 @@ export interface RuntimeShaderImageFilterProps extends ChildrenProps {
   uniforms?: Uniforms;
 }
 
+// TODO: delete
 export interface BlendImageFilterProps extends ChildrenProps {
-  mode: BlendMode;
+  mode: SkEnum<typeof BlendMode>;
 }
 
 export interface MorphologyImageFilterProps extends ChildrenProps {

package/src/dom/types/Node.ts

@@ -1,7 +1,5 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "./DeclarationContext";
-import type { DrawingContext } from "./DrawingContext";
 
 export interface Node<P> {
   type: NodeType;
@@ -19,12 +17,7 @@ export interface Node<P> {
 export type Invalidate = () => void;
 
 export interface DeclarationNode<P> extends Node<P> {
-  //declarationType: DeclarationType;
-  decorate(ctx: DeclarationContext): void;
-
   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/index.ts

@@ -1,5 +1,4 @@
 export * from "./useAnimatedImageValue";
-export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";

package/src/external/reanimated/renderHelpers.ts

@@ -6,7 +6,6 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-export let HAS_REANIMATED = false;
 export let HAS_REANIMATED_3 = false;
 try {
   // This logic is convoluted but necessary
@@ -16,7 +15,6 @@ try {
   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-"))
@@ -24,13 +22,13 @@ try {
     HAS_REANIMATED_3 = true;
   }
 } catch (e) {
-  HAS_REANIMATED = false;
+  // do nothing
 }
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
 export const unbindReanimatedNode = (node: Node<unknown>) => {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const previousMapperId = _bindings.get(node);
@@ -40,7 +38,7 @@ export const unbindReanimatedNode = (node: Node<unknown>) => {
 };
 
 export function extractReanimatedProps(props: AnimatedProps<any>) {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return [props, {}];
   }
   const reanimatedProps = {} as AnimatedProps<any>;
@@ -60,50 +58,12 @@ export function extractReanimatedProps(props: AnimatedProps<any>) {
   return [otherProps, reanimatedProps];
 }
 
-function bindReanimatedProps2(
-  container: Container,
-  node: Node<any>,
-  reanimatedProps: AnimatedProps<any>
-) {
-  const sharedValues = Object.values(reanimatedProps);
-  const previousMapperId = _bindings.get(node);
-  if (previousMapperId !== undefined) {
-    Rea.stopMapper(previousMapperId as number);
-  }
-  if (sharedValues.length > 0) {
-    const viewId = container.getNativeId();
-    const { SkiaViewApi } = global;
-    const updateProps = () => {
-      for (const propName in reanimatedProps) {
-        node && node.setProp(propName, reanimatedProps[propName].value);
-      }
-      // On React Native we use the SkiaViewApi to redraw because it can
-      // run on the worklet thread (container.redraw can't)
-      // if SkiaViewApi is undefined, we are on web and container.redraw()
-      // can safely be invoked
-      if (SkiaViewApi) {
-        SkiaViewApi.requestRedraw(viewId);
-      } else {
-        container.redraw();
-      }
-    };
-    const mapperId = Rea.startMapper(() => {
-      "worklet";
-      Rea.runOnJS(updateProps)();
-    }, sharedValues);
-    _bindings.set(node, mapperId);
-  }
-}
-
 export function bindReanimatedProps(
   container: Container,
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
-  if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-    return bindReanimatedProps2(container, node, reanimatedProps);
-  }
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const sharedValues = Object.values(reanimatedProps);

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