@shopify/react-native-skia 0.1.141 → 0.1.145

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

@@ -1,21 +1,47 @@
-import type { RefObject } from "react";
-import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 import type { Node } from "./nodes";
+import type { AnimatedProps } from "./processors";
 declare type Unsubscribe = () => void;
-declare type Props = {
-    [key: string]: unknown;
+declare type Mutator = (value: unknown) => void;
+declare type SubscriptionState = {
+    nodes: Map<Node, Mutator[]>;
+    unsubscribe: null | Unsubscribe;
 };
 export declare class DependencyManager {
-    ref: RefObject<SkiaView>;
-    subscriptions: Map<Node, {
-        values: SkiaValue<unknown>[];
-        unsubscribe: null | Unsubscribe;
-    }>;
-    constructor(ref: RefObject<SkiaView>);
-    unSubscribeNode(node: Node): void;
-    subscribeNode(node: Node, props: Props): void;
-    subscribe(): void;
-    unsubscribe(): void;
+    registerValues: (values: Array<SkiaValue<unknown>>) => () => void;
+    subscriptions: Map<SkiaValue<unknown>, SubscriptionState>;
+    unregisterDependantValues: null | Unsubscribe;
+    constructor(registerValues: (values: Array<SkiaValue<unknown>>) => () => void);
+    /**
+     * 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): void;
+    /**
+     * 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>): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
 }
 export {};

package/lib/typescript/src/renderer/nodes/Declaration.d.ts

@@ -8,7 +8,7 @@ export declare type DeclarationResult = SkJSIInstance<string> | null;
 declare type DeclarationCallback<T> = (props: T, children: DeclarationResult[], ctx: DrawingContext) => DeclarationResult;
 export declare const createDeclaration: <T>(cb: DeclarationCallback<T>) => DeclarationCallback<T>;
 export declare const useDeclaration: <P>(cb: DeclarationCallback<P>, deps?: DependencyList | undefined) => DeclarationCallback<P>;
-export declare const isDeclarationNode: (node: Node) => node is DeclarationNode<unknown>;
+export declare const isDeclarationNode: <P>(node: Node) => node is DeclarationNode<P>;
 export interface DeclarationProps<P> {
     onDeclare: DeclarationCallback<P>;
 }
@@ -16,7 +16,7 @@ export declare class DeclarationNode<P> extends Node<P> {
     private onDeclare;
     constructor(depMgr: DependencyManager, onDeclare: DeclarationCallback<P>, props: AnimatedProps<P>);
     set props(props: AnimatedProps<P>);
-    get props(): AnimatedProps<P>;
+    get props(): P;
     draw(ctx: DrawingContext): DeclarationResult;
 }
 export {};

package/lib/typescript/src/renderer/nodes/Drawing.d.ts

@@ -7,8 +7,8 @@ declare type DrawingCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>)
 declare type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export declare const createDrawing: <P>(cb: OnDrawCallback<P>) => DrawingCallback<P>;
 export declare const useDrawing: <P>(cb: OnDrawCallback<P>, deps?: DependencyList | undefined) => OnDrawCallback<P>;
-export declare type DrawingProps<T> = {
-    onDraw: DrawingCallback<T>;
+export declare type DrawingProps<P> = {
+    onDraw: DrawingCallback<P>;
     skipProcessing?: boolean;
     children?: ReactNode | ReactNode[];
 };

package/lib/typescript/src/renderer/nodes/Node.d.ts

@@ -9,15 +9,16 @@ export declare enum NodeType {
 declare type DeclarationResult = SkJSIInstance<string> | null;
 export declare abstract class Node<P = unknown> {
     readonly children: Node[];
-    _props: AnimatedProps<P>;
+    resolvedProps: P;
     memoizable: boolean;
     memoized: DeclarationResult | null;
     parent?: Node;
     depMgr: DependencyManager;
     constructor(depMgr: DependencyManager, props: AnimatedProps<P>);
     abstract draw(ctx: DrawingContext): void | DeclarationResult;
+    updatePropSubscriptions(props: AnimatedProps<P>): void;
     set props(props: AnimatedProps<P>);
-    get props(): AnimatedProps<P>;
+    get props(): P;
     visit(ctx: DrawingContext, children?: Node[]): SkJSIInstance<string>[];
 }
 export {};

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

@@ -1,7 +1,11 @@
-import type { SkiaValue } from "../../../values";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 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>) => boolean;
-export declare const materialize: <T>(props: AnimatedProps<T>) => T;
+export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 export declare type AnimatedProps<T> = {
-    [K in keyof T]: T[K] | SkiaValue<T[K]>;
+    [K in keyof T]: AnimatedProp<T[K]>;
 };

package/lib/typescript/src/skia/core/Data.d.ts

@@ -1,5 +1,3 @@
-import type { DependencyList } from "react";
-import type { SkData, DataSource } from "../types";
-export declare const useDataCollection: <T>(sources: DataSource[], factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => (T | null)[] | null;
-export declare const useRawData: <T>(source: DataSource | null | undefined, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => T | null;
-export declare const useData: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => SkData | null;
+import type { SkData, DataSourceParam } from "../types";
+export declare const useRawData: <T>(source: DataSourceParam, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined) => T | null;
+export declare const useData: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkData | null;

package/lib/typescript/src/skia/core/Font.d.ts

@@ -1,5 +1,5 @@
-import type { DataSource, SkFont } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Font object
  * */
-export declare const useFont: (font: DataSource | null | undefined, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => SkFont | null;
+export declare const useFont: (font: DataSourceParam, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;

package/lib/typescript/src/skia/core/Image.d.ts

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

package/lib/typescript/src/skia/core/SVG.d.ts

@@ -1,2 +1,2 @@
-import type { DataSource } from "../types";
-export declare const useSVG: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;
+import type { DataSourceParam } from "../types";
+export declare const useSVG: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;

package/lib/typescript/src/skia/core/Typeface.d.ts

@@ -1,5 +1,5 @@
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Typeface object
  * */
-export declare const useTypeface: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkTypeface | null;
+export declare const useTypeface: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkTypeface | null;

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

@@ -1,5 +1,12 @@
-/// <reference types="node" />
-/// <reference types="react-native" />
 import type { SkJSIInstance } from "../JsiInstance";
 export declare type SkData = SkJSIInstance<"Data">;
-export declare type DataSource = ReturnType<typeof require> | string | Uint8Array;
+declare type RNModule = number;
+declare type ESModule = {
+    __esModule: true;
+    default: string;
+};
+export declare type DataModule = RNModule | ESModule;
+export declare type DataSource = DataModule | string | Uint8Array;
+export declare type DataSourceParam = DataSource | null | undefined;
+export declare const isRNModule: (mod: DataModule) => mod is number;
+export {};

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

@@ -26,6 +26,11 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
      * Returns a copy of this 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/lib/typescript/src/skia/types/Picture/Picture.d.ts

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

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

@@ -1,21 +1,19 @@
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 import type { SkJSIInstance } from "../types";
 export declare class NotImplementedOnRNWeb extends Error {
-    constructor();
+    constructor(msg?: string);
 }
 export declare abstract class Host {
     readonly CanvasKit: CanvasKit;
     constructor(CanvasKit: CanvasKit);
 }
-export declare abstract class HostObject<T, N extends string> extends Host implements SkJSIInstance<N> {
+export declare 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);
 }
-export declare type NonNullish = {};
-export declare const toOptionalValue: <T>(value: NonNullish | undefined | null) => T | null | undefined;
-export declare const toUndefinedableValue: <T>(value: NonNullish | undefined) => T | undefined;
-export declare const toNullableValue: <T>(value: NonNullish | null) => T | null;
-export declare const toValue: <T>(value: NonNullish) => T;
+export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
+    static fromValue<T>(value: SkJSIInstance<string>): T;
+}
 export declare const ckEnum: (value: number) => EmbindEnumEntity;
 export declare const optEnum: (value: number | undefined) => EmbindEnumEntity | undefined;

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

@@ -4,16 +4,16 @@ import { Host } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 export declare class JsiSkImageFilterFactory extends Host implements ImageFilterFactory {
     constructor(CanvasKit: CanvasKit);
-    MakeOffset(_dx: number, _dy: number, _input: SkImageFilter | null): SkImageFilter;
-    MakeDisplacementMap(_channelX: ColorChannel, _channelY: ColorChannel, _scale: number, _in1: SkImageFilter, _input: SkImageFilter | null): SkImageFilter;
-    MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter;
+    MakeOffset(dx: number, dy: number, input: SkImageFilter | null): JsiSkImageFilter;
+    MakeDisplacementMap(channelX: ColorChannel, channelY: ColorChannel, scale: number, in1: SkImageFilter, input: SkImageFilter | null): SkImageFilter;
+    MakeShader(shader: SkShader, _input: SkImageFilter | null): SkImageFilter;
     MakeBlur(sigmaX: number, sigmaY: number, mode: TileMode, input: SkImageFilter | null): JsiSkImageFilter;
     MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null): JsiSkImageFilter;
     MakeCompose(outer: SkImageFilter | null, inner: SkImageFilter | null): JsiSkImageFilter;
-    MakeDropShadow(_dx: number, _dy: number, _sigmaX: number, _sigmaY: number, _color: SkColor, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeDropShadowOnly(_dx: number, _dy: number, _sigmaX: number, _sigmaY: number, _color: SkColor, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeErode(_rx: number, _ry: number, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeDilate(_rx: number, _ry: number, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeBlend(_mode: BlendMode, _background: SkImageFilter, _foreground: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
+    MakeDropShadow(dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeDropShadowOnly(dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeErode(rx: number, ry: number, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeDilate(rx: number, ry: number, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeBlend(mode: BlendMode, background: SkImageFilter, foreground: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
     MakeRuntimeShader(_builder: SkRuntimeShaderBuilder, _childShaderName: string | null, _input: SkImageFilter | null): SkImageFilter;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     constructor(CanvasKit: CanvasKit, ref: Paint);
     copy(): JsiSkPaint;
+    reset(): void;
     getColor(): Float32Array;
     getStrokeCap(): number;
     getStrokeJoin(): number;

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

@@ -1,7 +1,8 @@
 import type { CanvasKit, Point } from "canvaskit-wasm";
 import type { SkPoint } from "../types";
-import { HostObject } from "./Host";
-export declare class JsiSkPoint extends HostObject<Point, "Point"> implements SkPoint {
+import { BaseHostObject } from "./Host";
+export declare class JsiSkPoint extends BaseHostObject<Point, "Point"> implements SkPoint {
+    static fromValue(point: SkPoint): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Point);
     get x(): number;
     get y(): number;

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

@@ -1,8 +1,9 @@
 import type { CanvasKit, RRect } from "canvaskit-wasm";
 import type { SkRRect } from "../types";
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
-export declare class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
+    static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: RRect);
     get rx(): number;
     get ry(): number;

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

@@ -1,8 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkRSXform } from "../types";
 import { HostObject } from "./Host";
-declare type RSXform = Float32Array;
+export declare type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
 }
-export {};

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

@@ -1,8 +1,8 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
 import type { SkRect } from "../types";
-import { HostObject } from "./Host";
-export declare class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
-    static fromValue(CanvasKit: CanvasKit, rect: SkRect): JsiSkRect;
+import { BaseHostObject } from "./Host";
+export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
+    static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     get x(): number;
     get y(): number;

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

@@ -1,6 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkFont, SkRSXform } from "../types";
+import type { SkFont } from "../types";
 import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
 import { Host } from "./Host";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
 export declare class JsiSkTextBlobFactory extends Host implements TextBlobFactory {

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

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./hooks";
 export * from "./api";
+export * from "./selector";

package/lib/typescript/src/values/selector.d.ts

@@ -0,0 +1,14 @@
+import type { SkiaValue } from "./types";
+export declare type SkiaSelector<TReturn, TInput = unknown> = {
+    value: SkiaValue<TInput>;
+    selector: (v: TInput) => TReturn;
+};
+/**
+ * Wraps a Skia Value with a selector function. The selector function can access the
+ * inner values of the Skia Value so that we can dynamically ready array values and
+ * object values when doing animations in Skia.
+ * @param value Dependant value
+ * @param selector Selector function to calculate new value from the Skia Value's value
+ * @returns A descriptor that will be used by the reconciler to calculate the value
+ */
+export declare const Selector: <TInput, TReturn>(value: SkiaValue<TInput>, selector: (v: TInput) => TReturn) => SkiaSelector<TReturn, TInput>;

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

@@ -8,6 +8,10 @@ export interface SkiaValue<T = number> {
      * Returns unsubscribe method.
      */
     addListener: (cb: (value: T) => void) => () => void;
+    /**
+     * Invalidates the value. Has different meaning depending on the type of the value.
+     */
+    __invalidate: () => void;
     /**
      * Field to make typechecking easier
      */

package/lib/typescript/src/values/web/RNSkComputedValue.d.ts

@@ -6,4 +6,5 @@ export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     private _callback;
     private _unsubscribers;
     unsubscribe(): void;
+    __invalidate(): void;
 }

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -8,4 +8,5 @@ export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
     readonly __typename__ = "RNSkValue";
     get current(): T;
     addListener(cb: (value: T) => void): () => void;
+    __invalidate(): void;
 }

package/libs/ios/libskia.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>libskia.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>libskia.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.141",
+  "version": "0.1.145",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "tsc": "tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
     "test": "jest",
     "postinstall": "node scripts/install-npm.js",
     "build": "bob build"
@@ -89,7 +89,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.35.0",
+    "canvaskit-wasm": "^0.36.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/src/mock/index.ts

@@ -3,6 +3,7 @@
 import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
 import * as Values from "../values/web";
 import * as ValuesHooks from "../values/hooks";
+import { Selector } from "../values/selector";
 import * as BaseSkia from "../skia/types";
 import type * as SkiaExports from "../skia";
 import type * as ExternalExports from "../external";
@@ -46,7 +47,6 @@ export const Mock: typeof SkiaExports &
   Skia,
   ...BaseSkia,
   // 2. Hooks
-  useDataCollection: Noop,
   useRawData: Noop,
   useData: Noop,
   useFont: Noop,
@@ -87,6 +87,7 @@ export const Mock: typeof SkiaExports &
   // ValueExports
   ...Values,
   ...ValuesHooks,
+  Selector,
   // Animations
   ...timingFunctions,
   ...springFunctions,

package/src/renderer/Canvas.tsx

@@ -20,6 +20,7 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
+import type { SkiaValue } from "../values";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -38,8 +39,7 @@ skiaReconciler.injectIntoDevTools({
 const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
   skiaReconciler.updateContainer(element, root, null, () => {
     hostDebug("updateContainer");
-
-    container.depMgr.subscribe();
+    container.depMgr.update();
   });
 };
 
@@ -60,9 +60,19 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     const [tick, setTick] = useState(0);
     const redraw = useCallback(() => setTick((t) => t + 1), []);
 
+    const registerValues = useCallback(
+      (values: Array<SkiaValue<unknown>>) => {
+        if (ref.current === null) {
+          throw new Error("Canvas ref is not set");
+        }
+        return ref.current.registerValues(values);
+      },
+      [ref]
+    );
+
     const container = useMemo(
-      () => new Container(new DependencyManager(ref), redraw),
-      [redraw, ref]
+      () => new Container(new DependencyManager(registerValues), redraw),
+      [redraw, registerValues]
     );
 
     const root = useMemo(
@@ -78,6 +88,8 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       );
     }, [children, root, redraw, container, canvasCtx]);
 
+    const paint = useMemo(() => Skia.Paint(), []);
+
     // Draw callback
     const onDraw = useDrawCallback(
       (canvas, info) => {
@@ -92,7 +104,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.size.current = { width, height };
         }
-        const paint = Skia.Paint();
+        paint.reset();
         const ctx = {
           width,
           height,
@@ -101,7 +113,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           paint,
           opacity: 1,
           ref,
-          center: Skia.Point(width / 2, height / 2),
+          center: { x: width / 2, y: height / 2 },
           Skia,
         };
         container.draw(ctx);
@@ -112,7 +124,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     useEffect(() => {
       return () => {
         skiaReconciler.updateContainer(null, root, null, () => {
-          container.depMgr.unsubscribe();
+          container.depMgr.remove();
         });
       };
     }, [container, root]);