zag

Zag एक JavaScript पुस्तकालय है जो accessible UI घटकों को बनाने के लिए परिमित अवस्था यंत्रों (finite state machines) का निर्माण करता है। इसका कथित उद्देश्य सामान्य घटक पैटर्न (टैब, मेनू, मोडल्स, टूलटिप्स और अन्य) को प्रत्येक फ्रेमवर्क में अलग-अलग फिर से लागू करने से बचना है, बल्कि इंटरैक्शन लॉजिक को एक बार फ्रेमवर्क-स्वाधीन तरीके से मॉडल करना है। README में बताए गए मुख्य विचार: - एक बार लिखें, हर जगह उपयोग करें: घटक इंटरैक्शन का मॉडल किसी भी फ्रेमवर्क से स्वतंत्र रूप से तैयार किया गया है, जिसमें React, Solid, Svelte और Vue के लिए adapters उपलब्ध हैं। - सुलभता पर ध्यान केंद्रित करना: प्रोजेक्ट कहता है कि यह कीबोर्ड इंटरैक्शन, फोकस प्रबंधन और ARIA भूमिकाओं व विशेषताओं जैसे विवरणों को संभालता है। - हेडलेस: मशीन APIs को पूरी तरह से अशैलित (unstyled) बताया गया है, जिससे डिज़ाइन सिस्टम का चयन विकसितकर्ता पर छोड़ दिया जाता है। - अवस्था यंत्र: कार्यान्वयन अवस्था आरेखों के विचारों पर निर्मित है, हालांकि README में यह भी कहा गया है कि यह SCXML विनिर्देश का पालन नहीं करता है। उपयोग मॉडल: मशीनों को घटक के अनुसार अलग-अलग पैकेज के रूप में प्रकाशित किया जाता है, उदाहरण के लिए @zag-js/dialog और @zag-js/tooltip, जिन्हें npm या yarn से इंस्टॉल किया जाता है। फ्रेमवर्क wrappers जैसे @zag-js/react, @zag-js/vue, @zag-js/solid और @zag-js/svelte आपको एप्लिकेशन के भीतर मशीन का उपभोग करने देते हैं। README का React उदाहरण दिखाता है कि useMachine को @zag-js/react से मिलाकर एक घटक पैकेज के साथ उपयोग किया जाता है, फिर connect(service, normalizeProps) के माध्यम से props API उत्पन्न किया जाता है, जिसे root container और प्रत्येक आइटम जैसे तत्वों पर spread किया जाता है। README में बताए गए मार्गदर्शी सिद्धांत: मशीनों और परीक्षणों का मॉडल WAI-ARIA लेखन अभ्यास के अनुसार किया गया है; हर घटक के लिए end-to-end परीक्षण लिखे जाते हैं ताकि व्यवहार सभी फ्रेमवर्क में सुसंगत रहे; और मशीनों को हल्का और सरल रखने का प्रयास किया जाता है, spawn और nested states जैसी जटिल मशीन अवधारणाओं से बचते हुए। रिपॉजिटरी और कार्यप्रवाह नोट: - README से दस्तावेज़ीकरण और CHANGELOG.md से परिवर्तन लॉग लिंक हैं (zagjs.com और CHANGELOG.md)। - बिल्ड esbuild और turborepo का उपयोग करती है जो पैकेजों के बीच समवर्ती बिल्ड उत्पन्न करता है, जिससे CJS, ESM और DTS आउटपुट मिलता है। - React (Next.js TypeScript), Vue 3, Solid और Svelte के लिए स्टार्टर उदाहरण मौजूद हैं। - End-to-end परीक्षण Playwright से किए जाते हैं और React, Vue, Solid के प्रति फ्रेमवर्क चलाए जाते हैं। - नए मशीन पैकेज या नए उपयोगिता पैकेज को सॉफ़्टस्किन करने के लिए जनरेटर कमांड प्रदान किए गए हैं। - अन्य कमांड्स परीक्षण चलाने, lint करने, बिल्ड करने और वेबसाइट शुरू करने से संबंधित हैं। README में कई प्रेरणाओं का also उल्लेख किया गया है, जिनमें Chakra UI के React और Vue कार्यान्वयन के बीच डुप्लिकेट कोड, शोध केवल UI patterns, Material Components Web, Radix UI, XState, Vue.js, Lit और Sonner शामिल हैं। योगदान मार्गदर्शन Good First Issue लेबल, बग और दस्तावेज़ीकरण अंतर के लिए मुद्दे रिपोर्टिंग, और सुविधा अनुरोधों की ओर इशारा करता है। प्रोजेक्ट MIT लाइसेंस के तहत Chakra Systems Inc. द्वारा बनाए रखा गया है।