Lean Pinia stores

Three years ago – time files – I wrote a hack to remove the boilerplate fields from a Pinia store. It worked well.

This morning, writing work stuff, I wrote a lightweight wrapper to Pinia’s defineStore, with the primary intent to remove the manual string ID which needs to be given. After the initial TypeScript brouhaha, it went so well that I was able to fully integrate the boilerplate strip with Omit, which is a solution even less intrusive than the one I wroten 3 years ago.

import {_ActionsTree, _GettersTree, defineStore, DefineStoreOptions, Pinia, StateTree, Store, StoreGeneric} from 'pinia';

let nStore = 0;

type LeanStoreDef<Id extends string = string, S extends StateTree = StateTree, G = _GettersTree<S>, A = _ActionsTree> = {
	(pinia?: Pinia | null | undefined, hot?: StoreGeneric): Omit<Store<Id, S, G, A>,
		'$id' | '$dispose' | '$onAction' | '$patch' | '$reset' | '$state' | '$subscribe' | '_customProperties'>;
	$id: Id;
}

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export function newStore<Id extends string, S extends StateTree = {}, G extends _GettersTree<S> = {}, A = {}>(
	options: Omit<DefineStoreOptions<Id, S, G, A>, 'id'>,
): LeanStoreDef<Id, S, G, A> {
	return defineStore(('siorg-store-' + ++nStore) as Id, options);
}

Usage is just exactly what I had in mind:

const useNames = newStore({
	state: () => ({
		names: [] as string[],
	}),
	getters: {
		count: state => state.names.length,
	},
	actions: {
		add(name: string): void {
			this.names.push(name);
		},
	},
});

Zustand, devtools and immer wrapper, pt. 3

In another epiphany of the morning of this December 31, I enhanced my previous utility function to create Zustand stores, including devtools and immer middlewares:

import {create, StateCreator, StoreApi, UseBoundStore} from 'zustand';
import {devtools} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';

type ZustandActions<T extends object, U extends object> = StateCreator<
	T,
	[['zustand/devtools', never], ['zustand/immer', never]],
	[['zustand/immer', never], ['zustand/devtools', never]],
	U
>;

/**
 * Creates a Zustand store with state, computed and actions.
 */
export function createStore<
	T extends object,
	U extends object,
	C extends Record<string, (s: UseBoundStore<StoreApi<T>>) => void>,
> (
	{
		state,
		computed = {} as C,
		actions = {} as ZustandActions<T, U>,
	}: {
		state: T;
		computed?: C;
		actions?: ZustandActions<T, U>;
	},
) {
	const store = create(
		devtools(
			immer(() => state),
			{name: Math.random().toString(36).slice(2), serialize: true},
		),
	);

	if (import.meta.env.DEV) {
		for (const name in computed) {
			if (!name.startsWith('use'))
				throw new Error(name + ' is a hook, and its name must start with the word "use".');
		}
	}

	return {
		use: store,
		...computed,
		...actions(store.setState, store.getState, store),
	};
}

The key improvement here is that computed functions will be 100% reactive, because they’re simple hooks attached to the store object – they work like ordinary hook functions:

const bearStore = createStore({
	state: {
		bears: 0,
	},
	computed: {
		useHasBears: () => bearStore.use(s => s.bears > 0),
	},
	actions: (set, get) => ({
		increasePopulation(): void {
			set(state => {
				++state.bears;
			});
		},
	}),
});

function App() {
	const bears = bearStore.use(s => s.bears);
	const hasBears = bearStore.useHasBears();

	return <div>
		<span>{bears} - {hasBears}</span>
		<button onClick={() => bearStore.increasePopulation()}>
			Change
		</button>
	</div>;
}

I’m in awe looking at such a small function yielding such a great usability.

Multiple className values in React, pt. 2

When dealing with an important React project at work, I was manipulating multiple CSS Modules class names with a function I wrote 2 and a half years ago, accepting an object for conditionals.

The early hours of the morning of this last day of the year brought me an idea for a shorter, simpler syntax that works better for imported CSS Modules names:

/**
 * Generates the `className` attribute with the given class names.
 *
 * @example
 * cn( 'abc' );
 * cn( 'abc', 'def' );
 * cn( 'abc', ['def', true] );
 */
export function cn(...items: (string | null | undefined | [string, boolean])[]): string {
	let fin = '';
	for (let i = 0; i < items.length; ++i) {
		const item = items[i];
		if (item === null || item === undefined) {
			continue;
		} else if (typeof item === 'string') {
			fin += item + ' ';
		} else if (Array.isArray(item) && item.length === 2) {
			if (typeof item[0] === 'string') {
				if (item[1]) fin += item[0] + ' ';
			} else {
				throw new Error(`cn() item #${i} is an invalid tuple: ${JSON.stringify(item)}`);
			}
		} else {
			throw new Error(`cn() item #${i} is invalid: ${JSON.stringify(item)}`);
		}
	}
	return fin.length ? fin.substring(0, fin.length - 1) : '';
}

And this new function covers all my current needs.

Zustand, devtools and immer wrapper, pt. 2

On further researching of my previous idea of creating a Zustand + Immer wrapper, I found a very interesting technique straight from Zustand docs, where all the methods are simply free functions declared outside the store, called no store actions. I was already using this to declare private store methods, but it never occurred me to use it for all methods.

Since it officially has no downsides, I applied this idea to append the actions directly to the hook itself, so we don’t need to import each free function. The problem is that the hook has a couple methods itself, plus the inherent ones to any function object. So the result is very polluted. So I decided to adopt a convention of prefixing every action with $.

But conventions are easy to break. So I implemented a reduce to prefix each method name with #. But then TypeScript could not infer the type anymore, so I had to dig and type it manually with key remapping, and finally I got this implementation:

