Configuration TypeScript

Configurez le compilateur pour utiliser le runtime JSX de Vincle.

tsconfig.json#

Utilisez jsx: "react-jsx" et jsxImportSource: "@vincle/core". Les autres options dépendent de votre application et de votre environnement d’exécution.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@vincle/core"
  }
}

Deno#

Deno lit les options JSX de deno.json. Déclarez également le package npm dans les imports de votre projet.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:@vincle/core"
  },
  "imports": {
    "@vincle/core": "npm:@vincle/core"
  }
}

Vite / esbuild#

Vite et esbuild peuvent compiler le JSX avec le même jsxImportSource. Aucun runtime React n’est nécessaire.

export default defineConfig({
  esbuild: { jsx: "automatic", jsxImportSource: "@vincle/core" },
});

Plugin de précompilation (recommandé en production)#

En production, le plugin de précompilation transforme les parties statiques en modèles HTML et conserve les contrôles nécessaires au runtime.

import precompile from "@vincle/precompile/vite";

export default defineConfig({
  esbuild: { jsx: "automatic", jsxImportSource: "@vincle/core" },
  plugins: [precompile()],
});

Types des attributs#

Vincle fournit les types des attributs HTML et SVG, des styles et des événements sous forme de chaînes. Les intégrations ajoutent leurs propres types sans modifier Core.

Pour continuer#

Essayez le premier rendu, puis explorez les éléments et attributs.