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.

{
  "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"
  }
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@vincle/core",
    "plugins": [{ "name": "@tsrx/typescript-plugin" }]
  }
}

import tsrxReact from "@tsrx/bun-plugin-react";

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

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>
  </>
}

import { renderToString } from "@vincle/core";
import { Hello } from "./App.tsrx";

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

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

Configuration sous Vite#

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

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.