import {create, StateCreator} from 'zustand';
import {devtools} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';
	
export function createStore<T extends object, U extends object>(
	initialState: T,
	actions: StateCreator<
		T,
		[['zustand/devtools', never], ['zustand/immer', never]],
		[['zustand/immer', never], ['zustand/devtools', never]],
		U
	>,
) {
	const store = create(
		devtools(
			immer(() => initialState),
			{name: Math.random().toString(36).slice(2), serialize: true},
		),
	);

	type WithPrefix<T> = {
		[K in keyof T as K extends string ? `$${K}` : never]: T[K];
	};
	const actionsOrig = actions(store.setState, store.getState, store);
	const actionsPrefixed = Object.entries(actionsOrig).reduce(
		(accum, [k, v]) => ({...accum, ['$' + k]: v}),
		{} as WithPrefix<typeof actionsOrig>,
	);

	return Object.assign(store, actionsPrefixed);
}

This creator allows us to call actions directly, without the hook. They’ll be automatically prefixed with $:

const useFoo = createStore({
	name: '',
}, (set, get) => ({
	setName(name: string): void {
		set(state => {
			state.name = name;
		});
	},
}));
	
function App() {
	const name = useFoo(s => s.name);

	return <div>
		<span>{name}</span>
		<button onClick={() => useFoo.$setName('Joe')}</button>
			Change
		</button>
	</div>;
}

That $ prefix gives me bad Vue vibes. Let’s see if I can get along with it, because I was able to develop a DX which is exactly what I was looking for.

Setting/resetting Vue reactive objects

Vue 3 has many idiosyncrasies, among them the overlapping ref and reactive constructs. One of the main differences is that reactive content cannot be replaced. One StackOverflow answer proposes using Object.assign, but it will replace all nested references, losing them all.

I ended up writing my own version of a recursive function to replace each value inside an object, so I won’t need to deal with the muddy details ever again:

/**
 * Recursively copies each field from src to dest, avoiding the loss of
 * reactivity. Used to copy values from an ordinary object to a reactive object.
 */
export function deepAssign<T extends object>(destObj: T, srcObj: T): void {
	const dest = destObj;
	const src = toRaw(srcObj);
	if (src instanceof Date) {
		throw new Error('[deepAssign] Dates must be copied manually.');
	} else if (Array.isArray(src)) {
		for (let i = 0; i < src.length; ++i) {
			if (src[i] === null) {
				(dest as any)[i] = null;
			} else if (src[i] instanceof Date) {
				(dest as any)[i] = new Date(src[i].getTime());
			} else if (Array.isArray(src[i])
					|| typeof src[i] === 'object') {
				deepAssign((dest as any)[i], src[i]);
			} else {
				(dest as any)[i] = toRaw(src[i]);
			}
		}
	} else if (typeof src === 'object') {
		for (const k in src) {
			if (src[k] === null) {
				(dest as any)[k] = null;
			} else if (src[k] instanceof Date) {
				(dest[k] as any) = new Date((src[k] as any).getTime());
			} else if (Array.isArray(src[k])
					|| typeof src[k] === 'object') {
				deepAssign(dest[k] as any, src[k] as any);
			} else {
				(dest[k] as any) = toRaw(src[k]);
			}
		}
	} else {
		throw new Error('[deepAssign] Unknown type: ' + (typeof src));
	}
}

Another problem with reactive is that, to avoid two variables pointing to the same point, we must deep clone an object when creating the object. I also wrote a function to deal with that:

/**
 * Deeply clones an object, eliminating common references. Used to create a
 * reactive object by copying from an ordinary object.
 */
export function deepClone<T>(origObj: T): T {
	const obj = toRaw(origObj);
	if (obj === undefined
			|| obj === null
			|| typeof obj === 'string'
			|| typeof obj === 'number'
			|| typeof obj === 'boolean') {
		return obj;
	} else if (Array.isArray(obj)) {
		return obj.reduce((acum, item) => [...acum, deepClone(item)], []);
	} else if (obj instanceof Date) {
		return new Date(obj.getTime()) as unknown as T;
	} else if (typeof obj === 'object') {
		return Object.entries(obj).reduce(
			(acum, [key, val]) => ({...acum, [key]: deepClone(val)}), {}) as T;
	} else {
		throw new Error('[deepClone] Tipo desconhecido: ' + (typeof obj));
	}
}

I remember from my MobX days some people saying that working with reactive variables can be tricky. Now I can clearly see why.

TypeScript function to set value by key

While researching React stores automation, I wondered whether it would be possible to have a TypeScript function to set the value of an object by the name of its property, with correctly typed parameters, of course.

Turns out, it is

export function setField<
	T extends object,
	K extends keyof T,
>(o: T, k: K, v: T[K]): void {
	o[k] = v;
}

The function above works perfectly with interfaces:

interface Person {
	name: string;
	age: number;
}

const p: Person = { name: 'Joe', age: 42 };
setField(p, 'name', 'foo');

Jotai utilities for read-only and write-only atoms

Three months ago I wrote an utility function to deal with write-only atoms in Jotai. To go with it, today I wrote a function to deal with read-only atoms, so now I have:

import {Atom, useAtom, WritableAtom} from 'jotai';

/**
 * Syntactic sugar to useAtom() for read-only atoms.
 */
export function useReadAtom<V>(a: Atom<V>) {
	const [val] = useAtom(a);
	return val;
}

/**
 * Syntactic sugar to useAtom() for write-only atoms.
 */
export function useWriteAtom<V, A extends unknown[], R>(a: WritableAtom<V, A, R>) {
	const [_, setFunc] = useAtom(a);
	return setFunc;
}

