Alpine Class Component

This package provides typescript support for Alpine.js, and is inspired by archtechx/alpine-typescript and kaorun343/vue-property-decorator.

Install

npm install @rubenbimmel/alpine-class-component

Usage

• Components
• Constructor
• Init
• Getters
• Refs
• Watch

Components

Write a component:

import { AlpineComponent, Component } from '@rubenbimmel/alpine-class-component';

@Component
export default class Dropdown extends AlpineComponent {
    show = false;
    
    open() {
        this.show = true
    }
    
    close() {
        this.show = false
    }
}

Register a component:

import { Alpine } from '@rubenbimmel/alpine-class-component';

import Dropdown from './components/dropdown/dropdown';

Alpine.data('dropdown', Dropdown);

Alpine.start();

Use it in a template:

<div x-data="dropdown">
    <button @click="open()">Expand</button>
 
    <span x-show="show" x-on:click.away="close()" x-cloak>
      Content...
    </span>
</div>

Constructor

You can pass in additional parameters to the initial data object using a constructor:

import { AlpineComponent, Component } from '@rubenbimmel/alpine-class-component';

@Component
export default class Person extends AlpineComponent {
  firstName: string;
  lastName: string;
  
  constructor(firstName: string, lastName: string) {
    super();

    this.firstName = firstName;
    this.lastName = lastName;
  }

  get name() {
    return `${this.firstName} ${this.lastName}`;
  }
}

<div x-data="person('John', 'Doe')">
    <span x-text="name"></span>
</div>

Init

Init functions are automatically execute before the component is rendered:

import { AlpineComponent, Component } from '@rubenbimmel/alpine-class-component';

@Component
export default class Example extends AlpineComponent {
  init() {
    console.log('init');
  }
}

Getters

Getters can be used as normal:

import { AlpineComponent, Component } from '@rubenbimmel/alpine-class-component';

@Component
export default class Person extends AlpineComponent {
  firstName = 'John';
  lastName = 'Doe';

  get name() {
    return this.firstName + ' ' + this.lastName;
  }
}

Refs

Use the Ref decorator to declare refs:

<div x-data="example">
  <button @click="remove()">Remove Text</button>

  <span x-ref="text">Hello 👋</span>
</div>

import { AlpineComponent, Component, Ref } from '@rubenbimmel/alpine-class-component';

@Component
export default class Example extends AlpineComponent {
  @Ref() text: HTMLSpanElement;
  
  remove() {
    this.text.remove();
  }
}

Watch

Use the Watch decorator to register watchers:

import { AlpineComponent, Component, Watch } from '@rubenbimmel/alpine-class-component';

@Component
export default class Dropdown extends AlpineComponent {
    show = false;
    
    @Watch('show')
    onShowChange(value: boolean, oldValue: boolean) {
      console.log(value, oldValue);
    }
}