Bonjour à tous!
Il ne reste que quelques jours avant la nouvelle année. Je suis tombé sur ma liste de cas que j'allais faire en 2019, parmi lesquels il s'est avéré écrire un article sur Habr. Il est temps de descendre dans la voiture sortante).
Je ferai une réservation tout de suite, PR mon vélo, si vous n’aimez pas cela, vous pouvez sauter l’article en toute sécurité.
Qu'est-ce que la localisation?
Par localisation ci-après, nous comprendrons le processus d'adaptation d'une application à différentes langues et régions. La localisation ne consiste pas seulement à traduire du texte. Il est plus agréable pour les utilisateurs de voir le format habituel des dates, les valeurs monétaires, même les séparateurs en nombre peuvent jouer un rôle.
La motivation
En fait, pourquoi avez-vous besoin de localiser l'application? La localisation de l'application est l'augmentation notoire de la disponibilité de votre interface pour les utilisateurs, dont on a beaucoup parlé récemment. La localisation étend le groupe cible pour lequel votre application est ciblée.
Ce que je voulais de la bibliothèque de localisation
- Prise en charge de la grammaire ICU
- Formatage de la date
- Formatage des nombres
Qu'est-il arrivé?
Lien vers GitHub .
La bibliothèque la plus populaire (selon l'analyse de l'astérisque) pour la localisation de React de l'application React a été prise comme base. Sous le capot, react-intl utilise le package intl-messageformat-parser qui construit l'arborescence AST. Selon bundlephobia, une taille importante est ce que prend l'analyseur. Il n'est pas écrit à la main, mais utilise PEG.js. J'ai écrit le mien à ces fins, qui pèse 6 fois moins. Il est très probable que je puisse rater un cas, je serai reconnaissant si quelqu'un me le dit.
Grâce à l'excellent support de l' API Internationalisation par les navigateurs modernes, le formatage des dates et des nombres est résolu par lui-même. Tout ce qui est nécessaire est de stocker la langue actuelle de l'utilisateur quelque part afin de l'appliquer au formatage et de fournir une API plus pratique, sous la forme de formatSomething(value, options) .
Ainsi, le package était @ eo-locale / core, qui n'est généralement lié à aucun framework ou bibliothèque et peut être utilisé de manière assez flexible.
Réagir
La version React est une collection de composants et de crochets.
Pour commencer à utiliser eo-locale encapsulez l'application dans Provider.
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>
La mise en forme des nombres est disponible via les propriétés standard de proxy Intl.NumberFormat
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
Le formatage des dates est implémenté de manière similaire:
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
Tout ce qui précède peut également être fait non pas via les composants, mais en utilisant le hook useTranslator :
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
L'un des avantages importants par rapport à d'autres bibliothèques similaires est la possibilité d'utiliser des composants comme accessoires. Par exemple, vous avez un composant stylisé de Money , qui affiche la valeur dans une couleur et le signe monétaire dans une autre et vous devez insérer un certain montant dans les paramètres régionaux:
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
Il est également possible d'afficher plusieurs valeurs. Il est implémenté à l'aide de 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
Toutes les mêmes fonctionnalités sont implémentées pour Preact dans le package correspondant.
Quelques fonctionnalités
La bibliothèque est entièrement écrite en Typescript, donc le taiping sort de la boîte.
Il n'y a pas si longtemps, nous avons rencontré le problème lors de la localisation des codes d'erreur envoyés par le serveur, il n'y avait pas de traductions sur le client. Pour ce faire, le fournisseur a été ajouté la possibilité de lancer le gestionnaire onIdMissing, avec lequel vous pouvez enregistrer ce type d'erreur.
Conclusion
J'espère vraiment que quelqu'un trouvera la bibliothèque utile. Je serai heureux des suggestions et des critiques saines. N'oubliez pas que même si votre site est désormais axé sur une seule langue, cette situation peut changer avec le temps. Définir à l'avance le support du multilinguisme ne prend pas beaucoup de temps et tous les textes utilisés dans l'application seront structurés.