Jsdom: MutationObserver के लिए समर्थन जोड़ें

मुझे यह भी चाहिए। अगर कोई मुझे सही दिशा में इंगित कर सकता है तो मैं इसके लिए पुल अनुरोध पर काम करने को तैयार हूं।

@ SegFaultx64 इस मुद्दे पर पहली पोस्ट में schettino72 द्वारा प्रदान किया गया URL "सही दिशा" है।

पर्याप्त रूप से, मुझे यह भी यकीन नहीं है कि हम इतनी बड़ी परियोजना में पर्यवेक्षकों को कैसे पंजीकृत करेंगे। क्या ऐसी कोई जगह है जहां इस तरह की चीजें जमा हो रही हैं?

@ SegFaultx64 यह मेरे लिए स्पष्ट नहीं है कि सबसे अच्छा तरीका क्या होगा क्योंकि मैंने jsdom के उस हिस्से को नहीं देखा है। जब मैंने NS विधियों को ठीक करने पर काम किया (#727 देखें; नाममात्र रूप से, यह एक बग फिक्स है, लेकिन इसके लिए jsdom की हिम्मत में पर्याप्त बदलाव की आवश्यकता है) मैंने अनुरूप संरचनाओं की तलाश की और यह तय करने के लिए कि नई कक्षाएं/डेटा/ आदि। मैंने जो सबसे अच्छा सोचा था, उसके साथ मैं काफी आगे बढ़ गया, डोमिनिक ने कुछ टिप्पणियां कीं, मैंने समायोजन की आवश्यकता को समायोजित किया, और वह था।

@lddubeau ठीक है, संकेत के लिए धन्यवाद। मुझे वास्तव में MutationObserver https://github.com/megawac/MutationObserver.js/blob/master/MutationObserver.js के लिए एक अच्छा दिखने वाला शिम मिला

मेरी एकमात्र सलाह यह होगी कि https://dom.spec.whatwg.org/ का अवलोकन

इस पर कोई अपडेट?

@kresli पुल अनुरोध का स्वागत है!

मुझे नहीं पता कि यह कैसे करना है, लेकिन मैंने कुछ प्रयोग करने का फैसला किया है। सबसे खराब स्थिति मैं थोड़ा सीखता हूं, सबसे अच्छा मामला मैं योगदान करने में सक्षम हो सकता हूं।

मैं वर्तमान में यह समझने की कोशिश कर रहा हूं कि jsdom कैसे संरचित है और webidl कैसे काम कर रहा है (और jsdom में इसका उपयोग किया जाता है)

क्या MutationObserver: https://dxr.mozilla.org/mozilla-central/source/dom/webidl/MutationObserver.webidl~~~ पर इस वेब से प्रस्थान करना संभव होगा?

मैं इसे अब थोड़ा बेहतर समझता हूं - उपयोग करने के लिए इंटरफ़ेस यहां वर्णित होना चाहिए: https://dom.spec.whatwg.org/#interface -mutationobserver - सही?

@henrikkorsgaard सही! इसे jsdom में काम करने के लिए, आपको कुछ चीजों से शुरुआत करनी होगी:

• उपयुक्त MutationObserver.idl को https://github.com/tmpvar/jsdom/tree/master/lib/jsdom/living/nodes में जोड़ें
• उस फ़ोल्डर में एक MutationObserver-impl.js फ़ाइल भी जोड़ें। यहीं पर वास्तविक क्रियान्वयन का कार्य चलता है। उदाहरण के लिए, युक्ति कहती है "प्रत्येक MutationObserver ऑब्जेक्ट में ये संबद्ध अवधारणाएँ हैं।" वे शायद impl (= कार्यान्वयन) वर्ग में उदाहरण चर होंगे।

फिर आपको इम्प्लांट क्लास में निरीक्षण, डिस्कनेक्ट, और टेक रिकॉर्ड्स विधियों, साथ ही कंस्ट्रक्टर को लागू करने की आवश्यकता है। सामान्य तौर पर आपको यथासंभव युक्ति का पालन करने का प्रयास करना चाहिए। ( @ सेबमास्टर , क्या आप बता सकते हैं कि कंस्ट्रक्टर को कैसे करना है?)

इस मामले में, कैरेक्टरडेटा जैसी सरल चीज़ों के विपरीत, आपके बहुत से परिवर्तनों के लिए अन्य jsdom impl फ़ाइलों को संशोधित करने की आवश्यकता होगी। उदाहरण के लिए, युक्ति कहती है "प्रत्येक नोड में पंजीकृत पर्यवेक्षकों की एक संबद्ध सूची होती है।" इसके लिए Node impl में एक आवृत्ति चर जोड़ने की आवश्यकता होगी।

युक्ति यह भी कहती है "संबंधित समान-मूल ब्राउज़िंग संदर्भों की प्रत्येक इकाई में एक उत्परिवर्तन पर्यवेक्षक यौगिक माइक्रोटास्क कतारबद्ध ध्वज होता है, जो प्रारंभ में अस्थिर होता है, और MutationObserver ऑब्जेक्ट्स की एक संबद्ध सूची होती है, जो प्रारंभ में खाली होती है।" यह थोड़ा पेचीदा है, क्योंकि "संबंधित समान-मूल ब्राउज़िंग संदर्भों की इकाई" jsdom में स्पष्ट नहीं है। इसके लिए मैं क्या करूँगा कि उन्हें केवल विंडो ऑब्जेक्ट्स पर डालकर शुरू करना है। विंडो ऑब्जेक्ट अभी तक IDL का उपयोग नहीं करते हैं, इसलिए आप Window.js में केवल एक अंडरस्कोर-प्रीफिक्स्ड प्रॉपर्टी जोड़ेंगे। भविष्य में हम यह सुनिश्चित करने के बारे में चिंता करने की कोशिश कर सकते हैं कि चीजें कई विंडो में ट्रैक की जाती हैं (यानी आईफ्रेम का ख्याल रखें)। लेकिन अभी के लिए इन्हें लगाने के लिए विंडो एक अच्छी जगह है।

अंत में, "एक उत्परिवर्तन रिकॉर्ड कतार" के लिए उपयुक्त स्थान ढूंढकर बहुत सारे कार्यान्वयन का ध्यान रखा जाएगा। यदि आप https://dom.spec.whatwg.org/#queue -a-mutation-record पर जाते हैं और "क्यू ए म्यूटेशन रिकॉर्ड" पर क्लिक करते हैं तो आप उस स्पेस में सभी जगहों को देख सकते हैं जो होता है। यह थोड़ा मुश्किल होगा क्योंकि jsdom में सभी ठीक उसी तरह के हुक नहीं होते हैं जब चीजें होती हैं। लेकिन यह करने योग्य होना चाहिए, jsdom के _attrModified, _descendantRemoved, और _descendantAdded हुक का उपयोग करना। https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/living/attributes.js में भी "TODO म्यूटेशन ऑब्जर्वर स्टफ" है।

उम्मीद है की वो मदद करदे!

महान :)

