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!

$3

- 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-autoloader
`

Usage

Import ce-autoloader in your primary bundle and add a components registry:

`js
import CERegistry from "ce-autoloader";

$3

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

Error

`

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 external option: esm.sh?external.
- Rollup or other bundlers always has an external` config

Browser support

Latest Chrome, Firefox, Safari, Edge for view transition support.

Documentation

See documentation at ce-autoloader