@shopify/react-native-skia 0.1.149 → 0.1.151

package/lib/typescript/src/animation/decay/runDecay.d.ts

@@ -7,4 +7,4 @@ import type { DecayConfig } from "./types";
  * @param config Configuration or default configuration
  * @returns Animation
  */
-export declare const runDecay: (value: SkiaMutableValue<number>, config?: DecayConfig | undefined) => import("../../values/types").SkiaAnimation;
+export declare const runDecay: (value: SkiaMutableValue<number>, config?: DecayConfig) => import("../../values/types").SkiaAnimation;

package/lib/typescript/src/animation/spring/runSpring.d.ts

@@ -13,4 +13,4 @@ import type { AnimationParams, SpringConfig, AnimationCallback } from "../types"
  * @returns an animation value that can be used to start/stop
  * the animation.
  */
-export declare const runSpring: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: SpringConfig | undefined, callback?: AnimationCallback | undefined) => SkiaAnimation;
+export declare const runSpring: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/typescript/src/animation/spring/useSpring.d.ts

@@ -7,4 +7,4 @@ import type { SpringConfig, AnimationParams, AnimationCallback } from "../types"
  * @param config
  * @returns
  */
-export declare const useSpring: (toOrParams: number | AnimationParams, config?: SpringConfig | undefined, callback?: AnimationCallback | undefined) => SkiaValue<number>;
+export declare const useSpring: (toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/typescript/src/animation/timing/createTiming.d.ts

@@ -14,4 +14,4 @@ import type { SkiaMutableValue } from "../../values/types";
  * @params an animation value that can be used to start/stop
  * the animation.
  */
-export declare const createTiming: (params: RequiredAnimationParams & Required<TimingConfig>, value?: SkiaMutableValue<number> | undefined, callback?: AnimationCallback | undefined) => import("../../values/types").SkiaAnimation;
+export declare const createTiming: (params: RequiredAnimationParams & Required<TimingConfig>, value?: SkiaMutableValue<number>, callback?: AnimationCallback) => import("../../values/types").SkiaAnimation;

package/lib/typescript/src/animation/timing/functions/getResolvedParams.d.ts

@@ -4,4 +4,4 @@ import type { RequiredAnimationParams, AnimationParams, TimingConfig } from "../
  * @param toOrParams Params or to value
  * @param config timing/spring configuration
  */
-export declare const getResolvedParams: (toOrParams: number | AnimationParams, config?: TimingConfig | undefined) => RequiredAnimationParams & Required<TimingConfig>;
+export declare const getResolvedParams: (toOrParams: number | AnimationParams, config?: TimingConfig) => RequiredAnimationParams & Required<TimingConfig>;

package/lib/typescript/src/animation/timing/runTiming.d.ts

@@ -13,4 +13,4 @@ import type { AnimationParams, TimingConfig, AnimationCallback } from "../types"
  * @returns an animation value that can be used to start/stop
  * the animation.
  */
-export declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig | undefined, callback?: AnimationCallback | undefined) => SkiaAnimation;
+export declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/typescript/src/animation/timing/useLoop.d.ts

@@ -5,4 +5,4 @@ import type { TimingConfig } from "../types";
  * @param config Timing configuration for easing and duration
  * @returns A value that can be used for further animations
  */
-export declare const useLoop: (config?: TimingConfig | undefined) => import("../..").SkiaValue<number>;
+export declare const useLoop: (config?: TimingConfig) => import("../..").SkiaValue<number>;

package/lib/typescript/src/animation/timing/useTiming.d.ts

@@ -7,4 +7,4 @@ import type { AnimationParams, TimingConfig, AnimationCallback } from "../types"
  * @param config
  * @returns A value that is animated
  */
-export declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig | undefined, callback?: AnimationCallback | undefined) => SkiaValue<number>;
+export declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaValue<number>;

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

@@ -5,7 +5,7 @@ import type * as ValueExports from "../values";
 import type * as AnimationExports from "../animation";
 import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
 export declare const Skia: SkiaApi;