फिर से, मैं webidl और बड़े कोडबेस के साथ सुपर अनुभवी नहीं हूं। मैं कुछ समय सीमा के साथ थोड़ा सा झुका हुआ हूं;)

मैं अपना सर्वश्रेष्ठ प्रदर्शन करूंगा और अगले कुछ हफ्तों में इसे लागू करूंगा। मैं एक या दो टेस्ट केस भी बनाने की कोशिश करूंगा।

ठीक,

मुझे idl और Impl बनाने के लिए अब तक मिल गया है और इसे window.js में आवश्यक है।

अब मैं इसके लिए एक परीक्षण फ़ाइल बनाने की कोशिश कर रहा हूं और मैं विंडो उपसर्ग के साथ new MutationObserver() को कॉल कर सकता हूं।

const window = jsdom("<html><body><div id='mutation'></div></body></html>").defaultView;

let observer = new window.MutationObserver(function(mutations){
      console.log(mutations);
});

क्या मुझे यहां कुछ चालबाजी याद आ रही है या कहीं कहीं मुझे MutationObserver को वैश्विक वस्तु के रूप में बेनकाब करने की आवश्यकता है (इसे विंडो ऑब्जेक्ट पर कॉल किए बिना कहा जाता है)।

मैंने Window.js . में निम्न पंक्ति जोड़ी है

