Bonjour à tous!
Je viens de sortir la sixième version de la bibliothèque imaskjs . Après chaque sortie majeure, il me semble que c'est la dernière version. La bibliothèque a plus d'un an, elle est stable et très appréciée de la communauté. Que peut-on faire d'autre là-bas et même sur la version majeure? Dans tous mes projets, j'essaie de faire des tâches pour ne pas y revenir dans le contexte actuel. Qu'est-ce qui peut changer dans le masque? - Les navigateurs ne changent pas leurs API, javascript est le même, les tâches commerciales sont les mêmes - téléphones, cartes, numéros. Pourquoi ne pouvez-vous pas vous arrêter, vous rappeler et ne plus toucher?
De temps en temps, bien sûr, vous devez le pousser pour qu'il semble que le projet soit vivant et que la date du dernier commit sur github soit mise à jour. Je ne suis pas la seule à la regarder quand je choisis une bibliothèque?
Mais il ne semble pas y avoir de raison sérieuse pour ces changements. En fait, il y en a. Dans mon cas avec le masque, les principaux changements concernent l'écosystème javascript: la langue elle-même a longtemps dépassé le navigateur et se propage là où les outils natifs étaient utilisés auparavant, ce qui impose de nouvelles exigences aux outils. De nouveaux cadres d'interface utilisateur font également leur apparition et nécessitent une certaine adaptation. Bien qu'il me semble que l'interface de la bibliothèque soit aussi simple et pratique que possible, il y a et ne peut donc pas y avoir de problème d'intégration avec rien du tout, en tout cas dans le navigateur. Mais j'ai commencé à travailler sur un plugin pour React Native.
On grimpe dans la pipe sur React Native
Pour autant que je sache, React Native est un projet à grande échelle qui vit depuis très longtemps et utilise même des gens sérieux dans la prod. Il y a quelques années, j'ai essayé d'utiliser RN sur un petit projet de test, et c'était la fin de ma pratique - je suis allé sur le Web. À peu près à la même époque, j'ai créé un plug-in pour le masque sur RN et j'ai essayé de plus en plus de le faire fonctionner comme je le souhaitais, mais je n'ai pas pu. J'ai trouvé plusieurs bogues dans le référentiel RN sur le traitement des entrées et le positionnement du curseur, me suis calmé et j'ai décidé d'attendre un peu.
Plus d'un an s'est écoulé et j'ai pensé qu'il était temps de revenir et de se débarrasser déjà du plugin. Il s'est avéré que pratiquement rien n'a changé pendant cette période: les anciens bugs ont été fermés par manque d'activité, l'interface de positionnement du curseur a un peu changé, et c'est tout. J'aimerais penser que le problème est dans ma bibliothèque, je vais tout réparer et ça va marcher. Hélas, à mon avis, le masque a déjà l'interface la plus simple possible - la majeure partie de la logique est transférée au noyau, seuls deux états sont nécessaires pour traiter l'entrée - le curseur et la valeur avant et après le changement. À mon avis, il n'y a nulle part plus facile, mais je ne pouvais toujours pas obtenir RN.
L'une des difficultés est que la séquence d'événements d'entrée dans RN est différente de celle du navigateur. Par exemple, dans le navigateur de l'événement d' entrée , le curseur est déjà dans la nouvelle position, mais dans RN il y a un événement onSelectionChange distinct qui se produit après avoir changé la valeur, et uniquement sur iOS, sur Android, au contraire. Et le deuxième point - vous ne pouvez pas changer la valeur dans le champ dans le champ dans le gestionnaire d'événements de l'événement de changement de valeur sur RN, de même avec le positionnement du curseur. Par conséquent, les retards de changement sont inévitables et, par conséquent, le texte et le curseur saccadent. Ces bogues ont déjà presque trois ans, donc je ne vois aucune raison d'attendre plus longtemps - j'ai déployé le plugin tel quel, mais je ne recommande pas de l'utiliser. Je l'ai plutôt fait pour attirer l'attention de la société: peut-être que des bugs seront corrigés dans RN, ou peut-être que quelqu'un connectera le traitement des événements en code natif à IMask, où de tels problèmes peuvent être évités.
Propre pipe
Maintenant, parlons un peu du bien. Le masque peut désormais être utilisé pour le formatage et la conversion:
const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, });
Vous pouvez réutiliser un masque pour travailler avec la saisie et pour la mise en forme, par exemple sur un formulaire:
Dans le plugin Angular, pour plus de commodité, enveloppé dans un tuyau local.
Encore une fois, aussi simple et fonctionnelle que possible, l'implémentation de 5 lignes de code est en fait un indicateur d'une architecture réussie. Néanmoins, 5 lignes de code ont été ajoutées plus d'une fois, et la taille de la bibliothèque entière est déjà sérieuse.
Modules ESM
Il y a quelques années, lorsque le masque mesurait environ 30 Ko, j'ai dit à tout le monde que pour un masque, ce n'était pas grand-chose. Maintenant, c'est presque 60 Kb et même cela me semblait un peu trop. Il existe une solution simple - gzip prenez seulement ce dont vous avez besoin. Idéalement, le collecteur devrait analyser automatiquement les dépendances et jeter tout ce qui n'est pas utilisé. Bien que les modules ESM soient dans le masque depuis longtemps, l’arborescence n’a presque pas fonctionné, car les références aux entités internes se trouvaient dans l'objet racine IMask. Cela a été fait en raison de la présence de dépendances cycliques à l'intérieur du masque, et aussi parce que je voulais que le masque puisse importer à la fois un objet racine ou séparément en plusieurs parties. Par exemple, cela se fait dans React:
import { Component } from 'react'; import React from 'react'; React.Component === Component;
Dans IMask 6.0, le lien dur entre les modules était rompu et il est devenu possible d'importer des modules individuels:
Dans ce cas, vous pouvez continuer à utiliser l'ancienne approche et rien ne se cassera, mais le tremblement d'arbre ne fonctionnera pas non plus.
Eh bien, pour commencer: la nouvelle version prend en charge les composants modifiables et Web! Merci à la communauté pour les commentaires et demandes de pool.
Avec chaque nouvelle version, les bugs s'amincissent, les souhaits deviennent plus exotiques. Là encore, il semble que l'affaire se termine. Et il semble donc que ce sera infini jusqu'à ce que le projet meure ou que quelque chose de mieux apparaisse. Ou peut-être que la plateforme changera et que de nouvelles interfaces apparaîtront. Mais apparemment, les navigateurs se situent maintenant entre la jeunesse et la maturité, et après la mort du masque de texte , il n'y a pas d'alternatives fonctionnelles pour IMask, et je peux toujours trouver une goutte de temps sur l'open source, donc il devrait y avoir un masque.
Succès et inspiration pour la nouvelle année, avec l'arrivée!