[Feature] Migrate tests from Jest to Bun

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
  - run: npm run build
 
  - name: Test
- run: npm run test -- -- --coverage || npm run test -- -- --coverage
+ run: npm run test -- -- --coverage
 
  - name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1

.github/workflows/tests.yml

@@ -48,7 +48,7 @@ jobs:
  - name: Install modules
  run: npm install
  - name: Run tests
- run: npm run test -- -- --coverage --runInBand --ci || npm run test -- -- --coverage --runInBand --ci
+ run: npm run test -- -- --coverage
  - name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1
  with:

CHANGELOG.md

@@ -12,6 +12,9 @@ All notable changes to this project will be documented in this file. The format
 
 - ⚠️ Refactor definition of breakpoints for the resize service ([#323](https://github.com/studiometa/js-toolkit/pull/323))
 - ⚠️ Refactor `focusTrap` for simpler exports ([#406](https://github.com/studiometa/js-toolkit/pull/406))
+- Migrate tests from Jest to Bun ([#411](https://github.com/studiometa/js-toolkit/pull/411))
+- Refactor the requestAnimationFrame polyfill ([#411](https://github.com/studiometa/js-toolkit/pull/411), [dfd62b6](https://github.com/studiometa/js-toolkit/commit/dfd62b6), [34bb2c5](https://github.com/studiometa/js-toolkit/commit/34bb2c5))
+- Improve raf service usage ([#411](https://github.com/studiometa/js-toolkit/pull/411), [352f509](https://github.com/studiometa/js-toolkit/commit/352f509))
 
 ### Removed
 

package.json

@@ -7,11 +7,13 @@
  "packages/*"
  ],
  "scripts": {
+ "postinstall": "patch-package",
  "demo:dev": "npm run dev --workspace=@studiometa/js-toolkit-demo",
  "demo:watch": "npm run watch --workspace=@studiometa/js-toolkit-demo",
  "demo:build": "npm run build --workspace=@studiometa/js-toolkit-demo",
  "docs:dev": "npm run dev --workspace=@studiometa/js-toolkit-docs",
  "docs:build": "npm run build --workspace=@studiometa/js-toolkit-docs",
+ "docs:preview": "npm run preview --workspace=@studiometa/js-toolkit-docs",
  "test": "npm run test --workspace=@studiometa/js-toolkit-tests",
  "lint": "npm run lint:eslint && npm run lint:types && npm run lint:docs",
  "lint:eslint": "eslint packages/js-toolkit --ext=.js,.ts --cache",
@@ -40,6 +42,7 @@
  "eslint-config-airbnb-typescript": "^17.1.0",
  "eslint-import-resolver-exports": "^1.0.0-beta.5",
  "eslint-plugin-jest": "^27.6.1",
+ "patch-package": "^8.0.0",
  "prettier": "^2.8.8",
  "typescript": "^5.3.3"
  },

packages/docs/.vitepress/config.js

@@ -36,7 +36,10 @@ export default defineConfig({
  {
  text: `v${pkg.version}`,
  items: [
- { text: 'Release Notes', link: 'https://github.com/studiometa/js-toolkit/blob/master/CHANGELOG.md' },
+ {
+ text: 'Release Notes',
+ link: 'https://github.com/studiometa/js-toolkit/blob/master/CHANGELOG.md',
+ },
  { text: 'Demo', link: 'https://studiometa-js-toolkit-demo.netlify.app/' },
  ],
  },

packages/docs/package.json

@@ -5,11 +5,12 @@
  "private": true,
  "scripts": {
  "dev": "vitepress dev .",
- "build": "vitepress build ."
+ "build": "vitepress build .",
+ "preview": "vitepress preview ."
  },
  "dependencies": {
  "@studiometa/tailwind-config": "^2.1.0",
  "tailwindcss": "^3.4.1",
- "vitepress": "^1.0.0-rc.36"
+ "vitepress": "^1.0.0-rc.44"
  }
 }

packages/docs/utils/nextFrame.md

@@ -1,6 +1,6 @@
 # nextFrame
 
-Execute a given function in the next window frame.
+Execute a given function in the next window frame. This function is a promisified version of the [`requestAnimationFrame` function](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
 
 ## Usage
 
@@ -19,10 +19,10 @@ console.log('I will be executed in the next frame!');
 
 ### Parameters
 
-- `fn` (`Function`): the function to execute
+- `callback` (`(time:DOMHighResTimeStamp) => unknown`): the function to execute
 
 [Source](https://github.com/studiometa/js-toolkit/blob/master/src/utils/nextFrame.js)
 
 ### Return value
 
-This function returns a `Promise` resolving on the next frame.
+This function returns a `Promise` resolving on the next frame with the return value of the provided callback.

packages/docs/utils/trapFocus.md

@@ -34,4 +34,3 @@ The `untrapFocus` function does not need any argument.
 ## Return value
 
 Both functions return nothing.
-

packages/js-toolkit/Base/managers/ActionManager.ts

@@ -0,0 +1,7 @@
+import { AbstractManager } from './AbstractManager.js';
+
+export class ActionManager extends AbstractManager {
+ registerAll() {
+ this.__element.querySelectorAll('[data-on]');
+ }
+}

packages/js-toolkit/decorators/withScrolledInView/utils.ts

@@ -88,10 +88,28 @@ export function getEdgeWithOffset(start: number, size: number, offset: string |
  return start;
 }
 
+type HorizontalOnlyRect = {
+ x: number;
+ width: number;
+};
+
+type VerticalOnlyRect = {
+ y: number;
+ height: number;
+};
+
+type HorizontalRect = HorizontalOnlyRect & Partial<VerticalOnlyRect>;
+type VerticalRect = Partial<HorizontalOnlyRect> & VerticalOnlyRect;
+
 /**
  * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.
  */
-export function getEdges(axis: 'x' | 'y', targetSizes, containerSizes, offset): [number, number] {
+export function getEdges<T extends 'x' | 'y'>(
+ axis: T,
+ targetSizes: T extends 'x' ? HorizontalRect : VerticalRect,
+ containerSizes: T extends 'x' ? HorizontalRect : VerticalRect,
+ offset: NormalizedOffset,
+): [number, number] {
  const sizeKey = axis === 'x' ? 'width' : 'height';
  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);
  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);

packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts

@@ -262,7 +262,7 @@ export function withScrolledInView<S extends Base = Base>(
  render();
  },
  scrolled: (props) => {
- if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {
+ if (props.changed.y || props.changed.x) {
  this.$services.enable('ticked');
  }
  },

packages/js-toolkit/helpers/createApp.ts

@@ -5,7 +5,7 @@ import { isDefined } from '../utils/index.js';
 
 export type CreateAppOptions = {
  root: HTMLElement;
- features: Features;
+ features: Partial<Features>;
  breakpoints?: Record<string, string>;
 };
 

packages/js-toolkit/services/pointer.ts

@@ -176,9 +176,9 @@ const instances = new Map<HTMLElement | Window, PointerService>();
 /**
  * Use the pointer service.
  */
-export default function usePointer(target: HTMLElement | undefined): PointerService {
- if (!instances.has(target)) {
- instances.set(target, createPointerService(target));
+export default function usePointer(target?: HTMLElement): PointerService {
+ if (!instances.has(target ?? window)) {
+ instances.set(target ?? window, createPointerService(target));
  }
- return instances.get(target);
+ return instances.get(target ?? window) as PointerService;
 }

packages/js-toolkit/services/raf.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */
 import { useService } from './service.js';
-import { getRaf as getRequestAnimationFrame } from '../utils/nextFrame.js';
 import { useScheduler } from '../utils/scheduler.js';
 import { isFunction } from '../utils/is.js';
 import type { ServiceInterface } from './index.js';
@@ -18,7 +17,6 @@ export interface RafServiceProps {
  */
 function createRafService(): RafService {
  let isTicking = false;
- const RAF = getRequestAnimationFrame();
 
  /**
  * Trigger callbacks.
@@ -49,7 +47,7 @@ function createRafService(): RafService {
  return;
  }
 
- RAF(loop);
+ requestAnimationFrame(loop);
  }
 
  const { add, remove, has, props, callbacks } = useService({
@@ -58,7 +56,7 @@ function createRafService(): RafService {
  } as RafServiceProps,
  init() {
  isTicking = true;
- RAF(loop);
+ requestAnimationFrame(loop);
  },
  kill() {
  isTicking = false;

packages/js-toolkit/utils/SmartQueue.ts

@@ -1,5 +1,5 @@
 import { Queue } from './Queue.js';
-import nextTick from './nextTick.js';
+import { nextTick } from './nextTick.js';
 
 /**
  * A task is considered long if it blocks the main thread for more thant 50ms.

packages/js-toolkit/utils/css/animate.ts

@@ -1,6 +1,6 @@
 import { lerp, map } from '../math/index.js';
 import { isDefined, isFunction, isNumber } from '../is.js';
-import transform, { TRANSFORM_PROPS } from './transform.js';
+import { transform, TRANSFORM_PROPS } from './transform.js';
 import { domScheduler as scheduler } from '../scheduler.js';
 import { tween, normalizeEase } from '../tween.js';
 // eslint-disable-next-line import/extensions
@@ -12,14 +12,20 @@ import type { BezierCurve, TweenOptions } from '../tween.js';
 
 export type CSSCustomPropertyName = `--${string}`;
 
-export type Keyframe = TransformProps & {
- opacity?: number;
- transformOrigin?: string;
- easing?: EasingFunction | BezierCurve;
- offset?: number;
- [key: CSSCustomPropertyName]: number;
+type KeyframeTransforms<Type> = {
+ [Property in keyof Type]: number | [number, string];
 };
 
+export type Keyframe = Partial<
+ KeyframeTransforms<TransformProps> & {
+ opacity: number;
+ transformOrigin: string;
+ easing: EasingFunction | BezierCurve;
+ offset: number;
+ [key: CSSCustomPropertyName]: number;
+ }
+>;
+
 export type NormalizedKeyframe = Keyframe & {
  easing: EasingFunction;
  offset: number;

packages/js-toolkit/utils/css/index.ts

@@ -3,5 +3,6 @@ export { add as addClass, remove as removeClass, toggle as toggleClass } from '.
 export { add as addStyle, remove as removeStyle } from './styles.js';
 export { default as getOffsetSizes } from './getOffsetSizes.js';
 export { default as matrix } from './matrix.js';
-export { default as transform } from './transform.js';
+export { transform } from './transform.js';
 export { default as transition } from './transition.js';
+export type { TransformProps } from './transform.js';

packages/js-toolkit/utils/css/matrix.ts

@@ -24,7 +24,7 @@ type MatrixTransform = {
  * // matrix(0.5, 0, 0, 0.5, 0, 0)
  * ```
  */
-export default function matrix(transform: MatrixTransform): string {
+export default function matrix(transform?: MatrixTransform): string {
  // eslint-disable-next-line no-param-reassign
  transform = transform || {};
  return `matrix(${transform.scaleX ?? 1}, ${transform.skewY ?? 0}, ${transform.skewX ?? 0}, ${

packages/js-toolkit/utils/css/transform.ts

@@ -39,7 +39,7 @@ export const TRANSFORM_PROPS = [
 /**
  * Generate a CSS transform.
  */
-export default function transform(
+export function transform(
  elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>,
  props: TransformProps,
 ): string {

packages/js-toolkit/utils/index.ts

@@ -3,14 +3,13 @@ export * from './trapFocus.js';
 export { default as keyCodes } from './keyCodes.js';
 export { default as memoize } from './memoize.js';
 export { nextFrame } from './nextFrame.js';
-export { default as nextTick } from './nextTick.js';
-export { default as nextMicrotask } from './nextMicrotask.js';
+export { nextTick } from './nextTick.js';
+export { nextMicrotask } from './nextMicrotask.js';
 export { default as throttle } from './throttle.js';
 export { default as scrollTo } from './scrollTo.js';
 export { default as getComponentResolver } from './getComponentResolver.js';
 export * from './is.js';
 export * from './has.js';
-// eslint-disable-next-line import/extensions
 export * from './css/index.js';
 export {
  objectToURLSearchParams,

packages/js-toolkit/utils/is.ts

@@ -36,3 +36,8 @@ export const isBoolean = (value: unknown): value is boolean => typeof value ===
 
 // eslint-disable-next-line prefer-destructuring
 export const isArray = Array.isArray;
+
+/**
+ * Test if a given value is an empty string.
+ */
+export const isEmptyString = (value: unknown): boolean => isString(value) && value.length > 0;

packages/js-toolkit/utils/nextFrame.ts

@@ -1,46 +1,17 @@
 import { isFunction } from './is.js';
 import { hasWindow } from './has.js';
 
-/**
- * RequestAnimation frame polyfill.
- *
- * @see https://github.com/vuejs/vue/blob/ec78fc8b6d03e59da669be1adf4b4b5abf670a34/dist/vue.runtime.esm.js#L7355
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function getRaf(): (handler: Function) => number {
- return hasWindow() && window.requestAnimationFrame
- ? window.requestAnimationFrame.bind(window)
- : setTimeout;
-}
-
-/**
- * Get a function to cancel the method returned by `getRaf()`.
- */
-export function getCancelRaf(): (id: number) => void {
- return hasWindow() && window.cancelAnimationFrame
- ? window.cancelAnimationFrame.bind(window)
- : clearTimeout;
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Callback = (time?: DOMHighResTimeStamp) => any;
 
 /**
  * Wait for the next frame to execute a function.
- *
- * @template {() => any} T
- * @param {T} [fn] The callback function to execute.
- * @returns {Promise<T extends Function ? ReturnType<T> : undefined>} A Promise resolving when the next frame is reached.
- * @example
- * ```js
- * nextFrame(() => console.log('hello world'));
- *
- * await nextFrame();
- * console.log('hello world');
- * ```
  */
-export function nextFrame<T extends () => unknown>(
- fn?: T,
-): Promise<T extends () => unknown ? ReturnType<T> : void> {
+export function nextFrame(): Promise<DOMHighResTimeStamp>;
+export function nextFrame<T extends Callback>(callback?: T): Promise<ReturnType<T>>;
+export function nextFrame<T extends Callback>(callback?: T): Promise<ReturnType<T>> {
+ const fn = hasWindow() ? window?.requestAnimationFrame ?? setTimeout : setTimeout;
  return new Promise((resolve) => {
- // @ts-ignore
- getRaf()(() => resolve(isFunction(fn) && fn()));
+ fn((time) => resolve(isFunction(callback) ? callback(time) : time));
  });
 }

packages/js-toolkit/utils/nextMicrotask.ts

@@ -1,11 +1,13 @@
 import { isFunction } from './is.js';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Callback = (...args: any[]) => any;
+
 /**
  * Wait for the next microtask.
  */
-export default async function nextMicrotask<T extends () => unknown>(
- fn?: T,
-): Promise<T extends () => unknown ? ReturnType<T> : void> {
- // @ts-ignore
- return Promise.resolve().then(() => isFunction(fn) && fn());
+export async function nextMicrotask(): Promise<void>;
+export async function nextMicrotask<T extends Callback>(callback?: T): Promise<ReturnType<T>>;
+export async function nextMicrotask<T extends Callback>(callback?: T): Promise<ReturnType<T>> {
+ return Promise.resolve().then(() => isFunction(callback) && callback());
 }

packages/js-toolkit/utils/nextTick.ts

@@ -1,12 +1,14 @@
 import { isFunction } from './is.js';
 import { wait } from './wait.js';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Callback = (...args: any[]) => any;
+
 /**
  * Wait for the next tick.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default async function nextTick<T extends () => any>(
- fn?: T,
-): Promise<T extends void ? void : ReturnType<T>> {
- return wait().then(isFunction(fn) && (fn as ReturnType<T>));
+export async function nextTick(): Promise<void>;
+export async function nextTick<T extends Callback>(callback?: T): Promise<ReturnType<T>>;
+export async function nextTick<T extends Callback>(callback?: T): Promise<ReturnType<T>> {
+ return wait().then(isFunction(callback) && (callback as ReturnType<T>));
 }