NUCLO / 12

भाषा

व्यावहारिक उदाहरण। लाइव डेमो।

लाइव प्रीव्यू और सोर्स कोड साथ-साथ देखने के लिए उदाहरण चुनकर पूरी स्क्रीन पर खोलें।

कंपोनेंट

4

स्टैटिक और डायनेमिक पैरामीटर, चाइल्ड नोड, ऑब्जेक्ट पहचान से मिलती सूचियाँ और नेस्टेड डेटा वाले साधारण फ़ंक्शन। हर प्रीव्यू माउंट की गिनती करता है।

05

स्टैटिक और डायनेमिक पैरामीटर

वैल्यू पैरामीटर कंपोनेंट बनते समय एक बार पढ़ा जाता है। फ़ंक्शन पैरामीटर हर update() पर पढ़ा जाता है। दोनों मामलों में कंपोनेंट खुद केवल एक बार चलता है, जिसकी पुष्टि माउंट काउंटर करता है।

कंपोनेंट
06

चाइल्ड नोड और मॉडिफ़ायर

कंपोनेंट spread से अपने चाइल्ड आगे भेजता है: बिल्डर, टेक्स्ट, एट्रिब्यूट ऑब्जेक्ट और मॉडिफ़ायर। सशर्त हिस्से when() में रहते हैं, इसलिए उन्हें घेरने वाला कंपोनेंट दोबारा नहीं बनता।

कंपोनेंट
07

सूची में ऑब्जेक्ट की पहचान

list() किसी पंक्ति को तब तक रखता है जब तक उसका आइटम ऐरे में है। इनपुट या फ़ोकस खोए बिना क्रम बदलें, जोड़ें और नाम बदलें। स्विच हर अपडेट पर ऑब्जेक्ट क्लोन करके पहचान बदलने की लागत दिखाता है।

कंपोनेंट
08

नेस्टेड डेटा

सदस्यों और उनके कार्यों वाली टीम: हर स्तर पर एक कंपोनेंट, नेस्टेड list() कॉल और उन्हीं ऑब्जेक्ट के फ़ंक्शन से गणना किए गए काउंटर। गहरे बदलाव केवल अपने संबंधित नोड पैच करते हैं।

कंपोनेंट

API

13

हर बुनियादी हिस्से के लिए एक छोटा डेमो, जो दस्तावेज़ों में भी शामिल है।

09

टैग बिल्डर

बिल्डर एट्रिब्यूट, स्टैटिक चाइल्ड और डायनेमिक टेक्स्ट लेता है। Rename स्टेट बदलकर update() कॉल करता है।

API
10

कंपोनेंट

कंपोनेंट एक साधारण फ़ंक्शन है। हर Counter() कॉल अपना अलग काउंटर रखती है।

API
11

एट्रिब्यूट

एट्रिब्यूट के मान फ़ंक्शन हो सकते हैं। दूसरा बटन busy बदलकर update() कॉल करता है; Save के disabled और aria-busy उसी के अनुसार बदलते हैं।

API
12

इवेंट

onInput और onKeyDown सामान्य एट्रिब्यूट हैं। टेक्स्ट लिखें और साफ़ करने के लिए Escape दबाएँ।

API
13

लाइफ़साइकल

onMount इंटरवल शुरू करता है और उसका क्लीनअप फ़ंक्शन लौटाता है। अनमाउंट होने पर क्लीनअप चलता है, इसलिए टाइमर दोबारा माउंट होने तक गिनती रुक जाती है।

API
14

स्पष्ट अपडेट

count++ केवल वेरिएबल बदलता है। इस बटन या पेज की किसी दूसरी गतिविधि से अगला update() चलने पर टेक्स्ट अपडेट होता है।

API
15

डायनेमिक मान

नाम बदलें। स्टैटिक टेक्स्ट एलिमेंट बनते समय तय हो गया था; डायनेमिक टेक्स्ट हर update() पर दोबारा चलता है। forceUpdate() ट्री दोबारा बनाता है, इसलिए स्टैटिक टेक्स्ट भी अपडेट होता है।

API
16

update()

हर update() सभी डायनेमिक मान चलाता है, भले उनका डेटा न बदला हो। इस पेज के दूसरे डेमो भी काउंटर बढ़ाते हैं।

API
17

scope()

दोनों बटन एक आइटम जोड़ते हैं और उपयोगकर्ता का नाम बदलते हैं। update('cart') केवल उस स्कोप का पैनल अपडेट करता है।

