Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

remove polyfill workarounds #48

Merged
merged 4 commits into from
Feb 20, 2018
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,9 @@ Browser support relies mainly on polyfills support/spec compliance.

| Chrome | IE11 | Edge | Firefox | Safari 10 |
|:------:|:----:|:----:|:--------:|:--------:|
| ✓ | ✓** | ✓* | ✓* | ✓* |
| ✓ | ✓** | ✓ | ✓ | ✓ |

\*
- **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
\*\* **V1**: IE11 does not support `currentScript` so bunch of test for useful cases fails
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"IE11 does not support currentScript, so a bunch of tests for useful cases fail."



## [Contributing and Development](CONTRIBUTING.md)
Expand Down
93 changes: 0 additions & 93 deletions imported-template.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,6 @@
<link rel="import" href="../juicy-html/juicy-html.html">
<script>
(function () {
// Workaround for polyfilled per-template scripts works with WebComponents.js#v0 only
var polyfillNeedsWorkaround = (function () {
var isSafari = navigator.vendor && navigator.vendor.indexOf("Apple") > -1 && navigator.userAgent && !navigator.userAgent.match("CriOS");
var isSafariWithWc = isSafari && window.navigator.appVersion.match(/(version[/])([7-8][.])/gi);

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;
if (polyfillNeedsWorkaround) {
originalAddElementToDocument = HTMLImports.parser.addElementToDocument;
function monkeyPatchedAddElementToDocument(elt) {
if (unwrap(elt.ownerDocument) == document){
document.head.appendChild(elt);
} else {
originalAddElementToDocument.call(this, elt);
}
}

// Monkey patch it permanently to make (asynchronous) `dom-repeat` get correct `document.currentScript.previousElementSibling`
// https://github.com/Juicy/imported-template/issues/17#issuecomment-169654611
HTMLImports.parser.addElementToDocument = monkeyPatchedAddElementToDocument;
}

class ImportedTemplate extends customElements.get('juicy-html') {
constructor(self) {
self = super(self);
Expand All @@ -67,12 +26,6 @@
var that = this;
this.pending = link;
link.onload = function processImportedDocument() {
// protect yourself agains side-effect of
// https://github.com/webcomponents/webcomponentsjs/issues/470#issuecomment-261238583 workaround
// Re-evaluate need in `starcounter-include` after V1 is shipped
if(!this.import){
return;
}
// TODO(tomalec): caching
// HTML Imports polyfill starting from wc.js#1.x does not create separate document,
// it's just appended to `link` element, therefore there is no `body`
Expand All @@ -91,28 +44,6 @@
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
Expand Down Expand Up @@ -152,33 +83,9 @@
// attach models
that.attributeChangedCallback("model", undefined, that.model || that.getAttribute("model"));

// Apply workaround for HTML Imports shim
// Workaround https://github.com/webcomponents/webcomponentsjs/issues/470
// fix for https://github.com/Juicy/imported-template/issues/17
if (polyfillNeedsWorkaround) {
var nodes = fragment.querySelectorAll(HTMLImports.parser.importsSelectors);
for (var nodeNo = 0, l = nodes.length, node; (nodeNo < l) && (node = nodes[nodeNo]) ; nodeNo++) {
HTMLImports.parser.parseDynamic(node, true);
}
}
// Stamp tempalte into document
that.parentNode.insertBefore(fragment, that.nextSibling);

// Last bit of workaround
// https://github.com/webcomponents/webcomponentsjs/issues/470 workaround
// Re-evaluate need once V1 is shipped
if (polyfillNeedsWorkaround) {
// Hack it permanently for `dom-repeat` #17
// ~ monkey patch addElementToDocument to make `document.currentScript.previousElementSibling` point to correct node
// HTMLImports.parser.addElementToDocument = monkeyPatchedAddElementToDocument;
// parse scripts/styles
console.warn('Workaround for https://github.com/webcomponents/webcomponentsjs/issues/470 is being used, some pending `<link>.onload` events may get called too early. Especially, for 404 files. Re-evaluate the need once webcomponents.js#V1 is shipped.')
HTMLImports.parser.parseNext();
// Hack it permanently for `dom-repeat` #17
// ~ reverse monkey patch
// HTMLImports.parser.addElementToDocument = originalAddElementToDocument;
}

that.pending = false;
};
// guessed workaround for StarcounterSamples/Launcher#82, Polymer/polymer#554, http://crbug.com/389566
Expand Down
2 changes: 1 addition & 1 deletion test/use-cases/dom-bind/dom-bind.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h1>outside dom-bind</h1>
// myElContainer = fixture('imported-template-fixture');
});
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', function(done){
setTimeout(function waitForStamp(){
expect(window.ImportedTemplateTest.previousElementSibling).to.equal(myElContainer.querySelector('#previousElement'));
done();
Expand Down
2 changes: 1 addition & 1 deletion test/use-cases/dom-bind/dom-repeat.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <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 - order of loading the same partial may be inconsistent due to /webcomponents/html-imports#79', 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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
myElContainer = fixture('imported-template-fixture');
});
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', function(done){
setTimeout(function waitForStamp(){
expect(window.ImportedTemplateTest.previousElementSibling).to.equal(myElContainer.querySelector('#previousElement'));
done();
Expand Down