Type Helpers

Some properties you can define are from the tuple type, but TypeScript doesn't automatically infer tuples and rather assumes that they are arrays. So you have to explicitly declare them as tuples. If you are using reactive, attrs, watch or eventListeners, you can use the following types to do so:

Reactive

Declares reactive property as a mixed array of strings and tuples.

Type: readonly (string | [name: string, value: unknown, exposeAttr?: boolean])[]
Alias: MinzeReactive
Example:

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

export interface MyElement {
  foo: null
  count: number
}

export class MyElement extends MinzeElement {
  reactive: Reactive = ['foo', ['count', 0]]
}

Attrs

Declares attrs property as a mixed array of strings and tuples.

Type: readonly (string | [name: string, value?: unknown])[]
Alias: MinzeAttrs
Example:

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

export interface MyElement {
  foo: null
  count: string
}

export class MyElement extends MinzeElement {
  attrs: Attrs = ['foo', ['count', 0]]
}

Watch

Declares watch property as an array of tuples.

Type: readonly [name: string, callback: (newValue?: any, oldValue?: any, key?: string, target?: object | typeof MinzeElement) => Promise<void> | void][]
Alias: MinzeWatch
Example:

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

export class MyElement extends MinzeElement {
  watchCount = (
    newValue: any,
    oldValue: any,
    key: string,
    target: object | typeof MinzeElement
  ) => {
    console.log(newValue, oldValue, key, target)
  }

  watch: Watch = [['count', this.watchCount]]
}

EventListeners

Declares eventListeners property as an array of tuples.

Type: readonly [eventTarget: string | MinzeElement | typeof Window, eventName: string, callback: (event: Event) => void][]
Alias: MinzeEventListeners
Example:

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

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

  handleClick = (event: Event) => {
    console.log(event)
  }

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

Type Helpers #

Reactive #

Attrs #

Watch #

EventListeners #

Type Helpers

Reactive

Attrs

Watch

EventListeners