AlpineJS Skill: Creating Local Plugins with Alpine.plugin()

Alpine.plugin(pluginFunction): This is the primary method for registering a plugin. You pass it a function, and this function will be executed by Alpine, receiving the global Alpine object as its argument. This allows your plugin to access Alpine's core functionalities like Alpine.directive(), Alpine.store(), and Alpine.magic().

// Define your plugin logic
const myCustomPlugin = (alpineInstance) => {
    // Use alpineInstance to register directives, stores, etc.
    alpineInstance.directive(...);
    alpineInstance.store(...);
};

// Register the plugin
Alpine.plugin(myCustomPlugin);

Alpine.directive(name, callback) (within plugin): Used inside your plugin function to define custom directives (new x- attributes). The name is the part after x- (e.g., for x-my-directive, name is 'my-directive'). The callback function receives arguments like the DOM element (el), an object with directive details ({ value, expression, modifiers }), and Alpine utility functions ({ effect, cleanup, evaluate, evaluateLater }).

alpineInstance.directive('highlight', (el, { expression }) => {
    el.style.backgroundColor = expression || 'yellow';
});

Alpine.store(name, object) (within plugin): Used to define global reactive data stores. These stores can be accessed from any Alpine component using $store.name. This is great for sharing state across different parts of your application without prop drilling.

alpineInstance.store('user', {
    name: 'Guest',
    isLoggedIn: false,
    login(username) { this.name = username; this.isLoggedIn = true; }
});

Alpine.magic(name, callback) (within plugin): Allows you to create custom "magic properties" (usually prefixed with $), which are convenient shortcuts or utility functions accessible within Alpine expressions. The callback typically returns the value or function that the magic property will provide.

alpineInstance.magic('clipboard', () => {
    return (text) => navigator.clipboard.writeText(text);
});
// Usage in HTML: <button @click="$clipboard('Copy this!')">Copy</button>

alpine:init: This is a crucial browser event that Alpine.js dispatches once it has been loaded and is ready to be initialized, but *before* it starts processing components on the page. All plugin registrations (using Alpine.plugin()), global stores (Alpine.store() outside plugins), and component data definitions (Alpine.data()) should happen within an event listener for alpine:init. This ensures your extensions are available when Alpine begins its work.

document.addEventListener('alpine:init', () => {
    Alpine.plugin(myCustomPlugin);
    Alpine.store('settings', { theme: 'light' });
    Alpine.data('myComponent', () => ({ message: 'Hello' }));
});