---
title: "TSRX"
headingIds: ["tsrx", "setup-on-bun", "setup-on-vite", "notes"]
---

# TSRX

TSRX permet de compiler et rendre des fichiers JSX dans un pipeline serveur.

## Configuration sous Bun

Sous Bun, configurez le runtime JSX et branchez le plugin de précompilation si vous souhaitez optimiser les arbres statiques.

```json title="package.json"
{
  "dependencies": {
    "@tsrx/bun-plugin-react": "^0.1.99",
    "@tsrx/react": "^0.3.4",
    "@vincle/core": "^0.9.0"
  },
  "devDependencies": {
    "@tsrx/typescript-plugin": "^0.4.7",
    "typescript": "^5.9.3"
  }
}
```

```json title="tsconfig.json"
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@vincle/core",
    "plugins": [{ "name": "@tsrx/typescript-plugin" }]
  }
}
```

```ts title="build.ts"
import tsrxReact from "@tsrx/bun-plugin-react";

await Bun.build({
  entrypoints: ["./src/index.tsx"],
  outdir: "./dist",
  plugins: [tsrxReact({ jsxImportSource: "@vincle/core" })],
});
```

```tsx title="src/App.tsrx"
export function Hello({ names }: { names: string[] }) @{
  const hour = new Date().getHours();
  const greeting = hour < 18 ? "Bonjour" : "Bonsoir";

  <>
    <div class="card">
      <h1>{greeting}, TSRX + vincle !</h1>

      @for (const name of names) {
        <div class="row">
          <span class="badge">{name[0].toUpperCase()}</span>
          <strong>{name}</strong>
        </div>
      }

      @if (names.length > 3) {
        <p class="more">…and {names.length - 3} more.</p>
      }
    </div>

    <style>
      .card { padding: 1rem; border: 1px solid #ccc; border-radius: 8px; }
      .row { display: flex; gap: 0.5rem; align-items: center; }
      .badge { font-weight: 600; }
      .more { color: #666; }
    </style>
  </>
}
```

```tsx title="src/index.tsx"
import { renderToString } from "@vincle/core";
import { Hello } from "./App.tsrx";

const html = await renderToString(<Hello names={["vincle", "TSRX"]} />);
console.log(html);
```

```bash
bun build.ts && bun dist/index.js
```

## Configuration sous Vite

Sous Vite, configurez `jsxImportSource` et le plugin Vincle adapté à votre build.

```ts title="vite.config.ts"
import { defineConfig } from "vite";
import tsrxReact from "@tsrx/vite-plugin-react";

export default defineConfig({
  plugins: [tsrxReact({ jsxImportSource: "@vincle/core" })],
});
```

## Notes

Les conventions de fichiers et de routage restent celles de votre outil. Le JSX de Vincle sert au rendu serveur et ne nécessite aucun runtime React client.