Что это?
TSRX (TypeScript Render Extensions) — языковое расширение TypeScript для построения декларативных пользовательских интерфейсов, объединяющее в файлах .tsrx TypeScript-код, JSX-подобную структуру, управляющие конструкции шаблонов и стили с областью действия на уровне смежных элементов; всё это компилируется в идиоматичный вывод для выбранного UI-рантайма.
TSRX (TypeScript Render Extensions) — языковое расширение TypeScript для построения декларативных пользовательских интерфейсов, объединяющее в файлах .tsrx TypeScript-код, JSX-подобную структуру, управляющие конструкции шаблонов и стили с областью действия на уровне смежных элементов; всё это компилируется в идиоматичный вывод для выбранного UI-рантайма.Это новый язык или просто плагин-компилятор для существующего фреймворка?Это новый, независимый от фреймворков язык со своим парсером и AST; целевой компилятор (для React, Preact, Solid, Vue, Ripple, Octane) затем превращает этот AST в специфичный для фреймворка вывод.
Это новый, независимый от фреймворков язык со своим парсером и AST; целевой компилятор (для React, Preact, Solid, Vue, Ripple, Octane) затем превращает этот AST в специфичный для фреймворка вывод.Как добавить TSRX в проект?Используйте одну из интеграций сборки для Vite, Rspack, Turbopack или Bun плюс соответствующий пакет целевого компилятора (например, @tsrx/react, @tsrx/vue) и пишите компоненты в файлах .tsrx.
Используйте одну из интеграций сборки для Vite, Rspack, Turbopack или Bun плюс соответствующий пакет целевого компилятора (например, @tsrx/react, @tsrx/vue) и пишите компоненты в файлах .tsrx.Нужна ли определённая версия Node для работы с этим репозиторием?Да, проект требует Node 22 или новее, а также pnpm 11.15.1 и npm 11.6.2+.
Да, проект требует Node 22 или новее, а также pnpm 11.15.1 и npm 11.6.2+.Готов ли TSRX к продакшену?Нет, TSRX прямо помечен как находящийся в активной бета-разработке, так что ожидайте постоянных изменений.
Нет, TSRX прямо помечен как находящийся в активной бета-разработке, так что ожидайте постоянных изменений.На какие фреймворки можно нацеливать компоненты TSRX?React, Preact, Solid и Vue поддерживаются непосредственно в этом репозитории, а Ripple и Octane — через внешние интеграции компиляторов.
React, Preact, Solid и Vue поддерживаются непосредственно в этом репозитории, а Ripple и Octane — через внешние интеграции компиляторов.Какие редакторы получают поддержку инструментов TSRX?VS Code имеет полноценное расширение синтаксиса/диагностики/автодополнения, у Zed есть расширение в его маркетплейсе, плагин JetBrains на рассмотрении, а интеграции для Neovim и Sublime Text также поддерживаются в этом репозитории.
VS Code имеет полноценное расширение синтаксиса/диагностики/автодополнения, у Zed есть расширение в его маркетплейсе, плагин JetBrains на рассмотрении, а интеграции для Neovim и Sublime Text также поддерживаются в этом репозитории.Что реально делает блок стилей с областью действия на смежных элементах?Блок стилизует своих соседей и всё ниже их в шаблоне, соседние блоки разделяют один сгенерированный хеш-класс, а назначаемые темы стилей предоставляют $class, который можно встраивать в другие элементы.
Блок стилизует своих соседей и всё ниже их в шаблоне, соседние блоки разделяют один сгенерированный хеш-класс, а назначаемые темы стилей предоставляют $class, который можно встраивать в другие элементы.Как TSRX обрабатывает шаблонную логику вроде циклов и условий?Вместо написания обычных JSX-выражений TSRX предоставляет директивы, нативные для шаблонов, такие как @if, @for, @switch и @try, для декларативного потока управления внутри разметки.
Вместо написания обычных JSX-выражений TSRX предоставляет директивы, нативные для шаблонов, такие как @if, @for, @switch и @try, для декларативного потока управления внутри разметки.