Svelte Countdown

This project showcases an efficient and memory-safe countdown implementation using Svelte, featuring smooth animated countdown visuals styled with DaisyUI using countdown component to provide a clean and modern interface while maintaining optimal performance and minimal resource usage.

Table of Contents

• Tech Stack
• Testing
• Conclusion

Tech Stack

• DaisyUI – Tailwind CSS-based component library with prebuilt UI elements.
• Runed – Svelte 5 utility library with reactive and type-safe tools.
• Date-fns – Lightweight utility library for date manipulation.

Testing

This project includes performance testing using a default countdown set for 10 years from the present time. This test is run in idle mode for 3 hours., with memory usage monitored using MemLens.

Image	Start	Desc
	... 23 hours - 59 minutest - 49 seconds	First Start - DOM: 36 total, 0 detached - Heap: 2.94 MB / 4.39 MB
	... 23 hours - 0 minutest - 17 seconds	1 hours - DOM: 36 total, 0 detached - Heap: 3.55 MB / 5.39 MB
	... 21 hours - 59 minutest - 46 seconds	2 hours - DOM: 36 total, 0 detached - Heap: 3.89 MB / 4.78 MB
	... 20 hours - 59 minutest - 20 seconds	3 hours - DOM: 36 total, 0 detached - Heap: 4.06 MB / 5.03 MB

Key Observations

• Heap variations remain minor and consistent, with no significant spikes or drops.
• DOM element count stays at 36, with no detached nodes, indicating:
  • No DOM-related memory leaks.
  • No accumulation of orphaned elements.

Conclusion

Library Date-fns and Library Runed contribute to stable runtime performance, supporting reliable OTP countdown timers. Library Date-fns ensures accurate timing and state handling, while Library Runed helps maintain memory stability. Together, they enable a predictable and efficient OTP workflow with minimal risk of timer drift or memory issues.

[!WARNING] This test was very basic; for more thorough evaluation, consider extended testing as suggested JavaScript Memory Leaks: The Silent Killers and How to Fix Them .