Numeric Production Mechanism
    Wondering what’s next for npm?Check out our public roadmap! »

    lit-element-eda

    0.1.1 • Public • Published

    LitElement EDA

    Event-driven architecture (EDA), is a software architecture pattern promoting the production, detection, consumption of, and reaction to events.

    Background

    An event can be defined as "a significant change in state". For example, when a consumer purchases a car, the car's state changes from "for sale" to "sold". A car dealer's system architecture may treat this state change as an event whose occurrence can be made known to other applications within the architecture.

    This architectural pattern may be applied by the design and implementation of applications and systems that transmit events among loosely coupled software components and services. An event-driven system typically consists of event emitters (or agents), event consumers (or sinks), and event channels. Emitters have the responsibility to detect, gather, and transfer events. An Event Emitter does not know the consumers of the event, it does not even know if a consumer exists, and in case it exists, it does not know how the event is used or further processed.

    Install

    npm install lit-element-eda --save

    Usage

    import { LitElement, html } from 'lit-element'
    import { events } from 'lit-element-eda'
     
    class DemoApp extends LitElement {
        static get properties() {
            return {
                state: { type: Object }
            }
        }
     
        constructor() {
            super()
            this.state = {}
            this.state.number = 0
            events.on('sub', this.subHandler.bind(this))
            events.on('add', this.addHandler.bind(this))
        }
     
        render() {
            return html`
                <h2>${this.state.number}</h2>
                <button @click='${this.sub}'>-</button>
                <button @click='${this.add}'>+</button>
            `
        }
     
        sub(){ events.dispatch('sub') }
        add(){ events.dispatch('add') }
     
        subHandler(event) {
            this.state = { ...this.state, number: --this.state.number }
        }
     
        addHandler(event) {
            this.state = { ...this.state, number: ++this.state.number }
        }
    }
     
    customElements.define('demo-app', DemoApp)

    Install

    npm i lit-element-eda

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    ISC

    Unpacked Size

    3.96 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar