नया साल IMaskjs 6 - रिएक्टिव नेटिव, पाइप्स, ईएसएम

सभी को नमस्कार!

मैंने अभी इमैस्कज लाइब्रेरी के छठे संस्करण का विमोचन किया । प्रत्येक बड़ी रिलीज के बाद, यह मुझे लगता है कि यह नवीनतम संस्करण है। पुस्तकालय एक वर्ष से अधिक पुराना है, यह समुदाय के बीच स्थिर और काफी लोकप्रिय है। और क्या किया जा सकता है और यहां तक ​​कि प्रमुख संस्करण पर भी? मेरी सभी परियोजनाओं में, मैं कार्य करने की कोशिश करता हूं ताकि मैं वर्तमान संदर्भ में उनके पास वापस न लौटूं। मास्क में क्या बदल सकता है? - ब्राउज़र अपने एपीआई को नहीं बदलते हैं, जावास्क्रिप्ट एक ही है, व्यवसाय कार्य समान हैं - फोन, कार्ड, नंबर। आप क्यों नहीं रोक सकते, दिमाग में लाएं और अब स्पर्श न करें?

समय-समय पर, निश्चित रूप से, आपको इसे नीचे धकेलने की आवश्यकता है ताकि ऐसा लगे कि परियोजना जीवित है और गितुब पर अंतिम प्रतिबद्ध की तारीख अपडेट की गई है। जब मैं पुस्तकालय का चयन करता हूं तो मैं अकेला नहीं होता हूं।

लेकिन परिवर्तनों के लिए कोई गंभीर कारण नहीं लगता है। वास्तव में है। मास्क के साथ मेरे मामले में, मुख्य परिवर्तन जावास्क्रिप्ट पारिस्थितिकी तंत्र की चिंता करता है: भाषा लंबे समय से ब्राउज़र से परे चली गई है और जहां मूल उपकरण पहले उपयोग किए गए थे, वहां फैलता है, जो उपकरणों के लिए नई आवश्यकताओं को लगाता है। नए यूआई फ्रेमवर्क भी उभर रहे हैं जिन्हें कुछ अनुकूलन की आवश्यकता है। यद्यपि यह मुझे प्रतीत होता है कि लाइब्रेरी का इंटरफ़ेस यथासंभव सरल और सुविधाजनक बनाया गया है, इसलिए ब्राउज़र में किसी भी मामले में कुछ भी नहीं के साथ एकीकरण के साथ कोई समस्या नहीं हो सकती है। लेकिन फिर मैंने रिएक्ट नेटिव के लिए एक प्लगइन पर काम करना शुरू कर दिया।

हम रिएक्ट नेटिव पर पाइप में चढ़ते हैं

जहां तक ​​मुझे पता है, रिएक्ट नेटिव एक बड़े पैमाने का प्रोजेक्ट है जो बहुत लंबे समय से रह रहा है, और यहां तक ​​कि गंभीर लोगों को भी ठेस में इस्तेमाल करता है। कुछ साल पहले, मैंने एक छोटे परीक्षण प्रोजेक्ट पर आरएन का उपयोग करने की कोशिश की, और यह मेरे अभ्यास का अंत था - मैं वेब पर गया। लगभग उसी समय, मैंने आरएन पर मास्क के लिए एक प्लग-इन बनाया और इसे बनाने के लिए कड़ी मेहनत और प्रयास किया जैसा कि मैं चाहूंगा, लेकिन नहीं कर सका। मुझे RN रिपॉजिटरी में प्रोसेसिंग इनपुट और कर्सर पोजिशनिंग में कई कीड़े मिले, शांत हुए और थोड़ा इंतजार करने का फैसला किया।

एक वर्ष से अधिक समय बीत चुका है और मुझे लगा कि वापस आने और पहले से ही प्लगइन से छुटकारा पाने का समय आ गया है। यह पता चला कि इस दौरान व्यावहारिक रूप से कुछ भी नहीं बदला गया है: गतिविधि की कमी के कारण पुराने कीड़े बंद हो गए थे, कर्सर पोजिशनिंग इंटरफ़ेस थोड़ा बदल गया है, और यह सब है। मैं यह सोचना चाहूंगा कि समस्या मेरी लाइब्रेरी में है, मैं सब कुछ ठीक कर दूंगा और यह काम करेगा। काश, मेरी राय में, मुखौटा में पहले से ही सबसे सरल इंटरफ़ेस संभव है - अधिकांश तर्क को कर्नेल पर ले जाया जाता है, इनपुट को संसाधित करने के लिए केवल दो राज्यों की आवश्यकता होती है - परिवर्तन से पहले और बाद में कर्सर और मान। मेरी राय में कहीं भी आसान नहीं है, लेकिन मुझे अभी भी आरएन नहीं मिला है।

