Démarrage rapide

Le plus rapide pour obtenir une application qui tourne est le générateur create-fluixi :

npm create fluixi@latest mon-app
# ou : pnpm create fluixi mon-app · yarn create fluixi mon-app

Il pose deux questions :

• Mode d'application — SSR (rendu serveur via @fluixi/start) ou SPA (côté client via Vite).
• Syntaxe des templates — JSX (par défaut) ou html`` (sans JSX, fichiers .ts simples).

Ensuite :

cd mon-app
npm install
npm run dev

Vous pouvez aussi ignorer les questions :

npm create fluixi@latest mon-app -- --ssr --jsx    # ou --spa / --html

JSX ou html`` ?

Fluixi compile les deux — JSX et les templates html `` — vers les mêmes appels DOM à granularité fine. Choisissez ce que vous préférez, ou mélangez-les dans un même fichier.

// JSX — nécessite `jsx` dans le tsconfig
function Counter() {
  const [n, setN] = createSignal(0);
  return <button onClick={() => setN(n() + 1)}>{n()}</button>;
}

// html`` — .ts simple, pas de jsx dans le tsconfig
import { html } from '@fluixi/core';

function Counter() {
  const [n, setN] = createSignal(0);
  return html`<button @click=${() => setN(n() + 1)}>${n()}</button>`;
}

Choisissez html`` quand vous ne voulez pas configurer JSX (par exemple une bibliothèque, un script, ou une base de code en TypeScript pur). Voir templates html`` pour la syntaxe complète.

Chaque application générée inclut @fluixi/ts-plugin, qui apporte un vrai support TypeScript aux templates html `` dans votre éditeur — survol, complétion et vérification de types à l'intérieur du template.

Ajouter un composant ou une route

Le CLI génère des morceaux dans une application existante, en suivant automatiquement la syntaxe du projet :

npx fluixi generate component Button    # → src/components/Button.tsx (ou .ts pour html``)
npx fluixi generate route about         # → src/routes/about.tsx

Partir de zéro

Si vous préférez tout câbler vous-même, installez le runtime et le plugin Vite :

npm install @fluixi/core
npm install -D @fluixi/vite-plugin vite

// vite.config.ts
import { defineConfig } from 'vite';
import { fluixi } from '@fluixi/vite-plugin';

export default defineConfig({ plugins: [fluixi()] });

// src/main.ts
import { render, html } from '@fluixi/core';
import { App } from './app';

render(() => html`<${App} />`, document.getElementById('app')!);

Continuez avec Signaux pour le cœur réactif, ou passez aux templates html``.