It’s worth mentioning that useReadAtom also works for derived atoms, used for computed values.

Zustand computed values, pt. 2

I’ve been trying to find a way for computed values in Zustand for a while. The general recommended way is using a custom hook, according to Daishi Kato himself. The issue with this approach, however, is that your computed logic will be completely alienated from the store itself.

I just found a neat approach which seems to work: using a nested object inside the store itself, as pointed in this highly cheered comment. Below is a fully typed example:

import {create} from 'zustand';
import {combine} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';

export interface Person {
	name: string;
	age: number;
}

const usePeople = create(immer(
	combine({
		people: [] as Person[],
	},
	(set, get) => ({
		$computed: {
			get count(): number {
				return get().people.length;
			},
		},
		addNew(name: string, age: number): void {
			set(state => {
				state.people.push({name, age});
			});
		},
	})),
));

export default usePeople;

The tradeoff, as benchmarked by myself, is that this $computed getters are not cached and will run every time the state changes, in addition to every time they are requested – which happens when the component re-renders. The ordinary custom hook approach runs only when they are requested. So, there is a performance penalty, which can be huge if the logic is too demanding.

Calling write-only atoms in Jotai

Every atom in Jotai, when called through its useAtom primitive, returns a tuple of value + setter, just like React’s own useState. In a Jotai write-only atom, however, there is no value, so the canonical call is:

const [_, setVal] = useAtom(myValAtom);

In order to get rid of the verbose underscore, and thus the whole useless tuple, I wrote the following function:

import {WritableAtom} from 'jotai';

/**
 * Syntactic sugar to useAtom() for write-only atoms.
 */
export function useWriteAtom<V, A extends unknown[], R>(a: WritableAtom<V, A, R>) {
	const [_, setFunc] = useAtom(a);
	return setFunc;
}

The atom type was copied straight from Jotai’s TypeScript definitions, so the type inference works seamlessly. The example now can be written as:

const setVal = useWriteAtom(myValAtom);

A generic hook for useState and Immer

While prospecting the use of useState with the great Immer, I ended up finding the small use-immer package, which unifies both things. However, it doesn’t have proper TypeScript typings.

So I wrote my own hook to perform this task: just like useState, it returns a value and a setter, but the setter’s argument is a mutable state, automatically wired to produce, and all that using a generic argument for proper typing:

import {useCallback, useState} from 'react';
import {Draft, produce} from 'immer';

export function useStateImmer<T>(initialState: T | (() => T)): [
	T,
	(updater: (draft: Draft<T>) => void) => void,
] {
	const [obj, setObj] = useState(initialState);
	const setObjProduce = useCallback((updater: (draft: Draft<T>) => void): void => {
		setObj(curState => {
			return produce(curState, draft => {
				updater(draft);
			});
		});
	}, [setObj]);
	return [obj, setObjProduce];
}

Note that the returned setter function is identity, since it’s guarded by an useCallback call.

Using Zustand, TypeScript and Immer together

In React land, Redux nightmare finally came to an end with the inception of Zustand, which throws away all the chores we had to previously do, leaving us with a simple workflow of minimal code. On top of that, TypeScript allows us to relax our brains with some degree of strong typing.

When dealing with our Zustand store, just like Redux, we have to manipulate a chunk of immutable data, which becomes more and more annoying as we deepen the object structure. And, when it comes to dealing immutable data, Immer is everyone’s best friend – just slap a produce call and you can go home earlier.

Now here comes the question: how to use Immer inside our Zustand store?

Turns out Zustand provides a few middlewares – functions which lie between the data and your manipulation functions –, and among them an Immer middleware. Using the middleware has two advantages:

• you don’t need to explicitly call produce, because the state argument already comes to you as a WritableDraft;
• you don’t need to explicitly type the state argument, because it already comes to you properly typed.

To put everything together, with automatic type inference, we also need the combine middleware, so we don’t need to write the store type by hand. Here is the full template that can be used as the starting point of your store:

import {create} from 'zustand';
import {combine} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';

interface Person {
	name: string;
	age: number;
}

const useStore = create(immer(
	combine({
		people: [] as Person[],
	},
	(set, get) => ({
		add(name: string, age: number) {
			set(state => {
				state.people.push({name, age});
			});
		},
		remove(name: string) {
			set(state => {
				state.people = state.people.filter(p => p.name === name);
			});
		},
	})),
));

export default useStore;

Notice how you can simply mutate the state inside the actions.

TypeScript map for objects

In another round of React experiments, after another Vue frustration with Volar not typing event arguments, I was again into the state normalization land. When dealing with objects with IDs as keys, every operation requires a tedious reduce, in contrast to the intuitive map we use with arrays.

So I wrote a map for objects:

function mapObj<T>(obj: Record<string, T>, callback: (elem: T, key: string) => T): Record<string, T> {
	return Object.keys(obj).reduce((accum, key) => {
		accum[key] = callback(obj[key], key);
		return accum;
	}, {} as Record<string, T>);
}

It’s fully typed, and it was surprisingly easy to write. TypeScript is a great language.

Fetch calls with global Jotai object

Zustand is a great React state management library, but it has the drawback of not having a standard way to define getters, which must be defined as ordinary hooks.

Written by the same author, Jotai seems to be the answer to this situation. However, while Zustand provides a way to change the state outside React components, Jotai does not. Today I was able to devise a way to work around this, by simply applying the hooks concept, answering my own question:

const errorAtom = atom(''); // storage

const errorReadAtom = atom(get => { // read-only (computed)
	return 'Error: ' + get(errorAtom);
});

const writeErrorAtom = atom(null, (get, set, arg: string): void => { // setter
	set(errorAtom, arg);
});

