TSRX

https://tsrx.dev/
Admin
TSRX (TypeScript Render Extensions) is a TypeScript language extension for building declarative UIs...
Tokens:21,363
Snippets:259
Trust Score:4.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install ESLint and TSRX Plugin

Source: https://tsrx.dev/getting-started

Install ESLint and the TSRX ESLint plugin for linting .tsrx files.

```bash
pnpm install -D eslint @tsrx/eslint-plugin
```

--------------------------------

### Install Preact + Bun Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX Preact compiler, Bun plugin, and Preact using pnpm.

```bash
1 pnpm install @tsrx/preact @tsrx/bun-plugin-preact preact
```

--------------------------------

### Install React + Rspack Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX React compiler and Rspack plugin using pnpm.

```bash
1 pnpm install @tsrx/react @tsrx/rspack-plugin-react
```

--------------------------------

### Install React + Vite Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX React compiler and Vite plugin using pnpm.

```bash
1 pnpm install @tsrx/react @tsrx/vite-plugin-react
```

--------------------------------

### Install React + Bun Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX React compiler, Bun plugin, and React runtime using pnpm.

```bash
1 pnpm install @tsrx/react @tsrx/bun-plugin-react react react-dom
```

--------------------------------

### Install Solid + Vite Plugins

Source: https://tsrx.dev/getting-started

Install the TSRX Solid compiler, its Vite plugin, and the upstream vite-plugin-solid using pnpm.

```bash
1 pnpm install @tsrx/solid @tsrx/vite-plugin-solid vite-plugin-solid
```

--------------------------------

### Install Preact + Vite Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX Preact compiler and Vite plugin using pnpm.

```bash
1 pnpm install @tsrx/preact @tsrx/vite-plugin-preact
```

--------------------------------

### Install Preact + Rspack Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX Preact compiler and Rspack plugin using pnpm.

```bash
1 pnpm install @tsrx/preact @tsrx/rspack-plugin-preact
```

--------------------------------

### Install Vue Compiler and Bun Plugin

Source: https://tsrx.dev/getting-started

Install packages for Vue.js integration with Bun, including the Vue runtime and Vapor JSX plugin.

```bash
pnpm install @tsrx/vue @tsrx/bun-plugin-vue vue vue-jsx-vapor
```

--------------------------------

### Install TSRX with Ripple Target

Source: https://tsrx.dev/llms.txt

Installs the Ripple runtime and its Vite plugin for TSRX integration.

```bash
npm install ripple @ripple-ts/vite-plugin
```

--------------------------------

### Install React + Turbopack Plugin

Source: https://tsrx.dev/getting-started

Install the TSRX React compiler and Turbopack helper along with React and ReactDOM.

```bash
1 pnpm install @tsrx/react @tsrx/turbopack-plugin-react next react react-dom
```

--------------------------------

### Install Prettier and TSRX Plugin

Source: https://tsrx.dev/getting-started

Install Prettier and the TSRX Prettier plugin to enable formatting of .tsrx files.

```bash
pnpm install -D prettier @tsrx/prettier-plugin
```

--------------------------------

### Install Solid Compiler and Rspack Plugin

Source: https://tsrx.dev/getting-started

Install the necessary packages for SolidJS integration with Rspack. This enables compilation of .tsrx files for Solid.

```bash
pnpm install @tsrx/solid @tsrx/rspack-plugin-solid
```

--------------------------------

### Install Vue Compiler and Vite Plugin

Source: https://tsrx.dev/getting-started

Install packages for Vue.js integration with Vite, including the Vue runtime and Vapor JSX plugin.

```bash
pnpm install @tsrx/vue @tsrx/vite-plugin-vue vue vue-jsx-vapor
```

--------------------------------

### Install TSRX with Solid Target

Source: https://tsrx.dev/llms.txt

Installs the TSRX Solid target and a Vite plugin for integration. Rspack plugin is also available.

```bash
npm install @tsrx/solid
npm install -D @tsrx/vite-plugin-solid
```

--------------------------------

### Install Vue Compiler and Rspack Plugin

Source: https://tsrx.dev/getting-started

Install packages for Vue.js integration with Rspack, including the Vue runtime and Vapor JSX plugin.

```bash
pnpm install @tsrx/vue @tsrx/rspack-plugin-vue vue vue-jsx-vapor
```

--------------------------------

### Install TSRX with Preact Target

Source: https://tsrx.dev/llms.txt

Installs the TSRX Preact target and a Vite plugin for integration. Rspack and Bun plugin options are also available.

```bash
npm install @tsrx/preact
npm install -D @tsrx/vite-plugin-preact    # Vite
```

