Παρουσιάζουμε το new-js-clock

open-sourcejavascripttypescriptrelease

Πριν από περισσότερα από 15 χρόνια δημοσίευσα ένα μικρό plugin jQuery με το όνομα JS-Clock. Ήταν ένα απλό widget που αποτύπωνε ένα ρολόι που χτυπά μέσα σε ένα στοιχείο 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 %.
  • 🐳 Dockerized E2E Grid — Selenium Grid που εκτελεί headless Chrome, Firefox και Edge τοπικά και σε CI μέσω pnpm run e2e:docker.
  • 📱 Μονάδες ES — Εισαγωγές ES Module με υποστήριξη tree-shaking, δίπλα σε πακέτα CommonJS και IIFE.
  • 🌍 Ζώνες ώρας με ενημερότητα DST — Υποστήριξη ζωνών ώρας IANA με αυτόματη διαχείριση θερινής ώρας.
  • ⏱️ Λειτουργία χρονομέτρου — Ένα νέο χρονόμετρο που μετρά από το 00:00:00.
  • 🏁 Χρόνοι γύρων και split — Καταγράψτε χρόνους γύρων (delta) και σωρευτικούς χρόνους (split) σε λειτουργία χρονομέτρου.
  • 📊 Καλύτερος/χειρότερος γύρος — Ενσωματωμένες βοηθητικές συναρτήσεις για εύρεση του ταχύτερου και αργότερου γύρου σε μια συνεδρία.
  • 🎯 Χρονισμός υψηλής ανάλυσης — Δέλτα γύρων που μετρώνται μέσω performance.now() με ακρίβεια υπό-χιλιοστό του δευτερολέπτου.

Εγκατάσταση

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

Διαθέσιμο επίσης μέσω CDN για άμεση χρήση στο πρόγραμμα περιήγησης — δείτε το README για τους συνδέσμους unpkg και jsDelivr.

Γιατί άργησε τόσο πολύ;

Ειλικρινά; Η ζωή. Το αρχικό JS-Clock γράφτηκε κατόπιν αιτήματος του αείμνηστου φίλου μου Gustavo Beltrão (τότε αριστοτέχνης της PHP, με τον οποίο είχα το προνόμιο να συνεργαστώ περισσότερες από μία φορά) για χρήση σε εσωτερικά εταιρικά dashboards και σε ιστοτόπους μίας σελίδας για εκδηλώσεις με επισκέπτες από διαφορετικές ζώνες ώρας. Εκτελούσε την αποστολή του αρκετά καλά ώστε να μην φαίνεται επείγον να το αναθεωρήσω. Το jQuery όμως εξαφανίστηκε εδώ και καιρό από τα σύγχρονα έργα, το TypeScript έχει γίνει το πρότυπο για ανάπτυξη βιβλιοθηκών, και το σφάλμα υποστήριξης πολλαπλών παρουσιών με ενοχλούσε πάντα. Όταν τελικά κάθισα να το διορθώσω σωστά, είχε νόημα να το κάνω καλά — με τύπους, δοκιμές, ένα σύγχρονο σύστημα ενοτήτων και αρκετές λειτουργίες για να είναι γνήσια χρήσιμο το 2026. Σχεδιάζω επίσης να το χρησιμοποιήσω στο επόμενο εμπορικό μου έργο.

Καλύτερα αργά παρά ποτέ.

Μόνο στον Ιησού Χριστό η δόξα!