function useGet(): (url: string) => Promise {
	const [, setError] = useAtom(errorAtom);
	return async (url: string): Promise => {
		const resp = await fetch(url);
		const json = await resp.json();
		setError('Hello');
		return json as T;
	};
}

Usage:

function App() {
	const doGet = useGet();

	async function click(): void {
		const data = await doGet('/foo');
	}

	return <button onClick={click}>Click</button>;
}

So, with Jotai I finally have the complete solution to state management in React.

Zustand computed values

This week I’ve faced some situations with Vue’s reactive that alarmed me. I’m finding the hard way what I’ve read a couple times: reactive proxies can behave unpredictably in some situations. Too bad I’m in the middle of a project which began in Vue 3. I’m strongly considering rewriting it in React now – yes, it will be an insane amount of work, including back-end changes to return normalized objects.

But React brings its own problems. The biggest of all is certainly the raw state management.

Among all state management tools I’m evaluating, Zustand is showing to be the most promising. It’s ticking all the boxes, and the only open question so far is computed state. The best I could do was to use custom hooks, but they look rather ugly and verbose:

import create from 'zustand';
import {combine} from 'zustand/middleware';

/**
 * The store, which holds the state and the actions.
 */
const useBearStore = create(
	combine({
		bears: 0,
	},
	(set, get) => ({
		increasePopulation(): void {
			set(state => ({ bears: state.bears + 1 }));
		},
		removeAllBears(): void {
			set({ bears: 0 });
		},
	})),
);

export default useBearStore;

/**
 * Custom hook that returns a computed value.
 */
export function useBearCountPlusOne(): number {
	const bears = useBearStore(s => s.bears);
	return bears + 1;
}

Usage example in a component:

import useBearStore, {useBearCountPlusOne} from './useBearStore';

function App() {
	const increasePopulation = useBearStore(s => s.increasePopulation);
	const populationPlusOne = useBearCountPlusOne();

	return <>
		<div>Population + 1: {populationPlusOne}</div>
		<button onClick={() => increasePopulation()}>
			Increase population
		</button>
	</>;
}

If I find a way to rework these loose hooks, I think I found my way.

Multiple className values in React

React offers basically zero support for CSS. Personally I’m fond of CSS Modules along with SCSS instead of the slow CSS-in-JS solutions out there. Still, we need a way to manage multiple classes in className property.

In order to mitigate this problem, I wrote a TypeScript function to deal with sequential or conditional class names situations:

/**
 * Generates the className attribute with the given class names.
 */
export function cn(
	...items: (
		string
		| null
		| undefined
		| (string | null | undefined)[]
		| Record<string, boolean>
	)[]
): string {
	let fin = ' ';
	for (const item of items) {
		if (typeof item === 'string') {
			fin += item + ' ';
		} else if (Array.isArray(item)) {
			for (const s of item) {
				if (typeof s === 'string') fin += s + ' ';
			}
		} else if (typeof item === 'object') {
			for (const key in item) {
				if (item[key]) fin += key + ' ';
			}
		}
	}
	return fin.substring(0, fin.length - 1);
}

Example using some argument possibilities:

import {cn} from '@/funcs';
import c from './App.module.css';
	
function App() {
	return <>
		<div className={cn( c.first )} />
		<div className={cn( c.first, c.second )} />
		<div className={cn( [c.first, c.second], c.third )} />
		<div className={cn( c.first, {[c.second]: true} )} />
	</>;
}

This covers all situations I ever faced, and it's basically the same syntax of classnames.

The spread operator version was added in February 9, 2023.

The multi-combination of parameters was added in December 30, 2024.

Default props in React function components

Having default props in a React component is a rather common situation. The most popular way to accomplish this is to pass the default values to a defaultProps property on the function component. However, this property will be deprecated in the future.

Spoiler: due to the sheer amount of code written with it, it never will be deprecated. It’s more likely that a warning will show in the console.

Anyway, in order to keep things clean and guard from this future warning, I came up with a clean pure TypeScript solution to this problem:

interface Props {
	name: string;
	surname?: string;
	age?: number;
}

const defaultProps = {
	surname: 'Doe',
};

function MyComponent(props0: Props) {
	const props = {...defaultProps, ...props0};

	return <div>{props.surname}</div>;
}

The code above provides the correct behavior and proper TypeScript validation. It ended becoming an answer on StackOverflow.

Since the spread order may be a a bit hard to remember, this function does the trick:

export function defProp<P, D>(props: P, defaultProps: D): P & D {
	return {...defaultProps, ...props};
}

function MyComponent(props0: Props) {
	const props = defProp(props0, defaultProps);

	// ...
}

Extending built-in TypeScript objects in Vite

Checking whether an array is empty is a rather common operation. The usual way to do this in TypeScript is by checking the length property, but it’s very verbose:

if (myArray.length === 0) {
	// ...
}

For some reason, the JavaScript standard doesn’t specify an isEmpty() method. Fortunately, we can extend native JavaScript objects to add any methods we want. While this is a great feature, I was unable to make it work in a Vue + TypeScript + Vite project. I want the autocomplete of my VSCode to properly display it.

To make the TypeScript compiler recognize it, you must declare your method extensions as global by wrapping the declaration in a declare global block.