--------------------------------

### Callback Ref Example in TSRX

Source: https://tsrx.dev/llms.txt

Demonstrates a direct callback ref on an input element, applicable across all TSRX targets.

```tsrx
// Callback ref — every target.
<input {ref (node) => node?.focus()} />
```

--------------------------------

### Bun Setup for React Target

Source: https://tsrx.dev/llms.txt

Sets up the TSRX React Bun plugin for compiling .tsrx files to TSX within a Bun build process. Supports component-local CSS modules.

```typescript
// build.ts
import tsrxReact from '@tsrx/bun-plugin-react';

await Bun.build({
  entrypoints: ['./src/App.tsrx'],
  outdir: './dist',
  target: 'browser',
  plugins: [tsrxReact()],
});
```

--------------------------------

### Install TSRX with React Target

Source: https://tsrx.dev/llms.txt

Installs the TSRX React target and a Vite plugin for integration. Other bundler integrations like Rspack and Turbopack are also available.

```bash
npm install @tsrx/react
npm install -D @tsrx/vite-plugin-react     # Vite
```

--------------------------------

### Install TSRX with Vue Target

Source: https://tsrx.dev/llms.txt

Installs the TSRX Vue target, Vue, and vue-jsx-vapor, along with a Vite plugin for integration. Bun plugin is also available.

```bash
npm install @tsrx/vue vue vue-jsx-vapor
npm install -D @tsrx/vite-plugin-vue
```

--------------------------------

### Turbopack Setup for React Target

Source: https://tsrx.dev/llms.txt

Configures the TSRX React Turbopack plugin for Next.js projects, enabling compilation of .tsrx files to TSX for React.

```typescript
// next.config.ts
import tsrxReactTurbopack from '@tsrx/turbopack-plugin-react';

export default tsrxReactTurbopack({
  reactStrictMode: true,
});
```

--------------------------------

### Bun Setup for Vue with @tsrx/bun-plugin-vue

Source: https://tsrx.dev/llms.txt

Configure Bun to build Vue projects using the @tsrx/bun-plugin-vue. This plugin compiles .tsrx files to TSX, processes them with vue-jsx-vapor, and handles component-local styles.

```typescript
// build.ts
import tsrxVue from '@tsrx/bun-plugin-vue';

await Bun.build({
  entrypoints: ['./src/App.tsrx'],
  outdir: './dist',
  target: 'browser',
  plugins: [tsrxVue()],
});
```

--------------------------------

### Install TypeScript Plugin for TSRX

Source: https://tsrx.dev/getting-started

Install the TSRX TypeScript plugin to enable TypeScript language services for .tsrx files outside the VS Code extension.

```bash
pnpm install -D @tsrx/typescript-plugin
```

--------------------------------

### Bun Setup for Preact Target

Source: https://tsrx.dev/llms.txt

Configures the TSRX Preact Bun plugin for compiling .tsrx files to TSX with Preact's JSX runtime in a Bun build. Handles component-local CSS.

```typescript
// build.ts
import tsrxPreact from '@tsrx/bun-plugin-preact';

await Bun.build({
  entrypoints: ['./src/App.tsrx'],
  outdir: './dist',
  target: 'browser',
  plugins: [tsrxPreact()],
});
```

--------------------------------

### Rspack Setup for Solid Target

Source: https://tsrx.dev/llms.txt

Integrates the TSRX Solid plugin into Rspack for compiling .tsrx files to TSX with Solid JSX support. Defaults to hot module replacement enabled.

```javascript
// rspack.config.js
import { TsrxSolidRspackPlugin } from '@tsrx/rspack-plugin-solid';

export default {
  plugins: [new TsrxSolidRspackPlugin()],
};
```

--------------------------------

### Rspack Setup for TSRX Preact Target

Source: https://tsrx.dev/llms.txt

Configures Rspack to use the TSRX Preact plugin, enabling compilation of `.tsrx` files to TSX and handling of CSS module imports.

```javascript
// rspack.config.js
import { TsrxPreactRspackPlugin } from '@tsrx/rspack-plugin-preact';

export default {
  plugins: [new TsrxPreactRspackPlugin()],
};
```

--------------------------------

### Rspack Setup for TSRX React Target

Source: https://tsrx.dev/llms.txt

Configures Rspack to use the TSRX React plugin, which handles `.tsrx` compilation to TSX and CSS module imports.

```javascript
// rspack.config.js
import { TsrxReactRspackPlugin } from '@tsrx/rspack-plugin-react';

export default {
  plugins: [new TsrxReactRspackPlugin()],
};
```

