Alpha
Le Lingo.dev Compiler est en version alpha. Il est instable, déconseillé en production, et les API peuvent évoluer d’une version à l’autre.
Le Lingo.dev Compiler inclut des outils de développement qui vous permettent d’itérer rapidement sur des interfaces multilingues sans faire appel à des API externes. Ils vous aident à vérifier que tous les textes sont traduisibles, à tester la mise en page avec des longueurs de texte variables, et à déboguer les problèmes de traduction pendant le développement.
Pseudotraducteur#
Le pseudotraducteur génère instantanément de fausses traductions en encadrant le texte source de repères visuels. Aucune clé API n’est requise, aucun appel réseau n’est effectué, et le résultat s’affiche immédiatement.
Activez-le dans la configuration du compilateur :
{
dev: {
usePseudotranslator: true,
},
}Résultat obtenu#
| Texte source | Pseudotraduction |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
Les repères ([!!! ... !!!]) permettent de distinguer visuellement le texte traduit du texte non traduit. Si vous voyez de l’anglais brut dans l’interface alors que le pseudotraducteur est activé, cela signifie que ce texte n’est pas traité par le compilateur.
Cas d’usage#
Repérer les chaînes non traduites
Lancez votre application avec le pseudotraducteur activé. Tout texte qui apparaît sans les repères [!!! ... !!!] n’est pas détecté par le compilateur. Cela se produit lorsque le texte est stocké dans des variables en dehors de JSX, ou lorsqu’un composant se trouve en dehors du répertoire sourceRoot.
Tester la mise en page avec des textes plus longs
Les pseudotraductions sont plus longues que le texte source (à cause des caractères de repérage). Cela simule des langues comme l’allemand ou le français, qui produisent généralement un texte 20 à 30 % plus long que l’anglais, et permet de détecter tôt les problèmes de débordement de mise en page.
Vérifier l’interpolation
Les placeholders comme {count} et {name} doivent apparaître à l’intérieur des repères de pseudotraduction. Si un placeholder apparaît en dehors des repères ou s’il manque, le compilateur ne le préserve peut-être pas correctement.
Le pseudotraducteur suit le même pipeline de traduction que les fournisseurs réels : il passe par les mêmes étapes d’analyse de l’AST et d’injection de code. La seule différence se situe à l’étape de génération de la traduction, où les repères remplacent l’appel au LLM.
Serveur de traduction#
Pendant le développement, le compilateur exécute un serveur de traduction local qui gère les requêtes de traduction à la demande. Le serveur démarre automatiquement lorsque vous lancez npm run dev.
Fonctionnement#
Le serveur de traduction écoute sur un port local et traite les requêtes de traduction issues du pipeline de build de développement. Lorsqu’une nouvelle chaîne ou une chaîne modifiée est détectée, le compilateur l’envoie au serveur, qui l’achemine vers le fournisseur de traduction configuré (ou le pseudotraducteur).
Configuration du port#
Le serveur détecte automatiquement un port disponible dans une plage configurable :
{
dev: {
translationServerStartPort: 60000,
},
}| Option | Par défaut | Description |
|---|---|---|
translationServerStartPort | 60000 | Numéro du port de départ. Le serveur essaie les ports les uns après les autres (60000, 60001, ..., 60099) jusqu’à en trouver un disponible. |
translationServerUrl | auto-detected | Remplace entièrement l’URL du serveur. Utile pour se connecter à un serveur de traduction distant ou à un proxy personnalisé. |
Si tous les ports de la plage 60000-60099 sont occupés, le serveur ne pourra pas démarrer. Consultez Troubleshooting pour savoir comment résoudre les conflits de port.
Widget de développement (bientôt disponible)#
Un éditeur de traduction intégré au navigateur qui vous permet de consulter et de modifier les traductions en temps réel pendant que vous naviguez dans votre application. Le widget se superpose à l’interface et affiche les détails de traduction pour chaque élément de texte.
Fonctionnalités prévues :
- Cliquez sur n’importe quel élément de texte pour afficher son texte source, ses traductions et ses métadonnées
- Modifiez les traductions directement dans le navigateur
- Les modifications sont enregistrées immédiatement dans
.lingo/metadata.json - Basculer entre les langues sans recharger
Statut
Le widget de développement est en cours de création et n’est pas encore disponible. Suivez le changelog pour rester informé des prochaines sorties.
Configuration de développement recommandée#
Pour bénéficier de l’expérience de développement la plus rapide, combinez le pseudotraducteur avec les paramètres par défaut du serveur de traduction :
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Lorsque vous êtes prêt à prévisualiser de vraies traductions, désactivez le pseudotraducteur et redémarrez le serveur de développement :
{
dev: {
usePseudotranslator: false,
},
}Le compilateur génère alors de vraies traductions pour les chaînes nouvelles ou modifiées à l’aide du fournisseur de traduction configuré.
