Hola a todos!
Acabo de lanzar la sexta versión de la biblioteca imaskjs . Después de cada lanzamiento importante, me parece que esta es la última versión. La biblioteca tiene más de un año, es estable y bastante popular entre la comunidad. ¿Qué más se puede hacer allí e incluso en la versión principal? En todos mis proyectos, trato de hacer tareas para no volver a ellas en el contexto actual. ¿Qué puede cambiar en la máscara? - Los navegadores no cambian sus API, javascript es el mismo, las tareas comerciales son las mismas: teléfonos, tarjetas, números. ¿Por qué no puedes parar, recordar y no tocar más?
De vez en cuando, por supuesto, debe presionarlo hacia abajo para que parezca que el proyecto está vivo y la fecha de la última confirmación en github se actualiza. ¿No soy el único que la mira cuando elijo una biblioteca?
Pero parece que no hay una razón seria para los cambios. En realidad lo hay. En mi caso con la máscara, los principales cambios se refieren al ecosistema javascript: el lenguaje en sí mismo ha ido mucho más allá del navegador y se extiende hasta donde se usaron las herramientas nativas antes, lo que impone nuevos requisitos para las herramientas. También están surgiendo nuevos marcos de interfaz de usuario que requieren cierta adaptación. Aunque me parece que la interfaz de la biblioteca está hecha de la manera más simple y conveniente posible, por lo tanto, existe y no puede haber un problema con la integración sin nada, en cualquier caso en el navegador. Pero luego comencé a trabajar en un complemento para React Native.
Subimos a la tubería en React Native
Hasta donde yo sé, React Native es un proyecto a gran escala que ha estado viviendo durante mucho tiempo, e incluso utiliza personas serias en la producción. Hace un par de años, intenté usar RN en un pequeño proyecto de prueba, y ese fue el final de mi práctica: fui a la web. Casi al mismo tiempo, hice un complemento para la máscara en RN e intenté con todas mis fuerzas hacerlo funcionar como quisiera, pero no pude. Encontré varios errores en el repositorio RN sobre el procesamiento de entrada y el posicionamiento del cursor, me tranquilicé y decidí esperar un poco.
Ha pasado más de un año y pensé que era hora de volver y ya deshacerme del complemento. Resultó que prácticamente nada ha cambiado durante este tiempo: los errores antiguos se cerraron debido a la falta de actividad, la interfaz de posicionamiento del cursor ha cambiado un poco, y eso es todo. Me gustaría pensar que el problema está en mi biblioteca, arreglaré todo y funcionará. Por desgracia, en mi opinión, la máscara ya tiene la interfaz más simple posible: la mayor parte de la lógica se saca al núcleo, solo se necesitan dos estados para procesar la entrada: el cursor y el valor antes y después del cambio. En mi opinión, no hay ningún lugar más fácil, pero todavía no pude obtener RN.
Una de las dificultades es que la secuencia de eventos de entrada en RN es diferente del navegador. Por ejemplo, en el navegador para el evento de entrada , el cursor ya está en la nueva posición, pero en RN hay un evento onSelectionChange separado que ocurre después de cambiar el valor, y solo en iOS, en Android, viceversa. Y el segundo punto: no puede cambiar el valor en el campo en el campo en el controlador de eventos del evento de cambio de valor en RN, lo mismo con el posicionamiento del cursor. Por lo tanto, los retrasos en el cambio son inevitables y, como resultado, el texto y el cursor se contraen. Estos errores ya tienen casi tres años, así que no veo ninguna razón para esperar más. Lancé el complemento tal cual, pero no recomiendo usarlo. Más bien, lo hice para atraer la atención del público: tal vez los errores se solucionarán en RN, o tal vez alguien conecte el procesamiento de eventos en IMask al código nativo, donde se pueden evitar dichos problemas.
Tubo propio
Ahora un poco sobre lo bueno. La máscara ahora se puede usar para formatear y convertir:
const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, });
Puede reutilizar una máscara para trabajar con entrada y para formatear, por ejemplo en un formulario:
En el complemento Angular, por conveniencia, envuelto en una tubería local.
Una vez más, lo más simple y funcional posible, la implementación de literalmente 5 líneas de código es, por cierto, un indicador de una arquitectura exitosa. Sin embargo, se han agregado 5 líneas de código más de una vez, y el tamaño de toda la biblioteca ya se ha ejecutado seriamente.
Módulos de ESM
Hace un par de años, cuando la máscara tenía aproximadamente 30 Kb, les dije a todos que para una máscara esto no era mucho. Ahora tiene casi 60 Kb e incluso me pareció un poco demasiado. Hay una solución simple: gzip toma solo lo que necesitas. Idealmente, el recopilador debería analizar automáticamente las dependencias y tirar todo lo que no se utiliza. Aunque los módulos de ESM han estado en la máscara durante mucho tiempo, la sacudida de árboles casi no funcionó, porque referencias a entidades internas estaban en el objeto raíz IMask. Esto se hizo debido a la presencia de dependencias cíclicas dentro de la máscara, y también porque quería que la máscara pudiera importar un objeto raíz o por separado en partes. Por ejemplo, esto se hace en React:
import { Component } from 'react'; import React from 'react'; React.Component === Component;
En IMask 6.0, el enlace duro entre los módulos se rompió y fue posible importar módulos individuales:
En este caso, puede continuar utilizando el enfoque anterior y nada se romperá, pero el movimiento de árboles tampoco funcionará.
Bueno, para empezar: ¡la nueva versión tiene soporte para componentes contentables y web! Gracias a la comunidad por los comentarios y las solicitudes de grupo.
Con cada nueva versión, los errores se vuelven más delgados, los deseos más exóticos. Aquí de nuevo, parece que el asunto está llegando a su fin. Y entonces parece que será infinito hasta que el proyecto muera o aparezca algo mejor. O tal vez la plataforma cambiará y aparecerán nuevas interfaces. Pero aparentemente, los navegadores ahora están en algún lugar entre la juventud y la madurez, y después de la muerte de text-mask , no hay alternativas funcionales para IMask, y todavía puedo encontrar una caída de tiempo en código abierto, por lo que debería haber una máscara.
¡Todo el éxito y la inspiración en el Año Nuevo, con la llegada!