Jsdom: WebComponents API के लिए समर्थन

यह देखना दिलचस्प होगा कि कौन से API webcomponents.js उपयोग करते हैं जो jsdom समर्थन नहीं करता है। अगर मुझे अनुमान लगाना होता, तो पूर्ण वेब घटकों की तुलना में इसे लागू करना बहुत आसान होगा।

उस ने कहा, वेब घटकों को लागू करना बहुत अच्छा होगा। शायद उतना कठिन नहीं जितना कोई सोच सकता है --- चश्मा अपेक्षाकृत छोटा है।

इसमें थोड़ा सा खोदने का समय था:

सबसे पहले, हमारे पास विंडो स्कोप में Window परिभाषित नहीं है। मैंने इसे this.Window = this.prototype के साथ Window कंस्ट्रक्टर में पैच किया।
दूसरा, webcomponentsjs को उम्मीद है कि Window में एक और प्रोटोटाइप होगा, यानी EventTarget प्रोटोटाइप, जिसे हम एक अलग इकाई के रूप में लागू नहीं करते हैं।

बस थोड़ी सी जानकारी, क्योंकि मेरे पास थोड़ा समय था।

अच्छा। विंडो को आसानी से बेनकाब करने में सक्षम होना चाहिए। EventTarget प्रोटोटाइप थोड़ा पेचीदा है, लेकिन यह देखने योग्य लगता है कि हम वर्तमान में उस सामान को कैसे लागू करते हैं; यह मेरा एक TODO रहा है।

ठीक है, पैच अब तक आसान हैं:

• [x] this.Window = Window; विंडो कंस्ट्रक्टर में
• [x] inherits(dom.EventTarget, Window, dom.EventTarget.prototype); विंडो की परिभाषा के बाद

