If you have ever built a custom JavaScript framework from scratch, you know that the line between a smooth, memory-clean engine and a total memory-leak disaster is incredibly thin.
With version 1, Levelo-Js proved that lightweight reactive UIs could be fast and intuitive. But as codebases grow, raw JavaScript starts to feel like writing code blindfolded. The dreaded undefined is not a function is always lurking around the corner.
Today, we are taking a massive leap forward. Meet Levelo-Js v2—a complete ground-up architectural rewrite, fully re-born in TypeScript, with enterprise-grade build tooling and absolute bulletproof memory management.
Let’s dive into what makes v2 an absolute game-changer.
The Pillars of the TypeScript Rebirth
1. Full TypeScript Migration & Modern Bundling
We didn't just add types; we transformed the entire runtime engine core and internal modules from .js to .ts. Every piece of code is now strictly type-safe, offering self-documenting APIs and flawless IDE autocompletion (IntelliSense) right out of the box.
We also waved goodbye to publishing raw, uncompiled source files. Levelo-Js v2 now ships with production bundles powered by
tsup. The engine is now pre-bundled into highly optimized, tree-shakable ES Modules (compiler/index.js), making your production build lighter than ever.
2. Hierarchical Tracking Context (owner.ts)
Handling nested reactive scopes and side-effects can easily lead to chaotic state bugs if not tracked properly. v2 introduces a robust Reactive Ownership Architecture. This creates a clean parent-child tracking hierarchy, ensuring that nested state updates always know exactly where they belong in the application tree.
3. Ownership-Driven Effects & Zero Memory Leaks
Memory leaks are the silent killers of Single Page Applications (SPAs). In v2, our core effect() engine has been deeply integrated with the new ownership layer.
The breakthrough? It now auto-disposes stale tracking dependencies automatically. We ran heap snapshots before and after intense button-press and state transitions—the memory profile stays completely flat (stabilizing perfectly around 2.5MB). Zero bloat. Absolute mitigation against memory leaks.
4. Advanced Lifecycle Mechanisms
To give you pixel-perfect control over your components, we introduced two advanced lifecycle hooks:
-
mount(): Safely schedules tasks precisely after the browser finishes synchronous layout painting. Perfect for clean DOM manipulations and secure API fetches. -
cleanup(): Automatically captures and wipes out active intervals, event listeners, and pending asynchronous tasks during state or route transitions.
Bulletproofing the Developer Experience (DX)
A great framework isn't just about core reactive algorithms; it's about how it handles real-world ecosystem edge cases. Along with the core v2 rewrite, we've polished major real-world behaviors:
Standardized SPA Routing & High-Fidelity 404
In modern Single Page Applications, client-side routing must be bulletproof. We redesigned the core SPA fallback viewport (Page Not Found) with a high-fidelity native CSS layout. If a user wanders off to an unregistered route (like /asdf), the framework gracefully catches it, preventing server crashes and serving a gorgeous, responsive, center-aligned 404 screen.
Smart SVG Compiler Fixes
Compilers can sometimes be over-aggressive. We caught and squashed an tricky compiler bug where camelCase SVG attributes like viewBox were accidentally being converted to kebab-case (view-box), causing rendering glitches. v2 introduces strict exception mapping for core SVG properties—your icons and vectors will now render flawlessly.
🚀 Experience Levelo-Js v2 Today
Levelo-Js v2 behaves exactly how you expect a modern, high-performance framework to behave—lightning fast, type-safe, and incredibly respectful of your user's system memory.
Whether you are looking for zero-config autocomplete, strict compile-time safety, or zero memory leaks, v2 is ready for your next project.
# Create a fresh, fully optimized Levelo-Js v2 template instantly
npx create-levelo-app my-app
🔗 Links & Resources
- GitHub Repository: github.com/motionmind2007/levelo-js — Check out the source code, open issues, or contribute!
- Official Documentation: levelojs.motionmind.me — Dive deep into the reactive APIs, lifecycle hooks, and routing guides.
⭐ Support the Project!
Building a framework from scratch and moving it to a complete TypeScript ecosystem takes a massive amount of love, caffeine, and code iterations.
If you find Levelo-Js v2 interesting, or if you love open-source developer tooling, please consider giving the repository a Star (⭐) on GitHub. It helps the project gain more visibility and motivates us to keep shiping awesome features!
Drop a ❤️ and a 🦄 if you liked this post, and let me know your thoughts in the comments below. Happy coding! 🚀
Top comments (0)