कठिनाइयों में से एक यह है कि आरएन में इनपुट घटनाओं का क्रम ब्राउज़र से अलग है। उदाहरण के लिए, इनपुट ईवेंट के लिए ब्राउज़र में, कर्सर पहले से ही नई स्थिति में है, लेकिन RN में एक अलग onSelectionChange इवेंट है जो मान बदलने के बाद होता है, और केवल iOS पर, इसके विपरीत एंड्रॉइड पर। और दूसरा बिंदु - आप फ़ील्ड में फ़ील्ड में मान को RN पर मान परिवर्तन ईवेंट के हैंडलर में बदल सकते हैं, वही कर्सर स्थिति के साथ। इसलिए, परिवर्तन में देरी अपरिहार्य है, और परिणामस्वरूप, पाठ और कर्सर मरोड़ते हैं। ये बग पहले से ही लगभग तीन साल पुराने हैं, इसलिए मुझे अब और इंतजार करने का कोई कारण नहीं दिखता है - मैंने प्लग इन को वैसे ही रोल किया है, लेकिन मैं इसका उपयोग करने की सलाह नहीं देता। बल्कि, मैंने इसे जनता का ध्यान आकर्षित करने के लिए किया था: शायद बग्स को आरएन में तय किया जाएगा, या हो सकता है कि कोई व्यक्ति आईएमएस्क में इवेंट प्रोसेसिंग को देशी कोड से जोड़ देगा, जहां ऐसी समस्याओं से बचा जा सकता है।

खुद का पाइप

अब थोड़ा अच्छे के बारे में। अब मास्क का उपयोग स्वरूपण और रूपांतरण के लिए किया जा सकता है:

const numberPipe = IMask.createPipe({ mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); // `numberPipe` -    numberPipe('1'); // "1,00" 

आप इनपुट के साथ काम करने और फ़ॉर्मेटिंग के लिए एक मास्क का पुनः उपयोग कर सकते हैं, उदाहरण के लिए एक फॉर्म पर:

 //     const mask = IMask(el, { mask: Number, scale: 2, thousandsSeparator: ' ', normalizeZeros: true, padFractionalZeros: true, }); //   pipe    , //     IMask.pipe( 1, //  mask.masked, //     IMask.PIPE_TYPE.TYPED, //     IMask.PIPE_TYPE.UNMASKED //     ) // 1.00 

सुविधा के लिए, कोणीय प्लग में, स्थानीय पाइप में लपेटा जाता है।
फिर, जितना संभव हो उतना सरल और कार्यात्मक, कोड की शाब्दिक 5 पंक्तियों का कार्यान्वयन, वैसे, सफल वास्तुकला का एक संकेतक है। फिर भी, कोड की 5 पंक्तियों को एक से अधिक बार जोड़ा गया है, और पूरे पुस्तकालय का आकार पहले से ही गंभीर है।

ईएसएम मॉड्यूल

कुछ साल पहले, जब मुखौटा लगभग 30 केबीएच का था, मैंने सभी को बताया कि मास्क के लिए यह ज्यादा नहीं है। अब यह लगभग 60 केबी हो गया है और यहां तक ​​कि यह मुझे कुछ ज्यादा ही लग रहा था। एक सरल उपाय है - gzip केवल वही लें जो आपको चाहिए। आदर्श रूप से, कलेक्टर को स्वचालित रूप से निर्भरताओं का विश्लेषण करना चाहिए और उन सभी चीजों को फेंक देना चाहिए जो उपयोग नहीं की जाती हैं। हालांकि ईएसएम मॉड्यूल लंबे समय तक मुखौटा में रहे हैं, वृक्षारोपण लगभग काम नहीं किया, क्योंकि आंतरिक संस्थाओं के संदर्भ रूट IMask ऑब्जेक्ट में थे। यह मुखौटा के अंदर चक्रीय निर्भरता की उपस्थिति के कारण किया गया था, और यह भी क्योंकि मैं चाहता था कि मुखौटा एक जड़ वस्तु या अलग-अलग दोनों भागों में आयात करने में सक्षम हो। उदाहरण के लिए, यह प्रतिक्रिया में किया जाता है:

 import { Component } from 'react'; import React from 'react'; React.Component === Component; // true 

IMask 6.0 में, मॉड्यूल के बीच की कड़ी टूट गई थी और व्यक्तिगत मॉड्यूल आयात करना संभव हो गया था:

 //    // import IMask from 'imask'; //      import IMask from 'imask/esm/imask'; //   ,   //    import 'imask/esm/masked/number'; //      ,       const numberMask = IMask(element, { mask: Number }); 

इस मामले में, आप पुराने दृष्टिकोण का उपयोग करना जारी रख सकते हैं और कुछ भी नहीं टूटेगा, लेकिन ट्रीशेकिंग भी काम नहीं करेगा।

खैर, शुरुआत के लिए: नए संस्करण में संतोषप्रद और वेब-घटकों के लिए समर्थन है! प्रतिक्रिया और पूल अनुरोधों के लिए समुदाय को धन्यवाद।

प्रत्येक नई रिलीज के साथ, कीड़े पतले हो रहे हैं, अधिक विदेशी इच्छाएं। यहाँ फिर से, ऐसा लगता है कि मामला समाप्त हो रहा है। और इसलिए ऐसा लगता है कि यह तब तक अनंत होगा जब तक परियोजना मर जाती है या कुछ बेहतर दिखाई नहीं देता है। या हो सकता है कि मंच बदल जाएगा और नए इंटरफेस दिखाई देंगे। लेकिन जाहिर है, ब्राउज़र अब युवाओं और परिपक्वता के बीच में हैं, और टेक्स्ट-मास्क की मृत्यु के बाद, आईएमस्क के लिए कोई कार्यात्मक विकल्प नहीं हैं, और मैं अभी भी खुले स्रोत पर समय की एक बूंद पा सकता हूं, इसलिए एक मुखौटा होना चाहिए।

आने वाले नए साल में सभी सफलता और प्रेरणा!