-export declare const vec: (x?: number | undefined, y?: number | undefined) => {
+export declare const vec: (x?: number, y?: number) => {
     x: number;
     y: number;
 };

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

@@ -11,4 +11,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     children: ReactNode;
     onTouch?: TouchHandler;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;

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

@@ -4,7 +4,7 @@ import type { NodeType, Node } from "../dom/types";
 import type { Container } from "./Container";
 export declare const debug: (message?: any, ...optionalParams: any[]) => void;
 declare type Instance = Node<unknown>;
-declare type Props = any;
+declare type Props = object;
 declare type TextInstance = Node<unknown>;
 declare type SuspenseInstance = Instance;
 declare type HydratableInstance = Instance;

package/lib/typescript/src/renderer/components/Paint.d.ts

@@ -2,4 +2,4 @@ import React from "react";
 import type { DrawingNodeProps } from "../../dom/types";
 import type { PaintNode } from "../../dom/nodes/PaintNode";
 export declare const usePaintRef: () => React.RefObject<PaintNode>;
-export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps> & React.RefAttributes<PaintNode>>;
+export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps, never> & React.RefAttributes<PaintNode>>;

package/lib/typescript/src/renderer/components/backdrop/BackdropFilter.d.ts

@@ -4,4 +4,4 @@ import type { SkiaProps } from "../../processors/Animations/Animations";
 export interface BackdropFilterProps extends GroupProps {
     filter: ReactNode | ReactNode[];
 }
-export declare const BackdropFilter: ({ filter, children: groupChildren, ...props }: SkiaProps<BackdropFilterProps>) => JSX.Element;
+export declare const BackdropFilter: ({ filter, children, ...props }: SkiaProps<BackdropFilterProps, "filter">) => JSX.Element;

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

@@ -4,9 +4,9 @@ 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 isAnimated: <T>(props: AnimatedProps<T, never>) => boolean;
 export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
-export declare type AnimatedProps<T> = {
-    [K in keyof T]: AnimatedProp<T[K]>;
+export declare 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]>;
 };
-export declare type SkiaProps<P = {}> = AnimatedProps<P>;
+export declare type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;

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

@@ -1,3 +1,3 @@
-export declare const mapKeys: <T>(obj: T) => (keyof T)[];
+export declare const mapKeys: <T extends object>(obj: T) => (keyof T)[];
 export declare const exhaustiveCheck: (a: never) => never;
-export declare const shallowEq: <P>(p1: P, p2: P) => boolean;
+export declare const shallowEq: <P extends object>(p1: P, p2: P) => boolean;

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

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

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

@@ -1,9 +1,16 @@
 import type { DependencyList } from "react";
-import type { SkCanvas, SkPicture, SkRect } from "../types";
+import type { SkCanvas, SkRect } from "../types";
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds
  * @param cb Callback for drawing to the canvas
  * @returns SkPicture
  */
-export declare const usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => SkPicture;
+export declare const usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => import("../types").SkPicture;
+/**
+ * Memoizes and returns an SkPicture that can be drawn to another canvas.
+ * @param rect Picture bounds
+ * @param cb Callback for drawing to the canvas
+ * @returns SkPicture
+ */
+export declare const createPicture: (rect: SkRect, cb: (canvas: SkCanvas) => void) => import("../types").SkPicture;

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

@@ -1,6 +1,6 @@
 import type { Vector } from "../types";
-export declare const vec: (x?: number, y?: number | undefined) => import("../types").SkPoint;
-export declare const point: (x?: number, y?: number | undefined) => import("../types").SkPoint;
+export declare const vec: (x?: number, y?: number) => import("../types").SkPoint;
+export declare const point: (x?: number, y?: number) => import("../types").SkPoint;
 export declare const neg: (a: Vector) => import("../types").SkPoint;
 export declare const add: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const sub: (a: Vector, b: Vector) => import("../types").SkPoint;

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

@@ -8,4 +8,4 @@ export declare type Uniform = UniformValue | readonly UniformValue[];
 export interface Uniforms {
     [name: string]: Uniform;
 }
-export declare const processUniforms: (source: SkRuntimeEffect, uniforms: Uniforms, builder?: SkRuntimeShaderBuilder | undefined) => number[];
+export declare const processUniforms: (source: SkRuntimeEffect, uniforms: Uniforms, builder?: SkRuntimeShaderBuilder) => number[];

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

@@ -1,4 +1,4 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkPoint, VertexMode } from "../types";
+import type { SkColor, SkPoint, VertexMode } from "../types";
 import { JsiSkVertices } from "./JsiSkVertices";
-export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null | undefined, colors?: Float32Array[] | undefined, indices?: number[] | null | undefined, isVolatile?: boolean | undefined) => JsiSkVertices;
+export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null, colors?: SkColor[], indices?: number[] | null, isVolatile?: boolean) => JsiSkVertices;

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -2,5 +2,5 @@ import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit
 declare global {
     var CanvasKit: CanvasKitType;
 }