API
18

when()

पहली सही शर्त चुनी जाती है; कोई शर्त सही न हो तो .else() रेंडर होता है। नई शाखा शुरू से बनती है।

API
19

list()

पंक्तियाँ ऑब्जेक्ट की पहचान से मिलाई जाती हैं। पंक्ति पर चेक लगाएँ, फिर Reverse दबाएँ: चेकबॉक्स सहित वही <li> खिसकता है।

API
20

region() और into()

स्टैक्ड मुख्य रीजन और साइड रीजन वाला लेआउट बाहर से भरा जाता है। Home में लिखें, डायलॉग खोलकर बंद करें: टेक्स्ट बना रहता है। Article एक into() से दोनों रीजन भरता है।

API
21

forceUpdate()

update() केवल डायनेमिक lang पंक्ति अपडेट करता है। forceUpdate() App को दोबारा कॉल करके उसी <h1> को पैच करता है। स्पष्ट रूप केवल इसी ट्री को दोबारा बनाता है, पूरे पेज को नहीं।

API

फ़ॉर्म

3

साधारण स्टेट पर सामान्य फ़ंक्शन से वैलिडेशन, touched फ़ील्ड, चरण और डायनेमिक पंक्तियाँ।

25

फ़ील्ड वैलिडेशन

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

फ़ॉर्म
26

कई चरणों वाला विज़ार्ड

एक डेटा ऑब्जेक्ट पर when() की शाखाओं के रूप में तीन चरण। Next मौजूदा चरण के फ़ील्ड को touched चिह्नित करता है और वैलिडेशन सफल होने पर ही आगे बढ़ता है। Review में सभी मान Edit लिंक के साथ दिखते हैं।

फ़ॉर्म
27

डायनेमिक पंक्तियाँ

ऐरे में रखी इनवॉइस की पंक्तियाँ list() से रेंडर होती हैं। हर पंक्ति अपना वैलिडेशन करती है और कुल में केवल मान्य पंक्तियाँ गिनी जाती हैं। दूसरी पंक्तियाँ जोड़ने या हटाने पर मौजूदा पंक्तियों के इनपुट बने रहते हैं।

फ़ॉर्म

SVG

27

साधारण डेटा, पॉइंटर इवेंट और update() से चलने वाले SVG टैग बिल्डर के चार्ट, एनिमेशन, टूल और गेम।

28

बार चार्ट

ऐरे से बने rect। उनके y और height डेटा के फ़ंक्शन हैं, इसलिए update() बार को खिसकाता है।

SVG
29

लाइन चार्ट

बिंदुओं से बना d वाला एक पाथ, साथ में ग्रेडिएंट से भरा हिस्सा और हर बिंदु के लिए एक वृत्त।

SVG
30

डोनट चार्ट

हर स्लाइस के लिए एक वृत्त। stroke-dasharray उसे रिंग का उसका हिस्सा देता है और stroke-dashoffset उसकी शुरुआत तय करता है।

SVG
31

SVG एनिमेशन

SMIL के लिए बिल्डर: animateSvg सूरज को धड़कने जैसा प्रभाव देता है और animateTransformSvg ग्रह को उसकी कक्षा में घुमाता है। डायनेमिक dur गति तय करता है।

SVG
32

गेज

stroke-dashoffset से भरता चाप और CSS ट्रांसफ़ॉर्म से घूमती सुई। दोनों एक ही संख्या के फ़ंक्शन हैं।

SVG
33

रडार चार्ट

पाँच अक्षों पर पाँच मान। आकृति एक पाथ है जिसका d डेटा से गणना किया जाता है, इसलिए update() उसका आकार बदलता है।

SVG
34

हीटमैप

rect की ग्रिड, जिनका fill-opacity एक स्तर के अनुसार बदलता है। स्तर बढ़ाने के लिए सेल पर क्लिक करें। titleSvg चाइल्ड उसका टूलटिप है।

SVG
35

होवर टूलटिप

SVG एलिमेंट पर पॉइंटर इवेंट। onPointerEnter सक्रिय बिंदु चुनता है और टूलटिप का समूह खिसककर उसके पास पहुँचता है।

SVG
36

कर्व एडिटर

क्यूबिक बेज़ियर कर्व के हैंडल खींचें। onPointerDown बिंदु चुनता है, svg का onPointerMove उसे खिसकाता है और पाथ उसके अनुसार बदलता है।

