TypeScript

This section assumes you already have a basic understanding of TypeScript. The process of writing Minze components in TypeScript is similar to writing them in vanilla JavaScript.

There are two main differences:

The types for reactive, attrs, watch and eventListeners have to be explicitly declared. You can do so by using Type Helpers provided with Minze.
Reactive properties and attributes are created dynamically so you have to explicitly declare their types in a separate interface named after the component and export it.

WARNING

If you are using typescript-eslint with Minze, you have to disable the @typescript-eslint/no-unsafe-declaration-merging rule.

import type { Reactive } from 'minze'
import { MinzeElement } from 'minze'

export interface MyElement {
  aBoolean: boolean
  anObject: { foo: string }
}

export class MyElement extends MinzeElement {
  reactive: Reactive = [ 
    ['aBoolean', false],
    ['anObject', { foo: 'bar' }]
  ]
}

import type { Attrs } from 'minze'
import { MinzeElement } from 'minze'

export interface MyElement {
  text: string | null
  bgColor: string
  config: Record<string, string>
}

export class MyElement extends MinzeElement {
  attrs: Attrs = [ 
    'text',
    ['bg-color', '#000'],
    ['config', { key1: 'value', key2: 'value' }]
  ]

  static observedAttributes = ['text', 'bg-color', 'config']
}

import type { Watch } from 'minze'
import { MinzeElement, type Watch } from 'minze'

export class MyElement extends MinzeElement {
  watch: Watch = [['aBoolean', () => {}]] 
}

import type { EventListeners } from 'minze'
import { MinzeElement } from 'minze'

export class MyElement extends MinzeElement {
  html = () => `<button class="button">Click me!</button>`

  handleClick = (event: Event) => {
    console.log(event.target) // <button class="button">Click me!</button>
  }

  eventListeners: EventListeners = [ 
    ['.button', 'click', this.handleClick]
  ]
}

import { MyElement } from './my-element'
MyElement.define()

html

<my-element></my-element>

TypeScript ​

TypeScript