webcomponents.js का अगला क्रैश हमारे द्वारा HTMLUnknownElement (#1068) को लागू नहीं करने के कारण होता है, यह कहने के बाद कि हमें SVGUseElement को लागू करने की आवश्यकता है। यही वह है जिस पर मैं वर्तमान में अवरुद्ध हूं, क्योंकि webcomponents.js स्पष्ट रूप से SVGUseElement को HTMLDivElement से कम करना पसंद नहीं करता है और एक जोर देता है।

ठीक है, मैंने पॉलीफ़िल में कुछ और जाँच की, हमें लागू करने की आवश्यकता है / आपको निम्नलिखित को शिम करने की आवश्यकता है:

• [एक्स] HTMLUnknownElement #1068
• [ ] SVGUseElement
• [ ] window.CanvasRenderingContext2D
• [ ] रेंज एपीआई (सहित: document.getRange() , window.getSelection() , window.Range , window.Selection ; #804 एक शुरुआत हो सकती है)
• [ ] npm i canvas

(अभी के लिए गैर-विस्तृत सूची)

एक शुरुआत कुछ इस तरह है:

jsdom.env({
  file: __dirname + '/index.htm', // refers to webcomponent.js
  created: function (err, window) {
    jsdom.getVirtualConsole(window).sendTo(console)

    window.document.createRange = function () { }
    window.getSelection = function () { }
    window.Range = function () { }
    window.Selection = function () { }
    window.CanvasRenderingContext2D = function () { } // Object.getPrototypeOf(require("canvas")(0,0).getContext("2d")) might be better
    window.SVGUseElement = window.HTMLUnknownElement
  },
  done: function (err, window) {
    console.log(err[0].data.error);
    console.log(window.CustomElements)
  },
  features: {
    ProcessExternalResources: ['script']
  }
});

यह हो गया, हमारे HTMLDocument कंस्ट्रक्टर में कुछ बग है, जो अधिकतम कॉल स्टैक त्रुटि की ओर ले जाता है। कंस्ट्रक्टर फिलहाल केवल आंतरिक उपयोग के लिए है, हालांकि यह मान्य है कि साइट पर कुछ स्क्रिप्ट इसे कॉल करती है, इसलिए हमें उस कंस्ट्रक्टर को सार्वजनिक उपभोग के लिए उपलब्ध कराने की आवश्यकता है।

+1 वेबकंपोनेंट्स को jsdom पर देखना पसंद करेंगे, विशेष रूप से पॉलिमर लोकप्रियता में लाभ के रूप में, एक हेडलेस सिस्टम पर कस्टम तत्वों का परीक्षण करने में सक्षम होने के लिए बहुत अच्छा होगा।

अभी वेब घटकों की कोई क्रॉस-ब्राउज़र परिभाषा नहीं है, इसलिए इसे लागू करना समय से पहले होगा। (हम सिर्फ क्रोम को कॉपी नहीं करने जा रहे हैं।) इस बीच, आप पॉलिमर के साथ jsdom का उपयोग करने का प्रयास कर सकते हैं।

@ डोमेनिक मेला काफी। वैसे यह WebComponents.js पॉलीफिल के लिए अधिक समर्थन है जो मैं बाद में हूं, क्योंकि पॉलिमर इस पर निर्भर करता है - या webcomponents-lite (शैडो डोम को छोड़कर उन सभी को पॉलीफिल करता है)। पॉलिमर को jsdom पर काम करने के लिए कुछ प्रयास किए, लेकिन अब तक कोई भाग्य नहीं है - मुझे लगता है कि उपरोक्त टिप्पणी में @Sebmaster के कार्यों को कम से कम पहले पैच करने की आवश्यकता होगी।

मेरी समझ यह है कि विचाराधीन तीन अलग-अलग पॉलीफ़िल हैं। ओपी में एक पॉलिमर से अलग है। इसके बाद webcomponents.org पॉलीफिल्स हैं, जिनका इस्तेमाल पुराने-पॉलिमर में किया जाता था। फिर पॉलिमर 1.0 में, उनके पास अपने स्वयं के पॉलीफिल हैं, मुझे लगता है, जो वास्तव में पॉलीफिल नहीं हैं, बल्कि वैकल्पिक पुस्तकालय हैं जो चीजें थोड़े वेब-घटक-ईश करते हैं। हो सकता है कि वह वेबकंपोनेंट्स-लाइट हो।

WebComponentsJS रेपो पर, यह कहता है कि webcomponentsjs-lite एक प्रकार है , जो सभी _but_ शैडो डोम के लिए पॉलीफ़िल प्रदान करता है, जिसे पॉलिमर स्वतंत्र रूप से अपने शैडी डोम सिस्टम का उपयोग करके शिम करने का प्रयास करता है। तो इससे मुझे पूरा यकीन है कि पॉलिमर वेबकंपोनेंट्स पर जितना हो सके उतना निर्भर करता है, वेबकंपोनेंट्सजेएस पॉलीफिल ग्रंट काम कर रहा है। लाइट संस्करण को काफी कम वजन (मजेदार रूप से पर्याप्त ..) माना जाता है, इसलिए मैं देखूंगा कि क्या मैं यह इंगित कर सकता हूं कि लाइट संस्करण के लिए jsdom की क्या आवश्यकता है। आपको क्या लगता है कि jsdom में पॉलीफिल (लाइट या फुल) काम करने की संभावना क्या है?

बिना जांच-पड़ताल के यह कहना वाकई मुश्किल है... आप जो खोज रहे हैं उसकी प्रतीक्षा कर रहे हैं।

हाँ, मुझे लगता है कि मेरी टूडू कार्यों की सूची अभी भी लागू है और शिम का उपयोग करने के लिए आवश्यक है। #1227 में विलय होने से हमें मानकों के अनुरूप इंटरफेस को लागू करने में काफी तेजी आ सकती है ताकि हम लापता लोगों को और अधिक तेज़ी से ठीक कर सकें।

मैंने (शायद भोलेपन से) CustomElementsRegistry को जोड़ने पर काम करना शुरू कर दिया है, यह समझने के लिए कि jsdom कैसे संरचित है। मैंने वेब प्लेटफ़ॉर्म परीक्षण सूची में "कस्टम-तत्व/कस्टम-तत्व-रजिस्ट्री/define.html" जोड़ा और यह तब गुजरता है जब इसे नहीं करना चाहिए (मैंने अभी तक लगभग पर्याप्त रूप से लागू नहीं किया है)। मुझे पूरा यकीन है कि परीक्षण वास्तव में नहीं चल रहा है क्योंकि परीक्षण के शीर्ष पर throw जोड़ने से भी इसे पास होने से नहीं रोका जा सकेगा। तो मैंने स्पष्ट रूप से कुछ याद किया है; test/web-platform-tests/index.js में परीक्षण जोड़ने के अलावा क्या मुझे कुछ और करने की ज़रूरत है?

ऐसा लगता है कि ऐसा इसलिए हुआ क्योंकि हम शुरुआती const testWindow = iframe.contentDocument.defaultView; लाइन में विफल हो गए क्योंकि contentDocument किसी कारण से अपरिभाषित है। हमारे लोडिंग ऑर्डर बनाम स्क्रिप्ट निष्पादन के साथ एक समस्या हो सकती है, लेकिन उस पर ध्यान नहीं दिया है। आशा है कि इससे आपको इसके आसपास काम करने में मदद मिलेगी। हमें अपने उद्देश्यों (अभी के लिए) के लिए परीक्षण को सरल बनाना पड़ सकता है।

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

@Sebmaster बस आपकी रुचि के मामले में, मैंने उस परीक्षण के साथ क्या हो रहा है, इस पर थोड़ा शोध किया और परिणाम मेरे लिए आश्चर्यजनक हैं।

परीक्षण एचटीएमएल की नामित पहुंच सुविधा का उपयोग कर रहा है। इसका मतलब है कि आप सामान कर सकते हैं जैसे:

<div id="foo"></div>
<script>
  console.log(window.foo === document.getElementById('foo'));
</script>

_हालाँकि_, यदि तत्व में एक नेस्टेड ब्राउज़िंग संदर्भ है, तो वैश्विक को इसके बजाय उसे इंगित करना चाहिए (लिंक किए गए विनिर्देश देखें)। आईफ्रेम के लिए वह contentWindow है। jsdom यह अधिकार प्राप्त करता है, यहां तक ​​​​कि एक परीक्षण भी है । सफारी भी ठीक हो जाती है।

पागल बात यह है कि क्रोम और फ़ायरफ़ॉक्स को यह गलत लगता है; आईफ्रेम के लिए वैश्विक अंक, इसकी सामग्री नहीं हैविंडो। इसे देखकर, मैंने मान लिया कि यह एक jsdom बग था और कुछ शिकार किया, अंततः उस परीक्षण को ढूंढा, जिसने मुझे कल्पना तक पहुँचाया।

टीएलडीआर; Jsdom पर काम करना बहुत ही शैक्षिक है और आप लोग एक अद्भुत काम करते हैं।

संबंधित ब्राउज़रों में बग फाइल करने जा रहे हैं। वेब-प्लेटफ़ॉर्म-परीक्षणों के लिए एक पीआर भी भेजेंगे, मुझे परीक्षण में कुछ अन्य गलतियाँ भी मिलीं।

यह https://github.com/tmpvar/jsdom/blob/master/test/living-html/named-properties-window.js से WPT जैसे अपस्ट्रीम परीक्षणों के लिए और भी अधिक प्रेरणा है। प्रविष्टि के लिए धन्यवाद! यह मुझे वास्तव में jsdom के बारे में बहुत अच्छा महसूस कराता है ^_^

नमस्ते!

मैं संयोजन करके कस्टम एलिमेंट्स पॉलीफिल को jsdom के साथ काम करने में कामयाब रहा

• यह रेपो: https://github.com/RisingStack/nx-seo
• इस कस्टम तत्व पॉलीफ़िल के साथ: https://github.com/WebReflection/document-register-element

नोट: रेपो jsdom 8.5.0 का उपयोग करता है। इसका कारण यह है कि मुझे केवल MutationObserver पॉलीफिल के साथ सफलता मिली, जो आंतरिक रूप से Mutation Events का उपयोग करता है। खराब प्रदर्शन के कारण 8.5.0 के बाद उत्परिवर्तन घटनाओं को हटा दिया गया था। यदि देशी म्यूटेशन ऑब्जर्वर बाहर आता है तो मैं पॉलीफिल को हटा दूंगा और नवीनतम jsdom में अपडेट कर दूंगा।

मेरे पास नवीनतम jsdom है, और https://github.com/WebReflection/document-register-element मेरे लिए काम कर रहा है! मैं अधिक आधिकारिक पॉलीफ़िल के साथ प्रयोग कर रहा हूं, और मुझे किसी कारण से परेशानी हो रही है। मेरा लक्ष्य काम करने के लिए कम से कम कस्टम तत्व और एचटीएमएल आयात प्राप्त करना है ... यह बहुत अच्छा होगा यदि हम पॉलिमर को भी काम कर सकें।

मैं पॉलिमर स्क्रिप्ट को बिना किसी त्रुटि के चलाने के लिए प्राप्त कर सकता हूं। मैं एक घटक भी बना सकता हूं और इसे पॉलिमर कंस्ट्रक्टर को पास कर सकता हूं। उसके बाद यह चुपचाप विफल हो जाता है। मुझे लगता है कि छाया डोम मुद्दा है।

मैं काम करने के लिए webcomponentsjs HTML आयात पॉलीफिल प्राप्त करने का प्रयास कर रहा हूं। मैं स्क्रिप्ट चलाने के लिए प्राप्त कर सकता हूं, और मेरा मानना ​​​​है कि मेरे HTML आयात एक xmlhttprequest निष्पादित करते हैं, लेकिन ऐसा नहीं लगता कि मेरे आयात में स्क्रिप्ट चलती हैं।

एक उदाहरण @lastmjs साझा करने की देखभाल? मैं वर्तमान में स्वयं वेब घटकों में घुटने टेक रहा हूं। अगर मैं मदद कर सकता हूं तो मैं खुशी से आपके साथ योगदान दूंगा।

@snuggs धन्यवाद! मुझे एक या दो दिन दो, मैं इस समय कुछ दबाव वाली चीजों के बीच में हूं।

@snuggs अगर हम काम करने के लिए webcomponents-lite पॉलीफिल प्राप्त कर सकते हैं, तो हमें पॉलिमर का उपयोग करने में सक्षम होना चाहिए। शैडो डोम अब तक काम करने के लिए सबसे कठिन पॉलीफिल की तरह लगता है, और अगर हम webcomponents-lite का उपयोग करते हैं तो हमें इसके बारे में चिंता करने की ज़रूरत नहीं होगी, क्योंकि हमारे पास template तक पहुंच होगी। , custom elements , और HTML imports ।

मैं webcomponents-lite पॉलीफ़िल के साथ काम करने के लिए HTML आयात प्राप्त कर सकता हूं। मैं कुछ अजीब व्यवहार में भाग रहा था, फिर मैं इस पर आया: https://github.com/Polymer/polymer/issues/1535 ऐसा लगता है कि HTML आयात केवल एक cors- सक्षम गैर-फ़ाइल प्रोटोकॉल पर लोड किया जा सकता है। इसलिए मैंने अपनी परियोजना की मूल निर्देशिका में एक त्वरित http सर्वर बनाया:

npm install -g http-server
http-server --cors

और यहां मूल कोड है जिसके साथ मैं काम कर रहा हूं:

const jsdom = require('jsdom');

const doc = jsdom.jsdom(`
    <!DOCTYPE html>

    <html>
        <head>
            <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
            <link rel="import" href="http://localhost:8080/bower_components/polymer/polymer.html">
        </head>

        <body>
            <test-app></test-app>

            <dom-module id="test-app">
                <template>
                </template>

                <script>
                    setTimeout(() => {
                        class TestApp {
                            beforeRegister() {
                                this.is = 'test-app';
                                console.log('before register');
                            }

                            ready() {
                                console.log('ready');
                            }

                            created() {
                                console.log('created');
                            }

                            attached() {
                                console.log('attached');
                            }
                        }

                        Polymer(TestApp);
                    }, 1000);
                </script>
            </dom-module>
        </body>
    </html>
`, {
    virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

किसी कारण से मुझे TestApp इंस्टेंटेशन को setTimeout में लपेटना होगा। ऐसा लगता है कि पॉलिमर एचटीएमएल आयात बाकी एचटीएमएल के प्रतिपादन को अवरुद्ध नहीं कर रहा है, इसलिए setTimeout के बिना पॉलिमर कन्स्ट्रक्टर परिभाषित नहीं है। क्या HTML आयात के लिए वह सामान्य व्यवहार है?

beforeRegister को कॉल किया जाता है, इसलिए पॉलिमर कंस्ट्रक्टर कुछ कर रहा है। तो अब हम प्रभावी रूप से HTML आयात प्राप्त कर चुके हैं, निश्चित रूप से webcomponents-lite पॉलीफ़िल के साथ काम करने वाले टेम्प्लेट। मुझे यकीन नहीं है कि कस्टम तत्व पॉलीफिल कैसा प्रदर्शन कर रहा है।

जब मैं TestApp कक्षा के अंदर ready या created विधि डालता हूं, तो उन्हें नहीं कहा जाता है। ऐसा लगता है कि जीवनचक्र की घटनाओं को ठीक से नियंत्रित नहीं किया जा रहा है। उस समस्या की जड़ कस्टम तत्वों पॉलीफ़िल के कार्यान्वयन में हो सकती है। मैं इधर-उधर खेलता रहूंगा।

हल की जाने वाली संभावित समस्याएं:

• [ ] HTML आयात ठीक से अवरुद्ध नहीं हो रहा है
• [] कस्टम तत्व पॉलीफिल काम कर रहा है या नहीं?
• [] पॉलिमर जीवनचक्र विधियों को नहीं कहा जा रहा है

अधिक टिंकरिंग अधिक अंतर्दृष्टि की ओर ले जा रही है। मुझे लगता है कि आयात और पंजीकरण का क्रम हमारे लिए गड़बड़ कर सकता है। जब मैं पॉलिमर कंस्ट्रक्टर को कॉल करने के बाद const testApp = document.createElement('test-app'); चलाता हूं, तो created और ready विधियों को कॉल किया जाता है, लेकिन attached विधि को नहीं। शायद jsdom कस्टम तत्व अक्षर को सही ढंग से संभाल नहीं रहा है? साथ ही, document.body.appendChild(testApp) को कॉल करते समय भी, attached जीवनचक्र विधि को कभी नहीं कहा जाता है।

यह लोड ऑर्डर को समझने में मदद कर सकता है: https://github.com/webcomponents/webcomponentsjs#helper -utilities

@lastmjs मैं वर्तमान में CustomElementRegistry.define() और document.registerElement() के बीच सिक्कों को फ़्लिप कर रहा हूं। मैंने देखा कि डोमिनिक ने कुछ बेहतरीन इनपुट दिए हैं और व्हाट्सएप के सापेक्ष कुछ काम को मिला दिया है (https://github.com/whatwg/html/issues/1329) ऐसा लगता है कि एक एपीआई माइग्रेशन चल रहा है। उदाहरण के लिए मेरा मानना ​​​​है कि कल्पना connectedCallback को कॉल करती है जिसे attachedCallback कार्यक्षमता के साथ जोड़ा जाता है। यह भी मानते हुए कि आपका मतलब attachedCallback था जब आपने attached कहा था क्योंकि वह हैंडलर एपीआई का हिस्सा नहीं है। मैंने प्रत्येक विधि से संबंधित विभिन्न कॉलबैक फायरिंग define() और registerElement() का अनुभव किया है। मैंने कस्टम तत्वों की रणनीति का पता लगा लिया है। HTMLImports डोमेनिक ने कार्यान्वयन से पहले उल्लेख किया है जो XMLHTTPRequest पैच का उपयोग करता है। मेरा मानना ​​है कि प्रतिक्रिया से सीधे DocumentFragment में परिवर्तित हो सकता है। उस तरह की गंध "आयात" के साथ साँप का तेल हो सकता है। एक "अशुद्ध" आयात हो सकता है जहां विवेक रहता है।

ES6 -> ES5 से ट्रांसपिलिंग करते समय super() पर HTMLElement पर कॉल किए जाने के साथ कुछ नकली भी प्रतीत होता है, इसलिए इसके लिए एक सिर ऊपर रखें। मैं इसे रोलअप.जेएस/बेबेल के साथ अनुभव कर रहा हूं और मुझे वेबकंपोनेंट्स पैकेज से (हल्के) शिम का उपयोग करने के लिए मजबूर किया गया था।
https://developers.google.com/web/fundamentals/getting-started/primers/customelements

अंत में लगता है कि जब मैं प्रोटोटाइप टैग के साथ बनाता हूं तो मुझे (अधिक) सफलता मिलती है।

document.createElement('main', 'test-app')

जैसा कि @domenic ने मुझसे पहले उल्लेख किया था कि हम सबसे कम सामान्य हर स्पेक्स को लागू करने के लिए सतर्क रहना चाहते हैं और न कि केवल वही करना चाहते हैं जो GOOGLE करता है। ऐसा लगता है कि वेब घटकों के साथ लाइनें धुंधली हैं। लेकिन मैं एक प्रशंसक हूं।

आप किन तरीकों से काम कर रहे हैं?

अब तक मैं ज्यादातर केवल webcomponents-lite पॉलीफिल और पॉलिमर <2.0 के साथ खेल रहा हूं। इसलिए जब मैंने attached विधि का उल्लेख किया तो मेरा मतलब पॉलिमर जीवनचक्र पद्धति से था जिसका उपयोग वे attachedCallback के बजाय करते हैं। साथ ही, जहां तक ​​मुझे पता है, पॉलीफ़िल अभी तक नए v1 कस्टम एलिमेंट स्पेक पर स्विच नहीं किए गए हैं। इसलिए मैं जो कुछ भी खेल रहा हूं वह केवल पॉलिमर को मौजूदा पॉलीफिल के साथ काम करने की उम्मीद में है।

@snuggs क्या आप अभी पॉलीफ़िल का उपयोग कर रहे हैं या आप jsdom में वास्तविक कार्यान्वयन पर काम कर रहे हैं?

@lastmjs मैं पॉलीफ़िल का उपयोग नहीं करता क्योंकि मुझे लगता है कि 80% रास्ता प्राप्त करना आवश्यक नहीं है। प्लेटफ़ॉर्म अब इतना परिपक्व हो गया है कि थोड़े से अपफ्रंट ट्विकिंग के साथ केवल मूल निर्माणों का उपयोग किया जा सकता है। मैं ढांचे के बजाय हल्के (आमतौर पर हाथ से लुढ़का हुआ) उपकरण का उपयोग करना पसंद करता हूं। उसने कहा कि ज्यादातर लोग नहीं हैं। ऐसा लगता है कि डोमिनिक का इरादा कस्टम तत्व html आयात है लेकिन दस्तावेज़ के fetching को संभालने के लिए XMLHTTPRequest को विस्तारित करने में कोई समस्या नहीं है जो हमें वहां ले जाएगी। करीब 6 महीने पहले की बात है। कार्यान्वयन के बाद से बहुत कुछ बदल गया है। शायद सोच रहा है। तो हम @lastmjs को कहाँ समाप्त करते हैं?

@snuggs शायद सबसे अधिक समझदार और भविष्य-सबूत चीज कस्टम तत्वों और छाया डोम के लिए jsdom में प्रथम श्रेणी के समर्थन को लागू करना है। दोनों मानक v1 पर हैं और ऐसा लगता है कि मैं जो सुन रहा हूं उससे ऐसा लगता है कि अधिकांश प्रमुख ब्राउज़र उन्हें लागू करेंगे। हमें इस बारे में कैसे जाना चाहिए? मेरे पास अभी सीमित समय है, लेकिन शायद हम यह निर्धारित कर सकें कि कम से कम क्या करने की आवश्यकता है। @domenic क्या आपके पास इन कार्यान्वयनों के साथ आगे बढ़ने के बारे में कोई सुझाव है, या किसी भी कारण से हमें क्यों नहीं करना चाहिए?

केवल कल्पना को लागू करने के अलावा, मुझसे कोई ठोस सुझाव नहीं मिला :)

मेरे पास एक शाखा है जहां मैंने कुछ समय पहले इस पर काम किया था (तब से कल्पना थोड़ी बदल गई है)। CustomElementsRegistry को लागू करना काफी आसान था, जहां मुझे यह पता लगाना था कि कोडबेस में कस्टम एलिमेंट प्रतिक्रियाओं को कैसे बुना जाए और उन्हें कब और कहां से बुलाया जाए। अगर मैं इसे वापस लेना चाहता हूं (कोई वादा नहीं) तो शायद मैं इसी पर ध्यान केंद्रित करूंगा।

@matthewp यह मददगार लगता है, मुझे वह शाखा कहां मिल सकती है?

@matthewp हाँ यह अच्छा होगा

https://github.com/matthewp/jsdom/commits/custom-elements जैसे मैंने कहा, तब से कल्पना बदल गई है, इसलिए यह पुराना है। और यह सबसे आसान हिस्सा है, लेकिन अगर कोई इसे चाहता है तो यह एक प्रारंभिक बिंदु है। @snuggs @lastmjs

• टेम्प्लेट सभी प्रमुख ब्राउज़र ( W3C कल्पना ) द्वारा अपनाए जाते हैं
• कस्टम तत्व जल्द ही होंगे ( W3C कल्पना )
• HTML आयात ब्राउज़र विक्रेता द्वारा कभी भी जल्द ही लागू नहीं किया जाएगा ( W3C युक्ति )
• शैडो डोम बीच में है...( W3c कल्पना )

(http://jonrimmer.github.io/are-we-componentized-yet/)

व्यक्तिगत रूप से केवल कस्टम तत्व का समर्थन करना पहले से ही बहुत अच्छा होगा।

(ध्यान दें कि मेरी समझ यह है कि फैंटमजेएस 2.5 को कम से कम टेम्प्लेट और शायद कस्टम तत्व का समर्थन करना चाहिए क्योंकि वे वेबकिट के नवीनतम संस्करण पर आगे बढ़ रहे हैं, सुनिश्चित नहीं है कि कौन सा है)।

असल में, मैं lib दस्तावेज़-रजिस्टर-तत्व का उपयोग करके कस्टम एलिमेंट्स का नकल करता हूं

const {before} = require('mocha')

before(mockDOM)
before(mockCustomElements)

function mockDOM() {
  const {JSDOM: Dom} = require('jsdom')
  const dom = new Dom('<!doctype html><html><body></body></html>')
  global.document = dom.window.document
  global.window = document.defaultView
  window.Object = Object
  window.Math = Math
}

function mockCustomElements() {
  require('document-register-element/pony')(window)
}

बहुत बढ़िया, क्या आपको कोई समस्या हुई है?

अब तक, नहीं :D

लेकिन मुझे और विवरण लिखने की जरूरत है, बेहतर महसूस करने के लिए और चीजों को कवर करें

यह देखकर बहुत अच्छा लगा कि एक रास्ता है। जितना मुझे बहुलक पसंद है, परीक्षण सेतु नरक है और फॉलबैक के रूप में jsdom होना अच्छा है;) काम को अंदर करने के लिए धन्यवाद

ऐसा लगता है कि कोई पीआर इसे आगे बढ़ा रहा है! https://github.com/tmpvar/jsdom/pull/1872

असल में, मैं lib दस्तावेज़-रजिस्टर-तत्व @darlanmendonca . का उपयोग करके कस्टम एलिमेंट्स का मजाक उड़ाता हूं

जेएसडॉम ग्लोबल्स को नोड ग्लोबल से जोड़ने के बारे में इस लिंक को पढ़ना चाहिए। यह एक विरोधी पैटर्न है।

हैलो सभी को,
मैं JSDOM (Node.js 6.7.0 और JSDOM 11.1.0 का उपयोग करके) के अंदर पॉलिमर चलाने की स्थिति के बारे में थोड़ा उलझन में हूँ। मैंने मिश्रित परिणामों के साथ विभिन्न चीजों की कोशिश की है। अगर कोई मुझे यहां भर सकता है तो मैं वास्तव में आभारी रहूंगा ...

मैंने अब तक क्या किया:

1) मैंने अपनी रूट निर्देशिका से एक http सर्वर को निकाल दिया

./node_modules/http-server/bin/http-server --cors

2) मैंने अपने पॉलिमर घटकों में से एक को JSDOM में लोड किया है:

jsdom.JSDOM.fromURL("http://localhost:8080/path/to/my-component.html",
  { runScripts: "dangerously",
    resources: "usable"
  })
.then(function (dom) {
  setTimeout(() => {
    window = dom.window;
    component = window.document.querySelector("my-component");
  }, 10000);
})

(मैंने उसी परिणाम के साथ फ़ाइल सिस्टम से घटक फ़ाइल लोड करने का भी प्रयास किया।)

3) यह मेरा घटक कोड है:

<!DOCTYPE html>
<html>
<head>
  <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>

<body>
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="order-app">
  <template>
    <h1>Hello Polymer</h1>
  </template>

  <script>
    console.log("javascript is being executed");
    addEventListener('WebComponentsReady', function () {
      console.log("web components are ready");
      Polymer({
        is: 'order-app'
      });
    });
  </script>
</dom-module>
</body>
</html>

(मैंने वेब कॉम्पोनेंट्स पॉलीफिल लोड करने के लिए एचटीएमएल हेड जोड़ा।)

मैं क्या देख सकता हूँ?

जब मैं इसे चलाता हूं, तो मैं देखता हूं

• कि वेब घटक पॉलीफ़िल को वेबसर्वर से लोड किया जा रहा है
• संदेश "जावास्क्रिप्ट निष्पादित किया जा रहा है" कंसोल में

मुझे क्या दिखाई नहीं देता

• कि बहुलक.एचटीएमएल घटक वेबसर्वर से लोड किया जा रहा है
• संदेश "वेब घटक तैयार हैं" कंसोल में

यह मुझे इस निष्कर्ष पर ले जाता है कि WebComponentsReady ईवेंट को सक्रिय नहीं किया जा रहा है (शायद इसलिए कि HTML आयात काम नहीं करता है?) भी,
window.WebComponents में { flags: { log: {} } } शामिल है -- ready संकेतक गायब है।

मैंने कुछ मॉकिंग और पॉलीफिलिंग की भी कोशिश की:

  window.Object = Object;
  window.Math = Math;
  require('document-register-element/pony')(window);

लेकिन ऐसा कुछ भी नहीं बदला।

अब, मैं सोच रहा हूँ :-) क्या यह बिल्कुल काम करने वाला है? यदि हां, तो यह मेरे लिए काम क्यों नहीं करता है? यदि नहीं, तो इसे काम करने के लिए क्या गुम/आवश्यक है?

