Merge pull request #3 from Juicy/Starcounter/starcounter-include/issu…

…es/93-dispatch-load-event-for-FOUC-prevention Forward `onload` and `error` events on itself,
Juicy · Sep 4, 2018 · 1ea182a · 1ea182a
2 parents 226bbeb + 7c67c63
commit 1ea182a
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # &lt;enlighted-link&gt;
 
-> Custom element to enlight your `<link>`s from Shadow DOM to the Light.
+> Custom element to enlighten your `<link>`s from Shadow DOM to the Light.
 
 By current spec [HTML Imports do not work in Shadow DOM](https://github.com/w3c/webcomponents/issues/628). That makes it hard to import definitions of custom elements that you use in a shadow root. This element allows you to do that. You could import your dependencies exactly where and when you need them.
 
@@ -56,6 +56,17 @@ The element forwards [`link` element's content attributes](https://dev.w3.org/ht
 - sizes
 - title
 
+## Properties
+
+Property   | Options           | Default | Description
+---        | ---               | ---     | ---
+`link`     | *HTMLLinkElement* |         | The reference to created `<link>` element. `null` if not yet created. Please note, that `link` element can be disconnected from document tree when `<enlighted-link>` is disconnected.
+
+## Events
+
+The element forwards following events from created `<link>`:
+- `load`,
+- `error`
 
 ## [Contributing and Development](CONTRIBUTING.md)
 

diff --git a/enlighted-link.html b/enlighted-link.html
@@ -14,7 +14,17 @@
         ]
     }
     connectedCallback(){
-        const link = this.link = this.link || document.createElement('link');
+        const forwardEvent = (oldEvent)=>{
+            this.dispatchEvent(new oldEvent.constructor(oldEvent.type, oldEvent));
+        }
+        let link;
+        if(this.link){
+            link = this.link;
+        } else {
+            link = this.link = document.createElement('link');
+            link.addEventListener('load', forwardEvent);
+            link.addEventListener('error', forwardEvent);
+        }
 
         for(let attrNo = 0, len = this.attributes.length; attrNo < len; attrNo++){
             link.setAttribute(this.attributes[attrNo].name, this.attributes[attrNo].value);

diff --git a/test/attributes.html b/test/attributes.html
@@ -30,7 +30,7 @@
             enlightedLink = shadowHost.shadowRoot.querySelector('enlighted-link');
         });
         afterEach(function() {
-            shadowHost.remove();
+            shadowHost.parentNode && shadowHost.parentNode.removeChild(shadowHost);
         });
 
         it('should attach `link` element with same attributes to the document\'s head', function() {

diff --git a/test/events.html b/test/events.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../enlighted-link.html">
+</head>
+
+<body>
+</body>
+<script>
+    let shadowHost, enlightedLink;
+    describe('enlighted-link should dispatch', function() {
+        let loadSpy, errorSpy;
+        beforeEach(function() {
+            loadSpy = sinon.spy();
+            errorSpy = sinon.spy();
+            shadowHost = document.createElement('div');
+            shadowHost.attachShadow({mode:'open'});
+            enlightedLink = document.createElement('enlighted-link');
+            enlightedLink.setAttribute('rel', 'import');
+            shadowHost.shadowRoot.appendChild(enlightedLink);
+        });
+        afterEach(function() {
+            shadowHost.parentNode && shadowHost.parentNode.removeChild(shadowHost);
+            enlightedLink.removeEventListener('load', loadSpy);
+            enlightedLink.removeEventListener('error', errorSpy);
+        });
+        it('`load` event when link is loaded', function(done) {
+            enlightedLink.addEventListener('load', loadSpy);
+            enlightedLink.setAttribute('href', 'assets/doc-with-js.html');
+
+            setTimeout(()=>{
+                expect(loadSpy).to.be.calledOnce;
+                expect(loadSpy.args[0][0].type).to.equal('load');
+                done();
+            }, 200);
+            document.body.appendChild(shadowHost);
+        });
+        it('only one `load` event when link is loaded for re-attached element', function(done) {
+            document.body.appendChild(shadowHost);
+            enlightedLink.addEventListener('load', loadSpy);
+            enlightedLink.setAttribute('href', 'assets/doc-with-js.html?2');
+
+            setTimeout(()=>{
+                expect(loadSpy).to.be.calledOnce;
+                expect(loadSpy.args[0][0].type).to.equal('load');
+                done();
+            }, 200);
+            document.body.appendChild(shadowHost);
+        });
+        it('`error` event when link is errored', function(done) {
+            enlightedLink.addEventListener('error', errorSpy);
+            enlightedLink.setAttribute('href', 'non-existing.html');
+
+            setTimeout(()=>{
+                expect(errorSpy).to.be.calledOnce;
+                expect(errorSpy.args[0][0].type).to.equal('error');
+                done();
+            }, 200);
+            document.body.appendChild(shadowHost);
+        });
+        it('only one `error` event when link is errored for re-attached element', function(done) {
+            enlightedLink.setAttribute('href', 'non-existing2.html');
+            document.body.appendChild(shadowHost);
+            enlightedLink.addEventListener('error', errorSpy);
+
+            setTimeout(()=>{
+                expect(errorSpy).to.be.calledOnce;
+                expect(errorSpy.args[0][0].type).to.equal('error');
+                done();
+            }, 200);
+            document.body.appendChild(shadowHost);
+        });
+
+    });
+</script>
+
+</html>
diff --git a/test/index.html b/test/index.html
@@ -19,7 +19,8 @@
           'spec.html',
           'added-in-shadow.html',
           'attributes.html',
-          're-attached.html'
+          're-attached.html',
+          'events.html'
         ]);
     </script>
 </body>

diff --git a/wct.conf.json b/wct.conf.json
@@ -10,8 +10,7 @@
                 "platform": "Windows 10"
             }, {
                 "browserName": "safari",
-                "platform": "OS X 10.11",
-                "version": "10"
+                "platform": "OS X 10.13"
             }]
         }
     }