Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nolikein/types-livewire3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TypeScript support for Livewire 3

Allows you to use the power of TypeScript with Livewire 3.

Installation

npm i -D @nolikein/types-livewire3

Usage

Declare Livewire and AlpineJs into your project

First you need to install the alpineJs TypeScript definition.

npm i -D @types/alpinejs

Look where is stored your main ts file (your entrypoint) and create at the same place a livewire.d.ts file.

// Note: "@/your_livewire_path" is an alias to the "vendor/livewire/livewire/dist/livewire.esm.js" file
declare module '@/your_livewire_path' {
    export const Livewire: import('@nolikein/types-livewire3').Livewire.Livewire;
    export const Alpine: import('@types/alpinejs').Alpine
}

Now you are able to use Livewire and Alpine inside your project. Here is an example with an index.ts file

import { Livewire, Alpine } from '@/your_livewire_path';

Alpine.data('YourCOmponent', () => {});
Livewire.start();

Create an Alpine component that use a $wire instance

Use my dedicated package

Why complicating things when i created the easiest way to do it ? Follow that link, install the package then read the instructions.

The hard way to learn

Here we create a Dropdown component inside a Livewire component that have a "state" public bool property and an "open" public method that return the "state" property as a value.

import { AlpineWired } from "@nolikein/types-livewire3";

/**
 * Create the types/interfaces of your component.
 */
// Your AlpineJs component properties and methods
interface AlpineData {
    open: boolean
    toggle(): void
    callBackendToOpen(): void
}

// Your Livewire public properties
interface LivewireData {
    // The livewire component has an "state" property that is a boolean
    state: boolean
}

// Your Livewire public methods
interface LivewireMethods {
    // The livewire component has an "open" method that you can call then return a boolean
    open(): boolean
}

/**
 * Create your component
 */
export default (
    // Component parameters...
) => ({
    // Component properties ...
    open: false,

    // Component methods ...
    toggle(): void {
        this.open = !this.open;
    },

    callBackendToOpen(): void {
        this.$wire.call('open', (data: ({ state: boolean })) => {
            console.log("The livewire component has updated its open property with the value " + data.state);
        });
    },
}) as AlpineWired.AlpineComponent<AlpineData, LivewireData, LivewireMethods>;

Create an AlpineJS only component

Use my dedicated package

Why complicating things when i created the easiest way to do it ? Follow that link, install the package then read the instructions.

The hard way to learn

import { Alpine } from "@nolikein/types-livewire3";

/**
 * Create the type/interface of your component.
 */
// Type version
type Component = Alpine.AlpineComponent<{
    open: boolean
    toggle(): void
    // Here is a method that pass "this" as a parameter named "self"
    // It is rarely used. The only case i found is when you use the method as a callback
    // See the component code to know more about it
    displayOpenState(self: Alpine.AlpineComponentSelf<Component>): void
}>

/**
 * Create your component
 */
export default (
    // Component parameters...
) => ({
    // Component properties ...
    open: false,

    // Component methods ...
    toggle(): void {
        this.open = !this.open;
    },

    /**
     * The hook that is run when the component is created.
     * 
     * You don't need to include it inside your component interface
     * since it is a part of the Alpine.AlpineComponent interface.
     */
    init(): void {
        // You can execute a component method as a callback and use "this"
        // inside of it with that pattern
        setTimeout(
            () => this.displayOpenState(this),
            1000,
        );
    },
    // A method that use "this" but named as "self".
    displayOpenState(self: Alpine.AlpineComponentSelf<Component>): void {
        console.log("Here is your open state: " + self.open);
    },
}) as Component;

Licence

MIT