At first I tried to write the declaration in the “src/env.d.ts” file, but it didn’t work. Turns out you need to place them in a different file, as explained here. So I finally wrote them in a “src/extensions.d.ts” for the typings, and then the implementations themselves must be in a file that will be actually called in your application:

	/**
	* Extensões de objetos nativos
	* As implementações estão em src/util/func/extends.ts
	*/
	export {};
	declare global {
	interface Array<T> {
	/** Checks if indexOf() !== -1. */
	contains(elem: T): boolean;
	/** Checks if findIndex() !== -1. */
	containsIf(callback: (elem: T, index: number) => boolean): boolean;
	/** Returns a Map with the elements grouped by the given field. */
	groupIntoMap<K extends keyof T>(fieldName: K): Map<T[K], T[]>;
	/** Returns true if the array contains no elements. */
	isEmpty(): boolean;
	/** Returns true if the array contains at least 1 element. */
	isNotEmpty(): boolean;
	/** Returns the last element in the array, if any. */
	last(): T | undefined;
	/** Removes the elements to which indexOf() !== -1. */
	remove(elem: T): void;
	/** Removes the elements to which the callback returns true. */
	removeIf(callback: (elem: T, index: number) => boolean): void;
	/** Replaces the elements to which the callback returns true. */
	replaceIf(callback: (elemt: T, index: number) => boolean, newVal: T): void;
	/** Returns a new array with no repeated elements. */
	unique(): T[];
	}
	interface Array<T extends Record<K, PropertyKey>> {
	/** Returns an object where the key is the specified field, with all items grouped under it. */
	groupIntoObject<K extends keyof {[P in keyof T as T[P] extends PropertyKey ? P : never]: any;}>(fieldName: K): Record<T[K], T[]>; // eslint-disable-line @typescript-eslint/no-explicit-any
	}
	interface Date {
	/** Adds (or subtracts, if negative) the given number of days to the date. */
	addDays(numDays: number): void;
	/** Retorna: Seg 01/01/2023 17:00. */
	fmtDataHoraCurta(): string;
	/** Returns the number of days in the month to which the date belongs. */
	getDaysInTheMonth(): number;
	/** Returns the first day of next (or previous, if negative) month. */
	getNextMonth(numMonths: number) : Date;
	/** Returns the first day of next (or previous, if negative) year. */
	getNextYear(numYears: number) : Date;
	/** Retorna o nome da semana em português. */
	getNomeDiaDaSemana(): string;
	/** Retorna o nome da semana em português, abreviado para 3 letras. */
	getNomeDiaDaSemanaAbrev(): string;
	/** Retorna o nome do dia da semana em português. */
	getNomeMes(): string;
	}
	interface HTMLCollectionOf<T> {
	/** Calls the function on each element. */
	forEach(callback: (elem: T, index: number) => void): void;
	/** Returns true if the collection contains no elements. */
	isEmpty(): boolean;
	/** Returns true if the collection contains at least 1 element. */
	isNotEmpty(): boolean;
	}
	interface Map<K, V> {
	/** Returns true if the map contains no elements. */
	isEmpty(): boolean;
	/** Returns true if the map contains at least 1 element. */
	isNotEmpty(): boolean;
	/** Returns the number of keys. */
	keyCount(): number;
	/** Returns a new array populated with the results of calling a function with each key/value. */
	mapIntoArray<U>(callback: (key: K, value: V, index: number) => U): U[];
	/** Returns a new Map by mapping the keys. */
	mapKeys<U>(callback: (key: K, value: V) => U): Map<U, V>;
	/** Returns a new Map by mapping the values under each key. */
	mapValues<U>(callback: (key: K, value: V) => U): Map<K, U>;
	/** Returns an accumulated value created with the results of calling a function with each key/value. */
	reduce<U>(callback: (accumulator: U, key: K, value: V, index: number) => U, initialValue: U): U;
	/** Sorts the keys of the Map, in-place; returns a reference to the same Map. */
	sortKeys(compareFn: (a: K, b: K) => number): Map<K, V>;
	}
	interface Number {
	/** Formata o número com padrão brasileiro: ponto separador de milhar e vírgula. */
	fmtBr(casasDecimais = 0): string;
	/** Converts the number to string adding zeros at left, so the number has, at least, the given length. */
	lpad(minLength: number): string;
	/** Correctly rounds the number to N decimal places, returning a float; zeros are kept. */
	round(decimalPlaces: number): number;
	}
	interface ObjectConstructor {
	/** Returns true if the object has no keys with values. */
	isEmpty(o: object): boolean;
	/** Returns true if the object contains at least 1 key with a value. */
	isNotEmpty(o: object): boolean;
	/** Returns a new array populated with the results of calling a function with each key/value. */
	mapIntoArray<K extends PropertyKey, V, U>(o: Record<K, V>, callback: (key: K, value: V, index: number) => U): U[];
	/** Returns a new object with every value mapped under the same key. */
	mapValues<K extends PropertyKey, V, U>(o: Record<K, V>, callback: (key: K, value: V, index: number) => U): Record<K, U>;
	/** Returns an accumulated value created with the results of calling a function with each key/value. */
	reduce<K extends PropertyKey, V, U>(o: Record<K, V>, callback: (accumulator: U, key: K, value: V, index: number) => U, initialValue: U): U;
	/** Removes the elements to which the callback returns true. */
	removeIf<K extends PropertyKey, V>(o: Record<K, V>, callback: (key: K, value: V, index: number) => boolean): void;
	}
	interface String {
	/** Returns a new string with the first character in uppercase. */
	capitalize(): string;
	/** Checks if the string contains the substring. */
	contains(substr: string): boolean;
	/** Returns true if the string containts no characters, or just spaces. */
	isBlank(): boolean;
	/** Returns true if the string contains no characters. */
	isEmpty(): boolean;
	/** Returns true if the strings corresponds to an integer, either positive or negative. */
	isInteger(): boolean;
	/** Returns true if the string contains at least 1 non-space character. */
	isNotBlank(): boolean;
	/** Returns true if the string containst at least 1 character. */
	isNotEmpty(): boolean;
	/** Returns true if the string corresponds to a positive integer. */
	isPositiveInteger(): boolean;
	/** Returns the last character in the string, if any. */
	last(): string | undefined;
	}
	interface URLSearchParams {
	/** Returns a new array by iterating each key and value. */
	map<U>(callback: (key: string, value: string, index: number) => U): U[];
	}
	}

