remeda package in 0.email codebase.
In this article, we will review remeda package in 0.email codebase. We will look at:
-
remeda in package.json
-
What is remeda?
-
How is remeda used in 0.email?
remeda in package.json
At line number 132 in zero/apps/mail/package.json, you will find the below code code.
"remeda": "2.21.3",
I wanted to find out what does remeda mean?
What is remeda?
The first “data-first” and “data-last” utility library designed especially for TypeScript.
Documentation
Read the full docs and API reference on remedajs.com/docs.
Migrating from other libraries? Check out our migration guides for Lodash and Ramda!
Interested in contributing? Read the contributing guide.
Features
-
First-class TypeScript support, with types that are as specific as possible.
-
Supports data-first (
R.filter(array, fn)) and data-last (R.filter(fn)(array)) approaches. -
Lazy evaluation support with
pipeandpiped. -
Runtime and types are both extensively tested, with full code coverage.
-
Tree-shakable, supports CJS and ESM.
-
Fully documented with JSDoc, supports in-editor function documentation.
Getting started
- Installation
npm install remeda
pnpm add remeda
yarn add remeda
bun install remeda
deno add jsr:@remeda/remeda
2. Usage
// Import everything:
import * as R from "remeda";
// Or import methods individually:
// import { pipe, tap, unique, take } from "remeda";
R.pipe(
[1, 2, 2, 3, 3, 4, 5, 6],
R.tap((value) => console.log(`Got ${value}`)),
R.unique(),
R.take(3),
); // => [1, 2, 3]
// Console output:
// Got 1
// Got 2
// Got 2
// Got 3
This above information is picked from remeda npm package.
How is remeda used in 0.email?
At line 8 zero/apps/main/components/party.tsx, the following import is found
import { funnel } from 'remeda';
This funnel is used at line 27 as shown below
const labelsDebouncer = funnel(
() => queryClient.invalidateQueries({ queryKey: trpc.labels.list.queryKey() }),
{ minQuietPeriodMs: DEBOUNCE_DELAY },
);
Similarly it also found to be used at line 31
const threadsDebouncer = funnel(
() => queryClient.invalidateQueries({ queryKey: trpc.mail.listThreads.queryKey() }),
{ minQuietPeriodMs: DEBOUNCE_DELAY },
);
At this point, it makes sense to go read what funnel means.
funnel
Creates a funnel that controls the timing and execution of callback. Its main purpose is to manage multiple consecutive (usually fast-paced) calls, reshaping them according to a defined batching strategy and timing policy. This is useful when handling uncontrolled call rates, such as DOM events or network traffic. It can implement strategies like debouncing, throttling, batching, and more.
An optional reducer function can be provided to allow passing data to the callback via calls to call (otherwise the signature of call takes no arguments).
Typing is inferred from callbacks param, and from the rest params that the optional reducer function accepts. Use explicit types for these to ensure that everything else is well-typed.
Notice that this function constructs a funnel object, and does not execute anything when called. The returned object should be used to execute the funnel via its call method.
-
Debouncing: use
minQuietPeriodMsand anytriggerAt. -
Throttling: use
minGapMsandtriggerAt: "start"or"both". -
Batching: See the reference implementation in
funnel.reference-batch.test.ts.
const debouncer = R.funnel(
() => {
console.log("Callback executed!");
},
{ minQuietPeriodMs: 100 },
);
debouncer.call();
debouncer.call();
const throttle = R.funnel(
() => {
console.log("Callback executed!");
},
{ minGapMs: 100, triggerAt: "start" },
);
throttle.call();
throttle.call();
Learn more about funnel.
About me
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
References:
-
https://github.com/Mail-0/Zero/blob/staging/apps/mail/package.json#L132C6-L132C12
-
https://github.com/search?q=repo%3AMail-0/Zero%20%22remeda%22&type=code