Alpha
Lingo.dev Compiler je ve fázi alpha. Je nestabilní, nedoporučuje se pro produkční nasazení a API se může mezi jednotlivými vydáními měnit.
Lingo.dev Compiler je bezplatný open-source systém pro překlad při buildu pro React aplikace. V JSX rozpozná překládatelný text, pomocí AI vygeneruje překlady s plným kontextem komponent a během buildu je vloží do bundlů pro každý jazyk. Zdrojový kód zůstává beze změny – nemusíte udržovat ručně vytvářené soubory s překladovými klíči ani za běhu zvlášť načítat slovníky.
Podívejte se, jak to funguje: live demo na X
Před a po#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in SpanishBez jakýchkoli změn v kódu. Překlady se vyhodnocují při kompilaci, takže vznikají optimalizované bundly pro každý jazyk.
V čem se liší od tradičních i18n knihoven#
| Tradiční i18n knihovny | Lingo.dev Compiler | |
|---|---|---|
| Správa překladů | Ruční – vytváříte a spravujete soubory s klíči | Automatická – Compiler extrahuje překládatelné řetězce z JSX |
| Nutné změny v kódu | Každý řetězec obalíte voláním t() | Žádné – píšete běžné JSX |
| Jak se načítají překlady | Samostatné soubory se slovníky načítané za běhu | Vložené do bundlů pro každý jazyk už při buildu |
| Zdroj překladů | Ruční nebo externí TMS | Generované AI s plným kontextem komponent |
| Načítání slovníků | Načtení nebo import překladových souborů za běhu | Bez samostatného načítání – překlady jsou součástí bundlu |
Build pipeline#
Analýza AST
Compiler pomocí Babel převede váš React kód do abstraktního syntaktického stromu. Pak identifikuje překládatelný obsah: textové uzly, řetězcové atributy (alt, aria-label, placeholder) a šablonové výrazy.
Extrakce obsahu
Každý překládatelný řetězec dostane stabilní identifikátor založený na hashi. Compiler zachovává kontext komponent, strukturu rich textu (vnořené <strong>, <em>) i zástupné symboly pro interpolaci. Metadata se ukládají do .lingo/metadata.json.
Generování překladů
Ve vývoji pseudopřekladač okamžitě generuje falešné překlady (bez volání API). V CI nakonfigurovaný poskytovatel LLM vytváří skutečné překlady s plným kontextem komponent – umístěním souboru, okolními prvky a sémantikou interpolace. Překládají se jen nové nebo změněné řetězce – Compiler využívá hashování obsahu, aby nezměněné řetězce přeskočil.
Vkládání do kódu
Do JSX se vkládá vyhledávání překladů. Compiler pro každý jazyk přidává lehká lookup volání založená na hashi vůči vloženému slovníku. Zdrojový kód se nikdy neupravuje.
Optimalizace bundlu
Vytvářejí se bundly pro každý jazyk. Zahrnuté jsou jen překlady, které daná komponenta skutečně používá. Odstranění nepoužívaného kódu a tree-shaking udržují bundly co nejmenší.
Podporované frameworky#
| Framework | Integrace |
|---|---|
| Next.js (App Router) | Konfigurační wrapper withLingo() – podporuje RSC, Webpack a Turbopack |
| Vite + React | lingoCompilerPlugin – Vite plugin s plnou podporou HMR |
Klíčové funkce#
- Ve výchozím nastavení automaticky – veškerý text v JSX se překládá, pokud nezvolíte režim direktiv
'use i18n' - Bez načítání slovníků – překlady jsou vložené do bundlů pro každý jazyk, bez samostatných souborů k načítání
- Build režimy – pseudopřekladač v dev, skutečné překlady v CI, pouze cache v produkci
- Ruční přepsání – atribut
data-lingo-overridepro přesné řízení - Vlastní resolvery jazyka – implementujte vlastní detekci a persistenci jazyka
- Automatická pluralizace – podpora ICU MessageFormat pro tvary množného čísla
- Vývojářské nástroje – pseudopřekladač a editor překladů přímo v prohlížeči
