# @octamap/alpine-async-call

The `@octamap/alpine-async-call` package is a custom directive for [Alpine.js](https://alpinejs.dev/) 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:

```html
<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:

```html
<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.