const MutationObserver = require("../living/generated/MutationObserver");

यह सब पूछने के लिए खेद है। मैं बस कुछ प्रवेश-बिंदु स्थापित करने की कोशिश कर रहा हूं ताकि मैं परीक्षण शुरू कर सकूं और jsdom आर्किटेक्चर/पैटर्न का पालन कर सकूं।

आह, क्षमा करें, मैं वह हिस्सा भूल गया। आपको https://github.com/tmpvar/jsdom/blob/28f00b30236d540df1777ca6c2c0ee9e5e19fe5b/lib/jsdom/living/index.js#L28 जैसी लाइन जोड़नी होगी

मेरे पास उत्परिवर्तन कार्य को @domenic का विचार काम करेगा ( वेबकिट एक समर्पित थ्रेड/कतार में उत्परिवर्तन रिकॉर्ड जोड़ता है )। लेकिन इसके लिए कुछ प्रकार के कतारबद्ध और अधिक महत्वपूर्ण रूप से कुछ तर्क की भी आवश्यकता होगी जो कतार में मौजूद चीज़ों को निष्पादित करता है। यह मुझे दो प्रश्नों की ओर ले जाता है:

क्या jsdom में कोई अन्य घटक है जो ऐसी कतार से लाभान्वित हो सकता है? क्या वास्तुकला और (भविष्य) एकीकरण के संदर्भ में मुझे यहां कुछ विचार करना चाहिए?

क्या टाइमर के आधार पर कतार में कार्यों को निष्पादित करना सबसे चतुर होगा (क्या jsdom में कोई वैश्विक टिक है?) या सिर्फ वादे/पूर्ण कॉलबैक संरचना के आधार पर?

मैं बहुत ही बुनियादी कार्यान्वयन करने पर ध्यान केंद्रित कर रहा हूं और फिर भविष्य के कार्यान्वयन के मार्गदर्शन के लिए व्यापक परीक्षण मामलों को लिख रहा हूं।

तो, एक माइक्रोटास्क मूल रूप से सिर्फ process.nextTick(fn) । यह कंपाउंड माइक्रोटास्क व्यवसाय और "एक कंपाउंड माइक्रोटास्क सबटास्क निष्पादित करें" के कारण उत्परिवर्तन पर्यवेक्षकों के लिए थोड़ा पेचीदा है। मैं _थिंक_ आप ज्यादातर इसे अनदेखा कर सकते हैं; jsdom को अपने द्वारा सेट की जा रही सामग्री के बारे में चिंता करने की आवश्यकता नहीं है।

तो: जब युक्ति कहती है "उत्परिवर्तन पर्यवेक्षकों को सूचित करने के लिए एक यौगिक माइक्रोटास्क को कतारबद्ध करें", तो आप process.nextTick(notifyMutationObservers) । फिर, अंदर notifyMutationObservers , मुझे लगता है कि चरण 3 केवल उत्परिवर्तन पर्यवेक्षकों पर एक लूप हो सकता है, जो सबस्टेप्स को सिंक्रोनाइज़ करता है।

परीक्षणों के लिए, https://github.com/tmpvar/jsdom/blob/master/Contributing.md को अवश्य

