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 pipe and piped.
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.

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 minQuietPeriodMs and any triggerAt.
Throttling: use minGapMs and triggerAt: "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

Build Shadcn CLI from scratch.