Closed Danny-Engelman closed 3 years ago
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
I ran the Inspector on: https://pie-meister.github.io/
My
<content-lenght>
Web Component is small and doesn't have any methods/properties: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)