@crossfox/preact-kit

Preact + wouter + react-query фронтенд-тулкит: URL-синхронизированные фильтры, бесконечная прокрутка, троттлинг рефетча, курсорная лента (готова к realtime), форматтеры (по умолчанию под PL) и наблюдатель обновлений PWA.

Установка

bun add @crossfox/preact-kit

Peer-зависимости: preact >=10 (обязательно), wouter >=3 (нужен только для useUrlFilters).

Хуки

import {
  useUrlFilters, useInfiniteScroll, useThrottledRefetch, useNow, useCursorFeed,
} from "@crossfox/preact-kit";

• useUrlFilters(keys) — синхронизация фильтров/вкладок с query-строкой URL.
• useInfiniteScroll(onLoadMore, {hasMore, loading}) — автоподгрузка по IntersectionObserver.
• useThrottledRefetch(refetch, minMs) — не чаще raза в minMs, лишние вызовы схлопываются в один отложенный.
• useNow(intervalMs) — тикер текущего времени для живых «5 min назад» без лишних refetch.
• useCursorFeed({fetchPage, ...}) — курсорная лента: первичная загрузка, докрутка, вставка сверху (realtime), дедуп, пометка «новых» элементов для анимации. Опциональный subscribeResync(cb) — подписка на «полный ресинк» от внешнего realtime-слоя (например @crossfox/ws), когда пропущенное уже не переиграть.

Форматтеры

import { formatDate, formatDateTime, formatPhone, formatPrice, configureFormatEnv } from "@crossfox/preact-kit/format";

Дефолты — PL (таймзона Europe/Warsaw, локаль pl-PL, валюта PLN, польские подписи «wczoraj»/«dni temu» и т.п.). Для нового проекта переопредели один раз на старте:

configureFormatEnv({
  tz: "Europe/Berlin", locale: "de-DE", currency: "EUR",
  labels: { justNow: "gerade eben", yesterday: "gestern", daysAgo: (n) => `vor ${n} Tagen` },
});

formatPhone/normalizePhone/telHref/plLocal заточены под польские номера (9 цифр без +48) — для другого рынка как основного скопируй format/phone.ts и поменяй логику под свою страну, это не вынесено через configureFormatEnv.

cn

import { cn } from "@crossfox/preact-kit";

Тонкая обёртка над clsx.

PWA update watcher

import { registerSW } from "virtual:pwa-register";
import { watchPwaUpdates } from "@crossfox/preact-kit/pwa";

watchPwaUpdates(registerSW);

Проверяет обновления SW при возврате в приложение (visibilitychange/focus) и раз в минуту.