Show the JavaScript source for (small) Custom Elements
Closed this issue · 3 comments
I ran the Inspector on: https://pie-meister.github.io/
My <content-lenght> Web Component is small and doesn't have any methods/properties:
customElements.define( "content-length", class extends HTMLElement {
connectedCallback() {
let source = this.getAttribute("src") || "https://pie-meister.github.io/PieMeister.min.js";
this.setAttribute("title", source);
fetch(source, { mode: "cors" }).then(
(response) => (this.innerHTML = " " + response.headers.get("content-length") + " Bytes")
);
}
}
);
Suggestions (based on a similar tool I built myself):
-
For (small) components, list the [formatted] source code (or optional for all methods)
-
List which default methods the component has, this is an indication of complexity
-
List the bytecount of each method, again, indicates complexity
-
in the CE localName listing, add global collapse option
-
in the CE localName listing, add count of all CEs contained in CE
-
in the CE localName listing, add count of all similar named CEs (count of one CE)
Oh these are some good suggestions!
Adding a source panel is something I'll definitely do!
Don't get me started...
-
If there is shadowDOM, info on (used) slots, including analysis of (mismatching) slot names in lightDOM
-
class hierarchy, and show me which methods/properties are overloaded.
There is a reason I never published my "Qomponents Inspector" LOL
Optimization;
You are using querySelector to find Elements. Can be done with the (faster) NodeIterator:
// findElements takes a function definition, the output must be Truthy or Falsy
function findElements( accept = x => customElements.get(x.localName) || 0) {
function log() {
console.log(`%c findElements `, `background:purple;color:yellow`, ...arguments);
}
let node, elements = [], shadowRootCount = 0;
function diveNode( diveRoot ) {
// IE9 was last to implement the TreeWalker/NodeIterator API ... in 2011
let iterator = document.createNodeIterator(
diveRoot,
NodeFilter.SHOW_ELEMENT,
node => accept(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
);
while ( node = iterator.nextNode() ) {
if (node.shadowRoot) {
log(`dive into shadowRoot #${++shadowRootCount} at`, node.outerHTML);
[...node.shadowRoot.children].forEach( diveNode );
}
elements.push(node);
}
}
diveNode( document.body ); // initial dive location
log(elements.length, `elements found`,[elements]);
return elements;
}
findElements(); // find all Custom Elements