Hallo allerseits!
Ich habe gerade die sechste Version von imaskjs library veröffentlicht. Nach jeder Hauptversion scheint mir dies die neueste Version zu sein. Die Bibliothek ist mehr als ein Jahr alt, stabil und in der Gemeinde sehr beliebt. Was kann man dort und auch in der Hauptversion noch tun? In all meinen Projekten versuche ich, Aufgaben zu erledigen, damit ich im aktuellen Kontext nicht zu ihnen zurückkehre. Was kann sich in der Maske ändern? - Browser ändern ihre APIs nicht, Javascript ist gleich, Geschäftsaufgaben sind gleich - Telefone, Karten, Nummern. Warum kannst du nicht aufhören, dich erinnern und nicht mehr berühren?
Natürlich müssen Sie es von Zeit zu Zeit nach unten drücken, damit das Projekt anscheinend am Leben ist und das Datum des letzten Commits auf Github aktualisiert wird. Ich bin nicht die einzige, die sie ansieht, wenn ich eine Bibliothek auswähle?
Es scheint jedoch keinen ernsthaften Grund für die Änderungen zu geben. Eigentlich gibt es. In meinem Fall mit der Maske betreffen die wichtigsten Änderungen das Javascript-Ökosystem: Die Sprache selbst ist längst über den Browser hinausgegangen und verbreitet sich dort, wo zuvor native Tools verwendet wurden, was neue Anforderungen an die Tools stellt. Es entstehen auch neue UI-Frameworks, die angepasst werden müssen. Obwohl mir die Oberfläche der Bibliothek so einfach und bequem wie möglich zu sein scheint, gibt es und kann es keine Probleme mit der Integration von irgendetwas geben, auf jeden Fall im Browser. Aber dann habe ich angefangen an einem Plugin für React Native zu arbeiten.
Wir steigen auf React Native in die Pipe
Soweit ich weiß, handelt es sich bei React Native um ein großes Projekt, das sehr lange gelebt hat und bei dem sogar ernsthafte Leute zum Einsatz kommen. Vor ein paar Jahren habe ich versucht, RN in einem kleinen Testprojekt zu verwenden, und das war das Ende meiner Übung - ich bin ins Internet gegangen. Ungefähr zur gleichen Zeit habe ich ein Plug-In für die Maske auf RN erstellt und mich sehr bemüht, dass es so funktioniert, wie ich es möchte, aber nicht konnte. Ich habe einige Fehler im RN-Repository bei der Verarbeitung von Eingaben und der Cursorpositionierung gefunden, mich beruhigt und beschlossen, ein bisschen zu warten.
Mehr als ein Jahr ist vergangen und ich dachte, es wäre Zeit zurückzukehren und das Plugin bereits loszuwerden. Es stellte sich heraus, dass sich in dieser Zeit praktisch nichts geändert hat: Die alten Bugs wurden wegen mangelnder Aktivität geschlossen, die Cursorpositionierungsoberfläche hat sich ein wenig geändert, und das ist alles. Ich würde gerne denken, dass das Problem in meiner Bibliothek liegt, ich werde alles reparieren und es wird funktionieren. Leider hat die Maske meiner Meinung nach bereits die einfachste Schnittstelle - der größte Teil der Logik wird in den Kernel übernommen, für die Verarbeitung der Eingabe werden nur zwei Zustände benötigt - der Cursor und der Wert vor und nach der Änderung. Meiner Meinung nach ist es nirgendwo einfacher, aber ich konnte immer noch keine RN bekommen.
Eine der Schwierigkeiten besteht darin, dass sich die Reihenfolge der Eingabeereignisse in RN von der im Browser unterscheidet. Beispielsweise befindet sich der Cursor im Browser für das Eingabeereignis bereits an der neuen Position, aber in RN gibt es ein separates onSelectionChange- Ereignis, das nach dem Ändern des Werts auftritt, und im Gegensatz dazu nur unter iOS und Android. Und der zweite Punkt: Sie können den Wert im Feld im Ereignishandler der Wertänderung auf RN nicht ändern, genau wie bei der Cursorpositionierung. Daher sind Verzögerungen bei der Änderung unvermeidlich und infolgedessen ruckeln der Text und der Cursor. Diese Bugs sind bereits fast drei Jahre alt, daher sehe ich keinen Grund, länger zu warten. Ich habe das Plugin so wie es ist herausgebracht, aber ich rate davon ab, es zu verwenden. Eher habe ich es getan, um die Aufmerksamkeit der Gesellschaft auf sich zu ziehen: Vielleicht werden Fehler in RN behoben, oder vielleicht verbindet jemand die Ereignisverarbeitung in nativem Code mit IMask, wo solche Probleme vermieden werden können.
Eigene Pfeife
Nun ein wenig über das Gute. Die Maske kann nun zum Formatieren und Konvertieren verwendet werden:
const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, });
Sie können eine Maske zum Arbeiten mit Eingaben und zum Formatieren wiederverwenden, z. B. in einem Formular:
Im Angular-Plugin, der Einfachheit halber in einer lokalen Pipe verpackt.
Auch hier ist die Implementierung von buchstäblich 5 Codezeilen ein Indikator für erfolgreiche Architektur, und zwar so einfach und funktional wie möglich. Trotzdem wurden 5 Codezeilen mehr als einmal hinzugefügt, und die Größe der gesamten Bibliothek ist bereits sehr ernst.
ESM-Module
Vor ein paar Jahren, als die Maske ungefähr 30 Kb groß war, sagte ich allen, dass dies für eine Maske nicht viel ist. Jetzt ist es fast 60 Kb und selbst mir kam es ein bisschen viel vor. Es gibt eine einfache Lösung - gzip nimm nur was du brauchst. Im Idealfall sollte der Kollektor die Abhängigkeiten automatisch analysieren und alles verwerfen, was nicht verwendet wird. Obwohl ESM-Module schon lange in der Maske sind, hat das Treeshaking fast nicht funktioniert, weil Verweise auf interne Entitäten befanden sich im Stamm-IMask-Objekt. Dies geschah aufgrund des Vorhandenseins von zyklischen Abhängigkeiten in der Maske und auch, weil ich wollte, dass die Maske in der Lage ist, sowohl ein Stammobjekt als auch separat in Teilen zu importieren. Dies geschieht zum Beispiel in React:
import { Component } from 'react'; import React from 'react'; React.Component === Component;
In IMask 6.0 wurde die feste Verbindung zwischen den Modulen unterbrochen und es wurde möglich, einzelne Module zu importieren:
In diesem Fall können Sie den alten Ansatz weiter verwenden, und es wird nichts kaputt gehen, aber das Treeshaking funktioniert auch nicht.
Nun, für den Anfang: Die neue Version unterstützt inhaltsbearbeitbare und Web-Komponenten! Vielen Dank an die Community für das Feedback und die Poolanfragen.
Mit jedem neuen Release werden die Bugs dünner und die Wünsche exotischer. Auch hier scheint die Sache ein Ende zu haben. Und so sieht es so aus, als ob es unendlich sein wird, bis das Projekt stirbt oder etwas Besseres auftaucht. Oder vielleicht ändert sich die Plattform und es erscheinen neue Benutzeroberflächen. Aber anscheinend sind Browser jetzt irgendwo zwischen Jugend und Reife, und nach dem Tod der Textmaske gibt es keine funktionalen Alternativen für IMask, und ich kann immer noch einen Tropfen Zeit auf Open Source finden, also sollte es eine Maske geben.
Alles Erfolg und Inspiration im neuen Jahr, mit dem Kommen!