व्यावहारिक उदाहरण। लाइव डेमो।
लाइव प्रीव्यू और सोर्स कोड साथ-साथ देखने के लिए उदाहरण चुनकर पूरी स्क्रीन पर खोलें।
बुनियादी बातें
4हर Nuclo ऐप बनाने में काम आने वाले पैटर्न।
काउंटर
स्टेट बदलें, फिर update() कॉल करें। डायनेमिक टेक्स्ट अपडेट हो जाता है।
कार्य सूची
दोहराए जाने वाले आइटम के लिए list() का उपयोग करें। हर बदलाव के बाद update() कॉल करें।
खोज फ़िल्टर
साधारण JavaScript से ऐरे फ़िल्टर करें। list() से परिणाम रेंडर करें।
स्टाइलिंग
क्लास बनाने के लिए css() और छोटे सशर्त बदलावों के लिए cx() का उपयोग करें।
कंपोनेंट
4स्टैटिक और डायनेमिक पैरामीटर, चाइल्ड नोड, ऑब्जेक्ट पहचान से मिलती सूचियाँ और नेस्टेड डेटा वाले साधारण फ़ंक्शन। हर प्रीव्यू माउंट की गिनती करता है।
स्टैटिक और डायनेमिक पैरामीटर
वैल्यू पैरामीटर कंपोनेंट बनते समय एक बार पढ़ा जाता है। फ़ंक्शन पैरामीटर हर update() पर पढ़ा जाता है। दोनों मामलों में कंपोनेंट खुद केवल एक बार चलता है, जिसकी पुष्टि माउंट काउंटर करता है।
चाइल्ड नोड और मॉडिफ़ायर
कंपोनेंट spread से अपने चाइल्ड आगे भेजता है: बिल्डर, टेक्स्ट, एट्रिब्यूट ऑब्जेक्ट और मॉडिफ़ायर। सशर्त हिस्से when() में रहते हैं, इसलिए उन्हें घेरने वाला कंपोनेंट दोबारा नहीं बनता।
सूची में ऑब्जेक्ट की पहचान
list() किसी पंक्ति को तब तक रखता है जब तक उसका आइटम ऐरे में है। इनपुट या फ़ोकस खोए बिना क्रम बदलें, जोड़ें और नाम बदलें। स्विच हर अपडेट पर ऑब्जेक्ट क्लोन करके पहचान बदलने की लागत दिखाता है।
नेस्टेड डेटा
सदस्यों और उनके कार्यों वाली टीम: हर स्तर पर एक कंपोनेंट, नेस्टेड list() कॉल और उन्हीं ऑब्जेक्ट के फ़ंक्शन से गणना किए गए काउंटर। गहरे बदलाव केवल अपने संबंधित नोड पैच करते हैं।
API
13हर बुनियादी हिस्से के लिए एक छोटा डेमो, जो दस्तावेज़ों में भी शामिल है।
टैग बिल्डर
बिल्डर एट्रिब्यूट, स्टैटिक चाइल्ड और डायनेमिक टेक्स्ट लेता है। Rename स्टेट बदलकर update() कॉल करता है।
कंपोनेंट
कंपोनेंट एक साधारण फ़ंक्शन है। हर Counter() कॉल अपना अलग काउंटर रखती है।
एट्रिब्यूट
एट्रिब्यूट के मान फ़ंक्शन हो सकते हैं। दूसरा बटन busy बदलकर update() कॉल करता है; Save के disabled और aria-busy उसी के अनुसार बदलते हैं।
इवेंट
onInput और onKeyDown सामान्य एट्रिब्यूट हैं। टेक्स्ट लिखें और साफ़ करने के लिए Escape दबाएँ।
लाइफ़साइकल
onMount इंटरवल शुरू करता है और उसका क्लीनअप फ़ंक्शन लौटाता है। अनमाउंट होने पर क्लीनअप चलता है, इसलिए टाइमर दोबारा माउंट होने तक गिनती रुक जाती है।
स्पष्ट अपडेट
count++ केवल वेरिएबल बदलता है। इस बटन या पेज की किसी दूसरी गतिविधि से अगला update() चलने पर टेक्स्ट अपडेट होता है।
डायनेमिक मान
नाम बदलें। स्टैटिक टेक्स्ट एलिमेंट बनते समय तय हो गया था; डायनेमिक टेक्स्ट हर update() पर दोबारा चलता है। forceUpdate() ट्री दोबारा बनाता है, इसलिए स्टैटिक टेक्स्ट भी अपडेट होता है।
update()
हर update() सभी डायनेमिक मान चलाता है, भले उनका डेटा न बदला हो। इस पेज के दूसरे डेमो भी काउंटर बढ़ाते हैं।
scope()
दोनों बटन एक आइटम जोड़ते हैं और उपयोगकर्ता का नाम बदलते हैं। update('cart') केवल उस स्कोप का पैनल अपडेट करता है।
when()
पहली सही शर्त चुनी जाती है; कोई शर्त सही न हो तो .else() रेंडर होता है। नई शाखा शुरू से बनती है।
list()
पंक्तियाँ ऑब्जेक्ट की पहचान से मिलाई जाती हैं। पंक्ति पर चेक लगाएँ, फिर Reverse दबाएँ: चेकबॉक्स सहित वही <li> खिसकता है।
region() और into()
मुख्य और साइड रीजन वाला लेआउट बाहर से भरा जाता है। Home में लिखें, डायलॉग खोलकर बंद करें: टेक्स्ट बना रहता है। Article एक into() से दोनों रीजन भरता है।
forceUpdate()
update() केवल डायनेमिक lang पंक्ति अपडेट करता है। forceUpdate() App को दोबारा कॉल करके उसी <h1> को पैच करता है। स्पष्ट रूप केवल इसी ट्री को दोबारा बनाता है, पूरे पेज को नहीं।
स्टाइलिंग
3क्लास बनाएँ, क्लास जोड़ें और छोटी थीम उपयोग करें।
फ़ॉर्म
3साधारण स्टेट पर सामान्य फ़ंक्शन से वैलिडेशन, छुए गए फ़ील्ड, चरण और डायनेमिक पंक्तियाँ।
फ़ील्ड सत्यापन
सामान्य स्थिति पर एक फ़ंक्शन के रूप में नियम, फ़ील्ड को छूने के बाद दिखाई देने वाली त्रुटियां, लंबित स्थिति के साथ एक डिबाउंस एसिंक चेक, और एक सबमिट जो इसके लिए प्रतीक्षा करता है।
मल्टी-स्टेप विज़ार्ड
एक डेटा ऑब्जेक्ट पर when() शाखाओं के रूप में तीन चरण। अगला चरण के क्षेत्रों को छूता है और तभी आगे बढ़ता है जब वे गुजर जाते हैं। समीक्षा संपादन लिंक के साथ सब कुछ सूचीबद्ध करती है।
गतिशील पंक्तियाँ
list() के साथ प्रस्तुत सरणी में इनवॉइस पंक्तियाँ। प्रत्येक पंक्ति स्वयं को मान्य करती है, कुल मान्य को गिनता है, और जब अन्य जोड़े जाते हैं या हटाए जाते हैं तो पंक्तियाँ अपना इनपुट रखती हैं।
SVG
27साधारण डेटा, पॉइंटर इवेंट और update() से चलने वाले SVG टैग बिल्डर के चार्ट, एनिमेशन, टूल और गेम।
बार चार्ट
एक सरणी से रेक्ट करता है। उनकी y और ऊंचाई डेटा के फ़ंक्शन हैं, इसलिए update() बार को स्थानांतरित करता है।
लाइन चार्ट
एक पथ जिसका d बिंदुओं से बनाया गया है, जिसमें एक ढाल क्षेत्र और प्रति बिंदु एक वृत्त है।
डोनट चार्ट
प्रति स्लाइस एक सर्कल। स्ट्रोक-डैशरे प्रत्येक को रिंग में अपना हिस्सा देता है और स्ट्रोक-डैशऑफ़सेट उसकी शुरुआत देता है।
SVG एनिमेशन
SMIL: animateSvg सूर्य को स्पंदित करता है, animateTransformSvg ग्रह की परिक्रमा करता है। एक गतिशील ड्यूर गति निर्धारित करता है।
गेज
एक चाप जो स्ट्रोक-डैशऑफसेट से भरता है और एक सुई जो CSS ट्रांसफॉर्म के साथ घूमती है। दोनों एक ही संख्या के कार्य हैं।
रडार चार्ट
पाँच अक्षों पर पाँच मान। आकार एक पथ है जिसकी d की गणना डेटा से की जाती है, इसलिए update() इसे रूपांतरित करता है।
हीटमैप
रेक्ट्स का एक ग्रिड जिसकी भरण-अस्पष्टता एक स्तर का अनुसरण करती है। किसी सेल को टक्कर देने के लिए उस पर क्लिक करें; एक titleSvg चाइल्ड इसका टूलटिप है।
होवर टूलटिप
SVG तत्वों पर सूचक घटनाएँ। onPointerEnter सक्रिय बिंदु चुनता है और एक टूलटिप समूह उस पर स्लाइड करता है।
कर्व संपादक
क्यूबिक बेज़ियर के हैंडल को खींचें। onPointerDown एक बिंदु चुनता है, svg पर onPointerMove उसे ले जाता है और पथ अनुसरण करता है।
घड़ी
हाथ रेखाएं हैं जिनका परिवर्तन समय का कार्य है। onMount टिकिंग शुरू करता है और क्लीनअप लौटाता है।
आइकन टॉगल करता है
एक मेनू आइकन जो CSS ट्रांज़िशन के साथ एक क्रॉस में बदल जाता है, और एक दिल जो SMIL एनीमेशन के साथ पॉप होता है जो क्लिक करने पर शुरू होता है।
लाइव स्ट्रीम
एक टाइमर पर बाईं ओर दो श्रृंखला स्क्रॉल करें। एक CSS संक्रमण जब तक एक टिक स्लाइड को सुचारू बनाता है, और होवरिंग किसी भी नमूने को पढ़ता है।
कैंडलस्टिक चार्ट
चालीस स्लॉट अपनी स्वयं की मोमबत्ती पढ़ते हैं। समय-सीमा बदलें, औसत टॉगल करें, संख्याओं पर होवर करें, या लाइव कैंडल को टिकने दें।
बार चार्ट रेस
दस बार DOM को कभी नहीं छोड़ते। उनकी रैंक एक translateY निर्धारित करती है, इसलिए मान बदलते ही एक संक्रमण प्रत्येक को उसकी पंक्ति में स्लाइड कर देता है।
स्टैक्ड एरिया चार्ट
स्टैक्ड, स्ट्रीम और प्रतिशत लेआउट के बीच चार बैंड मॉर्फ होते हैं। किसी श्रृंखला को छिपाने से केवल उसके बैंड की मोटाई शून्य होती है, इसलिए प्रत्येक पथ अपना आकार बनाए रखता है।
ट्रीमैप
एक चौकोर लेआउट जिसमें आप ड्रिल करते हैं। मीट्रिक को स्विच करने से प्रत्येक सेल अपने नए बॉक्स में स्लाइड हो जाती है, और समूह पर क्लिक करने से उसके बच्चे स्वैप हो जाते हैं।
लाइव हिस्टोग्राम
नमूने चार वितरणों से आते हैं। डिब्बे हर परिवर्तन पर फिर से गिनती करते हैं, एक लगी हुई घंटी माध्य का अनुसरण करती है, और एक स्लाइडर बिन की गिनती निर्धारित करता है।
ड्राइंग पैड
पॉइंटर इवेंट पॉलीलाइन बनाते हैं। list() प्रति स्ट्रोक एक रेंडर करता है, और प्रगति में स्ट्रोक प्रत्येक update() पर बढ़ता है।
रोटरी नॉब
एक कस्टम स्लाइडर: पॉइंटर का कोण मान सेट करता है, तीर कुंजियाँ इसे चरणबद्ध करती हैं, और pathLength='100' मान को डैश में बदल देता है।
कलर व्हील
कोण के अनुसार रंग और दूरी के अनुसार संतृप्ति चुनें। नब्बे वेजेज, एक रेडियल ग्रेडिएंट और एक डार्क डिस्क पहिया बनाते हैं।
स्पाइरोग्राफ
एक पहिया एक रिंग के अंदर घूमता है और एक पेन उसका पता लगाता है। प्रत्येक फ्रेम एक डैश को लंबा करता है और केवल इसके scope() को अपडेट करता है।
उछलती गेंदें
requestAnimationFrame लूप में गुरुत्वाकर्षण, दीवारें और टकराव। पीछे खींचें और गेंद को लॉन्च करने के लिए जाने दें।
गूई ब्लॉब्स
एक धब्बा और एक रंग मैट्रिक्स फ़िल्टर एक साथ बूँदें पिघला देता है। वृत्तों का एक निशान सूचक का अनुसरण करता है।
फोर्स ग्राफ़
नोड्स पीछे हटते हैं, लिंक खींचते हैं, और लेआउट तब तक ठंडा रहता है जब तक यह आराम नहीं कर लेता। किसी बच्चे को बड़ा करने के लिए एक नोड खींचें, या एक पर क्लिक करें।
ब्रश और ज़ूम
उपरोक्त चार्ट को ज़ूम करने के लिए अवलोकन पर एक रेंज ब्रश करें। एक clipPath जो ब्रश के बाद चयन को रंग देता है।
टिक-टैक-टो
कंप्यूटर चलाएं। when() प्रत्येक चिह्न जोड़ता है, और इसके डैश पर एक CSS एनीमेशन इसे अंदर खींचता है।
परिपत्र पाठ
एक बैज टाइप करें। textPath टेक्स्ट को एक सर्कल के चारों ओर मोड़ता है और textLength इसे बिल्कुल एक लैप में फिट करता है।
रूटिंग
6रूट टेबल, मिलान, सक्रिय रूट, लेयर और लोडर। nuclo-router एक अलग पैकेज है: npm install nuclo nuclo-router.
एक रूटेड ऐप
अपने स्वयं के राउटर के साथ एक वास्तविक ऐप, फ्रेम में चल रहा है: एक रूट टेबल, एक outlet(), साधारण लिंक, एक लंबित स्थिति और एक 404। चारों ओर क्लिक करें, फिर बैक का उपयोग करें।
नेस्टेड रूट
डॉक्स चाइल्ड रूट वाला एक लेआउट है। एक विषय अपने outlet() में प्रस्तुत होता है और ./विषय लिंक लेआउट के रूट के विरुद्ध हल होता है। नोट्स टाइप करें, फिर विषय बदलें: लेआउट कभी भी दोबारा नहीं बनाया जाता है।
रूट लोडर
पोस्ट पेज एक load() निर्यात करता है जो पेज बनने से पहले चलता है। प्रतीक्षा करते समय router.pending देखें, और जब यह टूटी हुई पोस्ट पर फेंकता है तो पुनः प्रयास करें के साथ त्रुटि स्थिति देखें।
परतें
ऑर्डर फॉर्म ग्राहक पृष्ठ को एक परत के रूप में धकेलता है और इसके परिणाम की प्रतीक्षा करता है। प्रपत्र को दोबारा प्रस्तुत नहीं किया गया है, इसलिए इसके नोट्स जीवित रहते हैं। सहेजें पुश का समाधान करता है, रद्द करें या वापस इसे ख़ारिज कर देता है।
एकाधिक राउटर और लोड हो रहा है
दो राउटर, दो स्पिनर। दुकान लेआउट और उसके अनुभाग दोनों में load()s हैं: वे एक router.pending के तहत समानांतर में चलते हैं। साइडबार में अपना खुद का एक राउटर है, जिसे बनाया गया है लेकिन कभी शुरू नहीं किया गया है, इसका अपना लोडिंग फ़्लैग onNavigate से ताज़ा है।
पैटर्न मिलान
स्टेटिक, :param और *रेस्ट पैटर्न, और दो पैरेंट के नीचे एक सेक्शन टेबल लगाई गई है। एक पथ टाइप करें और match() देखें, जो बिना कुछ भी लोड किए हल हो जाता है।
ऐप
15पूरी स्क्रीन के बड़े प्रोग्राम, टैब में उनके वास्तविक सोर्स के साथ: विंडो वाला डेस्कटॉप, डेटा ग्रिड, चैट, गेम, एडिटर और अपना स्टेट रखने वाली लाइब्रेरी।
पेज बिल्डर
सीधे पृष्ठ पर लिखें, ब्लॉकों को पुन: व्यवस्थित करने या उन्हें लेआउट में ले जाने के लिए ग्रिप्स खींचें, सम्मिलित करने के लिए / दबाएँ, और क्रियाओं के लिए राइट-क्लिक करें। स्टाइल ग्रिड और फ्लेक्स लेआउट, संपादन पूर्ववत करें, फ़ोन आकार पर पूर्वावलोकन करें और HTML निर्यात करें।
एल्गोरिथम स्टेपर
इंजन साधारण JavaScript है: जनरेटर जो एक सरणी को बदलते हैं और हर चरण के बाद उपज देते हैं। प्लेयर next() और update() को कॉल करता है; बार समान वस्तुओं पर एक list() हैं, इसलिए एक स्वैप दो तत्वों को स्थानांतरित करता है।
कानबन बोर्ड
एक टीम बोर्ड: कार्य जोड़ें, उन्हें लोगों को सौंपें, उन्हें एक संवाद में संपादित करें, व्यक्ति या खोज के आधार पर फ़िल्टर करें, उन्हें कॉलम के बीच खींचें और हटाए गए को पूर्ववत करें। कॉलम और कार्ड समान वस्तुओं की साधारण सारणी हैं; प्रत्येक चाल splice() है। पंक्तियाँ पहचान के आधार पर मेल खाती हैं, इसलिए कार्ड को खींचने, सॉर्ट करने, असाइन करने या संपादित करने से उसके तत्व का पुन: उपयोग होता है। स्क्रीन पर माउंट गिनती यह साबित करती है।
three.js इंस्पेक्टर
एक पुस्तकालय जिसका अपना स्टेट है। पैनल सीधे three.js ऑब्जेक्ट से स्थिति, रंग और फ़्लैग पढ़ता है और उन पर वापस संपादन लिखता है। रेंडर लूप प्रति फ्रेम एक बार update() को कॉल करता है; स्टेट की कोई अलग कॉपी नहीं रखी जाती।
अनंत स्क्रॉल
एक फ़ीड जिसका कोई अंत नहीं है: एक तेज़ नकली fetch() प्रत्येक पृष्ठ को एक साधारण सरणी में उत्पन्न करता है। केवल व्यूपोर्ट के पास की पंक्तियाँ DOM में हैं: list() दो स्पेसरों के बीच posts.slice(start, end) को प्रस्तुत करता है, इसलिए पेज एक लाख पोस्ट पर हल्का रहता है। वास्तविक अंत में एक प्रहरी दृश्य में आने से पहले अगला पृष्ठ मांगता है।
डेस्कटॉप
फ़ाइलें, नोट्स, टर्मिनल, कैलकुलेटर, टाइमर, एक कानबन बोर्ड, वित्त और एक कैलेंडर के साथ एक कार्यशील डेस्कटॉप। फ़ोल्डर बनाएं और व्यवस्थित करें, नोट्स संपादित करें, और अपने ब्राउज़र में सहेजी गई एक साझा सिम्युलेटेड डिस्क पर शेल कमांड का उपयोग करें। सीधे कीबोर्ड से कैलकुलेटर में टाइप करें, इसकी इनपुट लाइन पर ध्यान केंद्रित करने के लिए टर्मिनल में कहीं भी क्लिक करें, बोर्ड पर कॉलम के बीच कार्ड खींचें, या वित्त स्प्रेडशीट में एक बहीखाता रखें और उसके चार्ट को चलते हुए देखें - बहीखाता IndexedDB में रहता है। जैसे ही आप ऐप्स को स्थानांतरित करते हैं, उनका आकार बदलते हैं और उनके बीच स्विच करते हैं, विंडोज़ अपनी स्थिति बनाए रखती है; एक रनिंग टाइमर टास्कबार ट्रे को into() से भर देता है।
नोड ग्राफ़
गणित, तुलना और इफ़ नोड्स के माध्यम से वायर नंबर, टेक्स्ट और स्विच, और आपके टाइप करते ही हर मान अपडेट हो जाता है। फ़ंक्शंस भी ग्राफ़ हैं: उनके इनपुट और आउटपुट नोड्स प्रत्येक कॉल के पोर्ट हैं, और एक कॉल अपने स्वयं के फ़ंक्शन को नाम दे सकता है, इसलिए फैक्टरियल और योग एक इफ़ के साथ पुनरावृत्ति के तरीके के रूप में होता है। इंजन साधारण JavaScript है: प्रत्येक नोड एक जनरेटर है जो इनपुट मांगने के लिए तैयार होता है, और एक लूप उन्हें अपने स्वयं के स्टैक से चलाता है, इसलिए sum(50000) JavaScript कॉल स्टैक को छुए बिना एक सेकंड के दसवें हिस्से में पचास हजार कॉल को गहराई में रखता है। केवल एक कदम बजट ही पुनरावृत्ति को रोकता है और कोई रास्ता नहीं है। ड्रैगिंग x और y लिखता है और केवल कैनवास स्कोप को अपडेट करता है; रन गिनती से पता चलता है कि ग्राफ़ कभी भी एक चाल के लिए नहीं चलता है।
डेटा ग्रिड
10,000 साधारण पंक्ति वस्तुओं पर एक कार्य तालिका। खोज, फ़िल्टर, सॉर्ट और पेजिंग सरणी पर साधारण कार्य हैं, और तालिका का मुख्य भाग वर्तमान पृष्ठ पर एक list() है। पंक्तियाँ पहचान के आधार पर मेल खाती हैं, इसलिए सॉर्टिंग उन पंक्तियों को स्थानांतरित करती है जो पृष्ठ पर रहती हैं, और एक संपादित पंक्ति हर जगह एक ही वस्तु होती है। पंक्ति-निर्मित गिनती इसे सिद्ध करती है।
चैट
तीन चैनलों के साथ एक चैट, प्रत्येक एक साधारण वस्तु: इसका इतिहास, कर्सर, टाइपिंग, ड्राफ्ट और स्क्रॉल स्थिति, इसलिए स्विचिंग हर चैनल को बिल्कुल वैसा ही रखता है जैसा वह था, और update("chat-sidebar") केवल अपठित बैज को ताज़ा करता है। इतिहास unshift() और एक scrollTop के साथ हमेशा के लिए ऊपर की ओर लोड हो जाता है जो कि इसमें जोड़ी गई ऊंचाई के साथ बढ़ता है। आपका संदेश सर्वर के पास होने से पहले ही दिखाई देता है, send() उसी ऑब्जेक्ट को पैच करता है, और पुनः प्रयास करें, संपादित करें, हटाएं और प्रतिक्रियाएं कभी भी इसकी पंक्ति का पुनर्निर्माण नहीं करती हैं। संदेश कोड, बोल्ड, लिंक और @उल्लेख प्रस्तुत करते हैं।
लाइव डैशबोर्ड
कार्ड जो अलग-अलग दरों पर ताज़ा होते हैं, प्रति सेकंड 20 बार से लेकर प्रति सेकंड एक बार तक। प्रत्येक कार्ड एक scope() है, और इसका टाइमर उस कार्ड की आईडी के साथ update() को कॉल करता है, इसलिए एक टिक केवल उस कार्ड का मूल्यांकन करता है। प्रत्येक गतिशील मान को स्क्रीन पर गिना जाता है: एक साधारण update() पर स्विच करें और एक बार बदलने के लिए घड़ी का मूल्यांकन प्रति सेकंड लगभग सौ बार किया जाता है।
पिक्सेल संपादक
चित्र 1024 रंगीन तारों की एक साधारण सरणी है, और प्रत्येक कोशिका इससे अपना रंग पढ़ती है। एक स्ट्रोक सरणी में लिखता है और update() को कॉल करता है; जब यह समाप्त हो जाता है, तो संपादक slice() के साथ एक प्रति रखता है। पूर्ववत करें, फिर से करें और इतिहास में हर कदम पर list() एक पुरानी सरणी को वापस रखें: कोई स्टोर नहीं, कोई अपरिवर्तनीय डेटा नहीं।
साँप
एक गेम लूप एक टाइमर है जो साधारण ऑब्जेक्ट पर step() को कॉल करता है, फिर प्रति टिक एक बार update() को कॉल करता है। साँप अपनी कोशिका वस्तुओं का एक list() है, और प्रत्येक टिक पूंछ वाली वस्तु नया सिर बन जाती है, इसलिए एक तत्व चलता है और कोई भी निर्मित नहीं होता है: खंड-निर्मित गिनती केवल तभी बढ़ती है जब साँप खाता है। भोजन keyframes() एनीमेशन के साथ पॉप अप होता है।
स्टेप सीक्वेंसर
एक पुस्तकालय जिसके पास अपनी घड़ी है। Web Audio प्रत्येक नोट को अपनी टाइमलाइन पर आगे बुक करता है, और पैटर्न बूलियन की एक साधारण 2D सरणी है जिसे ग्रिड फ़्लिप करता है और शेड्यूलर पढ़ता है, इसलिए अगले पास पर एक क्लिक सुनाई देता है। जब श्रव्य चरण बदलता है तो प्लेहेड केवल अपने scope() को अपडेट करता है। ऑडियो पहले प्ले पर शुरू होता है और माउंट क्लीनअप में बंद हो जाता है, इसलिए उदाहरण छोड़ने से ध्वनि बंद हो जाती है।
लोकेल स्विचर
प्रत्येक लेबल एक स्थिर मान है, जिसे एक-भाषा ऐप के रूप में लिखा जाता है, इसलिए update() इसे दोबारा कभी नहीं पढ़ता है: कार्ट क्लिक केवल मात्रा और कुल को ताज़ा करते हैं। भाषा स्विच करने से इस ट्री पर forceUpdate() कॉल आती है, जो घटक को फिर से चलाता है और समान तत्वों, लैंग और डीआईआर को पैच करता है। पैसा, बहुवचन, दिनांक और सूचियाँ Intl से आती हैं, और कार्ट और एक टाइप किया हुआ कूपन स्विच से बच जाता है।
थीम संपादक
एक छोटी घटक लाइब्रेरी: createCss() टोकन को नाम देता है और variants() उनसे बटन, बैज, कार्ड, इनपुट, अलर्ट और स्विच बनाता है। टोकन CSS वैरिएबल हैं, इसलिए प्रत्येक वर्ग एक बार संकलित होता है। प्रत्येक नियंत्रण एक साधारण थीम ऑब्जेक्ट लिखता है और update() को कॉल करता है, जो एक शैली तत्व के पाठ को फिर से लिखता है।