Minze

Global class with helpful static methods.

STATIC

version ^1.0.0

Displays the used version of Minze.

Code

import { Minze } from 'minze'

console.log(Minze.version) // '1.2.0'

Type

(property) Minze.version: "__VERSION__"

define ^1.0.0

Defines a custom web component. Doesn't throw any errors if the component is already defined.

Code

import { Minze, MinzeElement } from 'minze'

class MyElement extends MinzeElement {}

Minze.define('my-element', MyElement)

Type

(method) Minze.define(name: string, element: typeof MinzeElement): void

<my-element></my-element>

defineAll ^1.0.0

Defines all custom web components in a single call. Your components will be registered with dash-case naming. The provided components can either be an array of Minze elements, a module object, or a module-map generated with tools like vite's import.meta.glob Doesn't throw any errors if a component is already defined.

WARNING

Your component class names should be in PascalCase when using this registration method.

Code

import { Minze, MinzeElement } from 'minze'

class FirstElement extends MinzeElement {}
class SecondElement extends MinzeElement {}

Minze.defineAll([FirstElement, SecondElement])

Type

(method) Minze.defineAll(elementsOrModules: (typeof MinzeElement)[] | Record<string, unknown | (() => Promise<unknown>)>, filter?: string[] | null, keys?: false | ((key: string) => string) | null): void

---

Examples

Array

import { Minze } from 'minze'
import { FirstElement, SecondElement } from './elements.js'

Minze.defineAll([FirstElement, SecondElement])

Module

import { Minze } from 'minze'
import * as elements from './elements.js'

Minze.defineAll(elements)

Module-Map

import { Minze } from 'minze'
const modules = {
  'first-element': async () => (await import('./element.js')).FirstElement,
  'second-element': async () => (await import('./element.js')).SecondElement,
  'all': () => import('./element.js')
}

Minze.defineAll(modules)

Module-Map (Vite)

import { Minze } from 'minze'
const modules = import.meta.glob('./lib/**/*.@(ts|js)')

Minze.defineAll(modules)

./elements.js

import { MinzeElement } from 'minze'

export class FirstElement extends MinzeElement {}
export class SecondElement extends MinzeElement {}

<first-element></first-element>
<second-element></second-element>

Example (Module-Map)

Files

src/
├─ lib/
|  ├─ nested/
|  |  └─ second-element.js
|  └─ first-element.js
└─ main.js

main.js

import { Minze } from 'minze'

const modules = {
  'lib/first-element.js': () => import('./first-element.js'),
  'lib/nested/second-element.js': () => import('./nested/second-element.js')
}

const filter = ['first-element', 'second-element'] // the elements to define (optional)
const keys = (key) => key.replace(/^lib\/(nested)?|\.js/g, '') // will be applied to every key (optional)

Minze.defineAll(modules, filter, keys)

./first-element.js

import { MinzeElement } from 'minze'

export class FirstElement extends MinzeElement {}

./nested/second-element.js

import { MinzeElement } from 'minze'

export class SecondElement extends MinzeElement {}

EVENTS

dispatch ^1.3.2

Dispatches a custom event from the window object.

Code

import { Minze } from 'minze'

Minze.dispatch('minze:event', { msg: 'Hello Minze!' })

Type

(method) Minze.dispatch(eventName: string, detail?: unknown): void

listen ^1.0.0

Adds an event listener to the window object.

Code

import { Minze } from 'minze'

const callback = (event) => console.log(event.detail) // {msg: 'Hello Minze!'}

Minze.listen('minze:event', callback)

Type

(method) Minze.listen(eventName: string, callback: (event: any) => void): void

stopListen ^1.0.0

Remove an event listener from the window object.

Code

import { Minze } from 'minze'

const callback = (event) => console.log(event.detail) // {msg: 'Hello Minze!'}

Minze.stopListen('minze:event', callback)

Type

(method) Minze.stopListen(eventName: string, callback: (event: any) => void): void

DEPRECATED

cast deprecated

Use dispatch instead.