Alpha
Lingo.dev Compiler est en version alpha. Il est instable, déconseillé en production, et ses API peuvent évoluer d’une release à l’autre.
Lingo.dev Compiler est un système de traduction gratuit et open source à la compilation pour les applications React. Il détecte le texte traduisible dans votre JSX, génère des traductions par IA avec tout le contexte du composant, puis les intègre dans des bundles par langue pendant le build. Votre code source reste inchangé : aucun fichier de clés de traduction à maintenir manuellement, aucun dictionnaire séparé à charger à l’exécution.
Voyez-le en action : démo en direct sur X
Avant / après#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishAucune modification du code n’est nécessaire. Les traductions sont déterminées à la compilation, ce qui produit des bundles optimisés par langue.
Ce qui le distingue des bibliothèques i18n traditionnelles#
| Bibliothèques i18n traditionnelles | Lingo.dev Compiler | |
|---|---|---|
| Gestion des traductions | Manuelle — vous créez et maintenez des fichiers de clés | Automatique — le Compiler extrait les chaînes traduisibles du JSX |
| Modifications du code requises | Entourez chaque chaîne d’appels à t() | Aucune — écrivez du JSX normal |
| Mode de chargement des traductions | Fichiers de dictionnaire séparés chargés à l’exécution | Intégrées dans des bundles par langue lors du build |
| Source des traductions | Manuelle ou via un TMS externe | Générées par IA avec tout le contexte du composant |
| Chargement du dictionnaire | Récupération ou import des fichiers de traduction à l’exécution | Aucun chargement séparé — les traductions font partie du bundle |
Le pipeline de build#
Analyse de l’AST
Le Compiler analyse votre code React en arbre syntaxique abstrait avec Babel. Il identifie le contenu traduisible : nœuds de texte, attributs de chaîne (alt, aria-label, placeholder) et expressions de template.
Extraction du contenu
Chaque chaîne traduisible reçoit un identifiant stable basé sur un hash. Le Compiler préserve le contexte du composant, la structure du texte enrichi (balises <strong> et <em> imbriquées) ainsi que les placeholders d’interpolation. Les métadonnées sont stockées dans .lingo/metadata.json.
Génération des traductions
En développement, le pseudo-traducteur génère instantanément de fausses traductions (sans appel API). En CI, le fournisseur de LLM configuré génère de vraies traductions avec tout le contexte du composant : emplacement du fichier, éléments environnants et sémantique des interpolations. Seules les chaînes nouvelles ou modifiées sont traduites — le Compiler utilise le hachage du contenu pour ignorer les chaînes inchangées.
Injection du code
Les lookups de traduction sont injectés dans votre JSX. Le Compiler ajoute, pour chaque langue, des appels de lookup légers basés sur un hash vers le dictionnaire intégré. Votre code source n’est jamais modifié.
Optimisation des bundles
Des bundles par langue sont générés. Seules les traductions utilisées par chaque composant sont incluses. L’élimination du code mort et le tree-shaking permettent de garder des bundles minimalistes.
Frameworks pris en charge#
| Framework | Intégration |
|---|---|
| Next.js (App Router) | Wrapper de configuration withLingo() — compatible avec RSC, Webpack et Turbopack |
| Vite + React | lingoCompilerPlugin — plugin Vite avec prise en charge complète du HMR |
Fonctionnalités clés#
- Automatique par défaut — tout le texte JSX est traduit, sauf si vous activez le mode directive
'use i18n' - Pas de chargement de dictionnaire — les traductions sont intégrées dans des bundles par langue, sans fichier séparé à charger
- Modes de build — pseudo-traducteur en dev, vraies traductions en CI, cache uniquement en production
- Surcharges manuelles — attribut
data-lingo-overridepour un contrôle précis - Résolveurs de langue personnalisés — implémentez votre propre détection et persistance de langue
- Pluralisation automatique — prise en charge d’ICU MessageFormat pour les formes plurielles
- Outils de développement — pseudo-traducteur et éditeur de traduction dans le navigateur
