Olá pessoal!
Faltam apenas alguns dias para o novo ano. Me deparei com a minha lista de casos que eu faria em 2019, entre eles acabou por escrever um artigo sobre Habr. É hora de entrar no carro que sai).
Farei uma reserva imediatamente, PR minha bicicleta, se você não gostar, poderá pular o artigo com segurança.
O que é localização?
Pela localização a seguir, entenderemos o processo de adaptação de um aplicativo para diferentes idiomas e regiões. A localização não se refere apenas à tradução de texto. É mais agradável para os usuários ver o formato usual de datas, valores monetários e até separadores de números podem desempenhar um papel.
Motivação
Na verdade, por que você precisa fazer a localização do aplicativo? A localização do aplicativo é o aumento mais notório na disponibilidade de sua interface para os usuários, o que tem sido amplamente comentado recentemente. A localização expande o grupo de destino para o qual seu aplicativo está direcionado.
O que eu queria da biblioteca de localização
- Suporte de gramática na UTI
- Formatação de data
- Formatação numérica
O que aconteceu
Link para o GitHub .
Foi baseado na biblioteca mais popular (de acordo com a análise de asterisco) para localização reat-intl do aplicativo React. Sob o capô, o react-intl usa o pacote intl-messageformat-parser que cria a árvore AST. De acordo com a bundlephobia, um tamanho significativo é o que o analisador leva. Não foi escrito à mão, mas usa o PEG.js. Eu escrevi o meu para esses fins, que pesa 6 vezes menos. É muito provável que eu perca algum caso, ficarei agradecido se alguém me disser.
Graças ao excelente suporte da API de internacionalização pelos navegadores modernos, a formatação de datas e números é resolvida por si só. Tudo o que é necessário é armazenar o idioma atual do usuário em algum lugar para aplicá-lo à formatação e fornecer uma API mais conveniente, na forma de formatSomething(value, options) .
Portanto, o pacote era @ eo-locale / core, que geralmente não está vinculado a nenhuma estrutura ou biblioteca e pode ser usado com bastante flexibilidade.
Reagir
A versão React é uma coleção de componentes e ganchos.
Para começar a usar o eo-locale envolva o aplicativo no provedor.
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider>
A formatação de números está disponível através das propriedades Intl.NumberFormat padrão de proxy
import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00
A formatação de datas é implementada da mesma forma:
import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019
Todas as useTranslator acima também podem ser feitas não através dos componentes, mas usando o gancho useTranslator :
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
Uma das vantagens importantes sobre outras bibliotecas semelhantes é a capacidade de usar componentes como acessórios. Por exemplo, você tem um componente estilizado do Money , que mostra o valor em uma cor e o sinal da moeda em outra, e você precisa inserir uma quantia no código do idioma:
import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00
Também há a capacidade de exibir valores plurais. É implementado usando Intl.PluralRules .
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items
Preact
Todos os mesmos recursos são implementados para o Preact no pacote correspondente.
Alguns recursos
A biblioteca está totalmente escrita em Texto Dactilografado, portanto, a introdução é imediata.
Há pouco tempo, encontramos o problema de que, ao localizar os códigos de erro que o servidor envia, não havia traduções no cliente. Para fazer isso, foi adicionado ao Provedor a capacidade de acionar o manipulador onIdMissing, com o qual você pode registrar esse tipo de erro.
Conclusão
Eu realmente espero que alguém ache a biblioteca útil. Ficarei feliz em sugestões e críticas saudáveis. Não esqueça que, mesmo que seu site agora esteja focado em apenas um idioma, essa situação poderá mudar com o tempo. Estabelecer previamente o apoio ao multilinguismo não requer muito tempo, e todos os textos usados no aplicativo serão estruturados.