@shopify/react-native-skia 0.1.141 → 0.1.145

package/src/renderer/DependencyManager.tsx

@@ -1,59 +1,193 @@
-import type { RefObject } from "react";
-
-import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 
-import { 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(isValue);
-    if (values.length > 0) {
-      this.subscriptions.set(node, { values, unsubscribe: null });
+  /**
+   * 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 (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);

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 { SkiaValue } from "../../../values";
-import { mapKeys } from "../../typeddash";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
@@ -17,26 +16,36 @@ export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   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)) {
+    if (isValue(value) || isSelector(value)) {
       return true;
     }
   }
   return false;
 };
 
-export const materialize = <T>(props: AnimatedProps<T>) => {
-  const result = { ...props };
-  mapKeys(props).forEach((key) => {
-    const value = props[key];
-    if (isValue(value)) {
-      result[key] = (value as SkiaValue<T[typeof key]>).current;
-    }
-  });
-  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]: T[K] | SkiaValue<T[K]>;
+  [K in keyof T]: AnimatedProp<T[K]>;
 };

package/src/skia/core/Data.ts

@@ -1,14 +1,14 @@
-import type { DependencyList } from "react";
-import { useRef, useEffect, useState } from "react";
-import { Image, Platform } from "react-native";
+import { useEffect, useState } from "react";
+import { Image } from "react-native";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSource } from "../types";
+import { isRNModule } from "../types";
+import type { SkData, DataModule, DataSourceParam } from "../types";
 
-const resolveAsset = (source: ReturnType<typeof require>) => {
-  return Platform.OS === "web"
-    ? source.default
-    : Image.resolveAssetSource(source).uri;
+const resolveAsset = (source: DataModule) => {
+  return isRNModule(source)
+    ? Image.resolveAssetSource(source).uri
+    : source.default;
 };
 
 const factoryWrapper = <T>(
@@ -25,19 +25,12 @@ const factoryWrapper = <T>(
   }
 };
 
-const loadDataCollection = <T>(
-  sources: DataSource[],
-  factory: (data: SkData) => T,
-  onError?: (err: Error) => void
-): Promise<(T | null)[]> =>
-  Promise.all(sources.map((source) => loadData(source, factory, onError)));
-
 const loadData = <T>(
-  source: DataSource,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source === null) {
+  if (source === null || source === undefined) {
     return new Promise((resolve) => resolve(null));
   } else if (source instanceof Uint8Array) {
     return new Promise((resolve) =>
@@ -50,51 +43,27 @@ const loadData = <T>(
     );
   }
 };
-
-type Source = DataSource | null | undefined;
-
 const useLoading = <T>(
-  source: Source,
-  loader: () => Promise<T | null>,
-  deps: DependencyList = []
+  source: DataSourceParam,
+  loader: () => Promise<T | null>
 ) => {
   const [data, setData] = useState<T | null>(null);
-  const prevSourceRef = useRef<Source>();
   useEffect(() => {
-    if (prevSourceRef.current !== source) {
-      prevSourceRef.current = source;
-      loader().then(setData);
-    } else {
-      setData(null);
-    }
+    loader().then(setData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [source]);
   return data;
 };
 
-export const useDataCollection = <T>(
-  sources: DataSource[],
-  factory: (data: SkData) => T,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) =>
-  useLoading(
-    sources,
-    () => loadDataCollection(sources, factory, onError),
-    deps
-  );
-
 export const useRawData = <T>(
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useLoading(source, () => loadData(source, factory, onError), deps);
+  onError?: (err: Error) => void
+) => useLoading(source, () => loadData(source, factory, onError));
 
 const identity = (data: SkData) => data;
 
 export const useData = (
-  source: DataSource | null | undefined,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useRawData(source, identity, onError, deps);
+  source: DataSourceParam,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);

package/src/skia/core/Font.ts

@@ -2,7 +2,7 @@
 import { useMemo } from "react";
 
 import { Skia } from "../Skia";
-import type { DataSource, SkFont } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useTypeface } from "./Typeface";
 
@@ -10,10 +10,10 @@ import { useTypeface } from "./Typeface";
  * Returns a Skia Font object
  * */
 export const useFont = (
-  font: DataSource | null | undefined,
+  font: DataSourceParam,
   size?: number,
   onError?: (err: Error) => void
-): SkFont | null => {
+) => {
   const typeface = useTypeface(font, onError);
   return useMemo(() => {
     if (typeface && size) {
@@ -23,6 +23,5 @@ export const useFont = (
     } else {
       return null;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [typeface]);
+  }, [size, typeface]);
 };

package/src/skia/core/Image.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
@@ -9,6 +9,6 @@ const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
  * Returns a Skia Image object
  * */
 export const useImage = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, imgFactory, onError);

package/src/skia/core/SVG.ts

@@ -1,11 +1,11 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
 const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
 
 export const useSVG = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, svgFactory, onError);