feat(📦): Add minor utility functions (#460)

jest-setup.js

@@ -0,0 +1 @@
+require("react-native-reanimated/lib/reanimated2/jestUtils").setUpTests();

jest.config.js

@@ -121,7 +121,7 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+  setupFiles: ["./jest-setup.js"],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
@@ -139,7 +139,7 @@ module.exports = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  testMatch: ["/**/*.test.ts"]
+  testMatch: ["/**/*.test.ts"],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [

package.json

@@ -37,15 +37,15 @@
     "babel-jest": "^24.9.0",
     "babel-preset-expo": "^8.0.0",
     "eslint": "^7.8.1",
-    "eslint-config-react-native-wcandillon": "3.3.3",
+    "eslint-config-react-native-wcandillon": "3.6.3",
     "jest": "^24.9.0",
     "react": "^16.8.6",
     "react-native": "^0.61.0",
     "react-native-gesture-handler": "~1.5.0",
     "react-native-reanimated": "2.1.0",
     "semantic-release": "^15.13.3",
     "semantic-release-cli": "^4.1.2",
-    "typescript": "4.0.3"
+    "typescript": "4.3.5"
   },
   "react-native": "lib/module/index.js",
   "module": "lib/module/index.js",

src/Animations.ts

@@ -1,4 +1,4 @@
-import Animated from "react-native-reanimated";
+import type Animated from "react-native-reanimated";
 
 declare let _WORKLET: boolean;
 

src/Coordinates.ts

@@ -1,4 +1,4 @@
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
 
 export interface PolarPoint {
   theta: number;

src/Math.ts

@@ -1,4 +1,7 @@
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
+
+export const { PI } = Math;
+export const TAU = PI * 2;
 
 /**
  * @summary Convert a boolean value into a number.
@@ -22,6 +25,31 @@ export const mix = (value: number, x: number, y: number) => {
   return x * (1 - value) + y * value;
 };
 
+/**
+ * @summary Check is value is almost equal to the target.
+ * @worklet
+ */
+export const approximates = (
+  value: number,
+  target: number,
+  epsilon = 0.001
+) => {
+  "worklet";
+  return Math.abs(value - target) < epsilon;
+};
+
+/**
+ * @summary Normalize any radian value between 0 and 2PI.
+ * For example, if the value is -PI/2, it will be comverted to 1.5PI.
+ * Or 4PI will be converted to 0.
+ * @worklet
+ */
+export const normalizeRad = (value: number) => {
+  "worklet";
+  const rest = value % TAU;
+  return rest > 0 ? rest : TAU + rest;
+};
+
 /**
  * @summary Transforms an angle from radians to degrees.
  * @worklet

src/Matrix3.ts

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-destructuring */
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
 
 export type Vec3 = readonly [number, number, number];
 
@@ -138,6 +138,11 @@ export const multiply3 = (m1: Matrix3, m2: Matrix3) => {
   ] as const;
 };
 
+export const serializeToSVGMatrixArray = (m: Matrix3) => {
+  "worklet";
+  return [m[0][0], m[1][0], m[0][1], m[1][1], m[0][2], m[1][2]];
+};
+
 export const serializeToSVGMatrix = (m: Matrix3) => {
   "worklet";
   return `matrix(${m[0][0]}, ${m[1][0]}, ${m[0][1]}, ${m[1][1]}, ${m[0][2]}, ${m[1][2]})`;

src/Paths.ts

@@ -3,7 +3,7 @@ import parseSVG from "parse-svg-path";
 import absSVG from "abs-svg-path";
 import normalizeSVG from "normalize-svg-path";
 
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
 import { cartesian2Polar } from "./Coordinates";
 import { cubicBezierYForX } from "./Math";
 

src/ReText.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { TextProps as RNTextProps, StyleSheet, TextInput } from "react-native";
+import type { TextProps as RNTextProps } from "react-native";
+import { StyleSheet, TextInput } from "react-native";
 import Animated, { useAnimatedProps } from "react-native-reanimated";
 
 const styles = StyleSheet.create({

src/Transforms.ts

@@ -0,0 +1,19 @@
+import type { TransformsStyle } from "react-native";
+
+import type { Vector } from "./Vectors";
+
+type RNTransform = Exclude<TransformsStyle["transform"], undefined>;
+
+export const transformOrigin = (
+  { x, y }: Vector,
+  transformations: RNTransform
+): RNTransform => {
+  "worklet";
+  return [
+    { translateX: x },
+    { translateY: y },
+    ...transformations,
+    { translateX: -x },
+    { translateY: -y },
+  ];
+};

src/Transitions.ts

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import Animated, {
+import type Animated from "react-native-reanimated";
+import {
   useSharedValue,
   useDerivedValue,
   withTiming,

src/Vectors.ts

@@ -1,4 +1,5 @@
-import Animated, { useSharedValue } from "react-native-reanimated";
+import type Animated from "react-native-reanimated";
+import { useSharedValue } from "react-native-reanimated";
 
 /**
  * @summary Type representing a vector
@@ -36,7 +37,10 @@ type Create = {
  * @param y
  * @worklet
  */
-const create: Create = <T extends Animated.Adaptable<number>>(x?: T, y?: T) => {
+export const vec2: Create = <T extends Animated.Adaptable<number>>(
+  x?: T,
+  y?: T
+) => {
   "worklet";
   return {
     x: x ?? 0,
@@ -45,5 +49,5 @@ const create: Create = <T extends Animated.Adaptable<number>>(x?: T, y?: T) => {
 };
 
 export const vec = {
-  create,
+  create: vec2,
 };

src/__tests__/Paths.test.ts

@@ -1,5 +1,5 @@
 import { serialize, parse, getYForX, curveLines } from "../Paths";
-import { Vector } from "../Vectors";
+import type { Vector } from "../Vectors";
 
 import { d1, d2 } from "./paths";
 

src/index.ts

@@ -9,4 +9,5 @@ export * from "./Array";
 export * from "./Matrix3";
 export * from "./Matrix4";
 export * from "./Colors";
+export * from "./Transforms";
 export { default as ReText } from "./ReText";

src/v1/AnimationRunners.ts

@@ -1,6 +1,6 @@
 import Animated, { add } from "react-native-reanimated";
 
-import { SpringConfig } from "./Animations";
+import type { SpringConfig } from "./Animations";
 
 const {
   Clock,

src/v1/Animations.ts

@@ -1,7 +1,8 @@
 import Animated, { block, defined } from "react-native-reanimated";
 
 import { clamp, max, min } from "./Math";
-import { Matrix3, Transforms2d, decompose2d } from "./Matrix3";
+import type { Matrix3, Transforms2d } from "./Matrix3";
+import { decompose2d } from "./Matrix3";
 
 const {
   Value,

src/v1/Coordinates.ts

@@ -1,7 +1,7 @@
 import Animated from "react-native-reanimated";
 
 import { atan2 } from "./Math";
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
 
 const { sub, multiply, add, cos, sin, pow, sqrt } = Animated;
 

src/v1/Gesture.ts

@@ -1,15 +1,15 @@
 import Animated, { diff, lessThan, or } from "react-native-reanimated";
-import {
+import type {
   FlingGestureHandlerEventExtra,
   ForceTouchGestureHandlerEventExtra,
   GestureHandlerStateChangeNativeEvent,
   LongPressGestureHandlerEventExtra,
   PanGestureHandlerEventExtra,
   PinchGestureHandlerEventExtra,
   RotationGestureHandlerEventExtra,
-  State,
   TapGestureHandlerEventExtra,
 } from "react-native-gesture-handler";
+import { State } from "react-native-gesture-handler";
 import { Platform } from "react-native";
 
 import { snapPoint } from "./Animations";

src/v1/Hooks.ts

@@ -9,7 +9,8 @@ import {
   tapGestureHandler,
   scrollHandler,
 } from "./Gesture";
-import { Vector, vec } from "./Vectors";
+import type { Vector } from "./Vectors";
+import { vec } from "./Vectors";
 import { loop } from "./AnimationRunners";
 
 const { Clock, Value, diff, set, useCode, debug, block } = Animated;

src/v1/Matrix3.ts

@@ -2,7 +2,7 @@
 import Animated from "react-native-reanimated";
 
 import { atan2 } from "./Math";
-import { Vector } from "./Vectors";
+import type { Vector } from "./Vectors";
 
 const { add, multiply, sqrt, cos, sin, sub, divide, pow, tan } = Animated;
 

src/v1/ReText.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { TextInput, TextStyle, StyleProp } from "react-native";
+import type { TextStyle, StyleProp } from "react-native";
+import { TextInput } from "react-native";
 import Animated from "react-native-reanimated";
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

src/v1/Transformations.ts

@@ -1,7 +1,8 @@
 import Animated from "react-native-reanimated";
 
-import { Vector, vec } from "./Vectors";
-import { Transforms2d } from "./Matrix3";
+import type { Vector } from "./Vectors";
+import { vec } from "./Vectors";
+import type { Transforms2d } from "./Matrix3";
 
 const { divide, sub, multiply, add, cos, sin } = Animated;
 

src/v1/Transitions.ts

@@ -2,7 +2,7 @@
 import { useEffect } from "react";
 import Animated, { not, add } from "react-native-reanimated";
 
-import { SpringConfig, TimingConfig } from "./Animations";
+import type { SpringConfig, TimingConfig } from "./Animations";
 import { useConst } from "./Hooks";
 
 const {