@okiba/evented-component

Okiba / EventedComponent

A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.

__

// FetchButton.js

import EventedComponent from '@okiba/evented-component'
import {on, off} from '@okiba/dom'

class FetchButton extends EventedComponent {
  constructor(args) {
    super(args)

    this.onClick = this.onClick.bind(this)
    on(this.el, 'click', this.onClick)
  }

  onClick() {
    fetch('/api')
      .then(data => this.emit('update', data))
  }

  onDestroy() {
    off(this.el, 'click', this.onClick)
  }
}

// UIPiece.js

import Component from '@okiba/component'

const components = {
  fetchButton: {selector: '.fetch-button', type: FetchButton}
}

class UIPiece extends Component {
  constructor({el, options}) {
    super({el, ui, components, options})

    this.components.fetchButton.on(
      'update', this.update
    )
  }

  onDestroy() {
    this.components.fetchButton.off(
      'update', this.update
    )
  }
}

Installation

npm i --save @okiba/evented-component

Or import it directly in the browser

<script type="module" src="https://unpkg.com/@okiba/evented-component/index.js"></script>

Usage

import EventedComponent from '@okiba/evented-component'

Untranspiled code 🛑

Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

on()

See: EventEmitter::on

off()

See: EventEmitter::off

emit()

See: EventEmitter::emit

destroy()

See: Component