@chalidade/utils

Utilitas front-end kecil tanpa dependensi.

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

Belum dipublish

Package ini belum dipublish ke npm. Sementara ini, salin source-nya dari GitHub.

API

debounce(fn, wait)

Menunda eksekusi fn sampai wait ms berlalu tanpa panggilan baru. Cocok untuk input pencarian, resize, dan autosave. Hasilnya punya cancel() dan flush().

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

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

search.cancel(); // batalkan panggilan yang menunggu
search.flush();  // jalankan sekarang juga

Konsep terkait: 04 JavaScript, Event Loop.

throttle(fn, wait)

Menjalankan fn paling banyak sekali setiap wait ms (leading + trailing). Cocok untuk scroll dan pointermove.

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

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

Konsep terkait: 16 Performance.

cx(...values)

Menggabungkan className secara kondisional. Menerima string, angka, array, dan object.

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

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

Konsep terkait: 08 CSS Architecture.

clamp(value, min, max)

Membatasi angka ke rentang [min, max]. Melempar RangeError kalau min > max.

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

Belajar dari source-nya

Latihan yang disarankan:

1. Tulis ulang debounce tanpa melihat source-nya.
2. Jalankan pnpm test untuk mengecek implementasimu.
3. Bandingkan dengan lodash.debounce (opsi leading, maxWait) dan catat bedanya di catatan eksperimen.