--------------------------------

### Rspack Setup for Vue Target

Source: https://tsrx.dev/llms.txt

Integrates the TSRX Vue plugin into Rspack for compiling .tsrx files to TSX with Vue JSX support and stripping remaining TypeScript syntax.

```javascript
// rspack.config.js
import { TsrxVueRspackPlugin } from '@tsrx/rspack-plugin-vue';

export default {
  plugins: [new TsrxVueRspackPlugin()],
};
```

--------------------------------

### Nested Children Prop Example

Source: https://tsrx.dev/llms.txt

Shows how to pass nested JSX elements as children to a composite component. This works directly as JSX statements.

```tsrx
// Nested children — works as JSX statements
<Card>
  <h2>"Title"</h2>
  <p>"Content goes here."</p>
</Card>
```

--------------------------------

### Configure Local MCP Server in .codex/config.toml

Source: https://tsrx.dev/getting-started

Configure the local MCP server for Codex by adding this to your `~/.codex/config.toml` file. This enables AI tools to inspect your project.

```toml
# ~/.codex/config.toml
[mcp_servers.tsrx]
command = "npx"
args = ["-y", "@tsrx/mcp"]
```

--------------------------------

### Configure Solid + Vite Plugins

Source: https://tsrx.dev/getting-started

Wire both the TSRX Solid plugin and the vite-plugin-solid into your Vite configuration. The order is important: tsrxSolid first.

```javascript
1 import { defineConfig } from 'vite';
2 import tsrxSolid from '@tsrx/vite-plugin-solid';
3 import solid from 'vite-plugin-solid';
4
5 export default defineConfig({
6   plugins: [tsrxSolid(), solid()],
7 });
```

--------------------------------

### List Rendering with Index and Key

Source: https://tsrx.dev/features

Use `for...of` loops with optional `index` and `key` clauses for efficient list rendering. `continue` can skip items, but `break` and `return` are disallowed within the loop body.

```typescript
1 component TodoList({ items }: { items: Todo[] }) {
2   <ul>
3     for (const item of items; index i; key item.id) {
4       if (item.hidden) continue;
5       <li>{i + 1}". "{item.text}</li>
6     }
7   </ul>
8 }
```

--------------------------------

### Configure Local MCP Server in package.json

Source: https://tsrx.dev/getting-started

Configure the local MCP server for tools like Codex, Cursor, Gemini CLI, or Claude Code by adding this to your package.json. This allows AI tools to inspect your project.

```json
{
  "mcpServers": {
    "tsrx": {
      "command": "npx",
      "args": ["-y", "@tsrx/mcp"]
    }
  }
}
```

--------------------------------

### Configure React + Bun Plugin

Source: https://tsrx.dev/getting-started

Use the TSRX React Bun plugin in your Bun build script to compile .tsrx modules and handle CSS.

```javascript
1 import tsrxReact from '@tsrx/bun-plugin-react';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxReact()],
8 });
```

--------------------------------

### Mutable Direct Refs for Solid and Ripple

Source: https://tsrx.dev/llms.txt

Shows how to use mutable variable direct refs on host elements in Solid and Ripple. Requires a `let` declaration for the ref.

```tsrx
// Mutable-variable direct refs — Solid and Ripple host elements.
component AutoFocus() {
  let input: HTMLInputElement | undefined;
  <input ref={input} {ref input} myOtherRef={ref input} type="text" />
}
```

--------------------------------

### Configure Rspack for Solid

Source: https://tsrx.dev/getting-started

Add the TsrxSolidRspackPlugin to your Rspack configuration to enable .tsrx file compilation for Solid.

```javascript
import { TsrxSolidRspackPlugin } from '@tsrx/rspack-plugin-solid';

export default {
  plugins: [new TsrxSolidRspackPlugin()],
};
```

--------------------------------

### Configure Bun for Vue

Source: https://tsrx.dev/getting-started

Use the tsrxVue plugin within your Bun build script for Vue.js projects.

```javascript
import tsrxVue from '@tsrx/bun-plugin-vue';

await Bun.build({
  entrypoints: ['./src/App.tsrx'],
  outdir: './dist',
  target: 'browser',
  plugins: [tsrxVue()],
});
```

--------------------------------

### Configure ESLint for TSRX

Source: https://tsrx.dev/getting-started

Use the recommended flat config from the TSRX ESLint plugin for .tsrx file linting.

```javascript
import tsrx from '@tsrx/eslint-plugin';

export default [...tsrx.configs.recommended];
```

--------------------------------

### Switch Statements for Multi-Branch Rendering

Source: https://tsrx.dev/features

