Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bookmarklet to help prune unnecessary HTML Imports loaded on a page.
javascript:(function(){'use strict';var _temporalUndefined={};function _temporalAssertDefined(val,name,undef){if(val===undef){throw new ReferenceError(name+' is not defined - temporal dead zone');}return true;}(function(){'use strict';var els=_temporalUndefined;var allCustomElements=_temporalUndefined;var polymerRegisteredElements=_temporalUndefined;var diff=_temporalUndefined;function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}els=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return isCustomEl(el);}).map(function(el){return el.getAttribute('is')||el.localName;});allCustomElements=new Set(_temporalAssertDefined(els,'els',_temporalUndefined)&&els);polymerRegisteredElements=Polymer.telemetry.registrations.map(function(el){return el.is;}).filter(function(name){var blacklist=_temporalUndefined;blacklist=['dom-template','array-selector','custom-style'];return(_temporalAssertDefined(blacklist,'blacklist',_temporalUndefined)&&blacklist).indexOf(name)===-1;});diff=[];for(var i=0,_name=undefined;_name=(_temporalAssertDefined(polymerRegisteredElements,'polymerRegisteredElements',_temporalUndefined)&&polymerRegisteredElements)[i];++i){if(!(_temporalAssertDefined(allCustomElements,'allCustomElements',_temporalUndefined)&&allCustomElements).has(_name)){(_temporalAssertDefined(diff,'diff',_temporalUndefined)&&diff).push(_name);}}if((_temporalAssertDefined(diff,'diff',_temporalUndefined)&&diff).length){console.info("There are unused HTML Imports on this page!");console.log("Check that you're not loading extra imports.\n"+"The following elements are registered but never used on the page.");(_temporalAssertDefined(diff,'diff',_temporalUndefined)&&diff).forEach(function(name){return console.log(name);});}})();})();
(function() {
'use strict';
// This bookmarklet lists Polymer elements that have been registered
// but never used on the page. This is useful if you want know when
// you're loading extra HTML Imports that you don't need.
// Note: requires ES6 Set() and => functions.
function isCustomEl(el) {
const isAttr = el.getAttribute('is');
return el.localName.includes('-') || isAttr && isAttr.includes('-');
}
let els = Array.from(document.querySelectorAll('html /deep/ *'))
.filter(el => isCustomEl(el))
.map(el => el.getAttribute('is') || el.localName);
let allCustomElements = new Set(els); // get unique names bro!
let polymerRegisteredElements = Polymer.telemetry.registrations
.map(el => el.is)
.filter(name => {
let blacklist = ['dom-template', 'array-selector', 'custom-style'];
return blacklist.indexOf(name) === -1;
});
let diff = [];
for (let i = 0, name; name = polymerRegisteredElements[i]; ++i) {
if (!allCustomElements.has(name)) {
diff.push(name);
}
}
if (diff.length) {
console.info("There are unused HTML Imports on this page!");
console.log("Check that you're not loading extra imports.\n" +
"The following elements are registered but never used on the page.");
diff.forEach(name => console.log(name));
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.