A webcomponents auto loader and registry
npm install ce-autoloader
A webcomponent lazy loader and registry for the web.
The missing parts of the customElements API.
🚀 Live Demo |
📖 Documentation
- Automatically Load any web-component on demand, if and when they're used in the page.
- A centralized registry for your components, skip the tedious and error-prone manual registration.
- Activation Triggers: Native support for loading strategies like on="visible", on="click", or eager loading.
- Dynamic Resolvers: Effortlessly resolve entire component libraries (e.g., nord-*) using pattern-based loaders.
- Supports for CSS animations and even view-transitions!
- Framework-independent: React, Lit, Svelte, Vue, Angular...
- No dependencies, <10kb (3kb gzip), and fast!
- Hackers tired of frontend fatigue, react madness and hydration issues.
- Markdown blogs: hey, webcomponents are already supported natively!
- Progressive enhancement for static sites and CMS.
- Multi-page applications with interactive islands.
- Smart editors like Obsidian, Notion, LogSeq.
ce-autoloader is available as a npm package
```
npm install ce-autoloader
Import ce-autoloader in your primary bundle and add a components registry:
`js
import CERegistry from "ce-autoloader";
For large design systems, you can use Dynamic Resolvers to avoid manual registration:
`js
const catalog = {
// 1. Dynamic Resolver for Shoelace
"sl-*": "https://cdn.jsdelivr.net/npm/shoelace@2.20.1/",
// 2. Pattern-based Resolver for Material Design
"md-*": async (full_name) => {
const [namespace, name] = full_name.split('-');
return import(https://esm.run/@material/web/${name});
},
// 3. Explicit component registration
"x-counter": () => import("./components/x-counter.js"),
}
`
Now you can use any component from these libraries, and they will be activated only when used.
`html`
#### De-duplicating dependencies with ?external
We can deduplicate by marking core dependencies as external, and loading them once.
- For CDN's, there's generally and external option: esm.sh?external.external` config
- Rollup or other bundlers always has an
Latest Chrome, Firefox, Safari, Edge for view transition support.
See documentation at ce-autoloader