Implement multi-branch rendering using standard `switch` statements. Each case should contain JSX elements and conclude with `break`.

```typescript
1 component StatusMessage({ status }: { status: string }) {
2   switch (status) {
3     case 'loading':
4       <p>"Loading..."</p>
5       break;
6     case 'success':
7       <p class="success">"Done!"</p>
8       break;
9     default:
10       <p>"Unknown status."</p>
11   }
12 }
```

--------------------------------

### Async Boundaries with Try/Pending/Catch

Source: https://tsrx.dev/features

Handle asynchronous operations and lazy-loaded components using `try`/`pending`/`catch`. The `pending` branch displays while data is loading, and `catch` handles errors.

```typescript
1 const UserProfile = lazy(() => import('./UserProfile.tsrx'));
2 
3 export component App() {
4   try {
5     <UserProfile id={1} />
6   } pending {
7     <p>"Loading..."</p>
8   } catch (e) {
9     <p>"Something went wrong."</p>
10   }
11 }
```

--------------------------------

### Configure React + Turbopack Plugin

Source: https://tsrx.dev/getting-started

Wrap your Next.js config with the TSRX React Turbopack helper to register a Turbopack rule for .tsrx files.

```javascript
1 import tsrxReactTurbopack from '@tsrx/turbopack-plugin-react';
2
3 export default tsrxReactTurbopack({
4   reactStrictMode: true,
5 });
```

--------------------------------

### Configure Vite for Vue

Source: https://tsrx.dev/getting-started

Integrate tsrxVue and vueJsxVapor plugins into your Vite configuration. Ensure tsrxVue is listed first.

```javascript
import { defineConfig } from 'vite';
import tsrxVue from '@tsrx/vite-plugin-vue';
import vueJsxVapor from 'vue-jsx-vapor/vite';

export default defineConfig({
  plugins: [
    tsrxVue(),
    vueJsxVapor({
      macros: true,
      compiler: { runtimeModuleName: 'vue-jsx-vapor' },
    }),
  ],
});
```

--------------------------------

### Configure React + Vite Plugin

Source: https://tsrx.dev/getting-started

Add the TSRX React Vite plugin to your Vite configuration file.

```javascript
1 import { defineConfig } from 'vite';
2 import tsrxReact from '@tsrx/vite-plugin-react';
3
4 export default defineConfig({
5   plugins: [tsrxReact()],
6 });
```

--------------------------------

### Configure Preact + Vite Plugin

Source: https://tsrx.dev/getting-started

Add the TSRX Preact Vite plugin to your Vite configuration. Optionally, configure the suspense source.

```javascript
1 import { defineConfig } from 'vite';
2 import tsrxPreact from '@tsrx/vite-plugin-preact';
3
4 export default defineConfig({
5   plugins: [tsrxPreact()],
6 });
```

--------------------------------

### Configure Preact + Bun Plugin

Source: https://tsrx.dev/getting-started

Use the TSRX Preact Bun plugin in your Bun build script. It targets Preact's JSX runtime and supports overriding the default Suspense import.

```javascript
1 import tsrxPreact from '@tsrx/bun-plugin-preact';
2
3 await Bun.build({
4   entrypoints: ['./src/App.tsrx'],
5   outdir: './dist',
6   target: 'browser',
7   plugins: [tsrxPreact()],
8 });
```

--------------------------------

### Configure Preact + Rspack Plugin

Source: https://tsrx.dev/getting-started

Add the TSRX Preact Rspack plugin to your Rspack configuration. It chains SWC loader and handles CSS modules.

```javascript
1 import { TsrxPreactRspackPlugin } from '@tsrx/rspack-plugin-preact';
2
3 export default {
4   plugins: [new TsrxPreactRspackPlugin()],
5 };
```

--------------------------------

### Add Typecheck Script to package.json

Source: https://tsrx.dev/getting-started

Add this script to your package.json to enable command-line type checking of .tsrx files using the tsrx-tsc binary. Run with `pnpm typecheck`.

```json
{
  "scripts": {
    "typecheck": "tsrx-tsc --noEmit"
  }
}
```

--------------------------------

### React/Preact Ref Object with Callback Refs

Source: https://tsrx.dev/llms.txt

Combines a React/Preact `useRef` object with anonymous and named callback refs on a single input element. Requires importing `useRef`.

```tsrx
// React/Preact ref object + anonymous and named callback refs.
import { useRef } from 'react';

component SearchBox() {
  const inputRef = useRef<HTMLInputElement>(null);
  function logNode(node: HTMLInputElement | null) { console.log(node); }

  <input ref={inputRef} {ref logNode} logRef={ref logNode} type="text" />
}
```