SVG
37

घड़ी

सुइयाँ लाइन हैं जिनका transform समय का फ़ंक्शन है। onMount घड़ी शुरू करता है और क्लीनअप लौटाता है।

SVG
38

आइकन टॉगल

CSS ट्रांज़िशन से क्रॉस में बदलता मेन्यू आइकन और क्लिक पर शुरू होने वाले SMIL एनिमेशन से उभरता दिल।

SVG
39

लाइव स्ट्रीम

टाइमर पर दो डेटा सीरीज़ बाईं ओर स्क्रॉल होती हैं। एक टिक जितनी अवधि का CSS ट्रांज़िशन गति को सहज बनाता है। किसी सैंपल का मान देखने के लिए होवर करें।

SVG
40

कैंडलस्टिक चार्ट

चालीस स्लॉट अपनी-अपनी कैंडल का डेटा पढ़ते हैं। समयावधि बदलें, औसत दिखाएँ या छिपाएँ, मान देखने के लिए होवर करें या लाइव कैंडल को अपडेट होते देखें।

SVG
41

बार चार्ट रेस

दस बार हमेशा DOM में रहते हैं। उनकी रैंक translateY तय करती है, इसलिए मान बदलने पर ट्रांज़िशन हर बार को उसकी पंक्ति तक खिसकाता है।

SVG
42

स्टैक्ड एरिया चार्ट

चार बैंड स्टैक्ड, स्ट्रीम और प्रतिशत लेआउट के बीच आकार बदलते हैं। सीरीज़ छिपाने पर उसके बैंड की मोटाई केवल शून्य हो जाती है, इसलिए हर पाथ के कमांड की संरचना वही रहती है।

SVG
43

ट्रीमैप

वर्ग जैसे खानों वाला लेआउट जिसमें समूह खोलकर अंदर जा सकते हैं। मेट्रिक बदलने पर हर सेल अपने नए स्थान तक खिसकता है और समूह पर क्लिक करने पर उसके चाइल्ड दिखाई देते हैं।

SVG
44

लाइव हिस्टोग्राम

चार वितरणों से लगातार सैंपल आते हैं। हर बदलाव पर बिन की गिनती दोबारा होती है, फिट किया गया बेल कर्व औसत के अनुसार बदलता है और स्लाइडर बिन की संख्या तय करता है।

SVG
45

ड्रॉइंग पैड

पॉइंटर इवेंट से पॉलीलाइन बनाएँ। list() हर स्ट्रोक के लिए एक पॉलीलाइन रेंडर करता है। बन रहा स्ट्रोक हर update() पर लंबा होता है।

SVG
46

रोटरी नॉब

कस्टम स्लाइडर: पॉइंटर का कोण मान तय करता है, ऐरो कुंजियाँ उसे एक-एक चरण बदलती हैं और pathLength="100" मान को डैश में बदलता है।

SVG
47

कलर व्हील

कोण से hue और केंद्र से दूरी के अनुसार saturation चुनें। नब्बे वेज, एक रेडियल ग्रेडिएंट और एक गहरी डिस्क मिलकर व्हील बनाते हैं।

SVG
48

स्पाइरोग्राफ़

पहिया रिंग के अंदर घूमता है और पेन उसका पाथ बनाता है। हर फ़्रेम एक डैश लंबा करता है और केवल अपना scope() अपडेट करता है।

SVG
49

उछलती गेंदें

requestAnimationFrame लूप में गुरुत्वाकर्षण, दीवारें और टक्करें। गेंद उछालने के लिए पीछे खींचकर छोड़ें।

SVG
50

चिपचिपे ब्लॉब

ब्लर और कलर मैट्रिक्स फ़िल्टर से ब्लॉब आपस में घुलते हैं। वृत्तों की लड़ी पॉइंटर के पीछे चलती है।

SVG
51

फ़ोर्स ग्राफ़

नोड एक-दूसरे को धकेलते हैं, लिंक खींचते हैं और लेआउट की गति धीरे-धीरे रुक जाती है। नोड खींचें या नया चाइल्ड जोड़ने के लिए उस पर क्लिक करें।

SVG
52

ब्रश और ज़ूम

ऊपर के चार्ट को ज़ूम करने के लिए ओवरव्यू में एक रेंज चुनें। ब्रश के अनुसार बदलता clipPath चुने हिस्से को रंगता है।

SVG
53

टिक-टैक-टो

