DEV Community

Cover image for LeveloJS v2.1.2 — A Cleaner JSX Runtime Architecture
Saiful Siam
Saiful Siam

Posted on

LeveloJS v2.1.2 — A Cleaner JSX Runtime Architecture

#javascript #webdev #opensource #typescript

LeveloJS v2.1.2 — A Cleaner JSX Runtime Architecture

After releasing LeveloJS v2.1.1, I started writing the documentation for the new JSX type support. While reviewing the implementation, I realized that although everything worked correctly, there was a flaw in the internal architecture.

The JSX runtime and its type definitions were connected in a way that wasn't as clean or maintainable as I wanted. Instead of leaving it that way, I paused the documentation work and decided to refactor the entire JSX module before moving forward.

The result is LeveloJS v2.1.2.

Why another update so soon?

Sometimes a feature is functionally correct, but the implementation behind it isn't ideal.

As I prepared to write the documentation, I noticed that the JSX module structure could become difficult to maintain as the framework grows. Rather than building more features on top of that design, I chose to improve the foundation first.

This release is mostly about internal architecture, TypeScript integration, and developer experience.

What's Changed

Reorganized the JSX Runtime

Previously, the JSX runtime and its type declarations lived in different locations.

They have now been reorganized into a dedicated module:

src/runtime/jsx/
├── jsx-runtime.ts
└── jsx.d.ts
Enter fullscreen mode Exit fullscreen mode

Keeping the runtime implementation and its type definitions together makes the project structure much easier to understand and maintain.

Removed Unnecessary Coupling

Previously, jsx.d.ts relied on the package entry (index.ts) to expose JSX types.

In v2.1.2, the type definitions are linked directly with jsx-runtime.ts, allowing the runtime to manage its own typings without depending on the root entry point.

This creates a cleaner separation of responsibilities and simplifies the internal architecture.

Improved DTS Bundling

While restructuring the JSX module, I also fixed declaration build issues that appeared during tsup builds.

This resolves errors such as:

Module has no exported member 'h'
Enter fullscreen mode Exit fullscreen mode

The runtime and declaration files are now synchronized correctly, resulting in more reliable declaration generation.

Better Ambient JSX Typings

This release also improves the overall TypeScript experience.

It fixes issues including:

This JSX tag requires 'h' to be in scope
Enter fullscreen mode Exit fullscreen mode

and CSS side-effect import errors by integrating the ambient JSX types directly into the new runtime pipeline.

As a result, JSX works more naturally with fewer manual configuration steps.

Why This Matters

Framework development isn't only about introducing new APIs.

A clean internal architecture makes future development easier, reduces maintenance, and helps prevent issues before they appear.

Although most users won't notice these improvements immediately, they provide a much stronger foundation for upcoming features in LeveloJS.

Changelog

Fixed & Refactored

  • Reorganized the JSX runtime into a dedicated src/runtime/jsx/ module.
  • Moved jsx.d.ts and jsx-runtime.ts into the same directory.
  • Removed the dependency between jsx.d.ts and the package entry point.
  • Linked JSX type definitions directly with the runtime module.
  • Fixed DTS bundling issues during tsup builds.
  • Resolved Module has no exported member 'h' build errors.
  • Fixed ambient JSX typing issues.
  • Resolved This JSX tag requires 'h' to be in scope.
  • Improved CSS side-effect import support.
  • Simplified the internal JSX architecture for future development.

Looking Ahead

With the JSX runtime architecture now cleaned up, I can continue working on documentation and future framework features with a much stronger foundation.

More improvements are already on the way.

If you're interested in modern JavaScript frameworks or TypeScript tooling, feel free to check out the project and share your feedback.

GitHub: https://github.com/MotionMind2007/Levelo-JS

Documentation: https://levelojs.motionmind.me

Top comments (0)