Halo semuanya!
Saya baru saja merilis versi keenam dari perpustakaan imaskjs . Setelah setiap rilis utama, menurut saya ini adalah versi terbaru. Perpustakaan berusia lebih dari satu tahun, stabil dan cukup populer di kalangan masyarakat. Apa lagi yang bisa dilakukan di sana dan bahkan pada versi utama? Di semua proyek saya, saya mencoba melakukan tugas sehingga saya tidak kembali ke mereka dalam konteks saat ini. Apa yang bisa berubah di topeng? - Browser tidak mengubah API mereka, javascript sama, tugas bisnis sama - ponsel, kartu, angka. Mengapa Anda tidak bisa berhenti, mengingat-ingat dan tidak lagi menyentuh?
Dari waktu ke waktu, tentu saja, Anda perlu menekannya sehingga proyek itu tampak hidup dan tanggal komit terakhir pada github diperbarui. Saya bukan satu-satunya yang melihatnya ketika saya memilih perpustakaan?
Tapi sepertinya tidak ada alasan serius untuk perubahan itu. Sebenarnya ada. Dalam kasus saya dengan topeng, perubahan utama menyangkut ekosistem javascript: bahasa itu sendiri telah lama melampaui peramban dan menyebar ke tempat alat asli digunakan sebelumnya, yang memaksakan persyaratan baru pada alat. Kerangka UI baru juga muncul yang membutuhkan beberapa adaptasi. Meskipun menurut saya antarmuka perpustakaan dibuat sesederhana dan senyaman mungkin, oleh karena itu ada dan tidak dapat menjadi masalah dengan integrasi dengan apa pun, dalam hal apa pun di browser. Tapi kemudian saya mulai bekerja pada sebuah plugin untuk React Native.
Kami naik ke pipa di React Native
Sejauh yang saya tahu, React Native adalah proyek skala besar yang telah hidup untuk waktu yang sangat lama, dan bahkan menggunakan orang-orang yang serius di prod. Beberapa tahun yang lalu, saya mencoba menggunakan RN pada satu proyek uji kecil, dan itu adalah akhir dari latihan saya - saya pergi ke web. Sekitar waktu yang sama, saya membuat plug-in untuk topeng di RN dan berusaha keras untuk membuatnya berfungsi seperti yang saya inginkan, tetapi tidak bisa. Saya menemukan beberapa bug di repositori RN pada pemrosesan input dan posisi kursor, tenang dan memutuskan untuk menunggu sebentar.
Lebih dari satu tahun telah berlalu dan saya pikir sudah waktunya untuk kembali dan sudah menyingkirkan plugin. Ternyata praktis tidak ada yang berubah selama ini: bug lama ditutup karena kurangnya aktivitas, antarmuka pemosisian kursor telah berubah sedikit, dan hanya itu. Saya ingin berpikir bahwa masalahnya ada di perpustakaan saya, saya akan memperbaiki semuanya dan itu akan berhasil. Sayangnya, menurut saya topeng sudah memiliki antarmuka yang sesederhana mungkin - sebagian besar logikananya dibawa ke kernel, untuk memproses input Anda hanya perlu dua status - kursor dan nilai sebelum dan sesudah perubahan. Menurut saya tidak ada tempat yang lebih mudah, tapi saya masih belum bisa mendapatkan RN.
Salah satu kesulitannya adalah bahwa urutan peristiwa input di RN berbeda dari browser. Misalnya, di browser untuk acara masukan , kursor sudah ada di posisi baru, tetapi di RN ada acara terpisah di Seleksi Perubahan yang terjadi setelah mengubah nilainya, dan hanya di iOS, di Android, sebaliknya. Dan poin kedua - Anda tidak dapat mengubah nilai di bidang di bidang dalam pengendali event dari peristiwa perubahan nilai pada RN, hal yang sama dengan posisi kursor. Oleh karena itu, keterlambatan perubahan tidak dapat dihindari, dan akibatnya, teks dan kursor menyentak. Bug ini sudah berusia hampir tiga tahun, jadi saya tidak melihat alasan untuk menunggu lebih lama lagi - saya meluncurkan plugin apa adanya, tetapi saya tidak merekomendasikan untuk menggunakannya. Sebaliknya, saya melakukannya untuk menarik perhatian masyarakat: mungkin bug akan diperbaiki di RN, atau mungkin seseorang akan menghubungkan pemrosesan acara dalam kode asli ke IMask, di mana masalah seperti itu dapat dihindari.
Pipa sendiri
Sekarang sedikit tentang yang baik. Topeng sekarang dapat digunakan untuk memformat dan mengubah:
const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, });
Anda dapat menggunakan kembali satu mask untuk bekerja dengan input dan untuk memformat, misalnya pada formulir:
Di plugin Angular, untuk kenyamanan, dibungkus dengan Pipa lokal.
Sekali lagi, sesederhana dan sefungsional mungkin, implementasi 5 baris kode secara harfiah merupakan indikator arsitektur yang sukses. Namun demikian, 5 baris kode telah ditambahkan lebih dari sekali, dan ukuran seluruh pustaka telah berjalan dengan serius.
Modul ESM
Beberapa tahun yang lalu, ketika topeng itu sekitar 30 Kb, saya mengatakan kepada semua orang bahwa untuk topeng ini tidak banyak. Sekarang hampir 60 Kb dan bahkan rasanya agak jauh bagi saya. Ada satu solusi sederhana - gzip ambil saja yang kamu butuhkan. Idealnya, pengumpul harus secara otomatis menganalisis dependensi dan membuang semua yang tidak digunakan. Meskipun modul ESM telah di topeng untuk waktu yang lama, treeshaking hampir tidak berhasil, karena referensi ke entitas internal berada di objek IMask root. Ini dilakukan karena adanya ketergantungan siklik di dalam topeng, dan juga karena saya ingin topeng dapat mengimpor kedua objek root atau secara terpisah di bagian-bagian. Misalnya, ini dilakukan di Bereaksi:
import { Component } from 'react'; import React from 'react'; React.Component === Component;
Di IMask 6.0, tautan keras antar modul terputus dan memungkinkan untuk mengimpor masing-masing modul:
Dalam hal ini, Anda dapat terus menggunakan pendekatan lama dan tidak ada yang akan rusak, tetapi melakukan treeshaking juga tidak akan berhasil.
Sebagai permulaan: versi baru memiliki dukungan untuk komponen yang dapat diedit dan komponen web! Terima kasih kepada komunitas untuk umpan balik dan permintaan kumpulan.
Dengan setiap rilis baru, bug menjadi lebih tipis, berharap lebih eksotis. Di sini lagi, tampaknya masalah ini bergerak ke akhir. Dan sepertinya itu akan menjadi tak terbatas sampai proyek mati atau sesuatu yang lebih baik muncul. Atau mungkin platform akan berubah dan antarmuka baru akan muncul. Namun ternyata, browser sekarang berada di suatu tempat antara pemuda dan kedewasaan, dan setelah kematian teks-mask , tidak ada alternatif fungsional untuk IMask, dan saya masih dapat menemukan setetes waktu pada open source, jadi harus ada topeng.
Semua kesuksesan dan inspirasi di Tahun Baru, dengan kedatangan!