कंप्यूटर के साथ खेलें। when() हर निशान जोड़ता है और उसके डैश का CSS एनिमेशन उसे बनते हुए दिखाता है।

SVG
54

गोलाकार टेक्स्ट

बैज के लिए टेक्स्ट लिखें। textPath उसे वृत्त पर मोड़ता है और textLength उसे ठीक एक चक्कर में फ़िट करता है।

SVG

रूटिंग

6

रूट टेबल, मिलान, सक्रिय रूट, लेयर और लोडर। nuclo-router एक अलग पैकेज है: npm install nuclo nuclo-router.

55

रूटिंग वाला ऐप

फ़्रेम में अपने राउटर के साथ चलता ऐप: रूट टेबल, एक outlet(), साधारण लिंक, pending स्टेट और 404। लिंक खोलें, फिर Back इस्तेमाल करें।

रूटिंग+ nuclo-router
56

नेस्टेड रूट

Docs चाइल्ड रूट वाला लेआउट है। विषय उसके outlet() में रेंडर होता है और ./topic लिंक लेआउट के रूट के सापेक्ष हल होते हैं। नोट्स लिखें, फिर विषय बदलें: लेआउट दोबारा नहीं बनता।

रूटिंग+ nuclo-router
57

रूट लोडर

पोस्ट पेज एक load() एक्सपोर्ट करता है जो पेज बनने से पहले चलता है। इंतज़ार के दौरान router.pending देखें। टूटी पोस्ट पर लोडर थ्रो करे, तो Retry के साथ त्रुटि की स्थिति देखें।

रूटिंग+ nuclo-router
58

लेयर

ऑर्डर फ़ॉर्म ग्राहक का पेज लेयर के रूप में पुश करता है और उसके परिणाम का इंतज़ार करता है। फ़ॉर्म दोबारा रेंडर नहीं होता, इसलिए उसके नोट्स बने रहते हैं। Save पुश को रिज़ॉल्व करता है; Cancel या Back उसे रद्द करता है।

रूटिंग+ nuclo-router
59

कई राउटर और लोडिंग

दो राउटर, दो स्पिनर। दुकान के लेआउट और उसके सेक्शन दोनों में load() हैं: दोनों एक router.pending के तहत समानांतर चलते हैं। साइडबार का अलग राउटर बनाया जाता है, लेकिन शुरू नहीं होता। उसका अपना लोडिंग फ़्लैग onNavigate से रीफ़्रेश होता है।

रूटिंग+ nuclo-router
60

पैटर्न मिलान

स्टैटिक, :param और *rest पैटर्न, साथ में दो पैरेंट के नीचे लगी एक सेक्शन टेबल। पथ लिखकर match() देखें: यह बिना कुछ लोड किए मिलान करता है।

रूटिंग+ nuclo-router

ऐप

15

पूरी स्क्रीन के बड़े प्रोग्राम, टैब में उनके वास्तविक सोर्स के साथ: विंडो वाला डेस्कटॉप, डेटा ग्रिड, चैट, गेम, एडिटर और अपना स्टेट रखने वाली लाइब्रेरी।

61

पेज बिल्डर

सीधे पेज पर लिखें। ब्लॉक का क्रम बदलने या उन्हें लेआउट में ले जाने के लिए ग्रिप खींचें। नया ब्लॉक जोड़ने के लिए / दबाएँ और कार्रवाइयों के लिए राइट-क्लिक करें। ग्रिड और फ़्लेक्स लेआउट को स्टाइल करें, बदलाव अनडू करें, फ़ोन के आकार में प्रीव्यू देखें और HTML एक्सपोर्ट करें।

ऐप
62

एल्गोरिथम स्टेपर

इंजन साधारण JavaScript है: जनरेटर ऐरे बदलते हैं और हर चरण के बाद yield करते हैं। प्लेयर next() और update() कॉल करता है। बार उन्हीं ऑब्जेक्ट पर एक list() हैं, इसलिए स्वैप केवल दो एलिमेंट खिसकाता है।

ऐप
63

कानबन बोर्ड

टीम का बोर्ड: कार्य जोड़ें, लोगों को असाइन करें, डायलॉग में संपादित करें, व्यक्ति या खोज से फ़िल्टर करें, कॉलम के बीच खींचें और हटाने का बदलाव अनडू करें। कॉलम और कार्ड उन्हीं ऑब्जेक्ट के साधारण ऐरे हैं; हर मूव एक splice() है। पंक्तियों का मिलान पहचान से होता है, इसलिए कार्ड खींचने, सॉर्ट करने, असाइन करने या संपादित करने पर उसका एलिमेंट दोबारा इस्तेमाल होता है। स्क्रीन पर माउंट की गिनती इसकी पुष्टि करती है।