view raw extends.d.ts hosted with ❤ by GitHub

	/**
	* Extensões de objetos nativos
	* As declarações TypeScript estão em src/extends.d.ts
	*/
	export {};
	Object.defineProperty(Array.prototype, 'contains', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function contains<T>(elem: T): boolean {
	return this.indexOf(elem) !== -1;
	},
	});
	Object.defineProperty(Array.prototype, 'containsIf', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function containsIf<T>(callback: (elem: T, index: number) => boolean): boolean {
	return this.findIndex(callback) !== -1;
	},
	});
	Object.defineProperty(Array.prototype, 'groupIntoMap', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function groupIntoMap<T, K extends keyof T>(fieldName: K): Map<T[K], T[]> {
	const groups = new Map<T[K], T[]>();
	for (const elem of this) {
	if (!groups.has(elem[fieldName])) {
	groups.set(elem[fieldName], [elem]);
	} else {
	groups.get(elem[fieldName])!.push(elem);
	}
	}
	return groups;
	},
	});
	Object.defineProperty(Array.prototype, 'groupIntoObject', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function groupIntoObject< // https://stackoverflow.com/a/71068491
	T extends Record<K, PropertyKey>,
	K extends keyof {[P in keyof T as T[P] extends PropertyKey ? P : never]: any;}, // eslint-disable-line @typescript-eslint/no-explicit-any
	>(fieldName: K): Record<T[K], T[]> {
	return this.reduce((accum: Record<T[K], T[]>, item: T) => {
	if (accum[item[fieldName]] === undefined) {
	accum[item[fieldName]] = [item];
	} else {
	accum[item[fieldName]].push(item);
	}
	return accum;
	}, {} as Record<T[K], T[]>);
	},
	});
	Object.defineProperty(Array.prototype, 'isEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isEmpty(): boolean {
	return this.length === 0;
	},
	});
	Object.defineProperty(Array.prototype, 'isNotEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isNotEmpty(): boolean {
	return this.length > 0;
	},
	});
	Object.defineProperty(Array.prototype, 'last', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function last<T>(): T | undefined {
	return this.length === 0 ? undefined : this[this.length - 1];
	},
	});
	Object.defineProperty(Array.prototype, 'remove', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function remove<T>(elem: T): void {
	for (;;) {
	const idx = this.indexOf(elem);
	if (idx === -1) break;
	this.splice(idx, 1);
	}
	},
	});
	Object.defineProperty(Array.prototype, 'removeIf', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function removeIf<T>(callback: (elem: T, index: number) => boolean): void {
	let idx = 0;
	while (idx < this.length) {
	if (callback(this[idx], idx)) {
	this.splice(idx, 1);
	} else {
	++idx;
	}
	}
	},
	});
	Object.defineProperty(Array.prototype, 'replaceIf', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function replaceIf<T>(
	callback: (elem: T, index: number) => boolean,
	newVal: T,
	): void {
	for (let i = 0; i < this.length; ++i) {
	if (callback(this[i], i)) {
	this[i] = newVal;
	}
	}
	},
	});
	Object.defineProperty(Array.prototype, 'unique', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function unique<T>(): T[] {
	const uniques = [] as T[];
	for (const elem of this) {
	if (!uniques.contains(elem))
	uniques.push(elem);
	}
	return uniques;
	},
	});
	//------------------------------------------------------------------------------
	Object.defineProperty(Date.prototype, 'addDays', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function addDays(numDays: number): void {
	this.setUTCDate(this.getUTCDate() + numDays);
	},
	});
	Object.defineProperty(Date.prototype, 'fmtDataHoraCurta', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function fmtDataHoraCurta(): string {
	return this.getNomeDiaDaSemanaAbrev().capitalize()
	+ ' ' + this.getDate().toString().padStart(2, '0')
	+ '/' + (this.getMonth() + 1).toString().padStart(2, '0')
	+ '/' + this.getFullYear()
	+ ' ' + this.getHours().toString().padStart(2, '0')
	+ ':' + this.getMinutes().toString().padStart(2, '0');
	},
	});
	Object.defineProperty(Date.prototype, 'getDaysInTheMonth', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getDaysInTheMonth(): number {
	return new Date(this.getFullYear(), this.getMonth() + 1, 0).getDate();
	},
	});
	Object.defineProperty(Date.prototype, 'getNextMonth', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getNextMonth(numMonths: number): Date {
	return new Date(this.getFullYear(), this.getMonth() + numMonths, 1);
	},
	});
	Object.defineProperty(Date.prototype, 'getNextYear', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getNextMonth(numYears: number): Date {
	return new Date(this.getFullYear() + numYears, this.getMonth(), 1);
	},
	});
	Object.defineProperty(Date.prototype, 'getNomeDiaDaSemana', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getNomeDiaDaSemana(): string {
	return ['domingo', 'segunda', 'terça', 'quarta', 'quinta', 'sexta', 'sábado'][this.getDay()];
	},
	});
	Object.defineProperty(Date.prototype, 'getNomeDiaDaSemanaAbrev', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getNomeDiaDaSemanaAbrev(): string {
	return ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sáb'][this.getDay()];
	},
	});
	Object.defineProperty(Date.prototype, 'getNomeMes', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function getNomeMes(): string {
	return ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho',
	'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'][this.getMonth()];
	},
	});
	//------------------------------------------------------------------------------
	Object.defineProperty(HTMLCollection.prototype, 'forEach', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function forEach<T>(callback: (elem: T, index: number) => void): void {
	for (let i = 0; i < this.length; ++i)
	callback(this[i], i);
	},
	});
	Object.defineProperty(HTMLCollection.prototype, 'isEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isEmpty(): boolean {
	return this.length === 0;
	},
	});
	Object.defineProperty(HTMLCollection.prototype, 'isNotEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isNotEmpty(): boolean {
	return this.length > 0;
	},
	});
	//------------------------------------------------------------------------------
	Object.defineProperty(Map.prototype, 'isEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isEmpty(): boolean {
	return this.size === 0;
	},
	});
	Object.defineProperty(Map.prototype, 'isNotEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isNotEmpty(): boolean {
	return this.size > 0;
	},
	});
	Object.defineProperty(Map.prototype, 'keyCount', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function keyCount(): number {
	return Array.from(this.keys()).length;
	},
	});
	Object.defineProperty(Map.prototype, 'mapIntoArray', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function mapIntoArray<K, V, U>(callback: (key: K, value: V, index: number) => U): U[] {
	const result = [] as U[];
	let count = 0;
	for (const [key, val] of this) {
	result.push(callback(key, val, count++));
	}
	return result;
	},
	});
	Object.defineProperty(Map.prototype, 'mapKeys', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function mapKeys<K, V, U>(callback: (key: K, value: V) => U): Map<U, V> {
	const result = new Map<U, V>();
	for (const [key, _val] of this) {
	const val = this.get(key);
	result.set(callback(key, val), val);
	}
	return result;
	},
	});
	Object.defineProperty(Map.prototype, 'mapValues', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function mapValues<K, V, U>(callback: (key: K, value: V) => U): Map<K, U> {
	const result = new Map<K, U>();
	for (const [key, val] of this) {
	result.set(key, callback(key, val));
	}
	return result;
	},
	});
	Object.defineProperty(Map.prototype, 'reduce', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function reduce<K, V, U>(
	callback: (accumulator: U, key: K, value: V, index: number) => U,
	initialValue: U,
	): U {
	let accum = initialValue;
	let count = 0;
	for (const [key, val] of this) {
	accum = callback(accum, key, val, count++);
	}
	return accum;
	},
	});
	Object.defineProperty(Map.prototype, 'sortKeys', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function sortKeys<K, V>(compareFn: (a: K, b: K) => number): Map<K, V> {
	const keys = Array.from(this.keys()) as K[];
	const tmpMap = new Map<K, V>();
	for (const sortedKey of keys.sort(compareFn)) {
	tmpMap.set(sortedKey, this.get(sortedKey));
	}
	this.clear();
	for (const [key, val] of tmpMap.entries()) {
	this.set(key, val);
	}
	return this;
	},
	});
	//------------------------------------------------------------------------------
	Object.defineProperty(Number.prototype, 'fmtBr', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function fmtBr(casasDecimais = 0): string {
	return this.toLocaleString('pt-BR', {
	minimumFractionDigits: casasDecimais,
	maximumFractionDigits: casasDecimais,
	});
	},
	});
	Object.defineProperty(Number.prototype, 'lpad', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function lpad(minLength: number): string {
	return this.toString().padStart(minLength, '0');
	},
	});
	Object.defineProperty(Number.prototype, 'round', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function round(decimalPlaces: number): number {
	return Math.round((this + Number.EPSILON) * Math.pow(10, decimalPlaces))
	/ Math.pow(10, decimalPlaces);
	},
	});
	//------------------------------------------------------------------------------
	Object.isEmpty = function isEmpty(o: object): boolean { // https://stackoverflow.com/a/28020863/6923555
	return Object.keys(o).length === 0;
	};
	Object.isNotEmpty = function isNotEmpty(o: object): boolean {
	return Object.keys(o).length > 0;
	};
	Object.mapIntoArray = function mapIntoArray<K extends PropertyKey, V, U>(
	o: Record<K, V>,
	callback: (key: K, value: V, index: number) => U,
	): U[] {
	const arr = [];
	let count = 0;
	for (const key in o) {
	arr.push(callback(key, o[key], count++));
	}
	return arr;
	};
	Object.mapValues = function mapValues<K extends PropertyKey, V, U>(
	o: Record<K, V>,
	callback: (key: K, value: V, index: number) => U,
	): Record<K, U> {
	const accum = {} as Record<K, U>;
	let count = 0;
	for (const key in o) {
	accum[key] = callback(key, o[key], count++);
	}
	return accum;
	};
	Object.reduce = function reduce<K extends PropertyKey, V, U>(
	o: Record<K, V>,
	callback: (accumulator: U, key: K, value: V, index: number) => U,
	initialValue: U,
	): U {
	let accum = initialValue;
	let count = 0;
	for (const key in o) {
	accum = callback(accum, key, o[key], count++);
	}
	return accum;
	};
	Object.removeIf = function<K extends PropertyKey, V>(
	o: Record<K, V>,
	callback: (key: K, value: V, index: number) => boolean,
	): void {
	let count = 0;
	for (const key in o) {
	if (callback(key, o[key], count++))
	delete o[key];
	}
	};
	//------------------------------------------------------------------------------
	Object.defineProperty(String.prototype, 'capitalize', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function capitalize(): string {
	return this.length === 0 ? ''
	: this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
	},
	});
	Object.defineProperty(String.prototype, 'contains', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function contains(substr: string): boolean {
	return this.indexOf(substr) !== -1;
	},
	});
	Object.defineProperty(String.prototype, 'isBlank', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isBlank(): boolean {
	return this.trim().length === 0;
	},
	});
	Object.defineProperty(String.prototype, 'isEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isEmpty(): boolean {
	return this.length === 0;
	},
	});
	Object.defineProperty(String.prototype, 'isInteger', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isInteger(): boolean {
	if (this.length === 0) return false;
	for (let i = 0; i < this.length; ++i) {
	const code = this.charCodeAt(i);
	const isNum = code >= 48 && code <= 57; // 0 to 9
	if (i === 0) {
	if (this[0] !== '-' && !isNum) return false; // first char can be a minus sign
	} else {
	if (!isNum) return false;
	}
	}
	return true;
	},
	});
	Object.defineProperty(String.prototype, 'isNotBlank', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isNotBlank(): boolean {
	return this.trim().length > 0;
	},
	});
	Object.defineProperty(String.prototype, 'isNotEmpty', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isNotEmpty(): boolean {
	return this.length > 0;
	},
	});
	Object.defineProperty(String.prototype, 'isPositiveInteger', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function isPositiveInteger(): boolean {
	if (this.length === 0) return false;
	for (let i = 0; i < this.length; ++i) {
	const code = this.charCodeAt(i);
	const isNum = code >= 48 && code <= 57; // 0 to 9
	if (!isNum) return false;
	}
	return true;
	},
	});
	Object.defineProperty(String.prototype, 'last', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function last(): string | undefined {
	return this.length === 0 ? undefined : this[this.length - 1];
	},
	});
	//------------------------------------------------------------------------------
	Object.defineProperty(URLSearchParams.prototype, 'map', {
	enumerable: false,
	writable: false,
	configurable: false,
	value: function map<U>(callback: (key: string, value: string, index: number) => U): U[] {
	const entries = Array.from(this.entries()) as [string, string][];
	const result = [] as U[];
	let count = 0;
	for (const [key, val] of entries) {
	result.push(callback(key, val, count++));
	}
	return result;
	},
	});

