kopia lustrzana https://github.com/shoelace-style/shoelace
59 wiersze
1.7 KiB
TypeScript
59 wiersze
1.7 KiB
TypeScript
import { getBasePath } from './utilities/base-path';
|
|
|
|
const observer = new MutationObserver(mutations => {
|
|
for (const { addedNodes } of mutations) {
|
|
for (const node of addedNodes) {
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
discover(node as Element);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Checks a node for undefined elements and attempts to register them.
|
|
*/
|
|
async function discover(root: Element) {
|
|
const rootTagName = root.tagName.toLowerCase();
|
|
const rootIsCustomElement = rootTagName.includes('-');
|
|
const tags = [...root.querySelectorAll(':not(:defined)')]
|
|
.map(el => el.tagName.toLowerCase())
|
|
.filter(tag => tag.startsWith('sl-'));
|
|
|
|
// If the root element is an undefined custom element, add it to the list
|
|
if (rootIsCustomElement && !customElements.get(rootTagName)) {
|
|
tags.push(root.tagName.toLowerCase());
|
|
}
|
|
|
|
// Make the list unique
|
|
const tagsToRegister = [...new Set(tags)];
|
|
|
|
await Promise.allSettled(tagsToRegister.map(tagName => register(tagName)));
|
|
}
|
|
|
|
/**
|
|
* Registers an element by tag name.
|
|
*/
|
|
function register(tagName: string): Promise<void> {
|
|
const tagWithoutPrefix = tagName.replace(/^sl-/i, '');
|
|
const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
|
|
|
|
// If the element is already defined, there's nothing more to do
|
|
if (customElements.get(tagName)) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
// Register it
|
|
return new Promise((resolve, reject) => {
|
|
import(path)
|
|
.then(() => resolve())
|
|
.catch(() => reject(new Error(`Unable to automatically load<${tagName}> from ${path}`)));
|
|
});
|
|
}
|
|
|
|
// Initial discovery
|
|
discover(document.body);
|
|
|
|
// Listen for new undefined elements
|
|
observer.observe(document.body, { subtree: true, childList: true });
|