ऐप
64

three.js इंस्पेक्टर

एक लाइब्रेरी जिसका अपना स्टेट है। पैनल सीधे three.js ऑब्जेक्ट से स्थिति, रंग और फ़्लैग पढ़ता है और उन पर वापस संपादन लिखता है। रेंडर लूप प्रति फ्रेम एक बार update() को कॉल करता है; स्टेट की कोई अलग कॉपी नहीं रखी जाती।

ऐप
65

अनंत स्क्रॉल

बिना अंत की फ़ीड: तेज़ नकली fetch() हर नया पेज बनाकर एक साधारण ऐरे में जोड़ता है। DOM में केवल व्यूपोर्ट के पास की पंक्तियाँ रहती हैं: list() दो स्पेसर के बीच posts.slice(start, end) रेंडर करता है, इसलिए एक लाख पोस्ट पर भी पेज हल्का रहता है। वास्तविक अंत पर लगा सेंटिनल दिखाई देने से पहले अगला पेज माँग लेता है।

ऐप
66

डेस्कटॉप

फ़ाइलें, नोट्स, टर्मिनल, कैलकुलेटर, टाइमर, कानबन बोर्ड, वित्त ऐप और कैलेंडर वाला काम करता डेस्कटॉप। ब्राउज़र में सेव साझा सिम्युलेटेड डिस्क पर फ़ोल्डर बनाएँ और व्यवस्थित करें, नोट्स संपादित करें और शेल कमांड चलाएँ। कैलकुलेटर में सीधे कीबोर्ड से टाइप करें, इनपुट पर फ़ोकस करने के लिए टर्मिनल में कहीं भी क्लिक करें, बोर्ड पर कॉलम के बीच कार्ड खींचें या वित्त स्प्रेडशीट में हिसाब रखें और चार्ट बदलते देखें। हिसाब IndexedDB में रहता है। ऐप की विंडो खिसकाने, आकार बदलने या ऐप बदलने पर उनका स्टेट बना रहता है। चलता टाइमर into() से टास्कबार ट्रे भरता है।

ऐप
67

नोड ग्राफ़

संख्याओं, टेक्स्ट और स्विच को गणित, तुलना और If नोड से जोड़ें। टाइप करते ही हर मान अपडेट होता है। फ़ंक्शन भी ग्राफ़ हैं: उनके Input और Output नोड हर Call के पोर्ट हैं। Call अपने ही फ़ंक्शन को भी कॉल कर सकता है, इसलिए फ़ैक्टोरियल और योग रिकर्शन से चलते हैं और If रुकने की शर्त देता है। इंजन साधारण JavaScript है: हर नोड एक जनरेटर है जो इनपुट माँगने के लिए yield करता है। एक लूप अपने स्टैक से उन्हें चलाता है, इसलिए sum(50000) JavaScript कॉल स्टैक इस्तेमाल किए बिना लगभग एक सेकंड के दसवें हिस्से में पचास हज़ार कॉल की गहराई तक जाता है। रुकने की शर्त न हो, तो केवल चरणों की सीमा रिकर्शन रोकती है। खींचने पर x और y बदलते हैं और केवल कैनवस स्कोप अपडेट होता है। रन की गिनती दिखाती है कि नोड खिसकाने से ग्राफ़ नहीं चलता।

ऐप
68

डेटा ग्रिड

10,000 साधारण रो ऑब्जेक्ट पर बनी कार्य तालिका। खोज, फ़िल्टर, सॉर्ट और पेजिंग ऐरे पर साधारण फ़ंक्शन हैं। टेबल की बॉडी मौजूदा पेज पर एक list() है। पहचान से मिलान होने के कारण सॉर्टिंग पेज पर बची पंक्तियों को खिसकाती है, और संपादित पंक्ति हर जगह वही ऑब्जेक्ट रहती है। बनी पंक्तियों की गिनती इसकी पुष्टि करती है।

ऐप
69

चैट

