@shopify/react-native-skia 0.1.229 → 0.1.230

package/lib/typescript/src/renderer/index.d.ts

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

package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts

@@ -1,14 +1,7 @@
-import type { SkiaSelector, SkiaValue } from "../../../values";
 export type SharedValueType<T = number> = {
     value: T;
 };
-export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
-export declare const isSelector: <T, R>(value: unknown) => value is {
-    selector: (v: T) => R;
-    value: SkiaValue<T>;
-};
-export declare const isAnimated: <T>(props: AnimatedProps<T, never>) => boolean;
-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" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };

package/lib/typescript/src/skia/types/Paragraph/Paragraph.d.ts

@@ -29,6 +29,29 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
      * method to have been called first.
      */
     getMaxWidth(): number;
+    /**
+     * Returns the minimum intrinsic width of the paragraph.
+     * The minimum intrinsic width is the width beyond which increasing the width of the paragraph
+     * does not decrease the height. This is effectively the width at which the paragraph
+     * can no longer wrap lines and is forced to overflow.
+     * This method requires the layout method to have been called first.
+     * @returns {number} The minimum intrinsic width of the paragraph.
+     */
+    getMinIntrinsicWidth(): number;
+    /**
+     * Returns the maximum intrinsic width of the paragraph.
+     * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,
+     * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.
+     * This width represents the ideal width for the paragraph to display all content in a single line without overflow.
+     * This method requires the layout method to have been called first.
+     * @returns {number} The maximum intrinsic width of the paragraph.
+     */
+    getMaxIntrinsicWidth(): number;
+    /**
+     * Returns the width of the longest line in the paragraph.
+     * This method requires the layout method to have been called first.
+     */
+    getLongestLine(): number;
     /**
      * Returns the index of the glyph at the given position. This method requires
      * the layout method to have been called first.

package/lib/typescript/src/skia/web/JsiSkParagraph.d.ts

@@ -4,6 +4,9 @@ import { HostObject } from "./Host";
 import type { JsiSkCanvas } from "./JsiSkCanvas";
 export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
     constructor(CanvasKit: CanvasKit, ref: Paragraph);
+    getMinIntrinsicWidth(): number;
+    getMaxIntrinsicWidth(): number;
+    getLongestLine(): number;
     layout(width: number): void;
     paint(canvas: JsiSkCanvas, x: number, y: number): void;
     getHeight(): number;

package/lib/typescript/src/views/SkiaBaseWebView.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import type { PointerEvent } from "react";
 import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaValue } from "../values";
 import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
 import { TouchType } from "./types";
 export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
@@ -50,12 +49,6 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
      * @param mode Drawing mode to use.
      */
     setDrawMode(mode: DrawMode): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
     createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
     private onStart;

package/lib/typescript/src/views/SkiaDomView.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import type { SkiaDomViewProps } from "./types";
 export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
     constructor(props: SkiaDomViewProps);
@@ -17,12 +16,6 @@ export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
      * Sends a redraw request to the native SkiaView.
      */
     redraw(): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(values: SkiaValue<unknown>[]): () => void;
     /**
      * Clear up the dom node when unmounting to release resources.
      */

package/lib/typescript/src/views/SkiaPictureView.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import type { SkiaPictureViewProps } from "./types";
 export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     constructor(props: SkiaPictureViewProps);
@@ -17,11 +16,5 @@ export declare class SkiaPictureView extends React.Component<SkiaPictureViewProp
      * Sends a redraw request to the native SkiaView.
      */
     redraw(): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(values: SkiaValue<unknown>[]): () => void;
     render(): React.JSX.Element;
 }

package/lib/typescript/src/views/SkiaViewNativeId.d.ts

@@ -0,0 +1,3 @@
+export declare const SkiaViewNativeId: {
+    current: number;
+};

package/lib/typescript/src/views/index.d.ts

@@ -1,6 +1,4 @@
-export * from "./SkiaView";
 export * from "./SkiaPictureView";
 export * from "./SkiaDomView";
 export * from "./types";
-export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/lib/typescript/src/views/types.d.ts

@@ -1,7 +1,6 @@
 import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
-import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
-import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export type DrawMode = "continuous" | "default";
 export type NativeSkiaViewProps = ViewProps & {
@@ -38,7 +37,6 @@ export type TouchHandlers = {
     onEnd?: (touchInfo: ExtendedTouchInfo) => void;
 };
 export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
-export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
 /**
  * Listener interface for value changes
  */
@@ -49,7 +47,6 @@ export interface ValueListener {
 export interface ISkiaViewApi {
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
     callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
-    registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
@@ -71,17 +68,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * Pass an animated value to the onSize property to get updates when
      * the Skia view is resized.
      */
-    onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
-}
-export interface SkiaDrawViewProps extends SkiaBaseViewProps {
-    /**
-     * Draw callback. Will be called whenever the view is invalidated and
-     * needs to redraw. This is either caused by a change in a react
-     * property, a touch event, or a call to redraw. If the view is in
-     * continuous mode the callback will be called 60 frames per second
-     * by the native view.
-     */
-    onDraw?: RNSkiaDrawCallback;
+    onSize?: SharedValueType<SkSize>;
 }
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {
     picture?: SkPicture;

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.230",
   "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/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/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/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";