Nocturnal Programmer's Machine

    @okiba/evented-component

    2.0.10 • Public • Published

    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

    Install

    npm i @okiba/evented-component

    DownloadsWeekly Downloads

    3

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    7.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • fiad
    • ghzmdr
    • lavolpecheprogramma