--------------------------------

### Configure React + Rspack Plugin

Source: https://tsrx.dev/getting-started

Add the TSRX React Rspack plugin to your Rspack configuration. It uses SWC loader and handles CSS modules.

```javascript
1 import { TsrxReactRspackPlugin } from '@tsrx/rspack-plugin-react';
2
3 export default {
4   plugins: [new TsrxReactRspackPlugin()],
5 };
```

--------------------------------

### Insert Raw HTML with {html expr}

Source: https://tsrx.dev/features

Use the `{html expr}` syntax to insert pre-rendered markup directly into the DOM. This is equivalent to `innerHTML` and should only be used with trusted input to prevent XSS vulnerabilities. It is not supported in React, Preact, or Solid.

```typescript
1 component Article({ markup }: { markup: string }) {
2   // {html ...} inserts the value as raw HTML — no escaping.
3   // Only use on trusted input; this is equivalent to innerHTML.
4   <article>{html markup}</article>
5 }
```

--------------------------------

### TSRX Helper Function Returning UI with <tsrx>

Source: https://tsrx.dev/llms.txt

Define helper functions that return TSRX UI by wrapping the UI in <tsrx>...</tsrx>. This allows for template control flow and statements within the returned UI.

```typescript
// ✅ CORRECT — return native TSRX from a helper
function badge(label: string) {
  return <tsrx>
    const normalized = label.trim();
    <span class="badge">{normalized}</span>
  </tsrx>;
}
```

--------------------------------

### TSRX early returns for guard clauses

Source: https://tsrx.dev/llms.txt

Use a bare 'return;' for guard clauses to render content conditionally and skip subsequent rendering. This pattern is for early exits from component rendering logic.

```tsrx
component Dashboard({ user }: { user: User | null }) {
  if (!user) {
    <p>"Please sign in."</p>
    return;
  }

  <h1>"Welcome, "{user.name}</h1>
  <p>"Here is your dashboard."</p>
}
```

--------------------------------

### Configure Prettier for TSRX

Source: https://tsrx.dev/getting-started

Add the TSRX Prettier plugin to your .prettierrc configuration file.

```json
{
  "plugins": ["@tsrx/prettier-plugin"]
}
```

--------------------------------

### TSRX Conditional Rendering with If/Else Statements

Source: https://tsrx.dev/features

Demonstrates conditional rendering directly within TSRX templates using standard `if`/`else if`/`else` statements. This avoids the need for ternaries or wrapper components.

```typescript
 1 component StatusBadge({ status }: { status: string }) {
 2   <div>
 3     if (status === 'active') {
 4       <span class="badge active">"Online"</span>
 5     } else if (status === 'idle') {
 6       <span class="badge idle">"Away"</span>
 7     } else {
 8       <span class="badge">"Offline"</span>
 9     }
10   </div>
11 }
```

--------------------------------

### TSRX JSX-Style UI in Expression Position with <>

Source: https://tsrx.dev/llms.txt

Use the fragment shorthand <>...</> to wrap JSX-style UI elements when they are needed in an expression position. This is equivalent to using <tsx>...</tsx>.

```typescript
// ✅ CORRECT — pass JSX-style values via fragment shorthand
<Card
  title={<><span>Settings</span></>}
  children={<><p>Body</p></>}
/>
```

--------------------------------

### Lazy Array Destructuring with Signals in tsrx

Source: https://tsrx.dev/llms.txt

Illustrates lazy array destructuring using `&[ ... ]` with Solid's `createSignal`. This preserves per-access signal reactivity.

```tsrx
let &[count, setCount] = createSignal(0);
<p>{count()}</p>
<button onClick={() => setCount(count() + 1)}">"+"</button>
```

--------------------------------

### TSRX async boundaries with try/pending/catch

Source: https://tsrx.dev/llms.txt

Handle asynchronous operations and their loading/error states using 'try', 'pending', and 'catch'. This pattern is used for lazy-loaded components and suspended data fetching.

```tsrx
const UserProfile = lazy(() => import('./UserProfile.tsrx'));

export component App() {
  try {
    <UserProfile id={1} />
  } pending {
    <p>"Loading..."</p>
  } catch (e) {
    <p>"Something went wrong."</p>
  }
}
```

--------------------------------

### TSRX DOM Refs: Using React useRef with Callbacks

Source: https://tsrx.dev/features

