@shopify/react-native-skia 0.1.228 → 0.1.230

package/src/values/api.ts

@@ -1,61 +0,0 @@
-import type {
-  AnimationState,
-  ISkiaValueApi,
-  SkiaAnimation,
-  SkiaClockValue,
-  SkiaMutableValue,
-  SkiaValue,
-} from "./types";
-
-declare global {
-  var SkiaValueApi: ISkiaValueApi;
-}
-
-const { SkiaValueApi } = global;
-
-const deprecatedWarning = () => {
-  console.warn(
-    `Skia values are deprecated and will be removed in the next Skia release.
-Please use Reanimated instead: https://shopify.github.io/react-native-skia/docs/animations/animations`
-  );
-};
-
-export const ValueApi = {
-  /**
-   * @deprecated Use Reanimated 3
-   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
-   */
-  createValue<T>(initialValue: T): SkiaMutableValue<T> {
-    deprecatedWarning();
-    return SkiaValueApi.createValue(initialValue);
-  },
-  /**
-   * @deprecated Use Reanimated 3
-   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
-   */
-  createComputedValue<R>(
-    cb: () => R,
-    values: SkiaValue<unknown>[]
-  ): SkiaValue<R> {
-    deprecatedWarning();
-    return SkiaValueApi.createComputedValue(cb, values);
-  },
-  /**
-   * @deprecated Use Reanimated 3
-   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
-   */
-  createClockValue(): SkiaClockValue {
-    deprecatedWarning();
-    return SkiaValueApi.createClockValue();
-  },
-  /**
-   * @deprecated Use Reanimated 3
-   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
-   */
-  createAnimation<S extends AnimationState = AnimationState>(
-    cb: (t: number, state: S | undefined) => S
-  ): SkiaAnimation {
-    deprecatedWarning();
-    return SkiaValueApi.createAnimation(cb);
-  },
-};

package/src/values/api.web.ts

@@ -1,5 +0,0 @@
-import { ValueApi as ValueApiWeb } from "./web";
-
-export const ValueApi = ValueApiWeb;
-
-export const { createValue, createComputedValue } = ValueApi;

package/src/values/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from "./useClockValue";
-export * from "./useComputedValue";
-export * from "./useValue";
-export * from "./useValueEffect";

package/src/values/hooks/useClockValue.ts

@@ -1,21 +0,0 @@
-import { useEffect, useMemo } from "react";
-
-import { ValueApi } from "../api";
-
-/**
- * @deprecated Use Reanimated 3
- * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * @returns A new value that will be updated on every frame redraw with the
- * number of milliseconds elapsed since the value was started.
- * The clock is created in the stopped state.
- */
-
-export const useClockValue = () => {
-  const clock = useMemo(() => ValueApi.createClockValue(), []);
-  useEffect(() => {
-    clock.start();
-    return clock.stop;
-  }, [clock]);
-  return clock;
-};

package/src/values/hooks/useComputedValue.ts

@@ -1,24 +0,0 @@
-import { useEffect, useMemo } from "react";
-
-import { ValueApi } from "../api";
-import { isValue } from "../../renderer/processors/Animations";
-
-/**
- * @deprecated Use Reanimated 3
- * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Creates a new computed value - a value that will calculate its value depending
- * on other values.
- * @param cb Callback to calculate new value
- * @param values Dependant values
- * @returns A readonly value
- */
-export const useComputedValue = <R>(cb: () => R, values: unknown[]) => {
-  const value = useMemo(
-    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    values
-  );
-  useEffect(() => () => value.dispose(), [value]);
-  return value;
-};

package/src/values/hooks/useValue.ts

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-
-import { ValueApi } from "../api";
-import type { SkiaMutableValue } from "../types";
-
-/**
- * @deprecated Use Reanimated 3
- * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Creates a new value that holds some data.
- * @param v Value to hold
- * @returns A Value of type of v
- */
-export const useValue = <T>(v: T): SkiaMutableValue<T> => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => ValueApi.createValue(v), []);
-};

package/src/values/hooks/useValueEffect.ts

