@chalidade/utils

Small, dependency-free front-end utilities.

pnpm add @chalidade/utils
# or
npm install @chalidade/utils

Not published yet

This package isn't on npm yet. For now, copy the source from GitHub.

API

debounce(fn, wait)

Delays running fn until wait ms have passed without a new call. Good for search inputs, resize, and autosave. The result has cancel() and flush().

import { debounce } from "@chalidade/utils";

const search = debounce((q: string) => fetchResults(q), 300);
input.addEventListener("input", (e) => search(e.currentTarget.value));

search.cancel(); // cancel the pending call
search.flush();  // run it right now

Related concepts: 04 JavaScript, Event Loop.

throttle(fn, wait)

Runs fn at most once every wait ms (leading + trailing). Good for scroll and pointermove.

import { throttle } from "@chalidade/utils";

window.addEventListener("scroll", throttle(updateProgressBar, 100), { passive: true });

Related concepts: 16 Performance.

cx(...values)

Joins classNames conditionally. Accepts strings, numbers, arrays, and objects.

import { cx } from "@chalidade/utils";

cx("btn", { "btn--active": isActive }, size && `btn--${size}`);
// → "btn btn--active btn--lg"

Related concepts: 08 CSS Architecture.

clamp(value, min, max)

Restricts a number to the range [min, max]. Throws a RangeError if min > max.

clamp(120, 0, 100); // 100

Learn from the source

Suggested exercise:

1. Rewrite debounce without looking at its source.
2. Run pnpm test to check your implementation.
3. Compare it with lodash.debounce (the leading and maxWait options) and record the differences in your experiment notes.