यह पूछने के लिए सही जगह नहीं हो सकती है, लेकिन मुझे यह समझने में कुछ परेशानी हो रही है कि वेबिडल स्कीम ऑब्जेक्ट्स (जैसे /जेनरेटेड/म्यूटेशनरिकॉर्ड.जेएस) को इम्प्लांट फाइलों के बीच आगे और पीछे कैसे पास किया जाए (नोड-इम्प्ल -> म्यूटेशन ऑब्जर्वर-इम्प्ल) .

मैं ऑब्जेक्ट्स को शुद्ध JSON ऑब्जेक्ट्स के रूप में बनाने का लुत्फ उठा रहा हूं जो MutationRecords की स्कीमा को दर्पण करता है और उत्परिवर्तन होने पर बस इसे नोड-इम्प्ला से MutationObserver तक पास कर देता है। मुझे लगता है कि यह विनिर्देश में वर्णित MutationObservers के सभी पहलुओं को लागू करने की महत्वाकांक्षा को तोड़ देगा।

मुझे संदेह है क्योंकि मैं jsdom webidl आर्किटेक्चर/ऑब्जेक्ट मॉडल/इंटरफेस से परिचित नहीं हूं। कोड के भीतर एक उदाहरण मुझे इम्प्ला फाइलों में/जेनरेटेड/ऑब्जेक्ट्स के साथ काम करने को समझने में भी मदद करेगा।

हमें शायद इसे कहीं दस्तावेज करना चाहिए, लेकिन यहां जाता है:

