Представляем 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 году. К тому же я планирую использовать её в своём следующем коммерческом проекте.

Лучше поздно, чем никогда.

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