Przedstawiamy new-js-clock

open-sourcejavascripttypescriptrelease

Ponad 15 lat temu opublikowałem mały plugin jQuery o nazwie JS-Clock. Był to prosty widget, który wyświetlał tykający zegar w elemencie DOM — użyteczny, prosty i w pełni odpowiadający ówczesnym standardom. Był zależny od jQuery, miał kilka problemów z obsługą wielu instancji i nigdy nie został w sposób znaczący zaktualizowany po tym pierwszym wydaniu.

Dziś to się zmienia. Wydaję new-js-clock 1.0.0 — kompletnie przepisaną w TypeScript wersję, która zachowuje ducha oryginału, pozostawiając za sobą każde z jego ograniczeń. Możesz zobaczyć ją w działaniu na stronie demonstracyjnej.

Co nowego w 1.0.0

Wszystko, co zostało wprowadzone w tym wydaniu:

  • 🔒 TypeScript — Pełne bezpieczeństwo typów z wyczerpującymi interfejsami w całym kodzie.
  • 🌐 Zestaw testów E2E + jednostkowych — Deterministyczne pokrycie Jest plus testy E2E Selenium w prawdziwych przeglądarkach, w tym rozszerzona walidacja zachowania w kartach w tle.
  • 📦 Zero zależności — Czysty waniliowy JavaScript. Bez jQuery.
  • 🐛 Poprawki błędów — Obsługa wielu instancji działa teraz poprawnie — to był główny problem w wersji 0.8.
  • ⚡ Nowoczesne API — Czyste, intuicyjne API z własnymi metodami instancji na każdym tworzonym zegarze.
  • 🧪 W pełni przetestowany — 162 deterministyczne testy Jest z pokryciem linii 99,74 %, pokryciem instrukcji 99,02 %, pokryciem funkcji 100 % i pokryciem gałęzi 98,32 %.
  • 🐳 Zdockeryzowana siatka E2E — Selenium Grid uruchamiający Chrome, Firefox i Edge w trybie headless lokalnie i w CI przez pnpm run e2e:docker.
  • 📱 ES Modules — Importy ES Module z obsługą tree-shaking, obok bundli CommonJS i IIFE.
  • 🌍 Strefy czasowe ze wsparciem dla czasu letniego — Obsługa stref czasowych IANA z automatyczną obsługą czasu letniego.
  • ⏱️ Tryb stopera — Nowy stoper, który liczy czas od 00:00:00.
  • 🏁 Czasy okrążeń i splitów — Rejestruj czasy okrążeń (delta) i czasy skumulowane (split) w trybie stopera.
  • 📊 Najlepsze/najgorsze okrążenie — Wbudowane funkcje pomocnicze do znajdowania najszybszego i najwolniejszego okrążenia sesji.
  • 🎯 Precyzyjny pomiar czasu — Delty okrążeń mierzone przez performance.now() z precyzją submilisekundową.

Instalacja

npm install new-js-clock
# lub
pnpm add new-js-clock

Dostępna również przez CDN do bezpośredniego użycia w przeglądarce — sprawdź README dla linków unpkg i jsDelivr.

Dlaczego zajęło to tak długo?

Szczerze? Życie. Oryginalny JS-Clock został napisany na prośbę mojego nieżyjącego już przyjaciela Gustavo Beltrão (mistrza PHP w tamtych czasach, z którym miałem zaszczyt pracować więcej niż raz) do użycia w wewnętrznych dashboardach firmowych i w jednostronicowych serwisach dla wydarzeń z uczestnikami z różnych stref czasowych. Spełniał swoje zadanie wystarczająco dobrze, żeby nigdy nie wydawało się pilne, by go przerabiać. Ale jQuery dawno zniknął z nowoczesnych projektów, TypeScript stał się standardem tworzenia bibliotek, a bug z obsługą wielu instancji zawsze mnie denerwował. Kiedy w końcu usiadłem, żeby go porządnie naprawić, sensowne było zrobienie tego dobrze — z typami, testami, nowoczesnym systemem modułów i wystarczającą liczbą funkcji, by być naprawdę użytecznym w 2026 roku. Planuję też użyć jej w moim kolejnym projekcie komercyjnym.

Lepiej późno niż wcale.

Jezusowi Chrystusowi samemu chwała!