Překlad frontendu ve Vue

[hknmtt]

Mam FE napisany vo Vue a riesim aktualne preklad. Mam svoj vlastny system ktory riesi preklad, ale v principe je velmi podobny Vue i18n, akurat ze taha data cez api z backendu namiesto velkeho jsonu.

Co je ale univerzalny problem je preklad blokov textu, alebo ak text obsahuje komponenty.

Uz len taka blbost ako:

Kód: [Vybrat]

<p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
Robi problem, kedze obsahuje dynamicky komponent. Na vyriesenie by som musel routu predgenerovat a dodat ako string, alebo natvrdo zaclenit do prekladu ako relativnu cestu. Co je v pohode, pokial sa neriesia parametre(napriklad id aktualneho uzivatela). Samozrejme to znemozni jednoducho zmenit cestu pre rotuy bez naslednej aktualizacie vsetkych prekladov ktore maju cestu natvrdo v sebe. V praxi teda nepouzitelne a musel by som robit string formating nahradzanim obsahu v stringoch dynamickymi argumentmi(co je ok a bezna prax).

Dalej su tu bloky textu kedy nie len ze mozu obsahovat dalsie komponenty, ako priklad hore, ale aj html(popravde aj priklad hore), takze renderovanie prekladu musi byt riesene cez v-html, lenze tam je zase problem ze rodic nie vzdy musi byt div, takze preto element musi byt konfigurovatelny. Pripadne sa to da riesit cez vue direktivu ale v principe je to jedno, lebo preklad samotny musi obsahovat html, co je niekedy ok ale inokedy zase to html moze byt renderovane komponentou, ktora aj casto bude mat nejake atributy a to je nemozne riesit v tomto kontexte.

Napriklad:

Kód: [Vybrat]

<div>
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
  <FooComponent class="foo bar car" :some="'value'" :and="5" :current-user="getUid()" />
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
</div>

Pretoze je jedna vec spravit string formating/replacement ak ide o nahradu "foo %" na "foo 5", ale riesit komponenty skratka mozne nie je, kedze su to dynamicke objekty ktore vratia dynamicke(eventy, reaktory..) html az ked ich Vue vyrenderuje. Cize toto je absolutne neschodne riesenie.

Je mozne velke bloky rozkuskovat na jednotlive vety a to sa da ale zase mi pride ze to je take skriabanie sa lavou rukou za pravym uchom, ako sa hovori.

Takze zatial som nejak neni spokojny so ziadnym riesenim a zaujima ma, ze ako ludia riesia tento problem v praxi?

Prakticky akykolvek moderny JS framework asi ma totozny problem, React, Vue,.. je to jedno, rovnaky  princip problemu.

[Reklama]

[BlackMagic]

S žádnými JS frameworky sice nedělám, ale překladům různých systémů a aplikací se věnuji už hodně dlouho a funguje to asi takto:

• delší texty se kouskují do vět běžně
• do textu k překladu patří jen to, co se má skutečně přeložit, vše ostatní se nahrazuje tagy a ty se pak injektují pomocí jako parametry v další funkci (sprintf apod.) nebo v překladové funkci (Vue i18n má k tomuto účelu $t).
• HTML tagy do překládaného textu nepatří vůbec, od toho jsou šablonovací systémy

[hknmtt]

1. jasne, nie je problem.
2. to je prave v tychto modernych js frameworkoch nemozne z dovodov ktore som jasne popisal
3. to iste co bod 2

[mbohal]

V Reactu používame https://react.i18next.com/latest/trans-component, předpokládám, že něco na podobném principu bude k dispozici i pro Vue.