@shopify/react-native-skia 0.1.229 → 0.1.231

package/libs/ios/libskshaper.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.229",
+  "version": "0.1.231",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/animation/index.ts

@@ -1,4 +1 @@
-export * from "./timing";
-export * from "./spring";
-export * from "./decay";
 export * from "./functions";

package/src/dom/nodes/JsiSkDOM.ts

@@ -11,7 +11,6 @@ import type {
   PaintProps,
   ShaderProps,
   ImageShaderProps,
-  CustomDrawingNodeProps,
   LineProps,
   OvalProps,
   PatchProps,
@@ -72,7 +71,6 @@ import {
   VerticesNode,
   TextNode,
   OvalNode,
-  CustomDrawingNode,
   TextPathNode,
   TextBlobNode,
   GlyphsNode,
@@ -172,16 +170,6 @@ export class JsiSkDOM implements SkDOM {
       : new PathNode(this.ctx, props);
   }
 
-  CustomDrawing(props: CustomDrawingNodeProps) {
-    console.warn(
-      // eslint-disable-next-line max-len
-      "The <Drawing /> component is deprecated and will be removed in the next release. For custom drawings, please sure the <Picture /> component: https://shopify.github.io/react-native-skia/docs/shapes/pictures/"
-    );
-    return NATIVE_DOM
-      ? global.SkiaDomApi.CustomDrawingNode(props ?? {})
-      : new CustomDrawingNode(this.ctx, props);
-  }
-
   Line(props: LineProps) {
     return NATIVE_DOM
       ? global.SkiaDomApi.LineNode(props ?? {})

package/src/dom/nodes/Node.ts

@@ -5,22 +5,18 @@ import type {
   NodeType,
   DeclarationType,
 } from "../types";
-import type { DependencyManager } from "../../renderer/DependencyManager";
 import type { DeclarationContext } from "../types/DeclarationContext";
 
 export interface NodeContext {
   Skia: Skia;
-  depMgr: DependencyManager;
 }
 
 export abstract class JsiNode<P> implements Node<P> {
   protected _children: JsiNode<unknown>[] = [];
   protected Skia: Skia;
-  protected depMgr: DependencyManager;
 
   constructor(ctx: NodeContext, public type: NodeType, protected props: P) {
     this.Skia = ctx.Skia;
-    this.depMgr = ctx.depMgr;
   }
 
   setProps(props: P) {
@@ -46,7 +42,6 @@ export abstract class JsiNode<P> implements Node<P> {
   }
 
   dispose() {
-    this.depMgr.unsubscribeNode(this);
     this._children.forEach((child) => child.dispose());
   }
 

package/src/dom/nodes/drawings/RRectNode.ts

@@ -1,11 +1,11 @@
-import type { SkRRect } from "../../../skia/types";
+import type { InputRRect, SkRRect } from "../../../skia/types";
 import type { DrawingContext, RoundedRectProps } from "../../types";
 import { NodeType } from "../../types";
 import { processRRect } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
-export class RRectNode extends JsiDrawingNode<RoundedRectProps, SkRRect> {
+export class RRectNode extends JsiDrawingNode<RoundedRectProps, InputRRect> {
   rect?: SkRRect;
 
   constructor(ctx: NodeContext, props: RoundedRectProps) {

package/src/dom/nodes/drawings/index.ts

@@ -9,7 +9,6 @@ export * from "./OvalNode";
 export * from "./LineNode";
 export * from "./PatchNode";
 export * from "./VerticesNode";
-export * from "./CustomDrawingNode";
 export * from "./Text";
 export * from "./PictureNode";
 export * from "./DiffRectNode";

package/src/dom/types/Common.ts

@@ -4,6 +4,7 @@ import type {
   BlendMode,
   Color,
   InputMatrix,
+  InputRRect,
   PaintStyle,
   SkPaint,
   SkPath,
@@ -48,7 +49,7 @@ export interface RRectCtor extends RectCtor {
 }
 
 export type RectDef = RectCtor | { rect: SkRect };
-export type RRectDef = RRectCtor | { rect: SkRRect };
+export type RRectDef = RRectCtor | { rect: InputRRect };
 
 export interface PointCircleDef {
   c?: Vector;

package/src/dom/types/Drawings.ts

@@ -26,7 +26,6 @@ import type {
   RRectDef,
   SkEnum,
 } from "./Common";
-import type { DrawingContext } from "./DrawingContext";
 
 export interface DrawingNodeProps extends GroupProps {
   paint?: SkPaint;
@@ -48,10 +47,6 @@ export interface PathProps extends DrawingNodeProps {
   fillType?: SkEnum<typeof FillType>;
 }
 
-export interface CustomDrawingNodeProps extends DrawingNodeProps {
-  drawing: (ctx: DrawingContext) => void;
-}
-
 export interface LineProps extends DrawingNodeProps {
   p1: Vector;
   p2: Vector;

package/src/dom/types/NodeType.ts

@@ -48,7 +48,6 @@ export const enum NodeType {
 
   // Drawings
   Group = "skGroup",
-  Drawing = "skDrawing",
   Paint = "skPaint",
   Circle = "skCircle",
   Fill = "skFill",

package/src/dom/types/SkDOM.ts

@@ -19,7 +19,6 @@ import type {
   ImageProps,
   CircleProps,
   PathProps,
-  CustomDrawingNodeProps,
   LineProps,
   OvalProps,
   PatchProps,
@@ -77,9 +76,6 @@ export interface SkDOM {
   Image(props: ImageProps): DrawingNode<ImageProps>;
   Circle(props: CircleProps): DrawingNode<CircleProps>;
   Path(props: PathProps): DrawingNode<PathProps>;
-  CustomDrawing(
-    props: CustomDrawingNodeProps
-  ): DrawingNode<CustomDrawingNodeProps>;
   Line(props: LineProps): DrawingNode<LineProps>;
   Oval(props: OvalProps): DrawingNode<OvalProps>;
   Patch(props: PatchProps): DrawingNode<PatchProps>;

package/src/headless/index.ts

@@ -6,13 +6,14 @@ 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";
 
 export * from "../renderer/components";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let Skia: any;
 
-export const draw = (element: ReactNode, width: number, height: number) => {
+export const makeOffscreenSurface = (width: number, height: number) => {
   if (!Skia) {
     Skia = JsiSkApi(CanvasKit);
   }
@@ -20,12 +21,15 @@ export const draw = (element: ReactNode, width: number, height: number) => {
   if (surface === null) {
     throw new Error("Couldn't create surface!");
   }
+  return surface;
+};
+
+export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   surface.flush();
-  const image = surface.makeImageSnapshot();
-  return image;
+  return surface.makeImageSnapshot();
 };

package/src/index.ts

@@ -6,7 +6,6 @@ export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";
 export * from "./external";
-export * from "./values";
 export * from "./animation";
 export * from "./dom/types";
 export * from "./dom/nodes";

package/src/mock/index.ts

@@ -1,7 +1,6 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
 import { JsiSkApi } from "../skia/web";
-import { ValueApi } from "../values/web";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Noop: () => any = () => undefined;
@@ -10,13 +9,11 @@ const NoopSharedValue = () => ({ value: 0 });
 
 export const Mock = (CanvasKit: CanvasKit) => {
   global.SkiaApi = JsiSkApi(CanvasKit);
-  global.SkiaValueApi = ValueApi;
   const Skia = global.SkiaApi;
   return {
     Skia,
     ...require("../renderer/components"),
     ...require("../skia"),
-    ...require("../values"),
     ...require("../animation"),
     ...require("../dom/types"),
     ...require("../dom/nodes"),

package/src/renderer/Canvas.tsx

@@ -18,11 +18,9 @@ import { SkiaDomView } from "../views";
 import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
-import type { SkiaValue } from "../values/types";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
-import { isValue } from "./processors";
 
 export const useCanvasRef = () => useRef<SkiaDomView>(null);
 
@@ -43,9 +41,7 @@ const useOnSizeEvent = (
       }
       const { width, height } = event.nativeEvent.layout;
 
-      if (isValue(resultValue)) {
-        resultValue.current = { width, height };
-      } else if (resultValue) {
+      if (resultValue) {
         resultValue.value = { width, height };
       }
     },
@@ -78,18 +74,9 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       return id;
     }, [innerRef]);
 
-    const registerValues = useCallback(
-      (values: Array<SkiaValue<unknown>>) => {
-        if (ref.current !== null) {
-          return ref.current.registerValues(values);
-        }
-        return () => {};
-      },
-      [ref]
-    );
     const root = useMemo(
-      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),
-      [redraw, registerValues, getNativeId]
+      () => new SkiaRoot(Skia, redraw, getNativeId),
+      [redraw, getNativeId]
     );
 
     // Render effect
@@ -97,11 +84,6 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       root.render(children);
     }, [children, root, redraw]);
 
-    useEffect(() => {
-      return () => {
-        root.unmount();
-      };
-    }, [root]);
     if (NATIVE_DOM) {
       return (
         <SkiaDomView

package/src/renderer/Container.tsx

@@ -7,18 +7,15 @@ import type {
 } from "../dom/types";
 import type { Skia } from "../skia/types";
 
-import type { DependencyManager } from "./DependencyManager";
-
 export class Container {
   private _root: RenderNode<GroupProps>;
   public Sk: SkDOM;
   constructor(
     Skia: Skia,
-    public depMgr: DependencyManager,
     public redraw: () => void = () => {},
     public getNativeId: () => number = () => 0
   ) {
-    this.Sk = new JsiSkDOM({ Skia, depMgr });
+    this.Sk = new JsiSkDOM({ Skia });
     this._root = this.Sk.Group();
   }
 

package/src/renderer/HostComponents.ts

@@ -8,7 +8,6 @@ import type {
   ImageProps,
   PaintProps,
   PathProps,
-  CustomDrawingNodeProps,
   LineProps,
   OvalProps,
   DiffRectProps,
@@ -59,12 +58,10 @@ import type {
 } from "../dom/types/ImageFilters";
 import type { SkRect, SkRRect } from "../skia/types";
 import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
-import type { SkiaValue } from "../values";
 
 import type { Container } from "./Container";
 import { exhaustiveCheck } from "./typeddash";
 import type { SkiaProps } from "./processors";
-import type { DependencyManager } from "./DependencyManager";
 
 // This flag should only be turned on for debugging/testing
 const shouldUseJSDomOnNative = false;
@@ -72,10 +69,6 @@ export const NATIVE_DOM = shouldUseJSDomOnNative ? false : !!global.SkiaDomApi;
 
 declare global {
   var SkiaDomApi: {
-    DependencyManager: (
-      registerValues: (values: Array<SkiaValue<unknown>>) => () => void
-    ) => DependencyManager;
-
     // FIXME: We need a better type for this
     RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
     RRectNode: (
@@ -86,9 +79,6 @@ declare global {
     FillNode: (props: PaintProps) => RenderNode<PaintProps>;
     CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
     PathNode: (props: PathProps) => RenderNode<PathProps>;
-    CustomDrawingNode: (
-      props: CustomDrawingNodeProps
-    ) => RenderNode<CustomDrawingNodeProps>;
     LineNode: (props: LineProps) => RenderNode<LineProps>;
     ImageNode: (props: ImageProps) => RenderNode<ImageProps>;
     OvalNode: (props: OvalProps) => RenderNode<OvalProps>;
@@ -211,7 +201,6 @@ declare global {
       skImage: SkiaProps<ImageProps>;
       skCircle: SkiaProps<CircleProps>;
       skPath: SkiaProps<PathProps>;
-      skDrawing: SkiaProps<CustomDrawingNodeProps>;
       skLine: SkiaProps<LineProps>;
       skOval: SkiaProps<OvalProps>;
       skPatch: SkiaProps<PatchProps>;
@@ -302,8 +291,6 @@ export const createNode = (
       return Sk.Circle(props);
     case NodeType.Path:
       return Sk.Path(props);
-    case NodeType.Drawing:
-      return Sk.CustomDrawing(props);
     case NodeType.Line:
       return Sk.Line(props);
     case NodeType.Oval:

package/src/renderer/HostConfig.ts

@@ -3,7 +3,6 @@ import type { HostConfig } from "react-reconciler";
 import { DefaultEventPriority } from "react-reconciler/constants";
 
 import type { NodeType, Node } from "../dom/types";
-import type { SkiaValue } from "../values";
 import {
   bindReanimatedProps,
   extractReanimatedProps,
@@ -12,9 +11,7 @@ import {
 
 import type { Container } from "./Container";
 import { createNode } from "./HostComponents";
-import type { AnimatedProps } from "./processors";
-import { isSelector, isValue } from "./processors";
-import { mapKeys, shallowEq } from "./typeddash";
+import { shallowEq } from "./typeddash";
 
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
@@ -128,9 +125,8 @@ export const skHostConfig: SkiaHostConfig = {
   ) {
     debug("createInstance", type);
     const [props, reanimatedProps] = extractReanimatedProps(pristineProps);
-    const node = createNode(container, type, materialize(props));
+    const node = createNode(container, type, props);
     bindReanimatedProps(container, node, reanimatedProps);
-    container.depMgr.subscribeNode(node, props);
     return node;
   },
 
@@ -162,7 +158,6 @@ export const skHostConfig: SkiaHostConfig = {
 
   resetAfterCommit(container) {
     debug("resetAfterCommit");
-    container.depMgr.update();
     container.redraw();
   },
 
@@ -201,10 +196,8 @@ export const skHostConfig: SkiaHostConfig = {
       return;
     }
     const [props, reanimatedProps] = extractReanimatedProps(nextProps);
-    updatePayload.depMgr.unsubscribeNode(instance);
-    instance.setProps(materialize(props));
+    instance.setProps(props);
     bindReanimatedProps(updatePayload, instance, reanimatedProps);
-    updatePayload.depMgr.subscribeNode(instance, props);
   },
 
   commitTextUpdate: (
@@ -249,17 +242,3 @@ export const skHostConfig: SkiaHostConfig = {
   afterActiveInstanceBlur: () => {},
   detachDeletedInstance: () => {},
 };
-
-const materialize = <P>(props: AnimatedProps<P>) => {
-  const result = { ...props } as P;
-  mapKeys(props).forEach((key) => {
-    const prop = props[key];
-    if (isValue(prop)) {
-      result[key] = (prop as SkiaValue<P[typeof key]>).current;
-    } else if (isSelector(prop)) {
-      result[key] = prop.selector(prop.value.current) as P[typeof key];
-    }
-  });
-
-  return result;
-};

package/src/renderer/Reconciler.tsx

@@ -3,22 +3,12 @@ import type { OpaqueRoot } from "react-reconciler";
 import ReactReconciler from "react-reconciler";
 
 import type { Skia } from "../skia/types";
-import type { SkiaValue } from "../values/types";
 
-import { DependencyManager } from "./DependencyManager";
 import { skHostConfig, debug as hostDebug } from "./HostConfig";
 import { Container } from "./Container";
-import { NATIVE_DOM } from "./HostComponents";
 
 const skiaReconciler = ReactReconciler(skHostConfig);
 
-type RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;
-
-const createDependencyManager = (registerValues: RegisterValues) =>
-  NATIVE_DOM
-    ? global.SkiaDomApi.DependencyManager(registerValues)
-    : new DependencyManager(registerValues);
-
 skiaReconciler.injectIntoDevTools({
   bundleType: 1,
   version: "0.0.1",
@@ -31,12 +21,10 @@ export class SkiaRoot {
 
   constructor(
     Skia: Skia,
-    registerValues: RegisterValues = () => () => {},
     redraw: () => void = () => {},
     getNativeId: () => number = () => 0
   ) {
-    const depMgr = createDependencyManager(registerValues);
-    this.container = new Container(Skia, depMgr, redraw, getNativeId);
+    this.container = new Container(Skia, redraw, getNativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
@@ -56,12 +44,6 @@ export class SkiaRoot {
     });
   }
 
-  unmount() {
-    skiaReconciler.updateContainer(null, this.root, null, () => {
-      this.container.depMgr.remove();
-    });
-  }
-
   get dom() {
     return this.container.root;
   }

package/src/renderer/components/index.ts

@@ -14,6 +14,5 @@ export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
-export * from "./Drawing";
 
 export * from "./paragraph";

package/src/renderer/index.ts

@@ -1,2 +1 @@
 export * from "./components";
-export * from "./DependencyManager";

package/src/renderer/processors/Animations/Animations.ts

@@ -1,58 +1,8 @@
-import type { SkiaSelector, SkiaValue } from "../../../values";
-
 export type SharedValueType<T = number> = {
   value: T;
 };
 
-export const isValue = (value: unknown): value is SkiaValue<unknown> => {
-  if (value === undefined || value === null) {
-    return false;
-  }
-  try {
-    if (
-      typeof value === "object" &&
-      "__typename__" in value &&
-      (value as unknown as SkiaValue<unknown>).__typename__ === "RNSkValue"
-    ) {
-      return true;
-    }
-  } catch {}
-  return false;
-};
-
-export const isSelector = <T, R>(
-  value: unknown
-): value is {
-  selector: (v: T) => R;
-  value: SkiaValue<T>;
-} => {
-  if (value) {
-    return (
-      typeof value === "object" &&
-      "selector" in value &&
-      "value" in value &&
-      (value as Record<string, unknown>).selector !== undefined &&
-      (value as Record<string, unknown>).value !== undefined
-    );
-  }
-  return false;
-};
-
-export const isAnimated = <T>(props: AnimatedProps<T>) => {
-  for (const value of Object.values(props)) {
-    if (isValue(value) || isSelector(value)) {
-      return true;
-    }
-  }
-  return false;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnimatedProp<T, P = any> =
-  | T
-  | SkiaValue<T>
-  | SkiaSelector<T, P>
-  | SharedValueType<T>;
+export type AnimatedProp<T> = T | SharedValueType<T>;
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"