Alpha
Der Lingo.dev Compiler befindet sich in der Alpha-Phase. Er ist noch instabil, für den Produktionseinsatz nicht empfohlen, und APIs können sich zwischen Releases ändern.
Lingo.dev Compiler ist ein kostenloses Open-Source-Übersetzungssystem für die Build-Zeit von React-Anwendungen. Es erkennt übersetzbare Texte in deinem JSX, generiert KI-gestützte Übersetzungen mit vollständigem Komponentenkontext und bettet sie während des Build-Prozesses in sprachspezifische Bundles ein. Dein Quellcode bleibt unverändert – keine manuellen Übersetzungs-Key-Dateien, keine separaten Wörterbücher, die zur Laufzeit geladen werden müssen.
Sieh es in Aktion: Live-Demo auf X
Vorher und nachher#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishKeine Codeänderungen nötig. Übersetzungen werden zur Compile-Zeit festgelegt und als optimierte sprachspezifische Bundles erzeugt.
So unterscheidet es sich von klassischen i18n-Bibliotheken#
| Klassische i18n-Bibliotheken | Lingo.dev Compiler | |
|---|---|---|
| Übersetzungsverwaltung | Manuell – du erstellst und pflegst Key-Dateien | Automatisch – der Compiler extrahiert übersetzbare Strings aus JSX |
| Erforderliche Codeänderungen | Jeden String in t()-Aufrufe einpacken | Keine – du schreibst ganz normales JSX |
| So werden Übersetzungen geladen | Separate Wörterbuchdateien, die zur Laufzeit geladen werden | Beim Build in sprachspezifische Bundles eingebettet |
| Quelle der Übersetzungen | Manuell oder über ein externes TMS | KI-generiert mit vollständigem Komponentenkontext |
| Abruf von Wörterbüchern | Abruf oder Import von Übersetzungsdateien zur Laufzeit | Kein separater Abruf – Übersetzungen sind Teil des Bundles |
Die Build-Pipeline#
AST-Analyse
Der Compiler parst deinen React-Code mit Babel in einen Abstract Syntax Tree. Dabei erkennt er übersetzbare Inhalte: Textknoten, String-Attribute (alt, aria-label, placeholder) und Template-Ausdrücke.
Inhaltsextraktion
Jeder übersetzbare String erhält eine stabile, hashbasierte Kennung. Der Compiler bewahrt den Komponentenkontext, die Rich-Text-Struktur (verschachtelte <strong>, <em>) und Interpolations-Platzhalter. Metadaten werden in .lingo/metadata.json gespeichert.
Übersetzungsgenerierung
In der Entwicklung erzeugt der Pseudotranslator sofortige Pseudo-Übersetzungen (ohne API-Aufrufe). In CI erstellt der konfigurierte LLM-Anbieter echte Übersetzungen mit vollständigem Komponentenkontext – Dateipfad, umgebende Elemente und Interpolationssemantik. Übersetzt werden nur neue oder geänderte Strings – der Compiler nutzt Content-Hashing, um unveränderte Strings zu überspringen.
Code-Injektion
Übersetzungs-Lookups werden in dein JSX injiziert. Der Compiler fügt für jede Sprache schlanke, hashbasierte Lookup-Aufrufe für das eingebettete Wörterbuch hinzu. Dein Quellcode wird nie verändert.
Bundle-Optimierung
Es werden sprachspezifische Bundles erzeugt. Enthalten sind nur die Übersetzungen, die von der jeweiligen Komponente verwendet werden. Dead Code Elimination und Tree Shaking halten die Bundles schlank.
Unterstützte Frameworks#
| Framework | Integration |
|---|---|
| Next.js (App Router) | withLingo()-Config-Wrapper – unterstützt RSC, Webpack und Turbopack |
| Vite + React | lingoCompilerPlugin – Vite-Plugin mit voller HMR-Unterstützung |
Wichtige Funktionen#
- Standardmäßig automatisch – aller JSX-Text wird übersetzt, außer du entscheidest dich für den
'use i18n'-Direktivmodus - Kein Wörterbuch-Abruf – Übersetzungen sind in sprachspezifische Bundles eingebettet, ohne separate Dateien zum Nachladen
- Build-Modi – Pseudotranslator in Dev, echte Übersetzungen in CI, nur Cache in Produktion
- Manuelle Overrides –
data-lingo-override-Attribut für präzise Kontrolle - Benutzerdefinierte Sprache-Resolver – implementiere deine eigene Spracherkennung und Persistenz
- Automatische Pluralisierung – ICU-MessageFormat-Unterstützung für Pluralformen
- Entwicklungstools – Pseudotranslator und browserbasierter Übersetzungseditor
