व्यावहारिक उदाहरण। लाइव डेमो।
लाइव प्रीव्यू और सोर्स कोड साथ-साथ देखने के लिए उदाहरण चुनकर पूरी स्क्रीन पर खोलें।
बुनियादी बातें
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साधारण स्टेट पर सामान्य फ़ंक्शन से वैलिडेशन, touched फ़ील्ड, चरण और डायनेमिक पंक्तियाँ।
फ़ील्ड वैलिडेशन
साधारण स्टेट पर फ़ंक्शन के रूप में लिखे नियम, फ़ील्ड इस्तेमाल करने के बाद दिखने वाली त्रुटियाँ, pending स्टेट वाला डिबाउंस किया गया एसिंक चेक और इन सभी के पूरा होने का इंतज़ार करने वाला सबमिट।
कई चरणों वाला विज़ार्ड
एक डेटा ऑब्जेक्ट पर when() की शाखाओं के रूप में तीन चरण। Next मौजूदा चरण के फ़ील्ड को touched चिह्नित करता है और वैलिडेशन सफल होने पर ही आगे बढ़ता है। Review में सभी मान Edit लिंक के साथ दिखते हैं।
डायनेमिक पंक्तियाँ
ऐरे में रखी इनवॉइस की पंक्तियाँ list() से रेंडर होती हैं। हर पंक्ति अपना वैलिडेशन करती है और कुल में केवल मान्य पंक्तियाँ गिनी जाती हैं। दूसरी पंक्तियाँ जोड़ने या हटाने पर मौजूदा पंक्तियों के इनपुट बने रहते हैं।
SVG
27साधारण डेटा, पॉइंटर इवेंट और update() से चलने वाले SVG टैग बिल्डर के चार्ट, एनिमेशन, टूल और गेम।
बार चार्ट
ऐरे से बने rect। उनके y और height डेटा के फ़ंक्शन हैं, इसलिए update() बार को खिसकाता है।
लाइन चार्ट
बिंदुओं से बना d वाला एक पाथ, साथ में ग्रेडिएंट से भरा हिस्सा और हर बिंदु के लिए एक वृत्त।
डोनट चार्ट
हर स्लाइस के लिए एक वृत्त। stroke-dasharray उसे रिंग का उसका हिस्सा देता है और stroke-dashoffset उसकी शुरुआत तय करता है।
SVG एनिमेशन
SMIL के लिए बिल्डर: animateSvg सूरज को धड़कने जैसा प्रभाव देता है और animateTransformSvg ग्रह को उसकी कक्षा में घुमाता है। डायनेमिक dur गति तय करता है।
गेज
stroke-dashoffset से भरता चाप और CSS ट्रांसफ़ॉर्म से घूमती सुई। दोनों एक ही संख्या के फ़ंक्शन हैं।
रडार चार्ट
पाँच अक्षों पर पाँच मान। आकृति एक पाथ है जिसका d डेटा से गणना किया जाता है, इसलिए update() उसका आकार बदलता है।
हीटमैप
rect की ग्रिड, जिनका fill-opacity एक स्तर के अनुसार बदलता है। स्तर बढ़ाने के लिए सेल पर क्लिक करें। titleSvg चाइल्ड उसका टूलटिप है।
होवर टूलटिप
SVG एलिमेंट पर पॉइंटर इवेंट। onPointerEnter सक्रिय बिंदु चुनता है और टूलटिप का समूह खिसककर उसके पास पहुँचता है।
कर्व एडिटर
क्यूबिक बेज़ियर कर्व के हैंडल खींचें। onPointerDown बिंदु चुनता है, svg का onPointerMove उसे खिसकाता है और पाथ उसके अनुसार बदलता है।
घड़ी
सुइयाँ लाइन हैं जिनका transform समय का फ़ंक्शन है। onMount घड़ी शुरू करता है और क्लीनअप लौटाता है।
आइकन टॉगल
CSS ट्रांज़िशन से क्रॉस में बदलता मेन्यू आइकन और क्लिक पर शुरू होने वाले SMIL एनिमेशन से उभरता दिल।
लाइव स्ट्रीम
टाइमर पर दो डेटा सीरीज़ बाईं ओर स्क्रॉल होती हैं। एक टिक जितनी अवधि का CSS ट्रांज़िशन गति को सहज बनाता है। किसी सैंपल का मान देखने के लिए होवर करें।
कैंडलस्टिक चार्ट
चालीस स्लॉट अपनी-अपनी कैंडल का डेटा पढ़ते हैं। समयावधि बदलें, औसत दिखाएँ या छिपाएँ, मान देखने के लिए होवर करें या लाइव कैंडल को अपडेट होते देखें।
बार चार्ट रेस
दस बार हमेशा DOM में रहते हैं। उनकी रैंक translateY तय करती है, इसलिए मान बदलने पर ट्रांज़िशन हर बार को उसकी पंक्ति तक खिसकाता है।
स्टैक्ड एरिया चार्ट
चार बैंड स्टैक्ड, स्ट्रीम और प्रतिशत लेआउट के बीच आकार बदलते हैं। सीरीज़ छिपाने पर उसके बैंड की मोटाई केवल शून्य हो जाती है, इसलिए हर पाथ के कमांड की संरचना वही रहती है।
ट्रीमैप
वर्ग जैसे खानों वाला लेआउट जिसमें समूह खोलकर अंदर जा सकते हैं। मेट्रिक बदलने पर हर सेल अपने नए स्थान तक खिसकता है और समूह पर क्लिक करने पर उसके चाइल्ड दिखाई देते हैं।
लाइव हिस्टोग्राम
चार वितरणों से लगातार सैंपल आते हैं। हर बदलाव पर बिन की गिनती दोबारा होती है, फिट किया गया बेल कर्व औसत के अनुसार बदलता है और स्लाइडर बिन की संख्या तय करता है।
ड्रॉइंग पैड
पॉइंटर इवेंट से पॉलीलाइन बनाएँ। list() हर स्ट्रोक के लिए एक पॉलीलाइन रेंडर करता है। बन रहा स्ट्रोक हर update() पर लंबा होता है।
रोटरी नॉब
कस्टम स्लाइडर: पॉइंटर का कोण मान तय करता है, ऐरो कुंजियाँ उसे एक-एक चरण बदलती हैं और pathLength="100" मान को डैश में बदलता है।
कलर व्हील
कोण से hue और केंद्र से दूरी के अनुसार saturation चुनें। नब्बे वेज, एक रेडियल ग्रेडिएंट और एक गहरी डिस्क मिलकर व्हील बनाते हैं।
स्पाइरोग्राफ़
पहिया रिंग के अंदर घूमता है और पेन उसका पाथ बनाता है। हर फ़्रेम एक डैश लंबा करता है और केवल अपना scope() अपडेट करता है।
उछलती गेंदें
requestAnimationFrame लूप में गुरुत्वाकर्षण, दीवारें और टक्करें। गेंद उछालने के लिए पीछे खींचकर छोड़ें।
चिपचिपे ब्लॉब
ब्लर और कलर मैट्रिक्स फ़िल्टर से ब्लॉब आपस में घुलते हैं। वृत्तों की लड़ी पॉइंटर के पीछे चलती है।
फ़ोर्स ग्राफ़
नोड एक-दूसरे को धकेलते हैं, लिंक खींचते हैं और लेआउट की गति धीरे-धीरे रुक जाती है। नोड खींचें या नया चाइल्ड जोड़ने के लिए उस पर क्लिक करें।
ब्रश और ज़ूम
ऊपर के चार्ट को ज़ूम करने के लिए ओवरव्यू में एक रेंज चुनें। ब्रश के अनुसार बदलता clipPath चुने हिस्से को रंगता है।
टिक-टैक-टो
कंप्यूटर के साथ खेलें। when() हर निशान जोड़ता है और उसके डैश का CSS एनिमेशन उसे बनते हुए दिखाता है।
गोलाकार टेक्स्ट
बैज के लिए टेक्स्ट लिखें। textPath उसे वृत्त पर मोड़ता है और textLength उसे ठीक एक चक्कर में फ़िट करता है।
रूटिंग
6रूट टेबल, मिलान, सक्रिय रूट, लेयर और लोडर। nuclo-router एक अलग पैकेज है: npm install nuclo nuclo-router.
रूटिंग वाला ऐप
फ़्रेम में अपने राउटर के साथ चलता ऐप: रूट टेबल, एक outlet(), साधारण लिंक, pending स्टेट और 404। लिंक खोलें, फिर Back इस्तेमाल करें।
नेस्टेड रूट
Docs चाइल्ड रूट वाला लेआउट है। विषय उसके outlet() में रेंडर होता है और ./topic लिंक लेआउट के रूट के सापेक्ष हल होते हैं। नोट्स लिखें, फिर विषय बदलें: लेआउट दोबारा नहीं बनता।
रूट लोडर
पोस्ट पेज एक load() एक्सपोर्ट करता है जो पेज बनने से पहले चलता है। इंतज़ार के दौरान router.pending देखें। टूटी पोस्ट पर लोडर थ्रो करे, तो Retry के साथ त्रुटि की स्थिति देखें।
लेयर
ऑर्डर फ़ॉर्म ग्राहक का पेज लेयर के रूप में पुश करता है और उसके परिणाम का इंतज़ार करता है। फ़ॉर्म दोबारा रेंडर नहीं होता, इसलिए उसके नोट्स बने रहते हैं। Save पुश को रिज़ॉल्व करता है; Cancel या Back उसे रद्द करता है।
कई राउटर और लोडिंग
दो राउटर, दो स्पिनर। दुकान के लेआउट और उसके सेक्शन दोनों में load() हैं: दोनों एक router.pending के तहत समानांतर चलते हैं। साइडबार का अलग राउटर बनाया जाता है, लेकिन शुरू नहीं होता। उसका अपना लोडिंग फ़्लैग onNavigate से रीफ़्रेश होता है।
पैटर्न मिलान
स्टैटिक, :param और *rest पैटर्न, साथ में दो पैरेंट के नीचे लगी एक सेक्शन टेबल। पथ लिखकर match() देखें: यह बिना कुछ लोड किए मिलान करता है।
ऐप
15पूरी स्क्रीन के बड़े प्रोग्राम, टैब में उनके वास्तविक सोर्स के साथ: विंडो वाला डेस्कटॉप, डेटा ग्रिड, चैट, गेम, एडिटर और अपना स्टेट रखने वाली लाइब्रेरी।
पेज बिल्डर
सीधे पेज पर लिखें। ब्लॉक का क्रम बदलने या उन्हें लेआउट में ले जाने के लिए ग्रिप खींचें। नया ब्लॉक जोड़ने के लिए / दबाएँ और कार्रवाइयों के लिए राइट-क्लिक करें। ग्रिड और फ़्लेक्स लेआउट को स्टाइल करें, बदलाव अनडू करें, फ़ोन के आकार में प्रीव्यू देखें और HTML एक्सपोर्ट करें।
एल्गोरिथम स्टेपर
इंजन साधारण JavaScript है: जनरेटर ऐरे बदलते हैं और हर चरण के बाद yield करते हैं। प्लेयर next() और update() कॉल करता है। बार उन्हीं ऑब्जेक्ट पर एक list() हैं, इसलिए स्वैप केवल दो एलिमेंट खिसकाता है।
कानबन बोर्ड
टीम का बोर्ड: कार्य जोड़ें, लोगों को असाइन करें, डायलॉग में संपादित करें, व्यक्ति या खोज से फ़िल्टर करें, कॉलम के बीच खींचें और हटाने का बदलाव अनडू करें। कॉलम और कार्ड उन्हीं ऑब्जेक्ट के साधारण ऐरे हैं; हर मूव एक splice() है। पंक्तियों का मिलान पहचान से होता है, इसलिए कार्ड खींचने, सॉर्ट करने, असाइन करने या संपादित करने पर उसका एलिमेंट दोबारा इस्तेमाल होता है। स्क्रीन पर माउंट की गिनती इसकी पुष्टि करती है।
three.js इंस्पेक्टर
एक लाइब्रेरी जिसका अपना स्टेट है। पैनल सीधे three.js ऑब्जेक्ट से स्थिति, रंग और फ़्लैग पढ़ता है और उन पर वापस संपादन लिखता है। रेंडर लूप प्रति फ्रेम एक बार update() को कॉल करता है; स्टेट की कोई अलग कॉपी नहीं रखी जाती।
अनंत स्क्रॉल
बिना अंत की फ़ीड: तेज़ नकली fetch() हर नया पेज बनाकर एक साधारण ऐरे में जोड़ता है। DOM में केवल व्यूपोर्ट के पास की पंक्तियाँ रहती हैं: list() दो स्पेसर के बीच posts.slice(start, end) रेंडर करता है, इसलिए एक लाख पोस्ट पर भी पेज हल्का रहता है। वास्तविक अंत पर लगा सेंटिनल दिखाई देने से पहले अगला पेज माँग लेता है।
डेस्कटॉप
फ़ाइलें, नोट्स, टर्मिनल, कैलकुलेटर, टाइमर, कानबन बोर्ड, वित्त ऐप और कैलेंडर वाला काम करता डेस्कटॉप। ब्राउज़र में सेव साझा सिम्युलेटेड डिस्क पर फ़ोल्डर बनाएँ और व्यवस्थित करें, नोट्स संपादित करें और शेल कमांड चलाएँ। कैलकुलेटर में सीधे कीबोर्ड से टाइप करें, इनपुट पर फ़ोकस करने के लिए टर्मिनल में कहीं भी क्लिक करें, बोर्ड पर कॉलम के बीच कार्ड खींचें या वित्त स्प्रेडशीट में हिसाब रखें और चार्ट बदलते देखें। हिसाब IndexedDB में रहता है। ऐप की विंडो खिसकाने, आकार बदलने या ऐप बदलने पर उनका स्टेट बना रहता है। चलता टाइमर into() से टास्कबार ट्रे भरता है।
नोड ग्राफ़
संख्याओं, टेक्स्ट और स्विच को गणित, तुलना और If नोड से जोड़ें। टाइप करते ही हर मान अपडेट होता है। फ़ंक्शन भी ग्राफ़ हैं: उनके Input और Output नोड हर Call के पोर्ट हैं। Call अपने ही फ़ंक्शन को भी कॉल कर सकता है, इसलिए फ़ैक्टोरियल और योग रिकर्शन से चलते हैं और If रुकने की शर्त देता है। इंजन साधारण JavaScript है: हर नोड एक जनरेटर है जो इनपुट माँगने के लिए yield करता है। एक लूप अपने स्टैक से उन्हें चलाता है, इसलिए sum(50000) JavaScript कॉल स्टैक इस्तेमाल किए बिना लगभग एक सेकंड के दसवें हिस्से में पचास हज़ार कॉल की गहराई तक जाता है। रुकने की शर्त न हो, तो केवल चरणों की सीमा रिकर्शन रोकती है। खींचने पर x और y बदलते हैं और केवल कैनवस स्कोप अपडेट होता है। रन की गिनती दिखाती है कि नोड खिसकाने से ग्राफ़ नहीं चलता।
डेटा ग्रिड
10,000 साधारण रो ऑब्जेक्ट पर बनी कार्य तालिका। खोज, फ़िल्टर, सॉर्ट और पेजिंग ऐरे पर साधारण फ़ंक्शन हैं। टेबल की बॉडी मौजूदा पेज पर एक list() है। पहचान से मिलान होने के कारण सॉर्टिंग पेज पर बची पंक्तियों को खिसकाती है, और संपादित पंक्ति हर जगह वही ऑब्जेक्ट रहती है। बनी पंक्तियों की गिनती इसकी पुष्टि करती है।
चैट
तीन चैनल वाली चैट। हर चैनल एक साधारण ऑब्जेक्ट है: हिस्ट्री, कर्सर, टाइपिंग स्टेट, ड्राफ़्ट और स्क्रॉल स्थिति। चैनल बदलने पर सब जस का तस रहता है और update("chat-sidebar") केवल अपठित संदेशों के बैज रीफ़्रेश करता है। unshift() से पुरानी हिस्ट्री ऊपर लोड होती रहती है और scrollTop जोड़ी गई ऊँचाई जितना बढ़ता है। संदेश सर्वर तक पहुँचने से पहले दिखता है। send() उसी ऑब्जेक्ट को पैच करता है; Retry, Edit, Delete और प्रतिक्रियाएँ उसकी पंक्ति दोबारा नहीं बनातीं। संदेशों में कोड, बोल्ड टेक्स्ट, लिंक और @mentions दिखते हैं।
लाइव डैशबोर्ड
कार्ड अलग-अलग दर से रीफ़्रेश होते हैं: प्रति सेकंड 20 बार से लेकर एक बार तक। हर कार्ड एक scope() है और उसका टाइमर उसी कार्ड की आईडी के साथ update() कॉल करता है, इसलिए हर टिक केवल उसी कार्ड के मान चलाता है। स्क्रीन पर हर डायनेमिक मान के चलने की गिनती दिखती है। साधारण update() पर स्विच करें: घड़ी का मान एक बार बदलने के लिए प्रति सेकंड लगभग सौ बार गणना होती है।
पिक्सेल एडिटर
चित्र रंग बताने वाली 1024 स्ट्रिंग का एक साधारण ऐरे है। हर सेल उससे अपना रंग पढ़ता है। स्ट्रोक ऐरे बदलता है और update() कॉल करता है। स्ट्रोक पूरा होने पर एडिटर slice() से एक कॉपी रखता है। अनडू, रीडू और हिस्ट्री की list() का हर चरण पुराना ऐरे वापस रखता है: न स्टोर, न इम्यूटेबल डेटा।
स्नेक
गेम लूप एक टाइमर है जो साधारण ऑब्जेक्ट पर step() और हर टिक पर एक बार update() कॉल करता है। साँप अपने सेल ऑब्जेक्ट की list() है। हर टिक पर पूँछ का ऑब्जेक्ट नया सिर बन जाता है, इसलिए एक एलिमेंट खिसकता है और नया नहीं बनता। बने सेगमेंट की गिनती साँप के खाने पर ही बढ़ती है। खाना keyframes() एनिमेशन से उभरता है।
स्टेप सीक्वेंसर
अपनी घड़ी वाली लाइब्रेरी। Web Audio अपनी टाइमलाइन पर हर नोट पहले से शेड्यूल करता है। पैटर्न बूलियन मानों का साधारण 2D ऐरे है, जिसे ग्रिड टॉगल करता है और शेड्यूलर पढ़ता है, इसलिए क्लिक का असर अगली बार सुनाई देता है। सुनाई दे रहा स्टेप बदलने पर प्लेहेड केवल अपना scope() अपडेट करता है। पहली बार Play दबाने पर ऑडियो शुरू होता है और माउंट क्लीनअप में बंद होता है, इसलिए उदाहरण छोड़ते ही आवाज़ रुक जाती है।
लोकेल स्विचर
एक भाषा वाले ऐप की तरह हर लेबल एक स्टैटिक मान है, इसलिए update() उसे दोबारा नहीं पढ़ता। कार्ट पर क्लिक करने से केवल मात्रा और कुल अपडेट होते हैं। भाषा बदलने पर इस ट्री का forceUpdate() चलता है, जो कंपोनेंट दोबारा चलाकर उन्हीं एलिमेंट को पैच करता है, lang और dir सहित। मुद्रा, बहुवचन, तारीखें और सूचियाँ Intl से फ़ॉर्मैट होती हैं। भाषा बदलने पर कार्ट और टाइप किया गया कूपन बने रहते हैं।
थीम एडिटर
एक छोटी कंपोनेंट लाइब्रेरी: createCss() टोकन को नाम देता है और variants() उनसे बटन, बैज, कार्ड, इनपुट, अलर्ट और स्विच बनाता है। टोकन CSS वेरिएबल हैं, इसलिए हर क्लास एक बार कंपाइल होती है। हर कंट्रोल एक साधारण थीम ऑब्जेक्ट बदलता है और update() कॉल करता है, जो एक style एलिमेंट का टेक्स्ट दोबारा लिखता है।