Shows how to combine a native ref object (like React's `useRef`) with anonymous and named callback refs on a single element. This allows for multiple ref attachments.

```typescript
 1 import { useRef } from 'react';
 2
 3 component SearchBox() {
 4   // Use the target's native ref object when you want an object slot.
 5   const inputRef = useRef<HTMLInputElement>(null);
 6   function logNode(node: HTMLInputElement) { console.log(node); }
 7
 8   // Native ref object + anonymous and named callback refs.
 9   <input ref={inputRef} {ref logNode} logRef={ref logNode} type="text" />
10 }
```

--------------------------------

### Error Boundaries with Try/Catch

Source: https://tsrx.dev/features

Create error boundaries by wrapping components in `try`/`catch` blocks. The `catch` block renders fallback UI when a child component throws an error.

```typescript
1 component SafeProfile({ userId }: { userId: string }) {
2   try {
3     <UserProfile id={userId} />
4   } catch (error) {
5     <div class="error">
6       <p>"Something went wrong."</p>
7     </div>
8   }
9 }
```

--------------------------------

### TSRX Component with Loop and Conditional Logic

Source: https://tsrx.dev/

Render a list of users, displaying their initials and roles. Includes conditional rendering for user bios and an event handler for a button.

```typescript
1 component UserList({ users, showBio }: Props) {
  for (const user of users) {
    const initials = user.name.slice(0, 2).toUpperCase();
    const role = user.admin ? 'Admin' : 'Member';

    <div class="user-row">
      <span class="avatar">{initials}</span>
      <strong>{user.name}</strong>
      <span class="badge">{role}</span>

      if (showBio && user.bio) {
        const short_bio = user.bio.slice(0, 140);
        const report = () => console.log(`viewed ${user.name}`);

        <p class="bio">{short_bio}</p>
        <button onClick={report}>"Viewed"</button>
      }
    </div>
  }
}
```

--------------------------------

### Basic TSRX Component with Statement-based JSX

Source: https://tsrx.dev/features

Illustrates the fundamental structure of a TSRX component using statement-based JSX. Static text is enclosed in double quotes, and dynamic content uses curly braces.

```typescript
component Greeting() {
  <h1>"Hello World"</h1>
  <p>"Welcome to TSRX."</p>
}
```

--------------------------------

### Add TSRX MCP via Claude Code CLI

Source: https://tsrx.dev/getting-started

Add the TSRX MCP server directly from the command line for Claude Code. This command registers the necessary configuration for the AI tool.

```bash
claude mcp add tsrx -- npx -y @tsrx/mcp
```

--------------------------------

### Generated React Code for FeatureCard

Source: https://tsrx.dev/playground

Shows the transpiled React output for the FeatureCard component, including JSX with class names and conditional rendering logic using ternary operators. Also includes the associated CSS.

```jsx
const FeatureCard__static1 = (
<p className="tsrx-1vhukl8">{'Loading output...'}</p>
);
  
export function FeatureCard({
title,
items,
ready,
}: {
title: string;
items: string[];
ready: boolean;
}) {
return (
<section className="feature-card tsrx-1vhukl8">
<h2 className="tsrx-1vhukl8">{title}</h2>
{ready ? (
<ul className="tsrx-1vhukl8">
{items.map((item, index) => {
return (
<li className="tsrx-1vhukl8" key={index}>
{item}
</li>
);
})}
</ul>
) : (
FeatureCard__static1
)}
</section>
);
}
  
/* CSS */
.feature-card.tsrx-1vhukl8 {
padding: 1rem;
border: 1px solid rgba(90, 108, 255, 0.2);
background: rgba(255, 255, 255, 0.78);
}
  

.feature-card.tsrx-1vhukl8 h2:where(.tsrx-1vhukl8) {
margin: 0 0 0.75rem;
font-size: 1.15rem;
}
  

.feature-card.tsrx-1vhukl8 ul:where(.tsrx-1vhukl8) {
margin: 0;
padding-left: 1.1rem;
}

```

--------------------------------

### Conditional Rendering with If/Else If/Else

Source: https://tsrx.dev/llms.txt

Implements conditional rendering logic using `if`, `else if`, and `else` statements within a TSRX component. Each branch renders a different status badge.

```tsrx
component StatusBadge({ status }: { status: string }) {
  <div>
    if (status === 'active') {
      <span class="badge active">"Online"</span>
    } else if (status === 'idle') {
      <span class="badge idle">"Away"</span>
    } else {
      <span class="badge">"Offline"</span>
    }
  </div>
}
```

--------------------------------

### TSRX for...of loop with index and key

Source: https://tsrx.dev/llms.txt

Use 'for...of' with optional 'index i' and 'key expr' clauses for iterating over lists in components. 'continue' skips an item before rendering. 'key expr' is used for stable identity in reconciliation.

```tsrx
component TodoList({ items }: { items: Todo[] }) {
  <ul>
    for (const item of items; index i; key item.id) {
      if (item.hidden) continue;
      <li>{i + 1}". "{item.text}</li>
    }
  </ul>
}
```

--------------------------------

### Configure tsconfig.json for TypeScript Plugin

Source: https://tsrx.dev/getting-started

Register the TSRX TypeScript plugin in your tsconfig.json to enable diagnostics, navigation, and type checking for .tsrx files.

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "plugins": [
      { "name": "@tsrx/typescript-plugin" }
    ]
  }
}
```

--------------------------------

### Early Return in TSRX Component

Source: https://tsrx.dev/features

Use a bare `return;` to implement guard clauses. Code before the return executes, while code after is skipped. This pattern replaces traditional early returns in render functions.

```typescript
 1 component Dashboard({ user }: { user: User | null }) {
 2   if (!user) {
 3     <p>"Please sign in."</p>
 4     return;
 5   }
 6
 7   <h1>"Welcome, "{user.name}</h1>
 8   <p>"Here is your dashboard."</p>
 9 }
