npm package: @nolikein/typed-alpinejs
Description: Helpers usefull to create a new AlpineJs component with Livewire 3
Author: Côme Wasik
Latest version: 2.0.5

# TypeScript Helpers for AlpineJs and Livewire 3

Allows you to use the power of TypeScript when creating components with AlpineJs and Livewire 3.

## Upgrade from 1.X to 2.X

Now all your "LivewireMethods" interfaces should be a Record<string, (...args: any) => any> instead of Record<string, any>.

This means your code pass from:

```ts
interface LivewireMethods {
    open: ({ state: boolean })
}
```

To:

```ts
interface LivewireMethods extends LivewireMethodsRecord {
    open: (state: boolean) => ({ state: boolean })
}

// OR

type LivewireMethods = {
    open: (state: boolean) => ({ state: boolean })
}
```

! Please take care about extending your `LivewireData` with `LivewireDataRecord`:
```ts
interface LivewireData extends LivewireDataRecord {
    open: boolean
}
// OR

type LivewireData = {
    open: boolean
}
```

In order to keep the type safety of your methods parameters and return types.

## Installation

    npm i @nolikein/typed-alpinejs

## Usage

### AlpineJs component only

As a basic example, let us try to create a Dropdown component.

**Dropdown.ts**
```ts
import { createAlpineComponent } from "@nolikein/typed-alpinejs";
import { AlpineData } from "./interface/Dropdown";

export default (
    // Component parameters...

) => createAlpineComponent<AlpineData>({
    // Component properties ...
    open: false,

    /**
     * Initialize the component
     */
    init() {
        //
    },

    toggle(): void {
        this.open = !this.open;
    },
});
```

All our component data are stored here.

**interface/Dropdown.ts**
```ts
export interface AlpineData {
    open: boolean
    toggle(): void
};
```

All the interfaces used by the component should be stored here.

**index.ts**
```ts
import Dropdown from "./Dropdown";

Alpine.data('Dropdown', Dropdown);
```

This is the main file where you import all your components.

### AlpineJs with Livewire 3

**Dropdown.ts**
```ts
import { createAlpineLivewireComponent } from "@nolikein/typed-alpinejs";
import { AlpineData, LivewireData, LivewireMethods } from "./interface/Dropdown";

export default (
    // Component parameters...

) => createAlpineLivewireComponent<AlpineData, LivewireData, LivewireMethods>({
    // Component properties ...
    open: false,

    /**
     * Initialize the component
     */
    init() {
        //
    },

    toggle(): void {
        this.open = !this.open;
    },
});
```

All our component data are stored here.

**interface/Dropdown.ts**
```ts
export interface AlpineData {
    open: boolean
    toggle(): void
};

export interface LivewireData extends LivewireDataRecord {
    // Here should be all your Livewire component public properties
    // By example:
    open: boolean
};

export interface LivewireMethods extends LivewireMethodsRecord {
    // Here should be all your Livewire component public methods
    // By example, here is a method to "toggle" the Livewire component value.
    // This method return the boolean value equivalent to its "open" public property.
    toggle(): boolean
};
```

All the interfaces used by the component should be stored here.

**index.ts**
```ts
import Dropdown from "./Dropdown";

Alpine.data('Dropdown', Dropdown);
```

This is the main file where you import all your components.

## Dependencies

This package depends on [@nolikein/types-livewire3](https://www.npmjs.com/package/@nolikein/types-livewire3) to provide TypeScript types for Livewire 3 components.

## Contribute

Feel free to open issues or make pull requests on [Gitlab](https://gitlab.com/Come-Wasik/typescript-helpers-for-alpinejs-and-livewire-3).

## Licence

[MIT](./LICENCE)