आम तौर पर, जेनरेट किए गए एपीआई के माध्यम से जाने वाले किसी भी तर्क को स्वचालित रूप से अनबॉक्स/रीबॉक्स किया जाएगा, इसलिए आपको जेनरेट की गई वस्तुओं की परवाह करने की आवश्यकता नहीं है - केवल कार्यान्वयन वस्तुएं महत्वपूर्ण हैं। सिवाय - वास्तव में नहीं। यह मामला होगा, अगर हमारे पास _everything_ पहले से ही आईडीएल-आधारित पर स्विच किया गया था, जो कि ऐसा नहीं है। तर्क और वापसी मूल्य काम करते हैं, हालांकि हर बार जब आप एक गैर-आईडीएल वर्ग (जैसे विंडो) के साथ बातचीत करते हैं, तो आपको अनबॉक्सिंग/रीबॉक्सिंग करना होगा जब आप उन्हें स्वयं कोई तर्क प्रदान करेंगे (उदाहरण के लिए देखें https://github. com/tmpvar/jsdom/blob/master/lib/jsdom/living/events/EventTarget-impl.js#L103 , जहां हमें एक विंडो खोलनी है, क्योंकि विंडो अभी निष्क्रिय नहीं है, लेकिन EventTarget (जिसमें से विंडो इनहेरिट करती है) इससे यह)। यदि आवश्यक हो तो आप इस मैनुअल बॉक्सिंग को idlUtils.wrapperForImpl / idlUtils.implForWrapper ।

तो सामान्य तौर पर, आप एक इम्पल ऑब्जेक्ट बनाना चाहते हैं। ऐसा करने के लिए, आपको जेनरेट की गई फ़ाइल की आवश्यकता है और इसके निर्यात पर createImpl पर कॉल करें। यह तर्कों की एक सरणी (सार्वजनिक-निर्माता तर्कों के लिए) और निजी तर्कों की एक वस्तु लेगा (उन दोनों को impl वर्ग को प्रदान किया जाता है)। इसके लिए एक उदाहरण के लिए https://github.com/tmpvar/jsdom/blob/9dd9069354e36c077032f4cbcb1616a7d9e6f0c4/lib/jsdom/living/nodes/Document-impl.js#L549 देखें।

मुझे एहसास है कि यह लगभग पूरी बात को समझने के लिए पर्याप्त नहीं है (मुझे लगता है), इसलिए यदि आपके पास कुछ और विशिष्ट है तो मुझे और समझाने में खुशी होगी।

धन्यवाद @Sebmaster , इससे बहुत मदद मिली।

हां, एपीआई/ऑब्जेक्ट्स को कैसे एकीकृत और उपयोग करना चाहिए, इस पर कुछ उदाहरणों के साथ इसका दस्तावेजीकरण करना मददगार होगा, लेकिन मुझे लगता है कि मुझे अगले कुछ चरणों के लिए पर्याप्त जानकारी है।

शीघ्र नवीनीकरण!
यदि MutationRecord विनिर्देश का पालन करता है (मुझे लगता है) W3C परीक्षण विफल हो जाएगा। मैंने उनके भंडार में एक टिप्पणी की है।

मैं उन्हें अपने उद्देश्य के लिए स्थानीय रूप से अपडेट करूंगा लेकिन मुझे यकीन नहीं है कि मैं इन्हें W3C/jsdom के लिए प्रतिबद्ध करूंगा। यानी जब तक मेरे पास उस काम को भी पूरा करने का समय न हो।

लेकिन विशेषता उत्परिवर्तन अब अधिकांश परीक्षण पास कर लेते हैं और मैं सप्ताहांत के दौरान या अगले सप्ताह की शुरुआत में कुछ समय के लिए पुल अनुरोध करूंगा।

यह अति-रोमांचक है! क्या आप थोड़ा और विस्तार से बता सकते हैं कि मामला क्या है? मैं https://github.com/w3c/web-platform-tests/issues/2482 का पालन करने में काफी सक्षम नहीं था, इसलिए शायद: MutationRecord का संपत्ति मूल्य क्या परीक्षण की अपेक्षा करता है, और आपको क्या लगता है कि कल्पना की आवश्यकता है ?

मुद्दा यह है कि परीक्षण तुलना करने के लिए एक पूर्ण उत्परिवर्तन रिकॉर्ड निर्दिष्ट नहीं करता है। तो पहले परीक्षण मामले में परीक्षण आईडी मान बदल देगा और परिणामस्वरूप लौटाए गए उत्परिवर्तन रिकॉर्ड में पुरानी मान संपत्ति होगी। OldValue गुण अपेक्षित वस्तु में परिभाषित नहीं है और परीक्षण विफल हो जाएगा। जैसा कि मैं इसे समझता हूं एक उत्परिवर्तन रिकॉर्ड में हमेशा सभी गुण होने चाहिए, भले ही वे शून्य हों। उस स्थिति में उन्हें DOMString अशक्त होना चाहिए। जब टेस्टकेस में गुण सेट नहीं होते हैं, तो परीक्षण नल (टाइपऑफ़ ऑब्जेक्ट) की तुलना नल (टाइपऑफ़ स्ट्रिंग) से कर देगा और विफल हो जाएगा।

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

समझ में आता है?

अगर मैं सही हूं तो इसे ठीक करना काफी आसान है, लेकिन सभी मामलों को एक-एक करके देखने की आवश्यकता है। यह एक बाहरी व्यक्ति के रूप में jsdom और w3c परीक्षण दोनों के लिए थोड़ा कठिन हो सकता है :)

मुझे क्षमा करें, क्या आप सरल कर सकते हैं? मैं फॉर्म में एक उत्तर पसंद करूंगा: परीक्षण पुराने वैल्यू को शून्य या अपरिभाषित होने की उम्मीद करते हैं, लेकिन कल्पना "शून्य" मान देती है। या इसी के समान।

ऊपर उल्लिखित परीक्षण परोक्ष रूप से पुराने वैल्यू के शून्य होने की उम्मीद है। यह "एन" होना चाहिए

उस फ़ाइल में सभी परीक्षण मामलों में विशेषता नामस्थान शून्य (ऑब्जेक्ट) होने की अपेक्षा करता है, उन्हें विनिर्देश के अनुसार DOMString शून्य होना चाहिए।

