Funktionsweise

Der Lingo.dev Compiler automatisiert die Lokalisierung von React-Anwendungen zur Build-Zeit durch intelligente Codeanalyse und KI-gestützte Übersetzung.

Während des Build-Prozesses führt der Compiler folgende Schritte durch, um Ihre Anwendung mehrsprachig zu machen, ohne den Quellcode zu verändern:

1. AST-Analyse

Lingo.dev Compiler verarbeitet den Abstract Syntax Tree (AST) Ihres React-Codes, um übersetzbare Inhalte deterministisch zu identifizieren. Er analysiert:

  • JSX-Textinhalte und -Attribute
  • String-Literale innerhalb von React-Komponenten (Unterstützung für String-Literale kommt in Kürze.)
  • Dynamische Inhaltsmuster

Der Compiler versteht die Grenzen der React-Komponenten und behält kontextuelle Informationen für präzise Übersetzungen bei.

2. Inhaltsextraktion

Der Compiler extrahiert übersetzbare Strings unter Beibehaltung von:

  • Komponentenhierarchie und Kontext
  • React-spezifischen Mustern wie Props und State
  • Codestruktur und Formatierung

Nur für Menschen lesbare Inhalte werden extrahiert. Technische Bezeichner, Code-Snippets und nicht übersetzbare Elemente werden automatisch herausgefiltert.

3. Fingerprinting & Versionierung

Content-Fingerprinting gewährleistet ein effizientes Übersetzungsmanagement:

  • MD5-Hashing erstellt eindeutige Content-Fingerprints
  • Versionierte Wörterbücher verfolgen Änderungen im lingo/-Verzeichnis
  • Git-Integration erhält den Übersetzungsverlauf
  • Delta-Verarbeitung übersetzt nur neue oder modifizierte Inhalte

Dieser Ansatz minimiert Übersetzungskosten und erhält die Konsistenz über verschiedene Builds hinweg.

4. KI-Übersetzung

Die Übersetzung erfolgt durch KI-Modelle mit kontextuellem Verständnis:

  • GROQ-Integration bietet schnelle, hochwertige Übersetzungen
  • Kontextuelle Grenzen helfen der KI, Komponentenbeziehungen zu verstehen
  • Konsistente Terminologie in der gesamten Anwendung
  • Batch-Verarbeitung für optimale Leistung

Der Compiler sendet Kontextinformationen, um sicherzustellen, dass Übersetzungen natürlich in Ihre UI-Komponenten passen.

5. Code-Injektion

Übersetzungen werden in Ihren Build injiziert, ohne Quelldateien zu modifizieren:

  • Build-Zeit-Verarbeitung erstellt lokalisierte Versionen
  • Framework-Integration funktioniert mit Next.js, Vite und React Router
  • Optimierte Bundles mit Laden von sprachspezifischen Wörterbüchern
  • Laufzeiteffizienz durch vorkompilierte Übersetzungen

Das Ergebnis sind produktionsreife, mehrsprachige React-Anwendungen mit minimalem Laufzeit-Overhead.

Framework-Integration

Next.js App Router

Der Compiler integriert sich mit Next.js über das Konfigurationssystem:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Server Components werden zur Build-Zeit verarbeitet
  • Client Components erhalten optimierte Übersetzungspakete
  • Automatisches Routing unterstützt lokalisierungsbasierte URLs

React Router / Remix

Integration durch die Vite-Plugin-Architektur:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Server-side Rendering mit vorgeladenen Wörterbüchern
  • Client-side Hydration behält den Übersetzungsstatus bei
  • Routen-basiertes Code-Splitting beinhaltet Übersetzungspakete

Vite

Direkte Vite-Plugin-Integration:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Hot Module Replacement aktualisiert Übersetzungen während der Entwicklung
  • Build-Optimierung erstellt minimale Produktionspakete
  • Asset-Handling verwaltet Übersetzungsdateien effizient

Entwicklungs-Workflow

  1. React-Komponenten schreiben mit natürlichsprachlichem Text
  2. Entwicklungsserver starten - Compiler extrahiert und übersetzt Inhalte
  3. Übersetzungen überprüfen im generierten lingo/-Verzeichnis
  4. Übersetzungsdateien committen in die Versionskontrolle
  5. Deployment mit integrierter mehrsprachiger Unterstützung

Produktionsvorteile

  • Keine Laufzeitkosten - Übersetzungen werden vorkompiliert
  • Optimale Bundle-Größen - nur verwendete Übersetzungen werden eingebunden
  • SEO-freundlich - korrekte lokalisierungsspezifische Darstellung
  • Konsistente UX - professionelle Übersetzungsqualität

Der Compiler erstellt Produktionsanwendungen, die sich für jede unterstützte Sprache wie nativ entwickelt anfühlen, während der ursprüngliche Entwicklungs-Workflow beibehalten wird.

Nächste Schritte