Представяме new-js-clock

open-sourcejavascripttypescriptrelease

Преди повече от 15 години публикувах малък jQuery плъгин, наречен JS-Clock. Беше прост уиджет, който визуализираше тикащ часовник в DOM елемент — полезен, опростен и напълно в духа на своето време. Разчиташе на jQuery, имаше някои проблеми с поддръжката на множество инстанции и никога не беше актуализиран значимо след първоначалното издание.

Днес това се променя. Пускам new-js-clock 1.0.0 — изцяло пренаписана в TypeScript версия, която запазва духа на оригинала, оставяйки зад себе си всяко негово ограничение. Можете да я видите в действие на демо страницата.

Какво е новото в 1.0.0

Всичко, което е включено в това издание:

  • 🔒 TypeScript — Пълна типова безопасност с изчерпателни интерфейси в целия код.
  • 🌐 Набор от тестове E2E + единични — Детерминистично покритие с Jest плюс Selenium E2E тестове в реални браузъри, включително разширена валидация на поведението в раздели на заден план.
  • 📦 Нула зависимости — Чист vanilla JavaScript. Без jQuery.
  • 🐛 Поправки на грешки — Поддръжката на множество инстанции вече работи правилно — това беше основният проблем във версия 0.8.
  • ⚡ Модерен API — Чист, интуитивен API с правилни методи на инстанцията на всеки създаден часовник.
  • 🧪 Напълно тестван — 162 детерминистични теста с Jest с покритие на редове 99,74 %, покритие на изрази 99,02 %, покритие на функции 100 % и покритие на клонове 98,32 %.
  • 🐳 Докеризирана E2E мрежа — Selenium Grid, изпълняващ headless Chrome, Firefox и Edge локално и в CI чрез pnpm run e2e:docker.
  • 📱 ES модули — Импорти на ES Module с поддръжка за tree-shaking, наред с CommonJS и IIFE бъндли.
  • 🌍 Часови зони с поддръжка на лятното часово време — Поддръжка на часови зони IANA с автоматична обработка на лятното часово време.
  • ⏱️ Режим хронометър — Нов хронометър, който брои от 00:00:00.
  • 🏁 Времена на обиколки и сплитове — Записвайте времена на обиколки (делта) и кумулативни времена (сплит) в режим хронометър.
  • 📊 Най-добра/най-лоша обиколка — Вградени помощни функции за намиране на най-бързата и най-бавната обиколка в сесия.
  • 🎯 Прецизно измерване на времето — Делтите на обиколките се измерват чрез performance.now() с прецизност под милисекунда.

Инсталация

npm install new-js-clock
# или
pnpm add new-js-clock

Достъпно и чрез CDN за директна употреба в браузъра — вижте README за unpkg и jsDelivr връзките.

Защо отне толкова дълго?

Честно казано? Животът. Оригиналният JS-Clock е написан по молба на моя покоен приятел Густаво Белтрао (майстор по PHP в онези времена, с когото имах привилегията да работя повече от веднъж) за използване в корпоративни вътрешни табла и в едностранични уебсайтове за събития с посетители от различни часови зони. Свърши своята работа достатъчно добре, за да не изглежда спешно да го преработвам. Но jQuery отдавна изчезна от съвременните проекти, TypeScript стана стандартът за разработка на библиотеки, а грешката с поддръжката на множество инстанции винаги ме дразнеше. Когато най-накрая седнах да я поправя правилно, имаше смисъл да го направя добре — с типове, тестове, модерна модулна система и достатъчно функции, за да бъде наистина полезна през 2026. Освен това планирам да я използвам в следващия си търговски проект.

По-добре късно, отколкото никога.

На Исус Христос единствено слава!