Merge pull request #39 from Juicy/x-brower-autonomous-CEv1

X-brower autonomous CEv1

README.md

@@ -125,11 +125,15 @@ Name       | When                               | `event.detail`
 
 Browser support relies mainly on polyfills support/spec compliance.
 
-| Chrome | IE11 | Edge | Firefox  | Safari 9 |
+| Chrome | IE11 | Edge | Firefox  | Safari 10 |
 |:------:|:----:|:----:|:--------:|:--------:|
-|  ✓     | ✓*   | ✓*   | ✓*       | ✓*       |
+|  ✓     | ✓** | ✓*   | ✓*       | ✓*       |
 
-\* There is a workaround for [polyfill issue](https://github.com/webcomponents/webcomponentsjs/issues/470), to execute scripts and apply styles define inside the template in imported HTML. Also, some hacks are made to preserve correct position in DOM of scripts executed by polyfill, so `previousSibling` and Polymer's `dom-bind`/`dom-repeat` can be used as in native Web Components, see [more sample use cases](https://github.com/Juicy/imported-template/tree/master/test/use-cases)
+\*
+- **V0**: There is a workaround for [polyfill issue](https://github.com/webcomponents/webcomponentsjs/issues/470), to execute scripts and apply styles define inside the template in imported HTML. Also, some hacks are made to preserve correct position in DOM of scripts executed by polyfill, so `previousSibling` and Polymer's `dom-bind`/`dom-repeat` can be used as in native Web Components, see [more sample use cases](https://github.com/Juicy/imported-template/tree/master/test/use-cases)
+- **V1**: There is also a workaround for [polyfill issue wcjs#872](https://github.com/webcomponents/webcomponentsjs/issues/872)
+
+\*\* **V1**: In IE11 workaround for per-template scripts [polyfill issue wcjs#872](https://github.com/webcomponents/webcomponentsjs/issues/872) does not work
 
 
 ## [Contributing and Development](CONTRIBUTING.md)

imported-template.html

@@ -14,6 +14,22 @@
 
             return (typeof HTMLImports !== 'undefined') && !HTMLImports.useNative && HTMLImports.parser && !isSafariWithWc;
         })();
+        // We need to workaround executing scripts from the template imported by this element until
+        // https://github.com/webcomponents/html-imports/pull/77 is merged
+        const HTMLImportsV1PolyfillInUse = HTMLImports && (HTMLImports.useNative === false) && HTMLImports.importForElement;
+        const scriptsSelector = 'script:not([type]),script[type="application/javascript"],script[type="text/javascript"]';
+        /**
+         * @param {Array|NodeList|NamedNodeMap} list
+         * @param {!Function} callback
+         */
+        const forEach = (list, callback) => {
+          const length = list ? list.length : 0;
+          let i = 0;
+          for (; i < length && i >= 0; i = i + 1) {
+            callback(list[i], i);
+          }
+        };
+        // end of workaround consts
 
         // Prepare for monkeypatching addElementToDocument to make `document.currentScript.previousElementSibling` point to correct node
         var originalAddElementToDocument, monkeyPatchedAddElementToDocument;
@@ -72,6 +88,28 @@
                     that.scopelessNodes = [];
                     that.clear();
 
+
+                    // We need to workaround executing scripts from the template imported by this element until
+                    // https://github.com/webcomponents/html-imports/pull/77 is merged
+                    // Make scripts from imported templates work in browsers polyfilled by wcjs#v1 HTML Imports
+                    if(HTMLImportsV1PolyfillInUse){
+                        const replaceScripts = (content) => {
+                          forEach(content.querySelectorAll('template'), template => {
+                            forEach(template.content.querySelectorAll(scriptsSelector), script => {
+                              const clone = /** @type {!HTMLScriptElement} */
+                                (document.createElement('script'));
+                              forEach(script.attributes, attr => clone.setAttribute(attr.name, attr.value));
+                              clone.textContent = script.textContent;
+                              script.parentNode.insertBefore(clone, script);
+                              script.parentNode.removeChild(script);
+                            });
+                            replaceScripts(template.content);
+                          });
+                        };
+                        replaceScripts(this.import);
+                    }
+                    // end of workaround for webcomponents/html-imports/pull/77
+
                     if (templates.length >= 1) {
                         fragment = document.createDocumentFragment();
                         // clone templates contents, and mark correct scopes

test/use-cases/dom-bind/dom-repeat.html

@@ -30,7 +30,7 @@ <h3>dom-repeat</h3>
                             <template is="dom-repeat" items="[0,1,2]">
                                 <fieldset>
                                     <legend>Item <span>{{item}}</span></legend>
-                                    <imported-template href="./dom-repeat.import.html"></imported-template>
+                                    <imported-template href="./dom-repeat.import.html" model$="{{item}}"></imported-template>
                                 </fieldset>
                             </template>
                         </div>
@@ -54,7 +54,8 @@ <h3>dom-repeat</h3>
                     },500);
                 });
                 describe('once stamped, should execute script within correct place in DOM', function(){
-                    it('`document.(_)currentScript.previousElementSibling` should point to node that was before it in template', function(done){
+                    it('`document.(_)currentScript.previousElementSibling` should point to node that was before it in template - order of loading the same partial may be inconsistent due to /webcomponents/html-imports#79', function(done){
+                        console.info('https://github.com/webcomponents/html-imports/issues/79');
                         setTimeout(function waitForStamp(){
                             var stampedNodes = repeatContainer.querySelectorAll('fieldset');
                             expect(stampedNodes.length).to.equal(3);

test/use-cases/dom-bind/dom-repeat.import.html

@@ -1,16 +1,19 @@
 <template>
     <dom-bind class="sub-dom-bind">
         <template is="dom-bind">
-            <div class="sub">dom-repeat.import.html <span>{{model.works}}</span></div>
+            <div class="sub">dom-repeat.import.html <span>{{model}}</span></div>
         </template>
     </dom-bind>
     <script class="sub-script">
     (function(){
         //debugger
         //console.log("In dom-repeat.import.html!");
-        var template = (document._currentScript || document.currentScript).previousElementSibling;
-        window.ImportedTemplateTest.previousElementSiblings.push( template );
-        template.model = {works: "works"};
+        var domBind = (document._currentScript || document.currentScript).previousElementSibling;
+        // Once https://github.com/webcomponents/html-imports/issues/79 is fixed
+        // should be changed
+        // window.ImportedTemplateTest.previousElementSiblings.push(domBind);
+        window.ImportedTemplateTest.previousElementSiblings[domBind.model] = domBind;
+        // template.model = {works: "works"};
     })();
     </script>
     <style>

wct.conf.json

@@ -10,18 +10,10 @@
                 "platform": "Windows 10",
                 "version": ""
             }, {
-                "browserName": "internet explorer",
-                "platform": "Windows 8.1",
-                "version": "11"
-            }, {
-                "browserName": "internet explorer",
-                "platform": "Windows 7",
+                "browserName": "safari",
+                "platform": "OS X 10.11",
                 "version": "10"
-            }, {
-                 "browserName": "safari",
-                 "platform": "OS X 10.11",
-                 "version": "9"
-             }]
+            }]
         }
     }
 }