ce-autoloader
v0.0.5
Published
A webcomponents auto loader and registry
Downloads
27
Maintainers
vitocalReadme
- 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!
Use Cases
- 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.
Installation
ce-autoloader is available as a npm package
npm install ce-autoloaderUsage
Import ce-autoloader in your primary bundle and add a components registry:
import CERegistry from "ce-autoloader";
### Powerful Resolvers (Wildcard Loading)
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/[email protected]/",
// 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.
<body>
<sl-alert variant="error">Error</sl-alert>
</body>Gotchas
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
externaloption:esm.sh?external. - Rollup or other bundlers always has an
externalconfig
Browser support
Latest Chrome, Firefox, Safari, Edge for view transition support.
Documentation
See documentation at ce-autoloader