@jalik/observer

@jalik/observer

Make anything observable.

Introduction

The Observer design pattern is a well known pattern to create reactive applications.
You can attach observers to a form text field, then when the text field value changes, all observers are notified of that change and thus can do something in response.

Features

• Add event listeners
• Remove event listeners
• Emit events with arguments passed to listeners
• Includes TypeScript declarations

Sandbox

Play with the lib here: https://codesandbox.io/s/jalik-observer-demo-de16gw?file=/src/index.js

Adding an event listener

import { Observer } from '@jalik/observer'

class Person {
  constructor (name) {
    this.name = name
    // Create the observer with current context
    this.observer = new Observer(this)
  }

  on (event, observer) {
    // Attach observer
    this.observer.on(event, observer)
  }

  say (words) {
    // Notify observers
    this.observer.emit('say', words, new Date())
  }
}

const karl = new Person('karl')

karl.on('say', function (words, date) {
  console.log(`${this.name} said: "${words}"`)
})
// this will show: karl said: "hello"
karl.say('hello')

Removing an event listener

import { Observer } from '@jalik/observer'

const listener = function () {
  console.log('double click detected')
  // This avoid the current function to be called
  // on the next "doubleClick" event notification.
  observer.off('doubleClick', listener)
}

const observer = new Observer()
observer.on('doubleClick', listener)

// This will call the doubleClickListener once.
observer.emit('doubleClick')

// This will not call the doubleClickListener
// since it has been detached in the previous call.
observer.emit('doubleClick')

Changelog

History of releases is in the changelog.

License

The code is released under the MIT License.

Changelog

v2.2.0 (2024-02-20)

• Added class Observable to add on(), off() and emit() to any class