TSRX: The Universal UI Syntax?

Beyond JSX: A New UI Syntax

TSRX presents a compelling vision for framework-agnostic UI development, aiming to consolidate common ergonomic patterns into language syntax. The ability to compile to various runtimes with idiomatic output, including scoped CSS, is a notable technical achievement. The introduction of statement-level control flow (@if, @for, @switch, @try) directly within templates addresses a long-standing desire for more expressive templating, moving away from the reliance on helper functions or conditional rendering within JavaScript. This approach could significantly streamline component development and improve code readability. The per-file adoption strategy is also a smart move, allowing gradual integration without requiring a full codebase rewrite, which is crucial for adoption in existing projects.

However, as an alpha release, significant concerns remain. The primary limitation is its nascent stage; stability, performance, and the long-term maintenance roadmap are yet to be proven. The comparison to Kotlin-style builders or F#-style computation expressions from a Hacker News comment highlights a potential divergence in developer preference. While TSRX aims to bring common UI ergonomics into syntax, some developers might prefer more functional or builder-pattern approaches that maintain a clearer separation of concerns. The "spiritual successor to JSX" claim is bold, and its ultimate success will depend on how well it can integrate with and enhance, rather than complicate, existing ecosystems like React hooks or Solid's reactivity model. The alpha status means developers should "experiment, do not migrate," which is sound advice but underscores the risk and uncertainty involved in adopting such a new technology.

Key Points

• TSRX is a new TypeScript language extension aiming to be a framework-agnostic successor to JSX for building declarative UIs.
• It compiles a single .tsrx component file to multiple runtime targets (React, Preact, Solid, Vue, Ripple) via compiler plugins.
• Key features include statement-level control flow (@if, @for, @switch, @try), prop shorthands, lazy destructuring, and component-scoped styles.
• Scoped CSS is achieved by the compiler rewriting selectors with unique hashes.
• Error and async boundaries can be expressed declaratively using @try, @catch, and @pending.
• Adoption is per-file, allowing gradual integration into existing codebases.
• The project is currently in alpha, and the author is a former core team engineer from React and Svelte.

---

📖 Source: TSRX: A Framework-Agnostic Alternative to JSX