Olá pessoal!
Acabei de lançar a sexta versão da biblioteca imaskjs . Após cada grande lançamento, parece-me que esta é a versão mais recente. A biblioteca tem mais de um ano de idade, é estável e bastante popular entre a comunidade. O que mais pode ser feito lá e até na versão principal? Em todos os meus projetos, tento executar tarefas para não retornar a elas no contexto atual. O que pode mudar na máscara? - Os navegadores não alteram suas APIs, o javascript é o mesmo, as tarefas de negócios são as mesmas - telefones, cartões, números. Por que você não pode parar, trazer à mente e não tocar mais?
De tempos em tempos, é claro, você precisa pressioná-lo para que pareça que o projeto esteja ativo e que a data do último commit no github seja atualizada. Eu não sou o único olhando para ela quando escolho uma biblioteca?
Mas parece não haver motivo sério para as mudanças. Na verdade existe. No meu caso com a máscara, as principais mudanças dizem respeito ao ecossistema javascript: a própria linguagem já ultrapassou o navegador e se espalhou para onde as ferramentas nativas eram usadas anteriormente, o que impõe novos requisitos às ferramentas. Novas estruturas de interface do usuário também estão surgindo e exigem alguma adaptação. Embora me pareça que a interface da biblioteca seja feita da maneira mais simples e conveniente possível, há e não pode haver um problema com a integração sem nada, em nenhum caso no navegador. Mas então comecei a trabalhar em um plugin para o React Native.
Subimos no tubo em React Native
Até onde eu sei, o React Native é um projeto de larga escala que vive há muito tempo e até usa pessoas sérias no prod. Há alguns anos, tentei usar o RN em um pequeno projeto de teste, e esse foi o fim da minha prática - fui para a web. Na mesma época, fiz um plug-in para a máscara no RN e tentei arduamente fazê-la funcionar como eu gostaria, mas não consegui. Encontrei vários bugs no repositório RN no processamento de entrada e posicionamento do cursor, acalmei-me e decidi esperar um pouco.
Mais de um ano se passou e eu pensei que era hora de voltar e já me livrar do plugin. Aconteceu que praticamente nada mudou durante esse período: os bugs antigos foram fechados devido à falta de atividade, a interface de posicionamento do cursor mudou um pouco, e é tudo. Gostaria de pensar que o problema está na minha biblioteca, vou consertar tudo e funcionará. Infelizmente, na minha opinião, a máscara já possui a interface mais simples possível - a maior parte da lógica é levada ao kernel, apenas dois estados são necessários para processar a entrada - o cursor e o valor antes e depois da alteração. Na minha opinião, não há lugar mais fácil, mas ainda não consegui o RN.
Uma das dificuldades é que a sequência de eventos de entrada no RN é diferente do navegador. Por exemplo, no navegador para o evento de entrada , o cursor já está na nova posição, mas no RN há um evento onSelectionChange separado que ocorre após a alteração do valor, e somente no iOS, no Android, pelo contrário. E o segundo ponto: você não pode alterar o valor no campo no manipulador de eventos do evento de alteração de valor no RN, a mesma coisa com o posicionamento do cursor. Portanto, atrasos na mudança são inevitáveis e, como resultado, o movimento do texto e do cursor. Esses bugs já têm quase três anos de idade, então não vejo motivo para esperar mais - estendi o plug-in como está, mas não recomendo usá-lo. Em vez disso, fiz isso para atrair a atenção do público: talvez os erros sejam corrigidos no RN ou talvez alguém conecte o processamento de eventos no IMask ao código nativo, onde esses problemas podem ser evitados.
Tubo próprio
Agora um pouco sobre o bem. A máscara agora pode ser usada para formatar e converter:
const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, });
Você pode reutilizar uma máscara para trabalhar com entrada e formatação, por exemplo, em um formulário:
No plug-in Angular, por conveniência, envolto em um Pipe local.
Novamente, o mais simples e funcional possível, a implementação de literalmente 5 linhas de código é, a propósito, um indicador de arquitetura bem-sucedida. No entanto, cinco linhas de código foram adicionadas mais de uma vez e o tamanho de toda a biblioteca já foi sério.
Módulos ESM
Alguns anos atrás, quando a máscara tinha cerca de 30 Kb, eu disse a todos que para uma máscara isso não é muito. Agora são quase 60 Kb e até me pareceu um pouco demais. Existe uma solução simples - gzip pegue apenas o que você precisa. Idealmente, o coletor deve analisar automaticamente as dependências e jogar fora tudo o que não é usado. Embora os módulos ESM estejam na máscara há um longo tempo, a trepidação de árvores quase não funcionou, porque referências a entidades internas estavam no objeto raiz da IMask. Isso foi feito devido à presença de dependências cíclicas dentro da máscara e também porque eu queria que a máscara fosse capaz de importar um objeto raiz ou separadamente em partes. Por exemplo, isso é feito no React:
import { Component } from 'react'; import React from 'react'; React.Component === Component;
No IMask 6.0, o vínculo físico entre os módulos foi interrompido e tornou-se possível importar módulos individuais:
Nesse caso, você pode continuar usando a abordagem antiga e nada será interrompido, mas a troca de árvores também não funcionará.
Bem, para iniciantes: a nova versão oferece suporte a componentes editáveis por conteúdo e pela Web! Obrigado à comunidade pelos comentários e solicitações de pool.
A cada nova versão, os bugs estão se tornando mais finos, desejam mais exóticos. Aqui, novamente, parece que o assunto está chegando ao fim. E assim parece que será infinito até que o projeto morra ou algo melhor apareça. Ou talvez a plataforma mude e novas interfaces apareçam. Mas, aparentemente, os navegadores agora estão entre a juventude e a maturidade, e após a morte da máscara de texto , não há alternativas funcionais para o IMask, e ainda posso encontrar uma queda de tempo no código aberto, portanto, deve haver uma máscara.
Todo o sucesso e inspiração no Ano Novo, com a chegada!