refactor: dropped web worker

Author: c4benni

src/defaults/index.ts

@@ -6,26 +6,26 @@ export const props: Props = {
   css: false,
   appear: false,
   tag: undefined,
-  enterFromClass: undefined,
-  enterActiveClass: undefined,
-  enterToClass: undefined,
-  appearFromClass: undefined,
-  appearActiveClass: undefined,
-  appearToClass: undefined,
-  leaveFromClass: undefined,
-  leaveActiveClass: undefined,
-  leaveToClass: undefined,
+  // enterFromClass: undefined,
+  // enterActiveClass: undefined,
+  // enterToClass: undefined,
+  // appearFromClass: undefined,
+  // appearActiveClass: undefined,
+  // appearToClass: undefined,
+  // leaveFromClass: undefined,
+  // leaveActiveClass: undefined,
+  // leaveToClass: undefined,
   config: "fade",
   delay: undefined,
   duration: undefined,
   ease: "linear",
   group: false,
   mode: "out-in",
-  spring: "wobbly",
+  spring: undefined,
   retainFinalStyle: false,
 };
 
 export const options: Options = {
   componentName: "UiTransition",
-  globals: ["sleep", "getSpring"],
+  globals: ["getSpring"],
 };

src/getSpring/calcSpring/index.ts

@@ -0,0 +1,91 @@
+import { DynamicObject } from "src/types";
+import { CalcSpring } from "./type";
+
+const saved: DynamicObject<number[]> = {};
+
+const calcSpring: CalcSpring = (arg = {}) => {
+  const {
+    tension = 320,
+    friction = 25,
+    mass = 1,
+    precision = 0.01,
+    velocity = 0,
+    stopAttempt = 20,
+  } = arg;
+
+  // path to save this `createSpring` call, to avoid repetition
+  const savePath = `${tension}~${friction}~${mass}~${precision}~${stopAttempt}~${velocity}`;
+
+  if (saved?.[savePath]) {
+    return Promise.resolve(saved[savePath]);
+  }
+
+  //   get springs from 0 to 1;
+  //   then interpolate it with any other value(s)
+  let current = 0;
+
+  const to = 1;
+
+  // initial velocity
+  let _velocity = velocity;
+
+  //   frames created; on every change in the `current` position, a new frame is created
+  let frames = 0;
+
+  //   `halt` holds how many times the difference between the current spring and previous spring is <= the `precision`.
+  //   This means having a higher precision (closer to 1) will result in a very short spring. While having a lower precision (closer to 0) will result in a smoother, but longer spring.
+  let halt = 0;
+
+  //   `stoppingAttempt` is how many times the spring should halt (check `halt` above), before it comes to a stop. This means if you need the final moments of the spring to go back and forth a few times, use a smaller number (> 0). But if you need a fine tuned spring ending, use a higher `stoppingAttempt`.
+  const stoppingAttempt = Math.max(Math.abs(stopAttempt), 1) || 5;
+
+  //   `positions` holds an array of spring values. Each item in this array is considered a frame.
+  const positions: number[] = [];
+
+  //   to achieve 60fps. This shouldn't be changed. However, reducing the frames to say 1/30 will result in a choppy looking spring (not smooth). While increasing it eg (1/120) will make the spring unnecessarily long with no visible difference from the 1/60 frames.
+  const FPS = 1 / 60;
+
+  const maxFrames = Math.floor(FPS * 1000 * 1000);
+
+  for (let step = 0; step <= maxFrames; step += 1) {
+    const springForce = -tension * (current - to);
+
+    const frictionForce = -friction * _velocity;
+
+    const acceleration = (springForce + frictionForce) / mass;
+
+    _velocity += acceleration * FPS;
+
+    const nextValue = current + _velocity * FPS;
+
+    const stopping = Math.abs(nextValue - current) < Math.abs(precision);
+
+    if (stopping) {
+      halt += 1;
+    } else halt = 0;
+
+    if (halt >= stoppingAttempt) {
+      positions.push(to);
+      frames = step + 1;
+      break;
+    }
+
+    current = nextValue;
+
+    if (step == 0) {
+      positions.push(0);
+    }
+
+    positions.push(current);
+  }
+
+  if (frames == 0) {
+    frames = 1000;
+    positions.push(to);
+  }
+
+  //   save results to avoid repetition
+  return Promise.resolve((saved[savePath] = positions));
+};
+
+export default calcSpring;

src/getSpring/calcSpring/type.ts

@@ -0,0 +1,3 @@
+import { SpringObject } from "src/props/types";
+
+export type CalcSpring = (arg?: SpringObject) => Promise<number[]>;

src/getSpring/index.ts

@@ -0,0 +1,30 @@
+import { DynamicObject } from "src/types";
+import calcSpring from "./calcSpring";
+import interpolate from "./interpolate";
+import { GetSpring, GetSpringOutput } from "./type";
+
+const saved: DynamicObject<GetSpringOutput> = {};
+
+// calculates spring values and returns cssText, and duration
+const getSpring: GetSpring = async function (
+  frame,
+  config = {},
+  phase,
+  keyframeName
+) {
+  const savePath = `${
+    Array.isArray(frame) ? frame.join() : frame
+  }~${JSON.stringify(config)}~${phase}~${keyframeName}`;
+
+  if (saved[savePath]) {
+    return saved[savePath];
+  }
+
+  const spring = await calcSpring(config);
+
+  const interpolatedValues = interpolate(spring, frame, phase, keyframeName);
+
+  return (saved[savePath] = interpolatedValues);
+};
+
+export default getSpring;

src/getSpring/inject/index.ts