view raw implement.ts hosted with ❤ by GitHub

I tested the code above in a Vue project, but I believe it will work accordingly in a React project as well.

Checking if user passed a slot in Vue

In Vue 3 with the Composition API, there is no this.$slot entry to programmatically poke on the slots. You must summon the slots by calling useSlots() – yes, that’s a React hook right there.

The returned object has one entry for each slot. If your component has only one unnamed slot, it will be named 'default'. So, in order to check whether the user didn’t pass the slot, you simply check whether the entry exists:

<script setup lang="ts">
import {computed, useSlots} from 'vue';

const slots = useSlots();
const hasSlot = computed(() => slots['default'] !== undefined);
</script>

Global useState hooks with Jotai

I’ve been stressing out several React global state libraries in the past months. Last week it was Jotai’s time.

I liked the concept of “atoms” and how they feel like autonomous useState parts, and how they can be share state among components. I remember trying to write something like this in the past. Jotai seems to be what I tried to do back then:

import {atom} from 'jotai';

export const nameAtom = atom('hello');

Pretty much a global useState here, which is great:

import {useAtom} from 'jotai';
import {nameAtom} from './state';
	
function App() {
	const [name, setName] = useAtom(nameAtom);

	//...
}

In large, real-world applications you’d like to write mutation methods to implement specific logic, rather than having them scattered over the components. Thus we should not make setName public; instead we should provide more specific methods.