```

--------------------------------

### TSRX Render Props: Using Function-Valued Props

Source: https://tsrx.dev/features

Illustrates render props in TSRX, which are function-valued props. They can be passed as `children` or a named prop like `render`. Wrap returned TSRX in `<tsrx>...</tsrx>` or `<>...</>`.

```typescript
 1 component App({ items }: { items: Item[] }) {
 2   const renderItem = (item: Item) => <>
 3     <li>{item.label}</li>
 4   </>;
 5
 6   <List items={items} render={renderItem} />
 7 }
```

--------------------------------

### TSRX switch statement for multi-branch rendering

Source: https://tsrx.dev/llms.txt

Implement multi-branch rendering using a standard switch statement. 'break' terminates a case, and fall-through is supported.

```tsrx
component StatusMessage({ status }: { status: string }) {
  switch (status) {
    case 'loading':
      <p>"Loading..."</p>
      break;
    case 'success':
      <p class="success">"Done!"</p>
      break;
    default:
      <p>"Unknown status."</p>
  }
}
```

--------------------------------

### TSRX Submodule Declarations

Source: https://tsrx.dev/specification

Defines the syntax for submodule declarations and imports, aligning with TC39 module proposals.

```typescript
SubmoduleDeclaration :
  module Identifier { ModuleItemListopt }
```

```typescript
SubmoduleImportDeclaration :
  import ImportClause from Identifier ;
```

--------------------------------

### Prop Shorthands for Matching Props

Source: https://tsrx.dev/features

Utilize prop shorthands `{propName}` when the prop name matches the variable name, simplifying syntax from `propName={propName}` to `{propName}`. This applies to all attributes and event handlers.

```typescript
1 // Instead of repeating the name:
2 <Input value={value} onChange={onChange} />
3
4 // Use the shorthand:
5 <Input {value} {onChange} />
```

--------------------------------

### Bailing out of Template Rules with Inline Functions

Source: https://tsrx.dev/llms.txt

Use plain inline JavaScript/TypeScript functions for unconstrained logic like loops or imperative control flow within component bodies. Call these functions from event handlers or expressions.

```tsrx
export component Counter() {
  let count = 0;

  // Plain JS — no template restrictions apply
  const increment = () => {
    if (count >= 10) {
      count = 0;
    } else {
      count += 1;
    }
  };

  <button onClick={increment}>
    {`Count: ${count}`}
  </button>
}
```

--------------------------------

### TSRX try/catch for error boundaries

Source: https://tsrx.dev/llms.txt

Wrap component trees in 'try { } catch (e) { }' to render fallback UI when a child throws an error. The 'pending { }' clause handles async operations.

```tsrx
component SafeProfile({ userId }: { userId: string }) {
  try {
    <UserProfile id={userId} />
  } catch (error) {
    <div class="error">
      <p>"Something went wrong."</p>
    </div>
  }
}
```

--------------------------------

### Prop Shorthand in tsrx Components

Source: https://tsrx.dev/llms.txt

Shows the prop shorthand syntax in tsrx, where `{propName}` can be used instead of `propName={propName}` when the prop name matches the variable name.

```tsrx
<Input {value} {onChange} />
```

--------------------------------

### Raw HTML Rendering in tsrx Components

Source: https://tsrx.dev/llms.txt

Use `{html expr}` to insert parsed HTML. This should only be used with trusted or sanitized input due to XSS risks. Ripple supports this directly; Vue has limited support.

```tsrx
component Article({ markup }: { markup: string }) {
  <article>{html markup}</article>
}
```

--------------------------------

### TSRX JSX Static vs. Dynamic Text

Source: https://tsrx.dev/llms.txt

Illustrates correct and incorrect usage of static text in TSRX JSX. Static text must be double-quoted, while dynamic values and JS expressions require curly braces.

```typescript
// ❌ WRONG — bare unquoted text is not allowed
<div>Hello World</div>