-export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
-export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions) => Promise<void>;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.149",
+  "version": "0.1.151",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -76,8 +76,8 @@
   },
   "devDependencies": {
     "@types/jest": "^28.1.6",
-    "@types/react-native": "^0.65.0",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-native": "0.66.2",
+    "@types/react-reconciler": "0.26.4",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
@@ -86,11 +86,11 @@
     "react-native": "0.66.2",
     "react-native-builder-bob": "^0.18.2",
     "ts-jest": "^28.0.7",
-    "typescript": "^4.6.4"
+    "typescript": "4.8.3"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.36.0",
-    "react-reconciler": "^0.26.2"
+    "canvaskit-wasm": "0.36.1",
+    "react-reconciler": "0.26.2"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/mock/index.ts

@@ -54,6 +54,7 @@ export const Mock: typeof SkiaExports &
   useImage: Noop,
   useSVG: Noop,
   usePicture: Noop,
+  createPicture: Noop,
   // 3. Point/Rect/Transform utilities
   vec,
   rect: (x: number, y: number, width: number, height: number) => ({

package/src/renderer/HostConfig.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
 
@@ -20,7 +19,7 @@ export const debug = (...args: Parameters<typeof console.log>) => {
 
 type Instance = Node<unknown>;
 
-type Props = any;
+type Props = object;
 type TextInstance = Node<unknown>;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
@@ -236,7 +235,7 @@ export const skHostConfig: SkiaHostConfig = {
 };
 
 const materialize = <P>(props: AnimatedProps<P>) => {
-  const result = { ...props };
+  const result = { ...props } as P;
   mapKeys(props).forEach((key) => {
     const prop = props[key];
     if (isValue(prop)) {
@@ -246,5 +245,5 @@ const materialize = <P>(props: AnimatedProps<P>) => {
     }
   });
 
-  return result as any;
+  return result;
 };

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

@@ -13,7 +13,7 @@ export const BackdropFilter = ({
   filter,
   children: groupChildren,
   ...props
-}: SkiaProps<BackdropFilterProps>) => {
+}: SkiaProps<BackdropFilterProps, "filter">) => {
   return (
     <Group {...props}>
       <skBackdropFilter>{filter}</skBackdropFilter>

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

@@ -46,11 +46,18 @@ export const isAnimated = <T>(props: AnimatedProps<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]>;
+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]>;
 };
 
 // TODO: switch to AnimatedProps<GroupProps> and remove duplicate properties.
 // For instance matrix in color filter becomes colorMatrix
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type SkiaProps<P = {}> = AnimatedProps<P>;
+
+export type SkiaProps<
+  P = object,
+  O extends keyof P | never = never
+> = AnimatedProps<P, O>;

package/src/renderer/typeddash.ts

@@ -1,11 +1,12 @@
-export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];
+export const mapKeys = <T extends object>(obj: T) =>
+  Object.keys(obj) as (keyof T)[];
 
 export const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unexhaustive handling for ${a}`);
 };
 
 // Shallow eq on props (without children)
-export const shallowEq = <P>(p1: P, p2: P): boolean => {
+export const shallowEq = <P extends object>(p1: P, p2: P): boolean => {
   const keys1 = mapKeys(p1);
   const keys2 = mapKeys(p2);
   if (keys1.length !== keys2.length) {

package/src/skia/core/Picture.ts

@@ -2,7 +2,7 @@ import type { DependencyList } from "react";
 import { useMemo } from "react";
 
 import { Skia } from "../Skia";
-import type { SkCanvas, SkPicture, SkRect } from "../types";
+import type { SkCanvas, SkRect } from "../types";
 
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
@@ -14,12 +14,26 @@ export const usePicture = (
   rect: SkRect,
   cb: (canvas: SkCanvas) => void,
   deps: DependencyList = []
-): SkPicture => {
+) => {
+  console.warn("usePicture() is deprecated. Use createPicture() instead.");
   return useMemo(() => {
     const recorder = Skia.PictureRecorder();
     const canvas = recorder.beginRecording(rect);
     cb(canvas);
     return recorder.finishRecordingAsPicture();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cb, rect, deps]);
+  }, deps);
+};
+
+/**
+ * Memoizes and returns an SkPicture that can be drawn to another canvas.
+ * @param rect Picture bounds
+ * @param cb Callback for drawing to the canvas
+ * @returns SkPicture
+ */
+export const createPicture = (rect: SkRect, cb: (canvas: SkCanvas) => void) => {
+  const recorder = Skia.PictureRecorder();
+  const canvas = recorder.beginRecording(rect);
+  cb(canvas);
+  return recorder.finishRecordingAsPicture();
 };

package/src/values/web/RNSkComputedValue.ts

@@ -11,7 +11,12 @@ export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
       current: undefined,
     };
     dependencies.forEach((dep) => {
-      if ("__typename__" in dep && "addListener" in dep) {
+      if (
+        dep &&
+        typeof dep === "object" &&
+        "__typename__" in dep &&
+        "addListener" in dep
+      ) {
         unsubscribers.push(
           (dep as RNSkReadonlyValue<unknown>).addListener(() =>
             notifyUpdateRef.current?.()