wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-09-17 12:50:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP switch to webcomponents loader async polyfills; multiple small fixes for Firefox and generally more defensive coding

Browse Source
This commit is contained in:
Ludwig Schubert
2017-10-24 16:48:48 -07:00
parent 11b00b4cee
commit f388c39553
7 changed files with 165 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/transforms/meta.js
+5
View File
@@ -37,6 +37,11 @@ export default function(dom, data) {
<meta property="description" itemprop="description" content="${escape(data.description)}" />
<meta property="article:published" itemprop="datePublished" content="${data.publishedISODateOnly}" />
<meta property="article:created" itemprop="dateCreated" content="${data.publishedISODateOnly}" />
`);
}
if (data.updatedDate) {
appendHead(`
<meta property="article:modified" itemprop="dateModified" content="${data.updatedDate.toISOString()}" />
`);
}
src/transforms/polyfills.js
+63 -36
View File
@@ -1,47 +1,74 @@
const webcomponentPath = 'https://distill.pub/third-party/polyfills/webcomponents-lite.js';
const intersectionObserverPath = 'https://distill.pub/third-party/polyfills/intersection-observer.js';
const template = `
if ('IntersectionObserver' in window &&
'IntersectionObserverEntry' in window &&
'intersectionRatio' in IntersectionObserverEntry.prototype) {
// Platform supports IntersectionObserver natively! :-)
if (!('isIntersecting' in IntersectionObserverEntry.prototype)) {
Object.defineProperty(IntersectionObserverEntry.prototype,
'isIntersecting', {
get: function () {
return this.intersectionRatio > 0;
}
});
}
} else {
// Platform does not support webcomponents--loading polyfills synchronously.
const scriptTag = document.createElement('script');
scriptTag.src = '${intersectionObserverPath}';
scriptTag.async = false;
document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript.nextSibling);
}
// const template = `
// if ('IntersectionObserver' in window &&
// 'IntersectionObserverEntry' in window &&
// 'intersectionRatio' in IntersectionObserverEntry.prototype) {
// // Platform supports IntersectionObserver natively! :-)
// if (!('isIntersecting' in IntersectionObserverEntry.prototype)) {
// Object.defineProperty(IntersectionObserverEntry.prototype,
// 'isIntersecting', {
// get: function () {
// return this.intersectionRatio > 0;
// }
// });
// }
// } else {
// // Platform does not support webcomponents--loading polyfills synchronously.
// const scriptTag = document.createElement('script');
// scriptTag.src = '${intersectionObserverPath}';
// scriptTag.async = false;
// document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript.nextSibling);
// }
//
// if ('registerElement' in document &&
// 'import' in document.createElement('link') &&
// 'content' in document.createElement('template')) {
// // Platform supports webcomponents natively! :-)
// } else {
// // Platform does not support webcomponents--loading polyfills synchronously.
// const scriptTag = document.createElement('script');
// scriptTag.src = '${webcomponentPath}';
// scriptTag.async = false;
// document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript.nextSibling);
// }
//
//
// `;
if ('registerElement' in document &&
'import' in document.createElement('link') &&
'content' in document.createElement('template')) {
// Platform supports webcomponents natively! :-)
} else {
// Platform does not support webcomponents--loading polyfills synchronously.
const scriptTag = document.createElement('script');
scriptTag.src = '${webcomponentPath}';
scriptTag.async = false;
document.currentScript.parentNode.insertBefore(scriptTag, document.currentScript.nextSibling);
}
const addBackIn = `
window.addEventListener('WebComponentsReady', function() {
console.warn('WebComponentsReady');
const loaderTag = document.createElement('script');
loaderTag.src = 'http://localhost:8888/dist/template.v2.js';
document.head.insertBefore(loaderTag, document.head.firstChild);
});
`;
export default function render(dom) {
// pull out template script tag
const templateTag = dom.querySelector('script[src*="template.v2.js"]');
templateTag.parentNode.removeChild(templateTag);
// add loader
const loaderTag = dom.createElement('script');
loaderTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.17/webcomponents-loader.js';
dom.head.insertBefore(loaderTag, dom.head.firstChild);
// add loader event listener to add tempalrte back in
const addTag = dom.createElement('script');
addTag.innerHTML = addBackIn;
dom.head.insertBefore(addTag, dom.head.firstChild);
// create polyfill script tag
const polyfillScriptTag = dom.createElement('script');
polyfillScriptTag.innerHTML = template;
polyfillScriptTag.id = 'polyfills';
// const polyfillScriptTag = dom.createElement('script');
// polyfillScriptTag.innerHTML = template;
// polyfillScriptTag.id = 'polyfills';
// insert at appropriate position--before any other script tag
const firstScriptTag = dom.head.querySelector('script');
dom.head.insertBefore(polyfillScriptTag, firstScriptTag);
// const firstScriptTag = dom.head.querySelector('script');
// dom.head.insertBefore(polyfillScriptTag, firstScriptTag);
}