3 phút đọc
Ripple-TS/ripple: the elegant TypeScript UI framework – Repository Ripple-TS/ripple. Mô tả: the elegant TypeScript UI framework. 7413 stars, 296 forks, ngôn ngữ chính JavaScript, cập nhật 2026-10-28.
1. Repository làm gì?
Ripple is a TypeScript-first UI framework built around .tsrx files, fine-grained reactivity, scoped styles, and a small runtime. It pairs the authoring feel of JSX with template-native control flow and TypeScript setup that can live right beside the UI it feeds.
Created by @trueadm, who has contributed to Inferno, React, Lexical, and Svelte 5.
.tsrx is also a standalone language. The shared TSRX compiler stack can target React, Preact, Solid, Vue, and Ripple. Ripple is the runtime-focused target with track(), reactive collections, server modules, hydration, and DOM helpers.
Ripple Docs | Ripple Playground | TSRX Website
Use npm, pnpm, yarn, or bun, matching your project.
Components are ordinary TypeScript functions. Return a JSX element directly when the component has one root, and use a JSX statement container (@{…}) when setup statements or multiple rendered siblings belong next to the UI.
2. Dữ liệu và cấu trúc đáng chú ý
Fragments are still useful when the component really returns multiple siblings, such as markup plus a scoped
Plain JSX children are text, elements, comments, and {…} expression containers. When a scope needs TypeScript setup before rendering, use a JSX statement container: @{…}. Setup comes first and the container finishes with exactly one output node: a JSX element, JSX fragment, or JSX control-flow expression. If the output needs text, expression containers, or multiple siblings after setup, wrap them in a fragment.
Text such as x = 123 between tags is JSX text, not JavaScript, unless it is inside a statement container.
The same rule applies in nested scopes:
JavaScript comments are allowed between template children and are not rendered.
Static text is JSX text. Dynamic values use normal JSX expression containers.
Rendered control flow uses directive-prefixed expressions:
3. Khả năng ứng dụng và giới hạn
Use ordinary return for real function exits in TypeScript setup. Use @if for conditional rendering; direct return, continue, and break statements are not valid inside @if template branches.
@try supports error and pending UI:
Create state with track() and read or write it through .value. Reads in templates and effects stay reactive, and writes update everything that depends on them.
Tracked objects can be passed through data structures and props: pass the tracked object itself when the child may write it, or trackReadOnly(count) (a Derived that follows the value but rejects writes, the same as track(() => count.value)) when it should only read it.
Use Ripple collections when collection operations should be reactive.
DOM refs use ref, and events use JSX-style event props.
Ripple supports module server in .tsrx files for server-oriented exports. Import from server inside the same file before calling the server function.
Install the TSRX Syntax for VS Code for syntax highlighting, diagnostics, TypeScript integration, and completions. The shared language, compiler infrastructure, formatter, linter, and editor integrations are maintained in tsrx-org/tsrx.
Contributions are welcome. Please see CONTRIBUTING.md.
Số liệu repository có thể thay đổi; nên mở liên kết nguồn để kiểm tra README, giấy phép và trạng thái phát hành.
Nguồn tham khảo: Xem bài gốc