किसी भी अंतर्दृष्टि के लिए धन्यवाद!

मोइन

मैंने यह भी कोशिश की कि कम सफलता के साथ और मैंने यह इंतजार करना छोड़ दिया कि यहां इस चर्चा का परिणाम क्या होगा।

https://github.com/sebs/noframework/blob/master/test/configurator.js

समाधान नहीं बस एक और असफल प्रयास। वही भ्रम बीटीडब्ल्यू। वही निष्कर्ष

Jsdom में कस्टम तत्वों को पॉलीफ़िल करना बहुत चुनौतीपूर्ण साबित होता है। क्या कोई इसे jsdom में लागू करने की चुनौतियों को सूचीबद्ध कर सकता है? इसे प्राप्त करने के प्रयास के स्तर का आकलन करने की कोशिश की जा रही है।

मूलभूत बाधा यह है कि jsdom कंस्ट्रक्टर और उनके प्रोटोटाइप को साझा करता है।

इससे प्रति-विंडो कस्टम एलिमेंट रजिस्ट्री को लागू करना मूल रूप से असंभव हो जाता है, क्योंकि HTMLElement कंस्ट्रक्टर सभी विंडो के बीच साझा किया जाता है। इसलिए जब आप अपने कस्टम एलिमेंट कंस्ट्रक्टर में super() कॉल करते हैं, तो अब चल रहे HTMLElement कंस्ट्रक्टर को यह नहीं पता कि चीजों को किस विंडो में देखना है। यह बेकार है।

