Entwicklungswerkzeuge

@lingo.dev/compiler bietet Entwicklungswerkzeuge, um Ihren Workflow zu beschleunigen und API-Kosten während der Entwicklung zu reduzieren.

Pseudoübersetzer

Der Pseudoübersetzer generiert sofortige Scheinübersetzungen ohne API-Aufrufe.

Aktivieren

{
  dev: {
    usePseudotranslator: true,
  }
}

Funktionsweise

Transformiert Text mit visuellen Markierungen:

Original:

Welcome to our app

Pseudoübersetzt:

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

Vorteile:

  1. Sofortiges Feedback — Keine API-Aufrufe, kein Warten
  2. Übersetzbaren Text visualisieren — Sehen Sie genau, was übersetzt wird
  3. Variierende Längen testen — Pseudoübersetzungen sind ~30 % länger und decken Layout-Probleme auf
  4. Keine Kosten — Keine API-Credits verbraucht

Funktionsweise

Der Pseudoübersetzer:

  • Fügt Markierungen hinzu ([!!! und !!!])
  • Ersetzt Zeichen durch akzentuierte Versionen (a → ä, e → ë)
  • Verlängert die Textlänge um ~30 %
  • Bewahrt Interpolationen ({name} bleibt {name})
  • Erhält die HTML-Struktur

Beispiel mit Interpolationen:

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

Wann verwenden

Während der Entwicklung:

  • Initiale Einrichtung und Integration
  • Layout-Tests mit variierenden Textlängen
  • Debugging von Übersetzungsproblemen
  • Schnelle Iteration am UI

Wann NICHT verwenden:

  • Überprüfung der tatsächlichen Übersetzungsqualität
  • Testen von gebietsspezifischer Formatierung
  • Finale QA vor dem Deployment

Für echte Übersetzungen deaktivieren

{
  dev: {
    usePseudotranslator: false,
  }
}

Starten Sie den Dev-Server neu, um echte Übersetzungen mit Ihrem konfigurierten LLM-Provider zu generieren.

Übersetzungsserver

Der Übersetzungsserver verarbeitet die On-Demand-Übersetzungsgenerierung während der Entwicklung.

So funktioniert es

Wenn Sie npm run dev ausführen:

  1. Der Compiler startet einen lokalen HTTP-Server
  2. Der Server findet automatisch einen verfügbaren Port (60000-60099)
  3. Ihre App fordert Übersetzungen vom Server an
  4. Der Server generiert Übersetzungen (Pseudo oder real)
  5. Übersetzungen werden in .lingo/metadata.json zwischengespeichert

Konfiguration

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

Port-Bereich: Der Server versucht nacheinander die Ports 60000-60099, bis er einen verfügbaren findet.

Manueller Start (erweitert)

Sie können den Übersetzungsserver manuell starten:

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

Dies ist nützlich für:

  • Separates Ausführen des Übersetzungsservers vom Build-Prozess
  • Debugging von Übersetzungsproblemen
  • Benutzerdefinierte CI/CD-Workflows

WebSocket-Unterstützung

Der Übersetzungsserver unterstützt WebSockets für die Echtzeitkommunikation mit dem Development-Widget.

Wenn Übersetzungen aktualisiert werden, sendet der Server Änderungen über WebSocket an verbundene Clients.

Development-Widget

Das Development-Widget ist ein In-Browser-Overlay zur Bearbeitung von Übersetzungen in Echtzeit.

Funktionen

  • Übersetzungen im Browser bearbeiten — Keine Dateibearbeitung erforderlich
  • Kontext anzeigen — Quelltext und Komponentenposition einsehen
  • Echtzeit-Updates — Änderungen werden sofort über WebSocket angewendet
  • Locale-Wechsel — Verschiedene Locales schnell testen

Aktivieren

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

Status: Das Development-Widget befindet sich in aktiver Entwicklung und wird in einer zukünftigen Version verfügbar sein.

So wird es funktionieren

  1. Tastenkombination drücken (z. B. Cmd+Shift+L)
  2. Widget-Overlay erscheint
  3. Beliebigen übersetzten Text zum Bearbeiten anklicken
  4. Übersetzungen für bestimmte Locales ändern
  5. Speichern – Änderungen werden über WebSocket synchronisiert
  6. Übersetzungen werden sofort in .lingo/metadata.json aktualisiert

Development-Workflow

Empfohlenes Setup

1. Initiales Setup:

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

Führen Sie npm run dev aus, um Pseudoübersetzungen sofort zu sehen.

2. Layout-Tests:

Pseudoübersetzungen decken Layout-Probleme auf:

  • Textüberlauf
  • Abgeschnittene Labels
  • Falsch ausgerichtete Elemente
  • Fehlerhafte Responsive-Breakpoints

Beheben Sie Layout-Probleme, bevor Sie in echte Übersetzungen investieren.

3. Überprüfung echter Übersetzungen:

{
  dev: {
    usePseudotranslator: false,
  }
}

Generieren Sie echte Übersetzungen, um die Qualität zu überprüfen. Testen Sie:

  • Übersetzungsgenauigkeit
  • Ton und Formalität
  • Umgang mit Fachbegriffen
  • Beibehaltung von Markennamen

4. Feinabstimmung:

Verwenden Sie data-lingo-override für präzise Kontrolle:

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

5. Produktions-Build:

{
  buildMode: "cache-only",
}

Verwenden Sie vorgenerierte Übersetzungen für schnelle, deterministische Builds.

Debugging

Übersetzungsserver prüfen

Der Übersetzungsserver loggt in die Konsole:

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

Metadaten-Datei prüfen

Inspizieren Sie .lingo/metadata.json, um gecachte Übersetzungen zu sehen:

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

Bei deaktiviertem Pseudotranslator sehen Sie stattdessen echte Übersetzungen.

Port-Konflikte

Falls die Ports 60000-60099 alle belegt sind:

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

Oder stoppen Sie Prozesse, die diese Ports verwenden, manuell:

# Find process using port 60000
lsof -i :60000

# Kill process
kill -9 <PID>

Performance-Tipps

Pseudotranslator ist schnell – verwenden Sie ihn standardmäßig in der Entwicklung.

Echte Übersetzungen sind langsamer – verwenden Sie sie nur, wenn Sie die Qualität überprüfen müssen:

  • Initiale Übersetzungsgenerierung: API-Latenz gilt
  • Nachfolgende Builds: Übersetzungen sind gecacht, schnell

Translation-Server ist leichtgewichtig – minimaler Speicher- und CPU-Verbrauch.

Häufige Fragen

Muss ich den Translation-Server manuell starten? Nein. Er startet automatisch, wenn Sie npm run dev ausführen.

Kann ich Pseudotranslator in der Produktion verwenden? Nein. Pseudotranslator ist nur für die Entwicklung. Produktions-Builds verwenden immer echte Übersetzungen aus .lingo/metadata.json.

Warum ist das Development-Widget noch nicht verfügbar? Es befindet sich in aktiver Entwicklung. Folgen Sie den GitHub-Releases für Updates.

Kann ich Pseudoübersetzungen anpassen? Derzeit nicht. Pseudotranslator verwendet einen festen Algorithmus, der für die Visualisierung von übersetzbarem Text optimiert ist.

Funktionieren Pseudoübersetzungen mit allen Zeichensätzen? Ja. Der Pseudotranslator verarbeitet Unicode korrekt, einschließlich Emoji, CJK-Zeichen und RTL-Sprachen.

Nächste Schritte