@shopify/react-native-skia 0.1.142 → 0.1.146

package/src/renderer/DependencyManager.tsx

@@ -1,62 +1,193 @@
-import type { RefObject } from "react";
-
-import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 
-import { isSelector, isValue } from "./processors";
 import type { Node } from "./nodes";
+import type { AnimatedProps } from "./processors";
+import { isSelector, isValue } from "./processors";
+import { mapKeys } from "./typeddash";
 
 type Unsubscribe = () => void;
-type Props = { [key: string]: unknown };
+type Mutator = (value: unknown) => void;
+
+type SubscriptionState = {
+  nodes: Map<Node, Mutator[]>;
+  unsubscribe: null | Unsubscribe;
+};
 
 export class DependencyManager {
-  ref: RefObject<SkiaView>;
-  subscriptions: Map<
-    Node,
-    { values: SkiaValue<unknown>[]; unsubscribe: null | Unsubscribe }
-  > = new Map();
-
-  constructor(ref: RefObject<SkiaView>) {
-    this.ref = ref;
-  }
+  registerValues: (values: Array<SkiaValue<unknown>>) => () => void;
+  subscriptions: Map<SkiaValue<unknown>, SubscriptionState> = new Map();
+  unregisterDependantValues: null | Unsubscribe = null;
 
-  unSubscribeNode(node: Node) {
-    const subscription = this.subscriptions.get(node);
-    if (subscription && subscription.unsubscribe) {
-      subscription.unsubscribe();
-    }
-    this.subscriptions.delete(node);
+  constructor(
+    registerValues: (values: Array<SkiaValue<unknown>>) => () => void
+  ) {
+    this.registerValues = registerValues;
   }
 
-  subscribeNode(node: Node, props: Props) {
-    const values = Object.values(props)
-      .filter((v) => isValue(v) || isSelector(v))
-      .map((v) => (isSelector(v) ? v.value : (v as SkiaValue<unknown>)));
+  /**
+   * Call to unsubscribe all value listeners from the given node based
+   * on the current list of subscriptions for the node. This function
+   * is typically called when the node is unmounted or when one or more
+   * properties have changed.
+   * @param node Node to unsubscribe value listeners from
+   */
+  unsubscribeNode(node: Node) {
+    const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>
+      p.nodes.has(node)
+    );
 
-    if (values.length > 0) {
-      this.subscriptions.set(node, { values, unsubscribe: null });
+    if (subscriptions) {
+      subscriptions.forEach((si) => {
+        // Delete node from subscription
+        si.nodes.delete(node);
+
+        // Remove subscription if there are no listeneres left on the value
+        if (si.nodes.size === 0) {
+          // There are no more nodes subscribing to this value, we can call
+          // unsubscribe on it.
+          if (!si.unsubscribe) {
+            throw new Error("Failed to unsubscribe to value subscription");
+          }
+          si.unsubscribe && si.unsubscribe();
+
+          // Remove from subscription states as well
+          const element = Array.from(this.subscriptions.entries()).find(
+            ([_, sub]) => sub === si
+          );
+          if (!element) {
+            throw new Error("Failed to find value subscription");
+          }
+          if (!this.subscriptions.delete(element[0])) {
+            throw new Error("Failed to delete value subscription");
+          }
+        }
+      });
     }
   }
 
-  subscribe() {
-    if (this.ref.current === null) {
-      throw new Error("Canvas ref is not set");
+  /**
+   * Adds listeners to the provided values so that the node is notified
+   * when a value changes. This is done in an optimized way so that this
+   * class only needs to listen to the value once and then forwards the
+   * change to the node and its listener. This method is typically called
+   * when the node is mounted and when one or more props on the node changes.
+   * @param node Node to subscribe to value changes for
+   * @param props Node's properties
+   * @param onResolveProp Callback when a property value changes
+   */
+  subscribeNode<P extends Record<string, unknown>>(
+    node: Node,
+    props: AnimatedProps<P>
+  ) {
+    // Get mutators from node's properties
+    const propSubscriptions = initializePropertySubscriptions(node, props);
+    if (propSubscriptions.length === 0) {
+      return;
     }
-    this.subscriptions.forEach((subscription) => {
-      if (subscription.unsubscribe === null) {
-        subscription.unsubscribe = this.ref.current!.registerValues(
-          subscription.values
-        );
+
+    // Install all mutators for the node
+    propSubscriptions.forEach((ps) => {
+      // Do we already have a state for this SkiaValue
+      let subscriptionState = this.subscriptions.get(ps.value);
+      if (!subscriptionState) {
+        // Let's create a new subscription state for the skia value
+        subscriptionState = {
+          nodes: new Map(),
+          unsubscribe: null,
+        };
+        // Add single subscription to the new value
+        subscriptionState.unsubscribe = ps.value.addListener((v) => {
+          subscriptionState!.nodes.forEach((mutators) =>
+            mutators.forEach((m) => m(v))
+          );
+        });
+        this.subscriptions.set(ps.value, subscriptionState);
       }
+      // subscription mutators
+      subscriptionState.nodes.set(
+        node,
+        propSubscriptions
+          .filter((m) => m.value === ps.value)
+          .map((m) => m.mutator)
+      );
     });
   }
 
-  unsubscribe() {
-    this.subscriptions.forEach(({ unsubscribe }) => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
+  /**
+   * Called when the hosting container is mounted or updated. This ensures that we have
+   * a ref to the underlying SkiaView so that we can registers redraw listeners
+   * on values used in the current View automatically.
+   */
+  update() {
+    // Remove any previous registrations
+    if (this.unregisterDependantValues) {
+      this.unregisterDependantValues();
+    }
+
+    // Register redraw requests on the SkiaView for each unique value
+    this.unregisterDependantValues = this.registerValues(
+      Array.from(this.subscriptions.keys())
+    );
+  }
+
+  /**
+   * Called when the hosting container is unmounted or recreated. This ensures that we remove
+   * all subscriptions to Skia values so that we don't have any listeners left after
+   * the component is removed.
+   */
+  remove() {
+    // 1) Unregister redraw requests
+    if (this.unregisterDependantValues) {
+      this.unregisterDependantValues();
+      this.unregisterDependantValues = null;
+    }
+
+    // 2) Unregister nodes
+    Array.from(this.subscriptions.values()).forEach((si) => {
+      Array.from(si.nodes.keys()).forEach((node) => this.unsubscribeNode(node));
     });
+
+    // 3) Clear the rest of the subscriptions
     this.subscriptions.clear();
   }
 }
+
+const initializePropertySubscriptions = <P,>(
+  node: Node<P>,
+  props: AnimatedProps<P>
+) => {
+  const nodePropSubscriptions: Array<{
+    value: SkiaValue<unknown>;
+    mutator: Mutator;
+  }> = [];
+
+  mapKeys(props).forEach((key) => {
+    const propvalue = props[key];
+
+    if (isValue(propvalue)) {
+      // Subscribe to changes
+      nodePropSubscriptions.push({
+        value: propvalue,
+        mutator: (v) => (node.resolvedProps[key] = v as P[typeof key]),
+      });
+      // Set initial value
+      node.resolvedProps[key] = (propvalue as SkiaValue<P[typeof key]>).current;
+    } else if (isSelector(propvalue)) {
+      // Subscribe to changes
+      nodePropSubscriptions.push({
+        value: propvalue.value,
+        mutator: (v) =>
+          (node.resolvedProps[key] = propvalue.selector(v) as P[typeof key]),
+      });
+      // Set initial value
+      node.resolvedProps[key] = propvalue.selector(
+        propvalue.value.current
+      ) as P[typeof key];
+    } else {
+      // Set initial value
+      node.resolvedProps[key] = propvalue as P[typeof key];
+    }
+  });
+
+  return nodePropSubscriptions;
+};

package/src/renderer/HostConfig.ts

@@ -101,7 +101,7 @@ const removeNode = (parent: Node, child: Node) => {
   bustBranchMemoization(parent);
   const index = parent.children.indexOf(child);
   parent.children.splice(index, 1);
-  child.depMgr.unSubscribeNode(child);
+  child.depMgr.unsubscribeNode(child);
   // unsubscribe to all children as well
   for (const c of child.children) {
     removeNode(child, c);
@@ -265,7 +265,17 @@ export const skHostConfig: SkiaHostConfig = {
       return;
     }
     bustBranchMemoization(instance);
-    instance.props = nextProps;
+    if (instance instanceof DrawingNode) {
+      const { onDraw, skipProcessing, ...props } = nextProps;
+      instance.props = props;
+    } else if (instance instanceof DeclarationNode) {
+      const { onDeclare, ...props } = nextProps;
+      instance.props = props;
+    } else {
+      throw new Error(
+        "Unsupported instance commitUpdate " + instance.constructor.name
+      );
+    }
   },
 
   commitTextUpdate: (

package/src/renderer/components/Blend.tsx

@@ -1,10 +1,21 @@
 import type { ReactNode } from "react";
 import React from "react";
 
+import type { SkImageFilter, SkShader } from "../../skia/types";
 import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import type { AnimatedProps, SkEnum } from "../processors";
 import { enumKey } from "../processors/Paint";
+import type { DeclarationResult } from "../nodes/Declaration";
+
+const childrenAreImageFilters = (
+  children: DeclarationResult[]
+): children is SkImageFilter[] =>
+  children.every((child) => isImageFilter(child));
+
+const childrenAreShaders = (
+  children: DeclarationResult[]
+): children is SkShader[] => children.every((child) => isShader(child));
 
 interface BlendProps {
   mode: SkEnum<typeof BlendMode>;
@@ -13,12 +24,21 @@ interface BlendProps {
 
 const onDeclare = createDeclaration<BlendProps>(
   ({ mode }, children, { Skia }) => {
-    const [inner, outer] = children;
     const blend = BlendMode[enumKey(mode)];
-    if (isImageFilter(outer) && isImageFilter(inner)) {
-      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-    } else if (isShader(outer) && isShader(inner)) {
-      return Skia.Shader.MakeBlend(blend, outer, inner);
+    if (childrenAreImageFilters(children)) {
+      return children.reverse().reduce<SkImageFilter | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+      }, null);
+    } else if (childrenAreShaders(children)) {
+      return children.reverse().reduce<SkShader | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.Shader.MakeBlend(blend, outer, inner);
+      }, null);
     }
     throw new Error("<Blend /> can only blend Shaders or ImageFilters");
   }

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -8,7 +8,7 @@ import { getInput } from "../imageFilters/getInput";
 import type { GroupProps } from "../Group";
 import { Group } from "../Group";
 
-const disableFilterMemoization = (children: Node<unknown>[]) => {
+const disableFilterMemoization = (children: Node[]) => {
   children.forEach((child) => {
     child.memoizable = false;
     disableFilterMemoization(child.children);

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -18,8 +18,8 @@ const onDeclare = createDeclaration<MorphologyProps>(
     const r = processRadius(Skia, radius);
     const factory =
       operator === "dilate"
-        ? Skia.ImageFilter.MakeDilate
-        : Skia.ImageFilter.MakeErode;
+        ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);
     return factory(r.x, r.y, input);
   }
 );

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -30,8 +30,8 @@ const onDeclare = createDeclaration<ShadowProps>(
       factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
     } else {
       factory = shadowOnly
-        ? Skia.ImageFilter.MakeDropShadowOnly
-        : Skia.ImageFilter.MakeDropShadow;
+        ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);
     }
     return factory(dx, dy, blur, blur, color, input);
   }

package/src/renderer/nodes/Declaration.tsx

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";
-import { isAnimated, materialize } from "../processors";
+import { isAnimated } from "../processors";
 import type { DependencyManager } from "../DependencyManager";
 import type { SkJSIInstance } from "../../skia/types";
 
@@ -28,9 +28,8 @@ export const useDeclaration = <P,>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
-export const isDeclarationNode = (
-  node: Node
-): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+export const isDeclarationNode = <P,>(node: Node): node is DeclarationNode<P> =>
+  node instanceof DeclarationNode;
 
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
@@ -54,14 +53,13 @@ export class DeclarationNode<P> extends Node<P> {
     super.props = props;
   }
 
-  get props() {
-    return this._props;
+  get props(): P {
+    return this.resolvedProps;
   }
 
   draw(ctx: DrawingContext) {
     const children = this.visit(ctx);
-    const props = materialize(this.props);
-    const obj = this.onDeclare(props, children, ctx);
+    const obj = this.onDeclare(this.props, children, ctx);
     return obj;
   }
 }

package/src/renderer/nodes/Drawing.tsx

@@ -3,7 +3,6 @@ import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors/Animations/Animations";
-import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
 import { processPaint } from "../processors";
@@ -25,8 +24,8 @@ export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
-export type DrawingProps<T> = {
-  onDraw: DrawingCallback<T>;
+export type DrawingProps<P> = {
+  onDraw: DrawingCallback<P>;
   skipProcessing?: boolean;
   children?: ReactNode | ReactNode[];
 };
@@ -47,20 +46,19 @@ export class DrawingNode<P> extends Node<P> {
   }
 
   draw(ctx: DrawingContext) {
-    const drawingProps = materialize(this.props);
     if (this.skipProcessing) {
-      this.onDraw(ctx, drawingProps, this);
+      this.onDraw(ctx, this.props, this);
     } else {
       const declarations = this.visit(ctx);
       const paint = processPaint(
         ctx.Skia,
         ctx.paint.copy(),
         ctx.opacity,
-        drawingProps,
+        this.props,
         declarations
       );
       [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
-        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
+        this.onDraw({ ...ctx, paint: currentPaint }, this.props, this);
       });
     }
   }

package/src/renderer/nodes/Node.ts

@@ -12,29 +12,31 @@ type DeclarationResult = SkJSIInstance<string> | null;
 
 export abstract class Node<P = unknown> {
   readonly children: Node[] = [];
-  _props: AnimatedProps<P>;
+  // This cast is ok because we understand that the dependency manager will setup the initial props
+  resolvedProps: P = {} as P;
   memoizable = false;
   memoized: DeclarationResult | null = null;
   parent?: Node;
   depMgr: DependencyManager;
 
   constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {
-    this._props = props;
     this.depMgr = depMgr;
-    this.depMgr.unSubscribeNode(this);
-    this.depMgr.subscribeNode(this, props);
+    this.updatePropSubscriptions(props);
   }
 
   abstract draw(ctx: DrawingContext): void | DeclarationResult;
 
-  set props(props: AnimatedProps<P>) {
-    this.depMgr.unSubscribeNode(this);
+  updatePropSubscriptions(props: AnimatedProps<P>) {
     this.depMgr.subscribeNode(this, props);
-    this._props = props;
   }
 
-  get props() {
-    return this._props;
+  set props(props: AnimatedProps<P>) {
+    this.depMgr.unsubscribeNode(this);
+    this.updatePropSubscriptions(props);
+  }
+
+  get props(): P {
+    return this.resolvedProps;
   }
 
   visit(ctx: DrawingContext, children?: Node[]) {

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

@@ -1,5 +1,4 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
-import { mapKeys } from "../../typeddash";
 
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
@@ -37,28 +36,16 @@ export const isSelector = <T, R>(
 
 export const isAnimated = <T>(props: AnimatedProps<T>) => {
   for (const value of Object.values(props)) {
-    if (isValue(value)) {
+    if (isValue(value) || isSelector(value)) {
       return true;
     }
   }
   return false;
 };
 
-export const materialize = <T>(props: AnimatedProps<T>) => {
-  const result = { ...props };
-  mapKeys(props).forEach((key) => {
-    const prop = props[key];
-    if (isValue(prop)) {
-      result[key] = (prop as SkiaValue<T[typeof key]>).current;
-    } else if (isSelector(prop)) {
-      result[key] = prop.selector(prop.value.current) as T[typeof key];
-    }
-  });
-  return result as T;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
+
 export type AnimatedProps<T> = {
   [K in keyof T]: AnimatedProp<T[K]>;
 };

package/src/skia/types/Paint/Paint.ts

@@ -34,6 +34,12 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    */
   copy(): SkPaint;
 
+  /**
+   * Sets all SkPaint contents to their initial values. This is equivalent to replacing
+     SkPaint with the result of SkPaint().
+   */
+  reset(): void;
+
   /**
    * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
    * (sRGB gamut, and encoded with the sRGB transfer function).

package/src/skia/types/Picture/Picture.ts

@@ -3,8 +3,9 @@ import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
 import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkPicture {
+export interface SkPicture extends SkJSIInstance<"Picture"> {
   /**
    *  Returns a new shader that will draw with this picture.
    *

package/src/skia/web/Host.ts

@@ -1,11 +1,10 @@
-/* eslint-disable no-nested-ternary */
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
 export class NotImplementedOnRNWeb extends Error {
-  constructor() {
-    super("Not implemented on React Native Web");
+  constructor(msg?: string) {
+    super(msg ?? "Not implemented on React Native Web");
   }
 }
 
@@ -17,12 +16,12 @@ export abstract class Host {
   }
 }
 
-export abstract class HostObject<T, N extends string>
+export abstract class BaseHostObject<T, N extends string>
   extends Host
   implements SkJSIInstance<N>
 {
   readonly __typename__: N;
-  readonly ref: T;
+  ref: T;
 
   constructor(CanvasKit: CanvasKit, ref: T, typename: N) {
     super(CanvasKit);
@@ -31,23 +30,14 @@ export abstract class HostObject<T, N extends string>
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NonNullish = {};
-
-export const toOptionalValue = <T>(
-  value: NonNullish | undefined | null
-): T | undefined | null =>
-  value === undefined ? undefined : value === null ? null : toValue(value);
-
-export const toUndefinedableValue = <T>(
-  value: NonNullish | undefined
-): T | undefined => (value === undefined ? undefined : toValue(value));
-
-export const toNullableValue = <T>(value: NonNullish | null): T | null =>
-  value === null ? null : toValue(value);
-
-export const toValue = <T>(value: NonNullish): T =>
-  (value as HostObject<T, string>).ref;
+export abstract class HostObject<T, N extends string> extends BaseHostObject<
+  T,
+  N
+> {
+  static fromValue<T>(value: SkJSIInstance<string>) {
+    return (value as HostObject<T, string>).ref;
+  }
+}
 
 export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
 export const optEnum = (