मुझे यकीन नहीं है कि कोई अच्छा मध्यवर्ती समाधान है या नहीं। बड़ी बंदूक जेएसडॉम को एक आर्किटेक्चर में ले जाना है जो गैर-साझा कंस्ट्रक्टर/प्रोटोटाइप की अनुमति देता है। हम इसे कुछ तरीकों से कर सकते हैं, सभी अलग-अलग ट्रेडऑफ़ के साथ। शायद हम टीम और समुदाय के साथ इस पर चर्चा करने के लिए एक समर्पित मुद्दा खोलना चाहते हैं, लेकिन अभी के लिए मैं उन लोगों की सूची बनाना चाहता हूं जो मेरे सिर के ऊपर से दिमाग में आते हैं:

• Jsdom में हर चीज के लिए [WebIDL2JSFactory] का उपयोग करें, या कम से कम HTMLElement और उसके सभी वंशजों के लिए। मुझे यकीन नहीं है कि [WebIDL2JSFactory] अभी तक विरासत के साथ अच्छी तरह से काम करता है, लेकिन इसे काम करने के लिए बनाया जा सकता है। यह विकल्प सभी को अतिरिक्त कंस्ट्रक्टर/प्रोटोटाइप की लागत का भुगतान करने का कारण बनता है, लेकिन हो सकता है कि कस्टम तत्वों को ऑप्ट-इन सुविधा बनाने से बेहतर हो।
• एक विकल्प है जहां jsdom vm सैंडबॉक्स के अंदर सभी वर्ग परिभाषा मॉड्यूल चलाता है। उदाहरण के लिए कुछ बिल्ड स्टेप हैं जो सभी वेब एपीआई को jsdom में बंडल करते हैं, फिर जब आप एक नई विंडो बनाते हैं, तो हम नए सैंडबॉक्स ग्लोबल के अंदर उस बंडल के साथ vm.runScript() करते हैं। यह शायद हमें [WebIDL2JSFactory] से छुटकारा पाने की अनुमति देगा।

मुझे लगता है कि एक और समाधान कस्टम तत्वों को एक विशाल चेतावनी के साथ लागू करना होगा कि कस्टम तत्व रजिस्ट्री वैश्विक प्रति Node.js प्रक्रिया है? हालांकि यह भयानक लगता है।

उस प्रारंभिक बाधा के बाद, बाकी युक्ति का पालन करने के मामले में अपेक्षाकृत सरल है। सबसे कठिन हिस्सा शायद [CEReactions] को लागू करना और हमारी सभी आईडीएल फाइलों को उपयुक्त स्थानों पर अपडेट करना होगा, लेकिन यह बहुत मुश्किल नहीं है।

मैं एक अलग प्रोटोटाइप संस्करण के बारे में भी सोच रहा हूं। यहाँ मेरे कुछ विचार हैं।

मुझे यकीन नहीं है कि [WebIDL2JSFactory] अभी तक विरासत के साथ अच्छी तरह से काम करता है, लेकिन इसे काम करने के लिए बनाया जा सकता है।

नहीं, ऐसा नहीं है, और मुझे यकीन नहीं है कि इसे वास्तव में कैसे काम करना है। दूसरा समाधान मेरी राय में बहुत अधिक सीधा है।

एक विकल्प है जहां jsdom vm सैंडबॉक्स के अंदर सभी वर्ग परिभाषा मॉड्यूल चलाता है।

मैं यही पसंद करूंगा। मुख्य समस्या इनिशियलाइज़ेशन के दौरान vm सैंडबॉक्स में इम्प्लांट क्लासेस पास कर रही है, हालांकि यह बाहरी संदर्भ से सब कुछ एक वैश्विक संपत्ति में डालकर किया जा सकता है, और delete के बाद वैश्विक संपत्ति को पूरा किया जा सकता है। . यह [NamedConstructor] और कुछ अन्य विस्तारित विशेषताओं को ठीक से लागू करने की भी अनुमति देगा, और यदि कोई पर्याप्त साहस कर रहा है तो शायद एक jsdom वातावरण के लिए V8 स्टार्टअप स्नैपशॉट भी उत्पन्न कर सकता है।