विशेषता नामस्थान का प्रकार डोमस्ट्रिंग है?, इसलिए इसे शून्य होने की अनुमति है ("शून्य" नहीं, बस शून्य)।

पुराने वैल्यू मामले पर स्पष्टीकरण के लिए धन्यवाद :)।

ठीक है, स्पष्टीकरण के लिए धन्यवाद - मुझे लगता है कि मैंने कल्पना के महत्वपूर्ण पहलुओं को याद किया है।

मैंने अपने कांटे में एक शाखा

मैं उन परीक्षणों का दस्तावेजीकरण कहां करूं जो ज्ञात कारणों/मुद्दों के लिए पास नहीं होते हैं (रेंज सपोर्ट #317 आदि गायब है)?

हम जो करते हैं वह उन्हें वेब-प्लेटफ़ॉर्म परीक्षणों के लिए index.js फ़ाइल में जोड़ते हैं, लेकिन टिप्पणी के साथ टिप्पणी करते हैं कि क्यों। उदाहरण के लिए देखें कि हम टेम्पलेट के लिए क्या करते हैं ।

क्या यह अंतिम रूप दिए जाने से दूर है?

लगता है म्यूटेशन इवेंट्स को 8.5 में हटा दिया गया था । क्या कस्टम तत्वों (म्यूटेशन ऑब्जर्वर की आवश्यकता है) का परीक्षण करने का कोई तरीका है, बिना 8.5 पर वापस जाए और पॉलीफ़िल पर निर्भर रहें? DOMParser 8.5 में लागू नहीं किया गया था और मुझे इसकी आवश्यकता है कि हमारे शैडो डोम पॉलीफिल के लिए इसलिए हम इस समय JSDOM में परीक्षण चलाने में सक्षम होने के कारण थोड़े अवरुद्ध हैं। कोई मार्गदर्शन यहां सहायक होगा। मेरे पास इस समय कोशिश करने और गोता लगाने और इसे अभी लागू करने में मदद करने की क्षमता नहीं है, दुर्भाग्य से।

मुझे ऐसा करने के किसी भी तरीके से अवगत नहीं है, क्षमा करें :(।

क्या मैं इसे साथ ले जाने में मदद कर सकता हूं? ऐसा लगता है कि यहां कुछ काम शुरू किया गया था: https://github.com/henrikkorsgaard/jsdom/commits/MutationObserver

लेकिन मुझे यकीन नहीं है कि इसे साथ ले जाने के लिए अभी भी क्या आवश्यक है। ऐसा लगता है कि इसके लिए एक बड़ा अंतर मौजूद नहीं है क्योंकि MutationObserver मूल रूप से हर जगह समर्थित है: http://caniuse.com/#feat =mutationobserver

क्या हम webcomponentsjs polyfill का लाभ उठा सकते हैं? https://github.com/webcomponents/webcomponentsjs

एक पुल अनुरोध का हमेशा स्वागत है। @henrikkorsgaard का काम निश्चित रूप से शुरू करने के लिए एक अच्छी जगह है। मुझे नहीं लगता कि पॉलीफिल हालांकि समझ में आता है।

मैं जो कह सकता हूं, उसमें से म्यूटेशन इवेंट्स को प्रदर्शन संबंधी विचारों के कारण हटा दिया गया था; यही कारण है कि म्यूटेशन ऑब्जर्वर को ब्राउज़र द्वारा निर्दिष्ट और कार्यान्वित किया गया था। हालाँकि, ब्राउज़र ने उस कार्यक्षमता को कम से कम MO समर्थन लागू होने तक बनाए रखा। यहां व्यावहारिक दृष्टिकोण इसके लिए समर्थन को फिर से जोड़ना हो सकता है, इसलिए कम से कम, एमओ को तब तक पॉलीफिल किया जा सकता है जब तक यह लागू नहीं हो जाता। मुझे एहसास है कि यह जेएसडीओएम के रखरखाव के लिए आदर्श नहीं है और तब से कोडबेस अलग हो सकता है। उसने कहा, मुझे लगता है कि यह विचार करने लायक है। यह एक बड़ा अंतर छोड़ देता है, विशेष रूप से इस स्तर पर जहां वेब घटक उत्पादन ऐप्स के लिए एक व्यवहार्य समाधान हैं और उन्हें एमओ को पॉलीफिल करने की आवश्यकता होती है। JSDOM में परीक्षण चलाने में सक्षम होना अच्छा होगा।

अगर यह मदद करता है; मैंने पॉली-फिल्ड एमओ ऑन-टॉप jsdom; यहाँ और यहाँ । मैं इसे एक अच्छा समाधान नहीं कहूंगा, लेकिन यह काम करता है और बिना टाइमर के भी।

4 साल पहले और अभी भी प्रगति पर है? संस्करण 9.0.0 के बाद से इस मुद्दे का उल्लेख चैंज में किया गया है। क्या आप लोगों को इस बारे में कोई खबर है?

@MeirionHughes फ़ाइल ने सुचारू रूप से काम किया, धन्यवाद!

इस मुद्दे पर कोई अपडेट?

https://twitter.com/slicknet/status/782274190451671040

@domenic के लिंक का बस एक विस्तार:
उस फ़ाइल को डालने का प्रयास करें जिसे @MeirionHughes ने सुझाव दिया था, इसने अब तक अच्छा काम किया है।

@mtrabelsi @MeirionHughes हैलो, मैंने इसे जेस्ट में काम करने का प्रबंधन नहीं किया, मुझे यह त्रुटि मिली https://stackoverflow.com/questions/43190171/jsdom-cannot-read-property-location-of-null
क्या आप बता सकते हैं कि आपने JSDOM में MO का उपयोग कैसे किया?

संपादित करें:
ठीक है, ऐसा लगता है कि मैं इसे काम करने के लिए प्रबंधित करता हूं https://gist.github.com/romuleald/1b9272fce11d344e257d0bdfd3a984b0

@romuleald आपके सार में एक त्रुटि है, आप this.expando और this.counter सेट कर रहे हैं लेकिन फिर इसे स्थिर रूप से एक्सेस कर रहे हैं। इससे _findMutations में गंभीर समस्याएं पैदा होंगी। आप देखेंगे कि जिस टाइपप्रति फ़ाइल में आप कनवर्ट करने का प्रयास कर रहे थे, दोनों गुण स्थिर थे (ES6 के साथ संभव नहीं)। मैं इन पंक्तियों को यूटिल क्लास के नीचे जोड़ने का सुझाव देता हूं:

Util.counter = 1;
Util.expando = 'mo_id';

और फिर आप पूरी तरह से कन्स्ट्रक्टर से छुटकारा पा सकते हैं (कक्षा को कभी भी तत्काल नहीं किया जाता है)।

मुझे यह पता लगाने में शर्मनाक रूप से लंबा समय लगा क्योंकि मैं पिछले डेढ़ दिन से इसके कारण होने वाली किसी समस्या को डीबग कर रहा हूं।

इसके अतिरिक्त, जिस स्रोत पर आप शिम आधारित हैं, वह CharacterData नोड्स की .data संपत्ति में परिवर्तन का समर्थन नहीं करता है। आप इस टिप्पणी के ऊपर मेरी लिंक की गई समस्या को एक साधारण सुधार के लिए देख सकते हैं।

मैं कुछ समय के लिए https://github.com/megawac/MutationObserver.js पॉलीफिल का उपयोग करके इसका परीक्षण करने में सक्षम हूं।

मैं एवीए का उपयोग करता हूं। और 'एम' एक मेरा मॉड्यूल है जिसमें MutationObserver शामिल है।

import test from 'ava';
import delay from 'delay';
import jsdom from 'jsdom';
import m from '.';

const dom = new jsdom.JSDOM();
global.window = dom.window;
global.document = dom.window.document;

require('mutationobserver-shim');

global.MutationObserver = window.MutationObserver;

test('MutationObserver test', async t => {
    delay(500).then(() => {
        const el = document.createElement('div');
        el.id = 'late';
        document.body.appendChild(el);
    });

    const checkEl = await m('#late');
    t.is(checkEl.id, 'late');
});

क्योंकि यह पॉलीफ़िल है, कुछ चीज़ें मानक इंटरफ़ेस से भिन्न हैं। लेकिन ऐसा लगता है कि इस मुद्दे पर कोई प्रगति नहीं हुई है, इसलिए कृपया एक विकल्प के रूप में देखें।

Jsdom और jest के साथ इसे पॉलीफ़िल के रूप में उपयोग करने का दूसरा तरीका है शिम को स्क्रिप्ट के रूप में मैन्युअल रूप से लोड करना।

npm install mutationobserver-shim

और उदाहरण के लिए पहले सभी फ़ंक्शन के अंदर:

const mo = fs.readFileSync(
  path.resolve('node_modules', 'mutationobserver-shim', 'dist', 'mutationobserver.min.js'),
  { encoding: 'utf-8' },
);
const moScript = win.document.createElement('script');
moScript.textContent = mo;

win.document.body.appendChild(moScript);

यह "हैक" मेरे लिए काम करता है, शायद दूसरों के लिए भी;)

IIRC मैंने पाया कि यह शिम को लोड करने के लिए अच्छी तरह से काम करता है (मैंने पाल-नोडज से कोड के एक ट्वीक किए गए संस्करण का उपयोग किया है, यह सुनिश्चित नहीं है कि ऊपर npm पैकेज किस पर आधारित है) जेस्ट के लिए सेटअपफाइल्स के हिस्से के रूप में। अगर किसी को दिलचस्पी है तो मैं अपने दूसरे लैपटॉप पर होने के बाद और अधिक विशिष्ट जानकारी दे सकता हूं।

तो यह लगभग 5 वर्षों से खुला है, कोई स्थिति अपडेट?

https://twitter.com/slicknet/status/782274190451671040

@mendrik ने इसका मजाक उड़ाते हुए मेरे लिए काम किया https://github.com/benitogf/corsarial/blob/master/test/specs/utils.js#L29 और जैसा कि ऊपर बताया गया है कि पॉलीफिल समाधान भी है, आपका दिन शुभ हो :)

हमारे यहां आंशिक कार्यान्वयन है: https://github.com/skatejs/skatejs/blob/master/packages/ssr/register/MutationObserver.js।

@benitogf मैंने कोशिश की लेकिन किसी भी तरह से रिकॉर्ड मेरे लिए आग नहीं लगे :( इसने कोई त्रुटि नहीं
@treshugart मैं इसका उपयोग कैसे कर सकता हूं? :)

@mendrik अपने परीक्षणों में, इसे आयात करें https://github.com/aurelia/pal-nodejs/blob/master/src/polyfills/mutation-observer.ts
और इसे वैश्विक चर पर सेट करें। यह बात है!

@mendrik यदि आप https://github.com/skatejs/skatejs/tree/master/packages/ssr#usage। यदि नहीं, तो आप उस फ़ाइल को सीधे आयात कर सकते हैं और निर्यात (https://github.com/skatejs/skatejs/blob/master/packages/ssr/register/MutationObserver.js#L109) को अपने वैश्विक में जोड़ सकते हैं।

प्रतिक्रिया-क्विल को विस्तारित करने वाले घटक का परीक्षण करने की कोशिश करने के लिए यह मेरे लिए इस समस्या को ठीक करने के लिए पर्याप्त था:

import 'mutationobserver-shim';

document.getSelection = () => null;