@@ -1,18 +0,0 @@
-import { useEffect } from "react";
-
-import type { SkiaValue } from "../types";
-
-/**
- * @deprecated Use Reanimated 3
- * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
- *
- * Sets up an effect that will be run whenever the value changes
- * @param value Value to subscribe to changes on
- * @param cb Callback to run when value changes
- */
-export const useValueEffect = <T>(value: SkiaValue<T>, cb: (v: T) => void) => {
-  useEffect(() => {
-    return value.addListener(cb);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-};

package/src/values/index.ts

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

package/src/values/selector.ts

@@ -1,24 +0,0 @@
-import type { SkiaValue } from "./types";
-
-export 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 const Selector = <TInput, TReturn>(
-  value: SkiaValue<TInput>,
-  selector: (v: TInput) => TReturn
-): SkiaSelector<TReturn, TInput> => {
-  return {
-    selector,
-    value,
-  };
-};

package/src/values/types.ts

@@ -1,73 +0,0 @@
-export interface SkiaValue<T = number> {
-  /**
-   * Gets the value hold by the Value object
-   */
-  readonly current: T;
-  /**
-   * Adds a listener that is called when value changes.
-   * Returns unsubscribe method.
-   */
-  addListener: (cb: (value: T) => void) => () => void;
-  /**
-   * Invalidates the value. Has different meaning depending on the type of the value.
-   */
-  dispose: () => void;
-  /**
-   * Field to make typechecking easier
-   */
-  __typename__: "RNSkValue";
-}
-
-export interface SkiaMutableValue<T = number> extends SkiaValue<T> {
-  /**
-   * Get/sets the value hold by the Value object
-   */
-  current: T;
-  /**
-   * Get/sets the animation controlling the value
-   * */
-  animation: SkiaAnimation | undefined;
-}
-
-export interface SkiaClockValue extends SkiaValue<number> {
-  start: () => void;
-  stop: () => void;
-}
-
-export interface SkiaAnimation extends SkiaClockValue {
-  cancel: () => void;
-}
-
-export interface AnimationState {
-  current: number;
-  finished: boolean;
-}
-
-export interface ISkiaValueApi {
-  /**
-   * Creates a new value that holds the initial value and that
-   * can be changed.
-   */
-  createValue<T>(initialValue: T): SkiaMutableValue<T>;
-  /**
-   * Creates a computed value. This is a calculated value that returns the result of
-   * a function that is called with the values of the dependencies.
-   */
-  createComputedValue<R>(
-    cb: () => R,
-    values: Array<SkiaValue<unknown>>
-  ): SkiaValue<R>;
-  /**
-   * Creates a clock value where the value is the number of milliseconds elapsed
-   * since the clock was created
-   */
-  createClockValue(): SkiaClockValue;
-  /**
-   * Creates an animation that is driven from a clock and updated every frame.
-   * @param cb Callback to calculate next value from time.
-   * @returns An animation object that can control a value.
-   */
-  createAnimation<S extends AnimationState = AnimationState>(
-    cb: (t: number, state: S | undefined) => S
-  ): SkiaAnimation;
-}

package/src/values/web/RNSkAnimation.ts

@@ -1,33 +0,0 @@
-import type { AnimationState, SkiaAnimation } from "../types";
-
-import { RNSkClockValue } from "./RNSkClockValue";
-
-export class RNSkAnimation<S extends AnimationState = AnimationState>
-  extends RNSkClockValue
-  implements SkiaAnimation
-{
-  constructor(
-    callback: (t: number, state: S | undefined) => S,
-    raf: (callback: (time: number) => void) => number
-  ) {
-    super(raf);
-    this._callback = callback;
-  }
-
-  private _callback: (t: number, state: S | undefined) => S;
-  private _animationState: S | undefined = undefined;
-
-  public cancel() {
-    this.stop();
-  }
-
-  protected update(nextValue: number): void {
-    if (this._callback) {
-      this._animationState = this._callback(nextValue, this._animationState);
-      if (this._animationState?.finished) {
-        this.stop();
-      }
-    }
-    super.update(this._animationState?.current ?? nextValue);
-  }
-}

package/src/values/web/RNSkClockValue.ts

@@ -1,58 +0,0 @@
-import type { SkiaClockValue } from "../types";
-
-import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
-
-enum RNSkClockState {
-  NotStarted = 0,
-  Running = 1,
-  Stopped = 2,
-}
-
-export class RNSkClockValue
-  extends RNSkReadonlyValue<number>
-  implements SkiaClockValue
-{
-  constructor(raf: (callback: (time: number) => void) => number) {
-    super(0);
-    this._raf = raf;
-    this.update(0);
-  }
-
-  private _raf: (callback: (time: number) => void) => number;
-  private _start: number | undefined;
-  private _stop: number | undefined;
-  private _state: RNSkClockState = RNSkClockState.NotStarted;
-
-  private notifyUpdate = (_: number) => {
-    if (this._state === RNSkClockState.Running) {
-      const now = Date.now();
-      const deltaFromStart = now - this._start!;
-      this.tick(deltaFromStart);
-      this._raf(this.notifyUpdate);
-    }
-  };
-
-  protected tick(value: number) {
-    this.update(value);
-  }
-
-  public start() {
-    if (this._state === RNSkClockState.NotStarted) {
-      this._start = Date.now();
-      this._stop = this._start;
-    }
-    // Subtract pause time from start
-    const timeSinceStop = Date.now() - this._stop!;
-    this._start! += timeSinceStop;
-
-    this._state = RNSkClockState.Running;
-    this._raf(this.notifyUpdate);
-  }
-
-  public stop() {
-    if (this._state === RNSkClockState.Running) {
-      this._state = RNSkClockState.Stopped;
-      this._stop = Date.now();
-    }
-  }
-}

package/src/values/web/RNSkComputedValue.ts

@@ -1,49 +0,0 @@
-import type { DependencyList } from "react";
-
-import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
-
-export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
-  constructor(callback: () => T, dependencies: DependencyList) {
-    // Initialize dependencies - we can't call this yet, since
-    // super if not called and it requires a start value to be set.
-    const unsubscribers: Array<() => void> = [];
-    const notifyUpdateRef: { current: (() => void) | undefined } = {
-      current: undefined,
-    };
-    dependencies.forEach((dep) => {
-      if (
-        dep &&
-        typeof dep === "object" &&
-        "__typename__" in dep &&
-        "addListener" in dep
-      ) {
-        unsubscribers.push(
-          (dep as RNSkReadonlyValue<unknown>).addListener(() =>
-            notifyUpdateRef.current?.()
-          )
-        );
-      }
-    });
-    super(callback());
-    this._unsubscribers = unsubscribers;
-    notifyUpdateRef.current = this.dependecyUpdated.bind(this);
-    this._callback = callback;
-  }
-
-  private dependecyUpdated() {
-    this.update(this._callback());
-  }
-
-  private _callback: () => T;
-  private _unsubscribers: Array<() => void>;
-
-  public unsubscribe() {
-    this._unsubscribers.forEach((unsubscribe) => unsubscribe());
-    this._unsubscribers = [];
-  }
-
-  public dispose(): void {
-    this._unsubscribers.forEach((unsubscribe) => unsubscribe());
-    this._unsubscribers = [];
-  }
-}

package/src/values/web/RNSkReadonlyValue.ts

@@ -1,38 +0,0 @@
-import type { SkiaValue } from "../types";
-
-export class RNSkReadonlyValue<T> implements SkiaValue<T> {
-  constructor(value: T) {
-    this._current = value;
-  }
-
-  private _current: T;
-  private _listeners: Array<(value: T) => void> = [];
-
-  private notifyListeners(): void {
-    this._listeners.forEach((cb) => cb(this._current));
-  }
-
-  protected update(nextValue: T): void {
-    if (this._current !== nextValue) {
-      this._current = nextValue;
-      this.notifyListeners();
-    }
-  }
-
-  public readonly __typename__ = "RNSkValue";
-
-  public get current(): T {
-    return this._current;
-  }
-
-  public addListener(cb: (value: T) => void) {
-    this._listeners.push(cb);
-    return () => {
-      this._listeners.splice(this._listeners.indexOf(cb), 1);
-    };
-  }
-
-  public dispose(): void {
-    this._listeners = [];
-  }
-}

package/src/values/web/RNSkValue.ts

@@ -1,57 +0,0 @@
-import type { SkiaAnimation, SkiaValue } from "../types";
-
-import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
-
-export class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {
-  constructor(value: T) {
-    super(value);
-    this._unsubscribe = undefined;
-  }
-
-  public set current(value: T) {
-    this.update(value);
-  }
-
-  public get current(): T {
-    return super.current;
-  }
-
-  private _unsubscribe: (() => void) | undefined;
-
-  private unsubscribe() {
-    if (this._unsubscribe) {
-      this._unsubscribe();
-      this._unsubscribe = undefined;
-    }
-    if (this._animation) {
-      this._animation.cancel();
-      this._animation = undefined;
-    }
-  }
-
-  private subscribe(animation: SkiaAnimation | undefined) {
-    this.unsubscribe();
-    if (animation) {
-      this._animation = animation;
-      this._unsubscribe = animation.addListener(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.animationDidUpdate.bind(this)
-      );
-      this._animation.start();
-    }
-  }
-
-  private animationDidUpdate(value: T) {
-    this.update(value);
-  }
-
-  private _animation: SkiaAnimation | undefined;
-  public get animation(): SkiaAnimation | undefined {
-    return this._animation;
-  }
-
-  public set animation(v: SkiaAnimation | undefined) {
-    this.subscribe(v);
-  }
-}

package/src/values/web/api.ts

@@ -1,33 +0,0 @@
-import type {
-  ISkiaValueApi,
-  SkiaMutableValue,
-  SkiaValue,
-  SkiaClockValue,
-  AnimationState,
-  SkiaAnimation,
-} from "../types";
-
-import { RNSkAnimation } from "./RNSkAnimation";
-import { RNSkClockValue } from "./RNSkClockValue";
-import { RNSkComputedValue } from "./RNSkComputedValue";
-import { RNSkValue } from "./RNSkValue";
-
-export const ValueApi: ISkiaValueApi = {
-  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {
-    return new RNSkValue(initialValue);
-  },
-  createComputedValue: function <R>(
-    cb: () => R,
-    values: SkiaValue<unknown>[]
-  ): SkiaValue<R> {
-    return new RNSkComputedValue(cb, values);
-  },
-  createClockValue: function (): SkiaClockValue {
-    return new RNSkClockValue(requestAnimationFrame.bind(window));
-  },
-  createAnimation: function <S extends AnimationState = AnimationState>(
-    cb: (t: number, state: S | undefined) => S
-  ): SkiaAnimation {
-    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));
-  },
-};

