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

open-sourcejavascripttypescriptrelease

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

Сьогодні це змінюється. Я випускаю new-js-clock 1.0.0 — повністю переписану версію на TypeScript, яка зберігає дух оригіналу, залишаючи позаду всі його недоліки. Побачити її в дії можна на сторінці демо.

Що нового у 1.0.0

Все, що увійшло у цей реліз:

  • 🔒 TypeScript — Повна типобезпека з вичерпними інтерфейсами у всьому коді.
  • 🌐 Набір тестів E2E + юніт — Детерміноване покриття Jest плюс E2E-тести Selenium у реальних браузерах, включаючи розширену валідацію поведінки у фонових вкладках.
  • 📦 Нуль залежностей — Чистий ванільний JavaScript. jQuery не потрібен.
  • 🐛 Виправлення помилок — Підтримка кількох екземплярів тепер працює коректно — це була головна проблема у версії 0.8.
  • ⚡ Сучасний API — Чистий, інтуїтивний API з власними методами екземпляра для кожного створеного годинника.
  • 🧪 Повністю протестовано — 162 детерміновані тести Jest з покриттям рядків 99,74 %, покриттям операторів 99,02 %, покриттям функцій 100 % та покриттям гілок 98,32 %.
  • 🐳 Докеризована E2E-сітка — Selenium Grid, що запускає Chrome, Firefox та Edge у режимі headless локально та в 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 році. До того ж я планую використати її у своєму наступному комерційному проекті.

Краще пізно, ніж ніколи.

Ісусу Христу єдиному слава!