tsrx README

The project's README from github.com/tsrx-org/tsrx. As one markdown file: README.md.

TSRX

Join the TSRX Discord community

TSRX

TSRX (TypeScript Render Extensions) is a TypeScript language extension for building declarative user interfaces. It keeps TypeScript setup, JSX-shaped structure, template control flow, and sibling-scoped styles together in .tsrx files, then compiles that source into idiomatic output for the runtime you choose.

Documentation · Features · Specification · Playground · Discord

TSRX is in active beta development.

Example

A component is an ordinary TypeScript function. A statement container (@{ ... }) lets local setup live beside the template that uses it, while template directives provide declarative control flow. A <style> block is scoped to its siblings: it styles the elements beside it and everything below them, and nothing else. The compiler adds a hash class to those elements so the block's selectors match only there. Here the rules apply to this fragment's <ul>.

type Todo = {
  id: string;
  title: string;
  hidden?: boolean;
};

export function TodoList({ items }: { items: Todo[] }) @{
  const visibleItems = items.filter((item) => !item.hidden);

  <>
    <ul>
      @for (const item of visibleItems; index i; key item.id) {
        <li>{i + 1}. {item.title}</li>
      } @empty {
        <li>No todos yet</li>
      }
    </ul>

    <style>
      ul {
        display: grid;
        gap: 0.5rem;
      }
    </style>
  </>
}

Features

See the features guide for examples and the TSRX specification for the language grammar, AST shape, and static constraints.

Supported targets

TSRX parses source into a framework-neutral AST and hands it to a target compiler. The same language currently supports:

Target Compiler integration Home
React @tsrx/react This repository
Preact @tsrx/preact This repository
Solid @tsrx/solid This repository
Vue @tsrx/vue This repository
Ripple @tsrx/ripple Ripple
Octane octane/compiler Octane

Additional targets can be added as standalone compiler plugins without changing the TSRX language itself.

Tooling

This repository includes the core compiler, target compilers and runtime helpers, build integrations for Vite, Rspack, Turbopack, and Bun, plus Prettier, ESLint, TypeScript, language-server, and editor tooling.

Install the TSRX Syntax for VS Code for syntax highlighting, diagnostics, navigation, completions, formatting, and TypeScript integration. The TSRX extension for Zed is available from the Zed Extension Marketplace. The TSRX plugin for JetBrains IDEs has been submitted to JetBrains Marketplace and is under review. Integrations for Neovim and Sublime Text are also maintained here.

Learn and contribute

TSRX was created by Dominic Gannaway and is released under the MIT License.

tsrx (tsrx-org/tsrx)

Searching Database…

180 ·GitHub
这是什么?TSRX(TypeScript Render Extensions)是一个用于构建声明式用户界面的 TypeScript 语言扩展,在 .tsrx 文件中结合了 TypeScript 逻辑、类 JSX 的结构、模板控制流和同级作用域样式,编译后可生成适配你所选 UI 运行时的地道输出。
这是一门新语言,还是现有框架的编译器插件?它是一门与框架无关的新语言,有自己的解析器和 AST;目标编译器(面向 React、Preact、Solid、Vue、Ripple、Octane)随后把这个 AST 转换为特定框架的输出。
怎么把 TSRX 加到我的项目里?使用针对 Vite、Rspack、Turbopack 或 Bun 提供的构建集成之一,加上匹配的目标编译器包(如 @tsrx/react、@tsrx/vue),然后用 .tsrx 文件编写组件。
在这个仓库上开发需要特定的 Node 版本吗?需要,项目要求 Node 22 或更新版本,同时需要 pnpm 11.15.1 和 npm 11.6.2+。
TSRX 已经可以用于生产了吗?还没有,TSRX 被明确标记为处于活跃的 beta 开发阶段,预计会有持续的变动。
TSRX 组件可以面向哪些框架?React、Preact、Solid 和 Vue 在本仓库中直接受支持,Ripple 和 Octane 则通过外部编译器集成支持。
哪些编辑器有 TSRX 工具支持?VS Code 有完整的语法/诊断/补全扩展,Zed 在其市场上有扩展,JetBrains 插件正在审核中,Neovim 和 Sublime Text 集成也在本仓库中维护。
同级作用域样式块究竟做什么?样式块作用于模板中它自己的同级元素及其下方的所有内容,同级的块共享一个生成的哈希类,可赋值的样式主题会暴露出一个 $class,可以组合进其他元素。
TSRX 如何处理循环和条件之类的模板逻辑?TSRX 不需要写普通的 JSX 表达式,而是提供 @if、@for、@switch、@try 等模板原生指令,在标记内实现声明式控制流。
What are similar projects?core, mitosis, pretty-ts-errors, tamagui, esbuild, mdx, tiptap, konva
Creator
tsrx-org
Size
35.9 MB
Stars
180
Age
1mo
Commits · 90 Days