तीन चैनल वाली चैट। हर चैनल एक साधारण ऑब्जेक्ट है: हिस्ट्री, कर्सर, टाइपिंग स्टेट, ड्राफ़्ट और स्क्रॉल स्थिति। चैनल बदलने पर सब जस का तस रहता है और update("chat-sidebar") केवल अपठित संदेशों के बैज रीफ़्रेश करता है। unshift() से पुरानी हिस्ट्री ऊपर लोड होती रहती है और scrollTop जोड़ी गई ऊँचाई जितना बढ़ता है। संदेश सर्वर तक पहुँचने से पहले दिखता है। send() उसी ऑब्जेक्ट को पैच करता है; Retry, Edit, Delete और प्रतिक्रियाएँ उसकी पंक्ति दोबारा नहीं बनातीं। संदेशों में कोड, बोल्ड टेक्स्ट, लिंक और @mentions दिखते हैं।

ऐप
70

लाइव डैशबोर्ड

कार्ड अलग-अलग दर से रीफ़्रेश होते हैं: प्रति सेकंड 20 बार से लेकर एक बार तक। हर कार्ड एक scope() है और उसका टाइमर उसी कार्ड की आईडी के साथ update() कॉल करता है, इसलिए हर टिक केवल उसी कार्ड के मान चलाता है। स्क्रीन पर हर डायनेमिक मान के चलने की गिनती दिखती है। साधारण update() पर स्विच करें: घड़ी का मान एक बार बदलने के लिए प्रति सेकंड लगभग सौ बार गणना होती है।

ऐप
71

पिक्सेल एडिटर

चित्र रंग बताने वाली 1024 स्ट्रिंग का एक साधारण ऐरे है। हर सेल उससे अपना रंग पढ़ता है। स्ट्रोक ऐरे बदलता है और update() कॉल करता है। स्ट्रोक पूरा होने पर एडिटर slice() से एक कॉपी रखता है। अनडू, रीडू और हिस्ट्री की list() का हर चरण पुराना ऐरे वापस रखता है: न स्टोर, न इम्यूटेबल डेटा।

ऐप
72

स्नेक

गेम लूप एक टाइमर है जो साधारण ऑब्जेक्ट पर step() और हर टिक पर एक बार update() कॉल करता है। साँप अपने सेल ऑब्जेक्ट की list() है। हर टिक पर पूँछ का ऑब्जेक्ट नया सिर बन जाता है, इसलिए एक एलिमेंट खिसकता है और नया नहीं बनता। बने सेगमेंट की गिनती साँप के खाने पर ही बढ़ती है। खाना keyframes() एनिमेशन से उभरता है।

ऐप
73

स्टेप सीक्वेंसर

अपनी घड़ी वाली लाइब्रेरी। Web Audio अपनी टाइमलाइन पर हर नोट पहले से शेड्यूल करता है। पैटर्न बूलियन मानों का साधारण 2D ऐरे है, जिसे ग्रिड टॉगल करता है और शेड्यूलर पढ़ता है, इसलिए क्लिक का असर अगली बार सुनाई देता है। सुनाई दे रहा स्टेप बदलने पर प्लेहेड केवल अपना scope() अपडेट करता है। पहली बार Play दबाने पर ऑडियो शुरू होता है और माउंट क्लीनअप में बंद होता है, इसलिए उदाहरण छोड़ते ही आवाज़ रुक जाती है।

ऐप
74

लोकेल स्विचर

एक भाषा वाले ऐप की तरह हर लेबल एक स्टैटिक मान है, इसलिए update() उसे दोबारा नहीं पढ़ता। कार्ट पर क्लिक करने से केवल मात्रा और कुल अपडेट होते हैं। भाषा बदलने पर इस ट्री का forceUpdate() चलता है, जो कंपोनेंट दोबारा चलाकर उन्हीं एलिमेंट को पैच करता है, lang और dir सहित। मुद्रा, बहुवचन, तारीखें और सूचियाँ Intl से फ़ॉर्मैट होती हैं। भाषा बदलने पर कार्ट और टाइप किया गया कूपन बने रहते हैं।

ऐप
75

थीम एडिटर

एक छोटी कंपोनेंट लाइब्रेरी: createCss() टोकन को नाम देता है और variants() उनसे बटन, बैज, कार्ड, इनपुट, अलर्ट और स्विच बनाता है। टोकन CSS वेरिएबल हैं, इसलिए हर क्लास एक बार कंपाइल होती है। हर कंट्रोल एक साधारण थीम ऑब्जेक्ट बदलता है और update() कॉल करता है, जो एक style एलिमेंट का टेक्स्ट दोबारा लिखता है।

ऐप