संपूर्ण [WebIDL2JSFactory] व्यवसाय पहली बार में एक हैक था, और मुझे इससे जल्द से जल्द छुटकारा पाना अच्छा लगेगा।

+1 टिप्पणियाँ इस सुविधा को विकसित करने में सहायक नहीं हैं, इसलिए मैं हाल ही में कम से कम एक को हटा रहा हूँ।

नमस्ते, मुझे नहीं पता था कि @TimothyGu इस पर काम कर रहा है।
मेरे पास वास्तव में कस्टम तत्व पंजीकरण और निर्माण काम कर रहा है
https://github.com/mraerino/jsdom/tree/custom-elements-spec

मैं यथासंभव न्यूनतम इनवेसिव होने की कोशिश कर रहा हूं और साथ ही यथासंभव कल्पना के करीब रहने की कोशिश कर रहा हूं।
कस्टम एलिमेंट रजिस्ट्री वेब प्लेटफ़ॉर्म परीक्षण पास हो रहे हैं।

पिछली रात को हैकिंग करते समय मुझे एक समाधान मिला जो webIdl2JS को संशोधित किए बिना काम करता है।
यहां देखें: https://github.com/mraerino/jsdom/commit/592ad1236e9ca8f63f789d48e1887003305bc618

@TimothyGu क्या आप इस पर बलों को गठबंधन करने के इच्छुक होंगे?

यहां बस कुछ अपडेट:
मैं कल्पना के अपने कार्यान्वयन के बारे में बहुत आश्वस्त हूं, लेकिन वर्तमान में [HTMLConstructor] विस्तारित IDL विशेषता के कारण अटका हुआ हूं। इसलिए मैंने https://github.com/jsdom/webidl2js/issues/87 . खोला

इस बीच, मैं बाद में आसानी से स्विच करने में सक्षम होने के लिए [Constructor] विशेषता का उपयोग करके [HTMLConstructor] एल्गोरिदम लागू करूंगा। (मैंने शुरुआत में इसे window में एक नकली HTMLElement क्लास डालने से कार्यान्वित किया, लेकिन यह सही नहीं लग रहा था।)

हाँ, जैसा कि https://github.com/tmpvar/jsdom/issues/1030#issuecomment -333994158 में उल्लेख किया गया है, HTMLConstructor को सही ढंग से लागू करने के लिए jsdom के आर्किटेक्चर में मूलभूत परिवर्तन की आवश्यकता होगी।

क्या आपके पास इस बारे में कोई जानकारी है कि आपका संस्करण कितने वेब प्लेटफ़ॉर्म परीक्षण पास कर रहा है?

अभी के लिए customElementRegistry वाले, और मैं अपनी प्रगति के बारे में पूरी तरह से गलत हो सकता हूं।

संपादित करें: ठीक है, आपकी टिप्पणी दोबारा पढ़ने के बाद, मुझे आपका मतलब मिला। मैं इसे अपने कार्यान्वयन के साथ आज़माउंगा, लेकिन @TimothyGu भी अलगाव पर काम कर रहा है।

मैं पॉलिमर का उपयोग करता हूं इसलिए मैं हूं: +1: इस अनुरोध पर सुविधा

@dman777 @mraerino स्लिम.जेएस डेवलपर्स के लिए समान है। स्लिम देशी वेब घटक API का उपयोग करता है और jsdom पर हैक किए बिना HTMLElement को इनहेरिट नहीं कर सकता है।

इस मुद्दे को खोले तीन साल बीत चुके हैं। क्या कोई कह सकता है कि लगभग jsdom कस्टम तत्वों का समर्थन कब करेगा?

टीएल; डीआर

मैंने पिछले 2 हफ्तों में jsdom में कस्टम तत्व के लिए समर्थन जोड़ने की व्यवहार्यता का मूल्यांकन करने पर काम किया है। ये है जांच का नतीजा.

आप यहां कस्टम तत्व का एक विशिष्ट अनुपालन कार्यान्वयन पा सकते हैं: https://github.com/jsdom/jsdom/compare/master...pmdartus:custom-elements?expand=1 । यहाँ और वहाँ अभी भी कुछ खुरदुरे किनारे हैं, लेकिन कम से कम अधिकांश WPT-परीक्षण पास हैं । शेष असफल परीक्षण या तो ज्ञात JSDOM समस्याएँ हैं या मामूली समस्याएँ जिनका समाधान तब किया जा सकता है जब हम jsdom में वास्तविक कार्यान्वयन से निपटेंगे।

अब यहाँ अच्छी खबर है, अब जब शैडो डोम को मूल रूप से समर्थित किया गया है, तो कस्टम-एलिमेंट शाखा और म्यूटेशन ऑब्जर्वर दोनों के साथ, मैं पॉलिमर 3 हैलो वर्ल्ड एप्लिकेशन उदाहरण के नवीनतम संस्करण को jsdom में लोड और रेंडर करने में सक्षम था। अपनी वर्तमान स्थिति में, शाखा स्टैंसिल एप्लिकेशन को लोड करने में सक्षम नहीं है (स्टैंसिल देव मोड के लिए कुछ असमर्थित सुविधाओं की आवश्यकता होती है जैसे module , और किसी अज्ञात कारण से प्रोड मोड फेंकता है)।

कार्य योजना

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

[CEReactions] IDL विस्तारित विशेषताओं के लिए समर्थन

कस्टम तत्वों के लिए समर्थन जोड़ने के लिए jsdom में कार्यात्मक रूप से गायब कोर में से एक [CEReactions] विशेषताएँ हैं। मैं आंशिक रूप से सही प्रोटोटाइप गुणों को पैच करके इस मुद्दे को हल करने में सक्षम था। यह दृष्टिकोण तब तक काम करता है जब तक कस्टम तत्व प्रतिक्रिया स्टैक वैश्विक है और संबंधित समान-मूल ब्राउज़िंग संदर्भों की प्रति इकाई नहीं है क्योंकि सभी इंटरफेस प्रोटोटाइप साझा किए जाते हैं।

इस दृष्टिकोण में कुछ कमियां हैं क्योंकि कुछ इंटरफेस में अनुक्रमित गुणों ( HTMLOptionsCollection , DOMStringMap ) से जुड़े [CEReactions] विशेषताएँ हैं। आंतरिक रूप से, jsdom उन गुणों में उत्परिवर्तन को ट्रैक करने के लिए प्रॉक्सी का उपयोग करता है। इस मामले में इंटरफ़ेस का प्रोटोटाइप पैचिंग काम नहीं करता है। इस मुद्दे को हल करने के लिए एक अन्य दृष्टिकोण, इंटरफ़ेस के बजाय कार्यान्वयन को पैच करना होगा (कार्यान्वित नहीं)।

मैं webidl2js आंतरिक से पर्याप्त रूप से परिचित नहीं हूं, लेकिन हमें [CEReactions] के लिए वैश्विक हुक जोड़ने का पता लगाना चाहिए?

परिवर्तन:

• ce-reaction.js :
  
  
  
  • पैचिंग
  
  
  • CEReactions कार्यान्वयन
  
  

[HTMLConstructor] IDL विस्तारित विशेषताओं के लिए समर्थन

जैसा कि @domenic ने ऊपर बताया है, [HTMLConstructor] के लिए समर्थन जोड़ना यहां मुख्य अवरोधकों में से एक है।

मैं प्रत्येक ब्राउज़िंग संदर्भ के लिए इंटरफ़ेस कंस्ट्रक्टर को पैच करके यहाँ इस समस्या को हल करने में सक्षम था। इंटरफ़ेस कंस्ट्रक्टर साझा प्रोटोटाइप रखते हुए सही विंडो और दस्तावेज़ ऑब्जेक्ट तक पहुंचने में सक्षम होगा। यह दृष्टिकोण प्रत्येक नए ब्राउज़िंग संदर्भ के लिए इंटरफ़ेस प्रोटोटाइप के पुनर्मूल्यांकन के प्रदर्शन ओवरहेड से भी बचता है।

मुझे यकीन नहीं है कि यह यहां सबसे अच्छा तरीका है, लेकिन यह अतिरिक्त प्रदर्शन ओवरहेड पेश किए बिना आवश्यकताओं को पूरा करता है।

परिवर्तन:

• create-element.js

