Comment ça fonctionne

Le Compilateur Lingo.dev automatise la localisation des applications React lors de la compilation grâce à une analyse intelligente du code et à la traduction assistée par IA.

Lorsque vous exécutez votre processus de build, le compilateur effectue les étapes suivantes pour rendre votre application multilingue sans modifier votre code source :

1. Analyse AST

Le Compilateur Lingo.dev traite l'Arbre de Syntaxe Abstraite (AST) de votre code React pour identifier de manière déterministe le contenu traduisible. Il analyse :

  • Le contenu textuel JSX et ses attributs
  • Les littéraux de chaîne dans les composants React (Support pour les littéraux de chaîne bientôt disponible.)
  • Les modèles de contenu dynamique

Le compilateur comprend les limites des composants React et maintient les informations contextuelles pour des traductions précises.

2. Extraction du contenu

Le compilateur extrait les chaînes traduisibles tout en préservant :

  • La hiérarchie et le contexte des composants
  • Les modèles spécifiques à React comme les props et l'état
  • La structure et le formatage du code

Seul le contenu lisible par l'humain est extrait. Les identifiants techniques, les fragments de code et les éléments non traduisibles sont automatiquement filtrés.

3. Empreinte numérique et versionnement

L'empreinte digitale du contenu assure une gestion efficace des traductions :

  • Le hachage MD5 crée des empreintes digitales uniques du contenu
  • Les dictionnaires versionnés suivent les modifications dans le répertoire lingo/
  • L'intégration Git maintient l'historique des traductions
  • Le traitement delta ne traduit que le contenu nouveau ou modifié

Cette approche minimise les coûts de traduction et maintient la cohérence entre les builds.

4. Traduction par IA

La traduction s'effectue via des modèles d'IA avec compréhension contextuelle :

  • L'intégration GROQ fournit des traductions rapides et de haute qualité
  • Les limites contextuelles aident l'IA à comprendre les relations entre composants
  • Une terminologie cohérente dans toute votre application
  • Le traitement par lots pour une performance optimale

Le compilateur envoie des informations contextuelles pour garantir que les traductions s'intègrent naturellement dans vos composants d'interface utilisateur.

5. Injection de code

Les traductions sont injectées dans votre build sans modifier les fichiers source :

  • Le traitement à la compilation crée des versions localisées
  • L'intégration avec les frameworks fonctionne avec Next.js, Vite et React Router
  • Des bundles optimisés avec chargement de dictionnaire par locale
  • Une efficacité d'exécution grâce aux traductions pré-compilées

Le résultat est une application React multilingue prête pour la production avec une surcharge d'exécution minimale.

Intégration de framework

Next.js App Router

Le compilateur s'intègre à Next.js via le système de configuration :

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Les composants serveur sont traités au moment de la compilation
  • Les composants client reçoivent des bundles de traduction optimisés
  • Le routage automatique prend en charge les URL basées sur les locales

React Router / Remix

Intégration via l'architecture de plugin Vite :

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Rendu côté serveur avec dictionnaires préchargés
  • Hydratation côté client maintient l'état de traduction
  • Fractionnement de code basé sur les routes inclut les bundles de traduction

Vite

Intégration directe du plugin Vite :

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Le remplacement de module à chaud met à jour les traductions pendant le développement
  • L'optimisation de build crée des bundles de production minimaux
  • La gestion des ressources administre efficacement les fichiers de traduction

Flux de travail de développement

  1. Écrire des composants React en utilisant du texte en langage naturel
  2. Exécuter le serveur de développement - le compilateur extrait et traduit le contenu
  3. Réviser les traductions dans le répertoire lingo/ généré
  4. Valider les fichiers de traduction dans le système de contrôle de version
  5. Déployer avec support multilingue intégré

Avantages en production

  • Coût d'exécution nul - les traductions sont précompilées
  • Tailles de bundle optimales - seules les traductions utilisées sont incluses
  • Compatible SEO - rendu approprié spécifique à la locale
  • UX cohérente - qualité de traduction professionnelle

Le compilateur crée des applications de production qui semblent nativement conçues pour chaque langue prise en charge tout en maintenant votre flux de développement original.

Prochaines étapes