AlpineComponentLoader Showcase

1. Inline Templates Auto Discovery

Define components directly in HTML. No JavaScript registration needed.

View Source

<!-- Definition -->
<template acl-component="inline-counter" acl-props='{ "count": "Number", "label": { "type": "String", "default": "Default Counter" } }'>
<div x-data="{ props: $el.$props }" style="border:1px solid #ccc; padding:10px;">
    <h3 x-text="props.label || 'Default Counter'"></h3>
    <button @click="props.count++">Count: <span x-text="props.count"></span></button>
</div>
</template>

<!-- Usage -->
<inline-counter></inline-counter>
<inline-counter label="My Widget" count="5"></inline-counter>

2. Shadow DOM & Typed Props

Styles are encapsulated. Attributes `active="true"` are converted to real Booleans.

View Source

AlpineComponentLoader.define('shadow-card', '#tpl-shadow-card', {
    shadow: true,
    attributes: { 'title': String, 'active': Boolean }
});

3. Lifecycle Hooks

Hook into component events: `beforeMount`, `mounted`, `updated`, and `unmounted`.

View Source

AlpineComponentLoader.define('lifecycle-logger', '#tpl', {
    hooks: {
        mounted() { this.$props.logs.push('Mounted!'); },
        updated({ name, newVal }) { this.$props.logs.push(`${name} -> ${newVal}`); }
    }
});

4. External Dependencies

Load external CSS/JS (like FontAwesome) automatically. Works in Shadow DOM!

Loads canvas-confetti automatically before mounting.

View Source

AlpineComponentLoader.define('external-icon', '#tpl-external-icon', {
    shadow: true,
    externalCss: ['https://.../all.min.css'],
    attributes: { 'name': String }
});

AlpineComponentLoader.define('confetti-btn', '#tpl-confetti', {
    shadow: true,
    externalScripts: ['https://.../confetti.browser.min.js']
});

5. Strict Validation

Props can now enforce `required`, `default` values, and use custom `validator` functions.

View Source

attributes: {
    'percent': {
        type: Number,
        required: true,
        default: 0,
        validator: (v) => v >= 0 && v <= 100
    }
}

6. Light DOM Slots Polyfill

Use named `<slot>` elements even without Shadow DOM. CSS is auto-scoped.

Success! Data saved successfully.

Error! Data saved failed.

View Source

<!-- Definition -->
AlpineComponentLoader.define('light-alert', '#tpl-light-alert', {
    shadow: false,
    attributes: { 'type': String }
});

<!-- Usage -->
<light-alert type="success">
  <span slot="title">Success!</span>
  Data saved successfully.
</light-alert>

7. Lazy Loading

This component won't initialize until you scroll it into view.

View Source

AlpineComponentLoader.define('lazy-image', '#tpl-lazy-image', {
    loading: 'lazy'
});

<!-- Won't load until scrolled into view -->
<lazy-image></lazy-image>

8. Declarative Loading acl-component

Load components purely via HTML without writing `define()` in JS. Props are inferred automatically.

View Source

<acl-component
    src="/components/card.html"
    tag="my-card"
    shadow="true"
    title="Hello"
    tags="['one', 'two']"
></acl-component>

9. Declarative Fetching data-src

Provide a `data-src` attribute to automatically fetch JSON and inject it into `props.data`.

View Source

<acl-component
  src="#tpl-user-card"
  tag="api-user"
  data-src="https://jsonplaceholder.typicode.com/users/1"
></acl-component>

10. Global Store Binding bind-store

Components can bind directly to an Alpine Global Store. Updates sync automatically.

View Source

<!-- Initialize Global Store -->
document.addEventListener('alpine:init', () => {
    Alpine.store('theme', { mode: 'Light Mode' });
});

<!-- Bind Component -->
<acl-component
    src="#tpl-theme-display"
    tag="theme-display"
    bind-store="theme"
></acl-component>

11. Error Boundaries fallback

If a component fails to load (e.g. 404), it renders the fallback template instead of an error message.

View Source

AlpineComponentLoader.define('boundary-demo', '/404.html', {
    fallback: '#tpl-fallback-error'
});

12. Idle Loading

Uses requestIdleCallback to load low-priority components when the CPU is idle.

View Source

<acl-component
    src="#tpl-declarative-card"
    tag="idle-card"
    loading="idle"
    title="Idle Loaded"
></acl-component>