Hola a todos!
Solo quedan unos pocos días hasta el año nuevo. Encontré mi lista de casos que iba a hacer en 2019, entre ellos resultó escribir un artículo sobre Habr. Es hora de caer en el auto saliente).
Haré una reserva de inmediato, PR mi bicicleta, si no te gusta esto, entonces puedes saltarte el artículo de forma segura.
¿Qué es la localización?
Mediante la localización en adelante, entenderemos el proceso de adaptación de una aplicación a diferentes idiomas y regiones. La localización no se trata solo de traducir texto. Es más agradable para los usuarios ver el formato habitual de fechas, valores monetarios, incluso los separadores en números pueden desempeñar un papel.
Motivación
En realidad, ¿por qué necesita hacer la localización de la aplicación? La localización de la aplicación es el notable aumento en la disponibilidad de su interfaz para los usuarios, de lo que se ha hablado ampliamente últimamente. La localización expande el grupo objetivo para el que se dirige su aplicación.
Lo que quería de la biblioteca de localización.
- Soporte de gramática de la UCI
- Formato de fecha
- Formato de número
Que paso
Enlace a GitHub .
Se tomó como base la biblioteca más popular (según el análisis de asteriscos) para la localización de reacción de la aplicación React. Bajo el capó, react-intl usa el paquete intl-messageformat-parser que construye el árbol AST. Según bundlephobia, el analizador ocupa un tamaño significativo. No está escrito a mano, pero usa PEG.js. Escribí el mío para estos fines, que pesa 6 veces menos. Es muy probable que pueda perder un caso, estaré agradecido si alguien me lo cuenta.
Gracias al excelente soporte de la API de internacionalización por parte de los navegadores modernos, el formato de fechas y números se resuelve por sí solo. Todo lo que se necesita es almacenar el idioma actual del usuario en algún lugar para aplicarlo al formato y proporcionar una API más conveniente, en forma de formatSomething(value, options) .
Por lo tanto, el paquete era @ eo-locale / core, que generalmente no está vinculado a ningún marco o biblioteca y puede usarse de manera bastante flexible.
Reaccionar
La versión React es una colección de componentes y ganchos.
Para comenzar a usar eo-locale envuelva la aplicación en el proveedor.
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>
El formateo de números está disponible mediante la representación de propiedades Intl.NumberFormat estándar
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
El formato de las fechas se implementa de manera similar:
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
Todo lo anterior también se puede hacer no a través de los componentes, sino usando el gancho useTranslator :
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
Una de las ventajas importantes sobre otras bibliotecas similares es la capacidad de usar componentes como accesorios. Por ejemplo, tiene un componente estilizado de Money , que muestra el valor en un color, y el signo de moneda en otro y necesita insertar una cantidad en la configuración regional:
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
También existe la capacidad de mostrar valores plurales. Se implementa utilizando 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
Se implementan las mismas características para Preact en el paquete correspondiente.
Algunas características
La biblioteca está completamente escrita en mecanografiado, por lo que las cintas salen de la caja.
No hace mucho tiempo, encontramos el problema de que al localizar los códigos de error que envía el servidor, no había traducciones en el cliente. Para hacer esto, al Proveedor se le ha agregado la capacidad de lanzar el controlador IdMissing, con el que puede registrar este tipo de error.
Conclusión
Realmente espero que alguien encuentre útil la biblioteca. Estaré encantado de sugerencias y críticas saludables. No olvide que incluso si su sitio ahora está enfocado en un solo idioma, esta situación puede cambiar con el tiempo. Establecer apoyo para el multilingüismo por adelantado no requiere mucho tiempo, y todos los textos utilizados en la aplicación serán estructurados.