@octamap/alpine-async-call

The @octamap/alpine-async-call package is a custom directive for Alpine.js that ensures a specified function is available on the window object before invoking it. This is particularly useful when dealing with dynamically loaded or asynchronously initialized modules.

Features

• Custom Directive: Introduces the x-async-call directive.
• Safe Initialization: Waits for the specified function to be available before executing it.
• Seamless Integration: Easily integrates with Alpine.js.

Usage

Load via jsDelivr

To use @octamap/alpine-async-call, include it in your project before loading Alpine.js:

<script src="https://cdn.jsdelivr.net/npm/@octamap/alpine-async-call"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs" defer></script>

Example

The x-async-call directive can be used to call a function only after it becomes available on the window object:

<div x-async-call="checkUserState($data)">
    <!-- Content -->
</div>

In this example, the checkUserState function will be executed once it is available on window. The directive continuously checks for the function's availability and calls it as soon as it is loaded.