package/src/values/web/index.ts

@@ -1 +0,0 @@
-export * from "./api";

package/src/views/SkiaView.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-
-import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
-import SkiaDrawViewNativeComponent from "../specs/SkiaDrawViewNativeComponent";
-
-import { SkiaViewApi } from "./api";
-import type { SkiaDrawViewProps } from "./types";
-
-export const SkiaViewNativeId = { current: 1000 };
-
-const NativeSkiaView = SkiaDrawViewNativeComponent;
-
-/**
- * @deprecated If you are looking to use the Skia imperative API, you can use:
- * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
- * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
- */
-export class SkiaView extends React.Component<SkiaDrawViewProps> {
-  constructor(props: SkiaDrawViewProps) {
-    super(props);
-    console.warn(
-      `The SkiaView component is deprecated and will be removed in the next release.
-If you are looking to use the Skia imperative API, you can use:
-* The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
-* The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures`
-    );
-    this._nativeId = SkiaViewNativeId.current++;
-    const { onDraw, onSize } = props;
-    if (onDraw) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
-    }
-    if (onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-  }
-
-  private _nativeId: number;
-
-  public get nativeId() {
-    return this._nativeId;
-  }
-
-  componentDidUpdate(prevProps: SkiaDrawViewProps) {
-    const { onDraw, onSize } = this.props;
-    if (onDraw !== prevProps.onDraw) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
-    }
-    if (onSize !== prevProps.onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  public makeImageSnapshot(rect?: SkRect) {
-    assertSkiaViewApi();
-    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
-  }
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  public redraw() {
-    assertSkiaViewApi();
-    SkiaViewApi.requestRedraw(this._nativeId);
-  }
-
-  /**
-   * 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
-   */
-  public registerValues(values: SkiaValue<unknown>[]): () => void {
-    assertSkiaViewApi();
-    return SkiaViewApi.registerValuesInView(this._nativeId, values);
-  }
-
-  render() {
-    const { mode, debug = false, onSize, ...viewProps } = this.props;
-    return (
-      <NativeSkiaView
-        collapsable={false}
-        nativeID={`${this._nativeId}`}
-        mode={mode ?? "default"}
-        debug={debug}
-        {...viewProps}
-      />
-    );
-  }
-}
-
-const assertSkiaViewApi = () => {
-  if (
-    SkiaViewApi === null ||
-    SkiaViewApi.setJsiProperty === null ||
-    SkiaViewApi.callJsiMethod === null ||
-    SkiaViewApi.registerValuesInView === null ||
-    SkiaViewApi.requestRedraw === null ||
-    SkiaViewApi.makeImageSnapshot === null
-  ) {
-    throw Error("Skia View Api was not found.");
-  }
-};

package/src/views/SkiaView.web.tsx

@@ -1,22 +0,0 @@
-import type { SkCanvas } from "../skia/types";
-
-import type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from "./types";
-import { SkiaBaseWebView } from "./SkiaBaseWebView";
-
-export class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
-  constructor(props: SkiaDrawViewProps) {
-    super(props);
-  }
-
-  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {
-    if (this.props.onDraw) {
-      const info: DrawingInfo = {
-        height: this.height,
-        width: this.width,
-        timestamp: Date.now(),
-        touches: touches.map((t) => [t]),
-      };
-      this.props.onDraw(canvas, info);
-    }
-  }
-}