antlis’s gists

antlis / define-lazy-component.ts

Created April 16, 2026 20:19

Lightweight helper for lazy-loading components to improve performance metrics like LCP and INP.

	export function defineLazyComponent(loader: () => Promise<any>) {
	return defineAsyncComponent({
	loader,
	suspensible: false,
	})
	}

antlis / use-abortable-fetch.ts

Created April 16, 2026 20:18

Cancels previous in-flight requests when a new one is triggered. Ideal for search inputs and rapid UI interactions.

	export function useAbortableFetch() {
	let controller: AbortController \| null = null

	return async function fetchWithAbort<T>(url: string, opts: any = {}) {
	if (controller) controller.abort()

	controller = new AbortController()

	try {
	return await $fetch<T>(url, {

antlis / use-debounced-ref.ts

Created April 16, 2026 20:17

Reactive debounced ref for handling user input (search, filters) without excessive API calls.

	export function useDebouncedRef<T>(value: T, delay = 300) {
	const state = ref(value)
	const debounced = ref(value)

	let timer: any

	watch(state, (val) => {
	clearTimeout(timer)
	timer = setTimeout(() => {
	debounced.value = val

antlis / use-async-data-safe.ts

Created April 16, 2026 20:16

Safer wrapper around useAsyncData with sensible defaults to avoid duplicate requests and undefined state issues.

	export function useAsyncDataSafe<T>(
	key: string,
	handler: () => Promise<T>
	) {
	return useAsyncData<T>(key, handler, {
	server: true,
	lazy: false,
	default: () => null,
	})
	}

antlis / use-api.ts

Last active April 16, 2026 20:16

A composable wrapper around Nuxt $fetch that centralizes API configuration, authentication headers, and error handling.

	export function useApi() {
	const config = useRuntimeConfig()
	const token = useCookie('token')

	return async function apiFetch<T>(url: string, opts: any = {}): Promise<T> {
	try {
	return await $fetch<T>(url, {
	baseURL: config.public.apiBase,
	headers: {
	Authorization: token.value ? `Bearer ${token.value}` : undefined,

antlis / group-by.js

Created April 16, 2026 20:13

Groups array items by a computed key. Lightweight alternative to Lodash groupBy.

	export function groupBy(arr, keyFn) {
	return arr.reduce((acc, item) => {
	const key = keyFn(item);
	(acc[key] \|\|= []).push(item);
	return acc;
	}, {});
	}

antlis / retry.js

Last active April 16, 2026 20:12

Retries async operations with exponential backoff. Useful for flaky network requests or transient failures.

	export async function retry(fn, {
	retries = 3,
	delay = 300,
	factor = 2
	} = {}) {
	let attempt = 0;

	while (true) {
	try {
	return await fn();

antlis / debounce-async.js

Created April 16, 2026 20:09

Debounces async functions while canceling previous pending calls. Ideal for search inputs and live queries.

	export function debounceAsync(fn, delay = 300) {
	let timer;
	let rejectPrev;

	return (...args) => {
	if (timer) clearTimeout(timer);
	if (rejectPrev) rejectPrev({ canceled: true });

	return new Promise((resolve, reject) => {
	rejectPrev = reject;

antlis / p-limit.js

Created April 16, 2026 20:08

Limits the number of concurrently running async operations. Useful for rate-limited APIs or controlling resource usage.

	export function pLimit(concurrency) {
	const queue = [];
	let activeCount = 0;

	const next = () => {
	if (queue.length === 0 \|\| activeCount >= concurrency) return;

	activeCount++;
	const { fn, resolve, reject } = queue.shift();

antlis / create-shared-promise.js

Created April 16, 2026 20:07

Deduplicates concurrent async calls by sharing a single in-flight Promise. Useful for preventing duplicate network requests or expensive computations.

	export function createSharedPromise(fn) {
	let promise = null;

	return (...args) => {
	if (!promise) {
	promise = Promise.resolve().then(() => fn(...args)).finally(() => {
	promise = null;
	});
	}
	return promise;