document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.magic('hello', () => {
            return () => 'Hello from Plugin!';
        });
    });
});

document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.magic('currentDate', () => {
            return () => new Date().toLocaleDateString();
        });
    });
});

<div x-data>
    <p>Today's Date: <span x-text="$currentDate"></span></p>
</div>

document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.directive('bgcolor', (el, { expression }, { evaluate }) => {
            const color = evaluate(expression);
            el.style.backgroundColor = color;
        });
    });
});

<div x-data>
    <div x-bgcolor="'lightblue'" class="p-4">
        This background is light blue.
    </div>
</div>

document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.magic('random', () => {
            return (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
        });
    });
});

<div x-data>
    <p>Random Number: <span x-text="$random(1, 100)"></span></p>
</div>

document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.magic('dispatchEvent', () => {
            return (eventName, detail = {}) => {
                window.dispatchEvent(new CustomEvent(eventName, { detail }));
            };
        });
    });
});

<div x-data>
    <button @click="$dispatchEvent('custom-event', { message: 'Hello from Plugin!' })">
        Dispatch Event
    </button>
    <div @custom-event.window="alert($event.detail.message)">
        Waiting for Event...
    </div>
</div>

document.addEventListener('alpine:init', () => {
    Alpine.plugin((Alpine) => {
        Alpine.magic('scrollTo', () => {
            return (selector) => {
                document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth' });
            };
        });
    });
});

<div x-data>
    <button @click="$scrollTo('#section2')">Scroll to Section 2</button>
    <div id="section1" class="h-64 bg-gray-200">Section 1</div>
    <div id="section2" class="h-64 bg-gray-300">Section 2</div>
</div>

document.addEventListener('alpine:init', () => {
    // Plugin 1: Random Number
    Alpine.plugin((Alpine) => {
        Alpine.magic('random', () => {
            return (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
        });
    });

    // Plugin 2: Current Date
    Alpine.plugin((Alpine) => {
        Alpine.magic('currentDate', () => {
            return () => new Date().toLocaleDateString();
        });
    });
});

<div x-data>
    <p>Today's Date: <span x-text="$currentDate"></span></p>
    <p>Random Number: <span x-text="$random(1, 100)"></span></p>
</div>