// ✅ CORRECT — static text may be a double-quoted child
<div>"Hello World"</div>
<div>"Use &quot; for a quote and &amp; for an ampersand"</div>

// ✅ CORRECT — JS expressions still use braces
<div>{'Hello World'}</div>
<div>{`Count: ${count}`}</div>
<div>{user.name}</div>
```

--------------------------------

### TSRX Component with Conditional Hook Usage

Source: https://tsrx.dev/

Demonstrates how TSRX handles conditional React hook usage by lifting the conditional branch into its own component, satisfying hook rules.

```typescript
1 component Profile({ userId }: { userId: string | null }) {
  if (userId) {
    const user = useUser(userId);
    <h1>{user.name}</h1>
  } else {
    <a href="/login">"Sign in"</a>
  }
}
```

--------------------------------

### TSRX Children: Nested JSX vs. Children Prop

Source: https://tsrx.dev/features

Shows the correct way to pass children to components. Nested JSX is for static content, while computed values (arrays, functions) must be passed explicitly using the `children` prop.

```typescript
 1 // Children as nested JSX — this works:
 2 <Card>
 3   <h2>"Title"</h2>
 4   <p>"Content goes here."</p>
 5 </Card>
 6
 7 // Passing a function or array? Use the children prop:
 8 <List children={items.map(renderItem)} />
```

--------------------------------

### Configure Rspack for Vue

Source: https://tsrx.dev/getting-started

Add the TsrxVueRspackPlugin to your Rspack configuration for Vue.js projects.

```javascript
import { TsrxVueRspackPlugin } from '@tsrx/rspack-plugin-vue';

export default {
  plugins: [new TsrxVueRspackPlugin()],
};
```

--------------------------------

### TSRX Grammar to AST Node Correspondence

Source: https://tsrx.dev/specification

This table maps TSRX grammar productions to their corresponding AST node types. It is informative and describes the parser contract for tooling.

```plaintext
Informative grammar-to-node correspondence

ComponentDeclaration, ComponentExpression -> Component
ElementStatement -> Element
{ AssignmentExpression } in template position -> TSRXExpression
{ text AssignmentExpression } in template position -> Text
{ html AssignmentExpression } in template position -> Html
JSXAttributeName JSXAttributeInitializeropt -> Attribute
{ ... AssignmentExpression } in attribute position -> SpreadAttribute
ref={ AssignmentExpression } -> RefAttribute
<tsrx> TemplateChildrenopt </tsrx> -> Tsrx
<tsx> TsxChildrenopt </tsx> -> Tsx
<> TsxChildrenopt </> -> Tsx
<tsx: IdentifierName> TsxChildrenopt </tsx: IdentifierName> -> TsxCompat
{ style StringLiteral } in attribute position -> Style
module Identifier { ModuleItemListopt } -> TSModuleDeclaration
import ImportClause from Identifier -> ImportDeclaration with Identifier source
```

--------------------------------

### Declare a Generic Component in TSRX

Source: https://tsrx.dev/llms.txt

Define a generic component that accepts an array of items and a render function. This component renders an unordered list where each item is rendered using the provided function.

```tsrx
type Props<T> = {
  items: T[];
  render: (item: T) => any;
};

component List<T>({ items, render }: Props<T>) {
  <ul>
    for (const item of items) {
      <li>{render(item)}</li>
    }
  </ul>
}
```

--------------------------------

### TSRX DOM Refs: Direct, Native, and Named Props

Source: https://tsrx.dev/features

Demonstrates the three ways to attach refs to DOM elements in TSRX: direct `{ref value}`, native `ref={value}`, and named `inputRef={ref value}`. Use named refs for component APIs.

```typescript
 1 component AutoFocus() {
 2   function focusInput(node: HTMLInputElement | null) {
 3     node?.focus();
 4   }
 5
 6   // TSRX keyword ref.
 7   <input {ref focusInput} type="text" />
 8
 9   // Native-style ref attribute.
10   <input ref={focusInput} type="text" />
11
12   // Named ref prop on a host element.
13   <input focusRef={ref focusInput} type="text" />
14 }
```
Tokens:
Raw