Outils de développement

@lingo.dev/compiler fournit des outils de développement pour accélérer votre flux de travail et réduire les coûts d'API pendant le développement.

Pseudotraducteur

Le pseudotraducteur génère des traductions factices instantanées sans appels d'API.

Activer

{
  dev: {
    usePseudotranslator: true,
  }
}

Ce qu'il fait

Transforme le texte avec des marqueurs visuels :

Original :

Welcome to our app

Pseudotraduit :

[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]

Avantages :

  1. Retour instantané — Aucun appel d'API, aucune attente
  2. Visualiser le texte traduisible — Voir exactement ce qui est traduit
  3. Tester les longueurs variables — Les pseudotraductions sont ~30 % plus longues, révélant les problèmes de mise en page
  4. Coût zéro — Aucun crédit d'API consommé

Comment ça fonctionne

Le pseudotraducteur :

  • Ajoute des marqueurs ([!!! et !!!])
  • Remplace les caractères par des versions accentuées (a → ä, e → ë)
  • Étend la longueur du texte d'environ 30 %
  • Préserve les interpolations ({name} reste {name})
  • Maintient la structure HTML

Exemple avec interpolations :

<p>Hello {name}, you have {count} items</p>
// Becomes: [!!! Ḧëļļö {name}, ÿöü ḧävë {count} ïẗëṁṡ !!!]

Quand l'utiliser

Pendant le développement :

  • Configuration et intégration initiales
  • Test de mise en page avec des longueurs de texte variables
  • Débogage des problèmes de traduction
  • Itération rapide sur l'interface utilisateur

Quand NE PAS l'utiliser :

  • Révision de la qualité réelle de la traduction
  • Test du formatage spécifique aux paramètres régionaux
  • Assurance qualité finale avant le déploiement

Désactiver pour les vraies traductions

{
  dev: {
    usePseudotranslator: false,
  }
}

Redémarrez le serveur de développement pour générer de vraies traductions en utilisant votre fournisseur LLM configuré.

Serveur de traduction

Le serveur de traduction gère la génération de traductions à la demande pendant le développement.

Comment ça fonctionne

Lorsque vous exécutez npm run dev :

  1. Le compilateur démarre un serveur HTTP local
  2. Le serveur trouve automatiquement un port disponible (60000-60099)
  3. Votre application demande les traductions au serveur
  4. Le serveur génère les traductions (pseudo ou réelles)
  5. Les traductions sont mises en cache dans .lingo/metadata.json

Configuration

{
  dev: {
    translationServerStartPort: 60000, // Starting port
    translationServerUrl: "http://localhost:60000", // Custom URL (advanced)
  }
}

Plage de ports : le serveur essaie les ports 60000-60099 séquentiellement jusqu'à ce qu'il en trouve un disponible.

Démarrage manuel (avancé)

Vous pouvez démarrer le serveur de traduction manuellement :

npx @lingo.dev/compiler translate-server \
  --port 60000 \
  --config ./lingo.config.json

Ceci est utile pour :

  • Exécuter le serveur de traduction séparément du processus de build
  • Déboguer les problèmes de traduction
  • Workflows CI/CD personnalisés

Support WebSocket

Le serveur de traduction prend en charge les WebSockets pour la communication en temps réel avec le widget de développement.

Lorsque les traductions sont mises à jour, le serveur envoie les modifications aux clients connectés via WebSocket.

Widget de développement

Le widget de développement est une superposition dans le navigateur permettant de modifier les traductions en temps réel.

Fonctionnalités

  • Modifier les traductions dans le navigateur — pas besoin de modifier les fichiers
  • Voir le contexte — afficher le texte source, l'emplacement du composant
  • Mises à jour en temps réel — les modifications s'appliquent immédiatement via WebSocket
  • Changement de locale — tester rapidement différentes locales

Activer

{
  dev: {
    enableWidget: true, // Coming soon
  }
}

Statut : le widget de développement est en cours de développement actif et sera disponible dans une version future.

Comment ça fonctionnera

  1. Appuyez sur le raccourci clavier (par ex., Cmd+Shift+L)
  2. La superposition du widget apparaît
  3. Cliquez sur n'importe quel texte traduit pour le modifier
  4. Modifiez les traductions pour des locales spécifiques
  5. Enregistrez — les modifications se synchronisent via WebSocket
  6. Les traductions se mettent à jour instantanément dans .lingo/metadata.json

Workflow de développement

Configuration recommandée

1. Configuration initiale :

{
  dev: {
    usePseudotranslator: true, // Fast feedback
  }
}

Exécutez npm run dev pour voir les pseudo-traductions instantanément.

2. Test de mise en page :

Les pseudo-traductions révèlent les problèmes de mise en page :

  • Débordement de texte
  • Libellés tronqués
  • Éléments mal alignés
  • Points de rupture responsive incorrects

Corrigez les problèmes de mise en page avant d'investir dans de vraies traductions.

3. Révision des traductions réelles :

{
  dev: {
    usePseudotranslator: false,
  }
}

Générez des traductions réelles pour en vérifier la qualité. Testez :

  • La précision de la traduction
  • Le ton et la formalité
  • Le traitement des termes techniques
  • La préservation du nom de marque

4. Ajustement fin :

Utilisez data-lingo-override pour un contrôle de précision :

<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen" }}>
  Welcome
</h1>

5. Build de production :

{
  buildMode: "cache-only",
}

Utilisez des traductions pré-générées pour des builds rapides et déterministes.

Débogage

Vérifier le serveur de traduction

Le serveur de traduction enregistre dans la console :

[lingo] Translation server started on port 60001
[lingo] Pseudotranslator: enabled
[lingo] Watching for changes...

Vérifier le fichier de métadonnées

Inspectez .lingo/metadata.json pour voir les traductions en cache :

{
  "translations": {
    "abc123": {
      "source": "Welcome to our app",
      "locales": {
        "es": "[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]",
        "de": "[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]"
      }
    }
  }
}

Avec le pseudo-traducteur désactivé, vous verrez de vraies traductions à la place.

Conflits de ports

Si les ports 60000-60099 sont tous utilisés :

{
  dev: {
    translationServerStartPort: 61000, // Use different range
  }
}

Ou arrêter manuellement les processus utilisant ces ports :

# Find process using port 60000
lsof -i :60000

# Kill process
kill -9 <PID>

Conseils de performance

Le pseudotraducteur est rapide — utilisez-le par défaut en développement.

Les vraies traductions sont plus lentes — utilisez-les uniquement lorsque vous devez vérifier la qualité :

  • Génération initiale de traduction : la latence de l'API s'applique
  • Compilations suivantes : les traductions sont mises en cache, rapides

Le serveur de traduction est léger — utilisation minimale de mémoire et de CPU.

Questions fréquentes

Dois-je démarrer le serveur de traduction manuellement ? Non. Il démarre automatiquement lorsque vous exécutez npm run dev.

Puis-je utiliser le pseudotraducteur en production ? Non. Le pseudotraducteur est réservé au développement. Les compilations de production utilisent toujours les vraies traductions de .lingo/metadata.json.

Pourquoi le widget de développement n'est-il pas encore disponible ? Il est en cours de développement actif. Suivez les versions GitHub pour les mises à jour.

Puis-je personnaliser les pseudotraductions ? Pas actuellement. Le pseudotraducteur utilise un algorithme fixe optimisé pour visualiser le texte traduisible.

Les pseudotraductions fonctionnent-elles avec tous les jeux de caractères ? Oui. Le pseudotraducteur gère correctement Unicode, y compris les emoji, les caractères CJK et les langues RTL.

Prochaines étapes