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:

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

To:

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:

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

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

export interface AlpineData {
    open: boolean
    toggle(): void
};

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

index.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

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

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

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 to provide TypeScript types for Livewire 3 components.

Contribute

Feel free to open issues or make pull requests on Gitlab.

Licence

MIT