In Jotai, while reading the state is trivial, I found writing mutations to be rather cumbersome. The syntax of “writing atoms” is, to my tired eyes, very convoluted:

export const setSurnameAtom = atom(null, (get, set, surname) => {
	set(nameAtom, get(nameAtom) + ' ' + surname);
});

//...

function App() {
	const [, setSurname] = useAtom(setSurnameAtom);
}

After giving it some thought, it occurred me that since useAtom is a hook, I can compose a custom hook over it. And then it all clicked:

export function useName() {
	const [name, setName] = useAtom(nameAtom);
	return useMemo(() => ({
		value: name,
		setSurname(surname: string) {
			setName(name + ' ' + surname);
		},
	}), [name, setName]);
}

Usage of this custom hook is straightforward, crystal clear:

import {useName} from './state';
	
function App() {
	const name = useName();

	return <>
		<h1>{name.value}</h1>
		<button onClick={() => name.setSurname('foo')}>
			Set surname
		</button>
	</>;
}

This is a truly global custom useState hook. This works amazingly well with VSCode autocomplete. This is easy to read. This is beautiful.

In the custom hook above, note the use of useMemo. It cuts down a lot of the processing in inside the custom hook, and it was an insight I had after briefly talking to Daishi Kato himself, the author of Jotai, about this custom hook idea. The future useEvent hook will optimize the button call a little further.

Jotai, unfortunately, has a huge drawback of not allowing accessing atoms outside a React component.

React high-order useEffect wrappers

As I was increasingly upset with the lack of variable highlighting in Volar, I started doing some React experiments.

In particular, I found the useEffects hook API very annoying, because it fails to communicate the intent of what you’re trying to accomplish.

So, I order to mitigate this, I wrote a few wrappers:

import {DependencyList, useEffect} from 'react';

function onMount(fun: () => void) {
	useEffect(() => { fun(); }, []);
}

function onUmnount(fun: () => void) {
	useEffect(() => {
		return () => { fun(); };
	}, []);
}

function onMutate(dep: DependencyList, fun: () => void) {
	useEffect(() => { fun(); }, dep);
}

As far as I could test, they work really well, with the advantage that you can pass async functions to them:

function Foo() {
	const [name, setName] = useState('');

	onMount(async () => {
		console.log('hello async');
	});

	onUmnount(() => {
		console.log('unmounted');
	});

	onMutate([name], () => {
		console.log('updated', name);
	});

	return <div>Hello {name}</div>;
}

I’m somewhat tempted to create a library for this. And maybe other high-order wrappers.