मेक फ्रैगमेंट पार्सिंग एल्गोरिथम युक्ति अनुरूप बनाएं (#2522)

जैसा कि यहां चर्चा की गई है, Element.innerHTML और Element.outerHTML में प्रयुक्त HTML फ़्रैगमेंट पार्सिंग एल्गो कार्यान्वयन गलत है। कस्टम तत्व प्रतिक्रियाओं कॉलबैक को ठीक से लागू करने के लिए पार्सिंग एल्गो को रिफैक्टर करने की आवश्यकता है।

परिवर्तन:

• पार्सर परिवर्तन

एलिमेंट एल्गो बनाने के लिए इंटरफ़ेस लुकअप में सुधार करें

कस्टम तत्व निर्माण के लिए समर्थन जोड़ते समय जिन मुद्दों पर मैंने जल्दी से ठोकर खाई, उनमें से एक नई परिपत्र निर्भरता का परिचय था। CustomElementRegistry और क्रिएट एलिमेंट एल्गोरिथम दोनों को एलिमेंट इंटरफेस तक पहुंच की आवश्यकता होती है, जिससे एक गोलाकार निर्भरता दुःस्वप्न पैदा होती है।

शाखा में लिया गया दृष्टिकोण InterfaceCache बनाना था, जो तत्व नामस्थान और नाम से इंटरफ़ेस लुकअप की अनुमति देगा लेकिन इंटरफ़ेस नाम से भी। एक बार मूल्यांकन करने के बाद इंटरफ़ेस मॉड्यूल का आलसी मूल्यांकन और कैश किया जाता है। यह दृष्टिकोण परिपत्र निर्भरता से छुटकारा दिलाता है क्योंकि अब शीर्ष स्तर पर इंटरफेस की आवश्यकता नहीं है।

jsdom में इस लंबे समय से चली आ रही समस्या को हल करने के लिए यह एक तरीका है, इस दृष्टिकोण के साथ इस मुद्दे में से एक यह है कि यह शायद jsdom के वेबपैक/ब्राउज़रीकृत संस्करण को तोड़ देगा (परीक्षण नहीं किया गया)।

परिवर्तन:

• create-element.js

~शैडो डोम का समर्थन करने के लिए Element.isConnected को ठीक करें (https://github.com/jsdom/jsdom/pull/2424)~

यह एक ऐसा मुद्दा है जो छाया डोम की शुरूआत के साथ फिसल गया है, यदि तत्व छाया पेड़ का हिस्सा है तो कनेक्टेड रिटर्न false है। एक नया WPT-परीक्षण यहाँ जोड़ने की आवश्यकता है, क्योंकि कोई भी परीक्षण इस व्यवहार की जाँच नहीं कर रहा है।

परिवर्तन:

• Node-impl.js

HTMLTemplateElement.templateContents नोड दस्तावेज़ को ठीक करें (#2426)

कल्पना में परिभाषित टेम्पलेट सामग्री में HTMLTemplateElement की तुलना में एक अलग नोड दस्तावेज़ है। jsdom आज इस व्यवहार को लागू नहीं करता है और HTMLTemplateElement और यह टेम्पलेट सामग्री समान साझा करते हैं
दस्तावेज़ नोड।

परिवर्तन:

• HTMLTemplateElement-impl.js
• htmltodom.js । इस परिवर्तन का पार्सर पर कुछ डाउनस्ट्रीम प्रभाव भी पड़ता है। यदि संदर्भ तत्व एक HTMLTemplateElement है, तो HTML फ़्रैगमेंट पार्सिंग एल्गोरिथम को दस्तावेज़ नोड को टेम्प्लेट सामग्री से चुनना चाहिए, न कि स्वयं तत्व से।

HTMLTemplateElement (#2426) में गुम गोद लेने के चरण जोड़ें

HTMLTemplateElement को किसी अन्य दस्तावेज़ में अपनाए जाने पर कुछ विशिष्ट चरणों को चलाने की आवश्यकता होती है। जहां तक ​​​​मुझे पता है, यह एक विशेष गोद लेने के लिए मिट्टी के इंटरफेस है। एडॉप्ट नोड एल्गोरिथम कार्यान्वयन को भी इस एडॉप्ट स्टेप को लागू करने के लिए अद्यतन करने की आवश्यकता होगी।

परिवर्तन:

• HTMLTemplateElement-impl.js
• Document-impl.js

Parse5 serializer में isValue लुकअप के लिए समर्थन जोड़ें

धारावाहिक एचटीएमएल टुकड़े अलगो, जब एक तत्व को क्रमबद्ध करते समय तत्व से जुड़ा मूल्य होता है और इसे धारावाहिक सामग्री में एक विशेषता के रूप में दर्शाता है। parse5 ट्री एडॉप्टर में एक और हुक जोड़ना दिलचस्प होगा, जो एक तत्व getIsValue(element: Element): void | string से जुड़े मूल्य को देखेगा।

एक वैकल्पिक दृष्टिकोण (लागू नहीं किया गया) वर्तमान getAttrList हुक के व्यवहार को बदलने के लिए होगा, यदि तत्व में एक संबद्ध मूल्य है, तो विशेषता सूची में मूल्य वापस करने के लिए।

प्रदर्शन

कोई भी निष्पादन अनुकूलन करने से पहले मैं शाखा में परिवर्तनों के प्रदर्शन की जांच करना चाहता था। ट्री म्यूटेशन बेंचमार्क के लिए मास्टर पर वर्तमान परिणाम की तुलना में कस्टम तत्वों को जोड़ने से 10% प्रदर्शन ओवरहेड जुड़ जाता है। हालाँकि नए JSDOM वातावरण का निर्माण अब मास्टर की तुलना में 3x से 6x धीमा है, इसके मूल कारण की पहचान करने के लिए गहन जांच की आवश्यकता होगी।

अधिक विवरण: यहाँ

@pmdartus यह बहुत ही आशाजनक, उत्कृष्ट कार्य है! मैं बेहतर विकल्प की कमी के कारण अपनी हैक शाखा jsdom-wc का उपयोग कर रहा हूं। मैं कुछ अजीब व्यवहार देख रहा हूं और आपकी शाखा के लिए स्वैप करने की उम्मीद कर रहा था, लेकिन मैं मुद्दों को मार रहा हूं।

मैं कस्टम तत्वों को पंजीकृत करता हूं जैसे:

class Component extends HTMLElement {

}

customElements.define('custom-component', Component);

लेकिन अगर मैं करता हूं:

const el = assign(this.fixture, {
  innerHTML: `
    <custom-component></custom-component>
  `,
});

मुझे तत्काल मिलता है: Error: Uncaught [TypeError: Illegal constructor] ।

इस पर कोई विचार?

कोड का निम्नलिखित स्निपेट मेरे कांटे पर custom-elements शाखा पर ठीक से चलता है: https://github.com/pmdartus/jsdom/tree/custom-elements

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`
<body>
  <div id="container"></div>
  <script>
    class Component extends HTMLElement {
        connectedCallback() {
            this.attachShadow({ mode: "open" });
            this.shadowRoot.innerHTML = "<p>Hello world</p>";
        }
    }
    customElements.define('custom-component', Component);

    const container = document.querySelector("#container");

    Object.assign(container, {
        innerHTML: "<custom-component></custom-component>"
    })

    console.log(container.innerHTML); // <custom-component></custom-component>
    console.log(container.firstChild.shadowRoot.innerHTML); // <p>Hello world</p>
  </script>
</body>
`, { 
    runScripts: "dangerously" 
});

अवैध कंस्ट्रक्टर को मूल HTMLElement कंस्ट्रक्टर द्वारा फेंक दिया जाता है, शाखा में किए गए परिवर्तनों को प्रत्येक नई विंडो ऑब्जेक्ट के लिए कंस्ट्रक्टर को पैच करना चाहिए। @tbranyen क्या आपके पास पूर्ण प्रजनन उदाहरण है, इसलिए मैं इसे स्थानीय रूप से आज़मा सकता हूं?

हाय @pmdartus मुझे अभी तक यकीन नहीं है कि मेरे मुद्दों का क्या कारण है, लेकिन मैंने सीधे आपकी शाखा में कुछ अलग कोड लिखा जो पूरी तरह से काम करता है:

const { JSDOM } = require('.');
const window = (new JSDOM()).window;
const { HTMLElement, customElements, document } = window;

class CustomElement extends HTMLElement {
  constructor() {
    super();

    console.log('constructed');
  }

  connectedCallback() {
    console.log('connected');
  }
}

customElements.define('custom-element', CustomElement);
document.body.appendChild(new CustomElement());
//constructed
//connected

{
  const window = (new JSDOM()).window;
  const { HTMLElement, customElements, document } = window;

  class CustomElement extends HTMLElement {
    constructor() {
      super();

      console.log('Constructed');
    }

    connectedCallback() {
      console.log('Connected');
    }
  }

  customElements.define('custom-element', CustomElement);
  document.body.appendChild(new CustomElement());
  //constructed
  //connected
}

यह प्रभावी रूप से मेरी परीक्षण प्रणाली करता है, लेकिन टूट जाता है। तो यह मेरे अंत में कुछ हो सकता है।

संपादित करें:

आह ठीक है, मुझे लगता है कि मैं संकुचित हो गया जहां समस्या सबसे अधिक हो रही है। मुझे बनाए गए प्रारंभिक HTMLElement कंस्ट्रक्टर को बनाए रखना चाहिए। अगर मैं कंस्ट्रक्टर का पुन: उपयोग करने के लिए उपरोक्त कोड को समायोजित करता हूं:

  // Inside the block, second component, reuse the HTMLElement.
  const { customElements, document } = window;

यह निम्नलिखित का उत्पादन करेगा:

connected
/home/tbranyen/git/pmdartus/jsdom/lib/jsdom/living/helpers/create-element.js:643
        throw new TypeError("Illegal constructor");

2 संपादित करें:

मिल गया:

  // Don't reuse the previously defined Element...
  global.HTMLElement = global.HTMLElement || jsdom.window.HTMLElement;

यह देखते हुए कि यह धागा 4 साल पुराना है, क्या वेब घटक समर्थित हैं या होने की योजना है?

इसमें वेब घटकों का होना अच्छा होगा, लेकिन विकल्प के रूप में यदि कोई जानना चाहता है .... हेडलेस क्रोम का उपयोग अब नोड में HTML स्टिंग फ़ाइल को रेंडर/बिल्ड करने के लिए किया जा सकता है।

यह देखते हुए कि यह धागा 4 साल पुराना है, क्या वेब घटक समर्थित हैं या होने की योजना है?

यह एक कार्य प्रगति पर है क्योंकि युक्ति को टुकड़े-टुकड़े करके लागू किया जाता है।

पॉलीफिल यहां: https://github.com/WebReflection/document-register-element एक आकर्षण की तरह काम करता है! लेखक को मेरा हार्दिक धन्यवाद!

एक ही समस्या से जूझ रहे लोगों के लिए, बस करें:

npm install -D document-register-element

अपने जेस्ट कॉन्फ़िगरेशन में एक सेटअप फ़ाइल सेट करें जो आपके सभी परीक्षणों से पहले चलाई जाएगी:

{ "setupFilesAfterEnv": [ "./tests/setup.js" ] }

और अंत में, उस फ़ाइल के अंदर ('tests/setup.js'):

import 'document-register-element'

ऐसा करने के बाद, document.createElement('custom-component') के माध्यम से jsdom में कस्टम तत्वों को पंजीकृत करना और बनाना पूरी तरह से काम करता है! टुकड़े काम नहीं कर रहे हैं, हालांकि। (वैसे, मैं छाया डोम का उपयोग नहीं कर रहा हूं)।

@tebanep जैसा कि आपने उल्लेख किया है कि अधिकांश वेब घटक कार्य के लिए पॉलीफ़िल अनुपयुक्त है, यदि यह शैडो डोम का समर्थन नहीं करता है तो यह वास्तव में इसकी तुलना नहीं है कि यह क्या पूरा कर रहा है।

@tebanep धन्यवाद। चूँकि मुझे शैडो डोम की आवश्यकता नहीं है, यह बहुत अच्छी जानकारी है

क्या कोई उम्मीद है कि इसे लागू किया जाएगा? अभी हम बहुत सारे बग के साथ jsdom-wc का उपयोग कर रहे हैं, लेकिन कोई बेहतर समाधान नहीं है। इस विषय पर मेरी आशा और प्रार्थना।

@dknight मुझे पता है कि jsdom-wc इसे थोड़े-थोड़े काम करने के लिए एक हैक है। मैंने अपने व्यक्तिगत एनपीएम दायरे के तहत मॉड्यूल को काफी बेहतर संगतता के साथ प्रकाशित किया। आप इसे इसके साथ स्थापित कर सकते हैं:

npm install @tbranyen/[email protected] --save-dev

मैं इसे अब स्थिर भूमि तक अपनी सभी JSDOM वेबकंपोनेंट जरूरतों के लिए उपयोग करता हूं।

@tbranyen क्या आपने अपना कांटा अप्रकाशित किया? मैं इसे एनपीएम पर नहीं ढूंढ सकता।

@KingHenne dangit, ऐसा लगता है कि यह हमारे "एंटरप्राइज़" रजिस्ट्री में समाप्त हो गया। मैंने अभी-अभी जनता के लिए npm प्रकाशित किया है। उसके लिए माफ़ करना!

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

यदि आप @'d @Georgegriff नहीं बनना चाहते हैं तो कोई टिप्पणी पोस्ट न करें। यह एक वैध रणनीति है, लेकिन यह अन्य तरीकों से धीमी और छोटी है क्योंकि आप प्रभावी रूप से आईपीसी कर रहे हैं, हां कठपुतली के साथ भी। जब ब्राउज़र मर जाता है, तो कई मामलों में यह स्पष्ट नहीं होता है। कठपुतली के मुद्दों को मजाक में आज़माएं और डिबग करें ताकि यह पता चल सके कि यह हमेशा सबसे अच्छा विचार क्यों नहीं है।

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

पॉलीफिल यहां: https://github.com/WebReflection/document-register-element एक आकर्षण की तरह काम करता है! लेखक को मेरा हार्दिक धन्यवाद!

एक ही समस्या से जूझ रहे लोगों के लिए, बस करें:

npm install -D document-register-element

अपने जेस्ट कॉन्फ़िगरेशन में एक सेटअप फ़ाइल सेट करें जो आपके सभी परीक्षणों से पहले चलाई जाएगी:

{ "setupFilesAfterEnv": [ "./tests/setup.js" ] }

और अंत में, उस फ़ाइल के अंदर ('tests/setup.js'):

import 'document-register-element'

ऐसा करने के बाद, document.createElement('custom-component') के माध्यम से jsdom में कस्टम तत्वों को पंजीकृत करना और बनाना पूरी तरह से काम करता है! टुकड़े काम नहीं कर रहे हैं, हालांकि। (वैसे, मैं छाया डोम का उपयोग नहीं कर रहा हूं)।

यह मेरे लिए ठीक काम करता है लेकिन connectedCallback को कभी नहीं कहा जाता है, कोई विचार?

@FaBeyyy मेरे लिए वही :(

@FaBeyyy @majo44 आपको अपने घटक को एक दस्तावेज़ में जोड़ना होगा अर्थात। document.body.appendChild(...) के लिए connectedCallback को निकाल दिया जाएगा। चश्मा द्वारा इसे तब कहा जा रहा है जब घटक डोम से जुड़ा होता है।

JSDOM इस बिंदु पर प्रभावी रूप से एक ब्राउज़र है, बस बिग थ्री जितना स्थिर नहीं है।

इस बिंदु पर, यह बड़े दो की तरह है, क्योंकि Microsoft उनकी खाई है, जो उनके साथ लंबे समय तक विंडोज के रूप में रही है।

@FaBeyyy @majo44 आपको अपने घटक को एक दस्तावेज़ में जोड़ना होगा अर्थात। document.body.appendChild(...) के लिए connectedCallback को निकाल दिया जाएगा। चश्मा द्वारा इसे तब कहा जा रहा है जब घटक डोम से जुड़ा होता है।

धन्यवाद कप्तान स्पष्ट है लेकिन यह निश्चित रूप से यहाँ मुद्दा नहीं है। अगर मुझे नहीं पता था कि घटक जीवनचक्र कैसे काम करता है तो शायद मैं परीक्षण लिखने की कोशिश नहीं कर रहा हूं। समय मिलने पर बाद में एक रेपो शोकेस तैयार करूंगा।

@FaBeyyy
तो मुझे वह सेटअप मिला जो मेरे लिए काम करता है। मुझे MutationObserver के लिए पॉलीफिल जोड़ना पड़ा। मैं जेस्ट के साथ, पोरपोइज़ के परीक्षण के लिए जेएसडीओएम का उपयोग कर रहा हूं, और कामकाजी सेटअप है:

// package.json
{  ...
  "jest": {
    "transform": {
      "^.+\\.(mjs|jsx|js)$": "babel-jest"
    },
    "setupFiles": [
      "<rootDir>/node_modules/babel-polyfill/dist/polyfill.js",
      "<rootDir>/node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
      "<rootDir>/node_modules/document-register-element/build/document-register-element.node.js"
    ]
  }
... 
}

//.bablerc
{
    "presets": [
        ["@babel/preset-env", { "modules": "commonjs"}]
    ]
}

@FaBeyyy
तो मुझे वह सेटअप मिला जो मेरे लिए काम करता है। मुझे MutationObserver के लिए पॉलीफिल जोड़ना पड़ा। मैं जेस्ट के साथ, पोरपोइज़ के परीक्षण के लिए जेएसडीओएम का उपयोग कर रहा हूं, और कामकाजी सेटअप है:

// package.json
{  ...
  "jest": {
    "transform": {
      "^.+\\.(mjs|jsx|js)$": "babel-jest"
    },
    "setupFiles": [
      "<rootDir>/node_modules/babel-polyfill/dist/polyfill.js",
      "<rootDir>/node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
      "<rootDir>/node_modules/document-register-element/build/document-register-element.node.js"
    ]
  }
... 
}

//.bablerc { "presets": [ ["@babel/preset-env", { "modules": "commonjs"}] ] }

अच्छा धन्यवाद!

@ majo44 नवीनतम jsdom के साथ इसकी आवश्यकता नहीं है। जेस्ट के साथ काम करते समय (जो jsdom v11 का उपयोग कर रहा है) आप केवल अद्यतन वातावरण का उपयोग कर सकते हैं: https://www.npmjs.com/package/jest-environment-jsdom-fourteen

@mgibas धन्यवाद, jest-environment-jsdom-चौदह के साथ यह भी ठीक काम करता है और उत्परिवर्तन पर्यवेक्षक पॉलीफिल की आवश्यकता नहीं है (लेकिन संस्करण 0.1.0 है, एकल प्रतिबद्ध पैकेज :))

क्या वर्तमान में जेएसडीओएम द्वारा समर्थित वेब घटकों में से कौन से एपीआई का टूटना है? ऐसा लगता है कि छाया डोम समर्थित है, लेकिन कस्टम तत्व नहीं (कम से कम रिलीज शाखा/रेपो में)?

npm install @tbranyen/[email protected] --save-dev

@tbranyen क्या आपके पास अपने कांटे के लिए स्रोत कोड कहीं उपलब्ध है? अंतर को देखने के लिए उत्सुक होंगे

मैं jest-environment-jsdom-fifteen जैसे @ majo44 सुझाए गए, और बेबेल-पॉलीफ़िल और दस्तावेज़-रजिस्टर-एलिमेंट (देखें @mgibas उत्तर) का उपयोग कर रहा हूँ। लेकिन मुझे अभी भी एक त्रुटि मिलती है जब मैं परीक्षणों के लिए अपने वेब घटक छाया डोम को पुनः प्राप्त करने का प्रयास करता हूं।

el.shadowRoot इसके साथ शून्य है:

const el;
beforeEach(async() => {
  const tag= 'my-component'
  const myEl = document.createElement(tag);
  document.body.appendChild(myEl);
  await customElements.whenDefined(tag);
  await new Promise(resolve => requestAnimationFrame(() => resolve()));
  el = document.querySelector(tag);
}

it(() => {
  const fooContent = el.shadowRoot.querySelectorAll('slot[name=foo] > *');
})

कामकाज का कोई विचार? FYI करें, यह पहले से ही कर्मा, मोचा, चाई और जैस्मीन के साथ परीक्षण किया गया था।

मेरे घटक में कुछ खास नहीं:

customElements.define(
  'my-component',
  class extends HTMLElement {
    constructor() {
      super();

      const shadowRoot = this.attachShadow({ mode: 'open' });
      ...
  }
})

संपादित करें

मैंने अपनी समस्या को बेहतर ढंग से समझने के लिए jsdom 15.1.1 के साथ कुछ डिबगिंग की।
फिर भी, मुझे समझ में नहीं आता कि यह यहाँ शून्य क्यों है ...

तो, Element.shadowRoot 88e72ef के बाद से लागू किया गया है
https://github.com/jsdom/jsdom/blob/1951a19d8d40bc196cfda62a8dafa76ddda6a0d2/lib/jsdom/living/nodes/Element-impl.js#L388 -L415

document.createElement के बाद, this._shadowDom https://github.com/jsdom/jsdom/blob/15.1.1/lib/jsdom/living/nodes/Element-impl.js#L403 पर ठीक है। और छाया डोम में प्रत्येक तत्व बनाया जाता है (एलिमेंट कन्स्ट्रक्टर को सही मूल्यों के साथ बुलाया जाता है)।

लेकिन जब मैं document.body.appendChild(el) के तुरंत बाद el.shadowDom पर कॉल करता हूं (https://github.com/jsdom/jsdom/blob/15.1.1/lib/jsdom/living/nodes/Element-impl .js#L408), this. _shadowRoot शून्य है!

बाद में वही बात

 await customElements.whenDefined(tag);
 await new Promise(resolve => requestAnimationFrame(() => resolve()));

या यहां तक ​​​​कि अगर मैं दस्तावेज़ के बजाय निम्नलिखित का उपयोग करता हूं।

document.body.innerHTML = `
  <my-component id="fixture"></my-component>
`:

प्रजनन के लिए देखें:
https://github.com/noelmace/devcards/tree/jest

@nminhnguyen मुझे लगता है कि आप @tbranyan द्वारा बनाए गए कांटे का स्रोत कोड यहां https://github.com/tbranyen/jsdom/tree/initial-custom-elements-impl पा सकते हैं

मैं लिट-एचटीएमएल और लिट-एलिमेंट से बने वेब घटकों का परीक्षण करने की कोशिश कर रहा हूं और मैंने तत्वों को बनाते समय इस अंतर को देखा।

const myElem = new MyElem();

document.body.appendChild(myElem);
await myElem.updateComplete;

console.log(myElem.shadowRoot) // exists and has the rendered markup

और जब मैं दस्तावेज़ का उपयोग करता हूं। createElement

const myElem = document.createElement('my-elem');

document.body.appendChild(myElem);
await myElem.updateComplete;

console.log(myElem.shadowRoot) // null

जेस्ट को कॉन्फ़िगर करने के लिए मैं केवल एक पॉलीफिल का उपयोग करता हूं जो है: setupFiles: ['document-register-element']

ऐसा लगता है कि myElem में रेंडर विधि को कभी भी कॉल नहीं किया जाता है। थोड़ा और डिबगिंग करने पर मुझे पता चला है कि initialize जो कि लिट-एलिमेंट में है, उसे कभी भी कॉल नहीं किया जाता है।
तो दूसरा उदाहरण काम करेगा अगर मैं करता हूँ

const myElem = document.createElement('my-elem');
myElem.initialize();

document.body.appendChild(myElem);
await myElem.updateComplete;

console.log(myElem.shadowRoot) //  exists and has the rendered markup

मैंने एक वैकल्पिक डोम बनाया है जो वेब घटकों का समर्थन करता है। मैंने पहले पीआर बनाने की कोशिश की, लेकिन जेएसडीओएम के काम करने के तरीके ने मेरे लिए वहां अपनी जरूरतों को पूरा करना मुश्किल बना दिया। आप इसका उपयोग करने या कोड को देखने के लिए स्वतंत्र हैं।

डोम:
https://www.npmjs.com/package/happy-dom

जेस्ट पर्यावरण:
https://www.npmjs.com/package/jest-environment-happy-dom

कमाल का दिखता है। धन्यवाद।

सोम को, 7 अक्टूबर, 2019, 1:08 AM capricorn86 [email protected] ने लिखा:

मैंने एक वैकल्पिक डोम बनाया है जो वेब घटकों का समर्थन करता है। पहले मै
पीआर बनाने की कोशिश की, लेकिन जेएसडीओएम के काम करने के तरीके ने मेरे लिए समस्या को हल करना मुश्किल बना दिया
वहाँ की जरूरत है। आप इसका उपयोग करने और/या कोड को देखने के लिए स्वतंत्र हैं।

डोम:
https://www.npmjs.com/package/happy-dom

जेस्ट पर्यावरण:
https://www.npmjs.com/package/jest-environment-happy-dom

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने इस थ्रेड की सदस्यता ली है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/jsdom/jsdom/issues/1030?email_source=notifications&email_token=ACQ5ZD5QUEITPND4SXWOHW3QNILSRA5CNFSM4A4G5SF2YY3PNVWWK3TUL52HS4DFVREXGEA43VMVB70
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/ACQ5ZDYU465DXI4KHBQH4KTQNILSRANCNFSM4A4G5SFQ
.

@ मकर 86
आपका कार्य मेरे परीक्षण वातावरण को सरल बनाता है, धन्यवाद!
https://github.com/EasyWebApp/WebCell/tree/v2/MobX

@ मकर 86
आपका कार्य मेरे परीक्षण वातावरण को सरल बनाता है, धन्यवाद!
https://github.com/EasyWebApp/WebCell/tree/v2/MobX

धन्यवाद @TechQuery!

कमाल का दिखता है। धन्यवाद।
…
सोम, 7 अक्टूबर 2019, 1:08 AM मकर 86 @ पर। * > लिखा है: मैंने एक वैकल्पिक डोम बनाया है जो वेब घटकों का समर्थन करता है। मैंने पहले पीआर बनाने की कोशिश की, लेकिन जेएसडीओएम के काम करने के तरीके ने मेरे लिए वहां अपनी जरूरतों को पूरा करना मुश्किल बना दिया। आप इसका उपयोग करने और/या कोड को देखने के लिए स्वतंत्र हैं। डोम: https://www.npmjs.com/package/happy-dom जेस्ट एनवायरनमेंट: https://www.npmjs.com/package/jest-environment-happy-dom — आप इसे इसलिए प्राप्त कर रहे हैं क्योंकि आपने इसकी सदस्यता ली है। धागा। इस ई-मेल सीधे जवाब दें, GitHub पर इसे देखने के <# 1030? Email_source = सूचनाएं और email_token = ACQ5ZD5QUEITPND4SXWOHW3QNILSRA5CNFSM4A4G5SF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAOO5ZA # issuecomment-538,767,076>, या धागा मूक https://github.com/notifications/unsubscribe-auth/ACQ5ZDYU465DXI4KHBQH4KTQNILSRANCNFSM4A4G5SFQ ।

धन्यवाद @motss!

क्या वर्तमान में जेएसडीओएम द्वारा समर्थित वेब घटकों में से कौन से एपीआई का टूटना है? ऐसा लगता है कि छाया डोम समर्थित है, लेकिन कस्टम तत्व नहीं (कम से कम रिलीज शाखा/रेपो में)?

मुझे इसमें भी दिलचस्पी होगी :)