µce-loader
Social Media Photo by Guillaume Bolduc on Unsplash
A minimalistic, framework agnostic, lazy Custom Elements loader.
Breaking V1
The loader now requires an object with an optional container property and an on(tagName){} method in charge of loading/resolving the external file.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="module">
// <script src="//unpkg.com/uce-loader"> or ...
import loader from '//unpkg.com/uce-loader?module';
// will load every custom elements via the path
loader({
// by default it's document
container: document.body,
// invoked per each new custom-element name found
on(newTag) {
var js = document.createElement('script');
js.src = 'js/components/' + newTag + '.js';
document.head.appendChild(js);
}
});
// js/components/compo-nent.js
// js/components/what-ever.js
// which will bring in also
// js/components/whatever-else.js
</script>
</head>
<body>
<compo-nent></compo-nent>
<hr>
<what-ever></what-ever>
</body>
</html>If loader({container: document, on(tagName){}}) API is too simplified, feel free to check lazytag out.