TSRX – TypeScript Language Extension for Declarative UI

9 hours ago

TSRX is a TypeScript extension for writing UI components that is readable, co-located, and fully backwards compatible with TypeScript.
It embeds UI directly in TypeScript with first-class syntax for control flow, scoped styles, and locals, similar to JSX but with its own flavor.
TSRX is framework-agnostic and compiles to React, Ripple, and Solid, with interoperability for JS, TS, and TSX files.
Benefits include better code readability by colocating structure, control flow, styling, and component shape, simplifying refactors and onboarding.
It enhances AI and machine assistance in coding by making UI structure explicit, allowing tools to work effectively without changing framework semantics.
Ergonomics address awkward patterns in frameworks: enabling conditional React hooks, lazy getters for Solid props, and local variables scoped to markup blocks.
Tooling includes a language server, Prettier and ESLint plugins, and IDE support for VS Code, Zed, Neovim, IntelliJ, and Sublime, allowing gradual adoption in existing codebases.
The compiler uses an AST parsed from source and framework-specific plugins for code generation, supporting extensibility for new targets like React, Ripple, or Solid.

Hasty Briefsbeta