@@ -0,0 +1,47 @@
+import extractSpring from "../../utils/extractSpring";
+import calcSpring from "../calcSpring";
+import calculateSteps from "../interpolate/calculateSteps";
+import { InjectGetSpring } from "./type";
+
+const injectGetSpring: InjectGetSpring = async (frame, config) => {
+  if (Array.isArray(frame) && frame.length) {
+    const springConfig = config
+      ? extractSpring(config, config, "leave")
+      : undefined;
+
+    const springValues = await calcSpring(springConfig);
+
+    // parse non 2d array frames to 2d arrays;
+
+    // check to see if the first value isn't an array;
+    const is2d = Array.isArray(frame[0]);
+
+    // create 2d array
+    const frameAs2d = is2d
+      ? (frame as number[][])
+      : [[frame[0] || 0, frame[1] || 0]];
+
+    // store interpolated values. If a 2d array was passed, return 2d of springs, else return [...springs]
+    const output: (number[] | number[][])[] = [];
+
+    frameAs2d.forEach((row) => {
+      const values: number[] = [];
+
+      springValues.forEach((spring) => {
+        values.push(calculateSteps(row[0], row[1], spring) as number);
+      });
+
+      if (is2d) {
+        output.push([values]);
+      } else {
+        output.push(values);
+      }
+    });
+
+    return output;
+  }
+
+  return [];
+};
+
+export default injectGetSpring;

src/getSpring/inject/type.ts

@@ -0,0 +1,6 @@
+import { Spring } from "src/props/types";
+
+export type InjectGetSpring = (
+  frame: number[] | number[][],
+  config?: Spring
+) => Promise<(number[] | number[][])[]>;

src/getSpring/interpolate/calculateSteps/index.ts

@@ -0,0 +1,42 @@
+import { DynamicObject } from "src/types";
+
+export const stepper = (from: number, to: number, frame: number) =>
+  (from - to) * frame + to;
+
+const saved: DynamicObject<number | number[]> = {};
+
+export default function calculateSteps(
+  from: number | number[],
+  to: number | number[],
+  frame: number
+): number | number[] {
+  const savePath = `${from}~${to}~${frame}`;
+
+  if (saved[savePath]) {
+    return saved[savePath];
+  }
+
+  const fromArray = Array.isArray(from);
+  const toArray = Array.isArray(to);
+
+  if (fromArray || toArray) {
+    // check if they are same length; else bail
+    if (fromArray && toArray) {
+      if (from.length !== to.length) {
+        return [];
+      }
+
+      const steps = [];
+
+      for (let index = 0; index < from.length; index++) {
+        steps.push(stepper(to[index], from[index], frame));
+      }
+
+      return (saved[savePath] = steps);
+    }
+
+    return [];
+  } else {
+    return (saved[savePath] = stepper(to, from, frame));
+  }
+}

src/getSpring/interpolate/index.ts

@@ -0,0 +1,82 @@
+import { DynamicObject } from "../../types";
+import { kebabCase } from "../../utils";
+import { GetSpringOutput } from "../type";
+import calculateSteps from "./calculateSteps";
+import { Interpolate } from "./type";
+
+const saved: DynamicObject<GetSpringOutput> = {};
+
+// interpolate values from frames to create CSSKeyframes;
+const interpolate: Interpolate = (springValues, frame, phase, keyframeName) => {
+  const savePath = `${springValues}~${
+    Array.isArray(frame) ? frame.join() : frame
+  }~${phase}~${keyframeName}`;
+
+  if (saved[savePath]) {
+    return saved[savePath] as GetSpringOutput;
+  }
+
+  const springs: DynamicObject<string | number>[] = springValues
+    .map((val) => {
+      if (Array.isArray(frame)) {
+        const output: DynamicObject<string | number> = {};
+
+        frame.forEach((item) => {
+          Object.assign(
+            output,
+            item(
+              (from: number | number[], to: number | number[]) =>
+                calculateSteps(from, to, val),
+              phase
+            )
+          );
+        });
+
+        return output;
+      } else {
+        const output = frame(
+          (from: number | number[], to: number | number[]) =>
+            calculateSteps(from, to, val),
+          phase
+        );
+
+        return output;
+      }
+    })
+    .filter((x) => Object.keys(x).length);
+
+  let cssText = "";
+
+  let duration = 0;
+
+  if (springs.length) {
+    duration = (springs.length / 60) * 1000;
+
+    cssText = `@keyframes ${keyframeName}{`;
+
+    // helper to get the current frame index (keyframe %)
+    const frameIndex = (length: number, index: number): number =>
+      (100 / length) * index;
+
+    for (let index = 0; index < springs.length; index++) {
+      const getFrameIndex = `${frameIndex(springs.length - 1, index)}%`;
+
+      cssText += `${getFrameIndex}{`;
+
+      for (const key in springs[index]) {
+        cssText += `${kebabCase(key)}:${springs[index][key]};`;
+      }
+
+      cssText += `}`;
+    }
+
+    cssText += "}";
+  }
+
+  return {
+    cssText,
+    duration,
+  };
+};
+
+export default interpolate;

src/getSpring/interpolate/type.ts

@@ -0,0 +1,9 @@
+import { AnimPhase, Frame } from "src/types";
+import { GetSpringOutput } from "../type";
+
+export type Interpolate = (
+  spring: number[],
+  frame: Frame | Frame[],
+  phase: AnimPhase,
+  keyframeName: string
+) => GetSpringOutput;

src/getSpring/type.ts

@@ -0,0 +1,14 @@
+import { SpringObject } from "src/props/types";
+import { AnimPhase, Frame } from "src/types";
+
+export interface GetSpringOutput {
+  cssText: string;
+  duration: number;
+}
+
+export type GetSpring = (
+  frame: Frame | Frame[],
+  config: SpringObject,
+  phase: AnimPhase,
+  keyframeName: string
+) => Promise<GetSpringOutput>;