@composi/observer:

• Install
• Observer
• Watch
• Send
• Unwatch

Watch

Observers are meant to watch for events. To do so, you use the observer's watch method. This takes two arguments: an event, and a callback to execute when the event occurs. The callback gets one argument passed to it automatically: any data that was passed with the event. A watcher does not have to deal with event data. It can completely ignore the data and do whatever it needs to.

Setting up a Watcher

import { Observer } from '@composi/observer

const observer = new Observer()
observer.watch('special-event', data => {
  console.log(`Just received this data: ${data}`)
})

Ignoring the Data Passed

Same watcher, but ignoring any data passed:

import { Observer } from '@composi/observer

const observer = new Observer()
observer.watch('special-event', data => {
  // Ignore the data:
  console.log('The special event just fired!')
})

Watcher without Data

As mentioned, a watcher does not even have to expect any data. You can opt to instead just watch for the event.

import { Observer } from '@composi/observer

const observer = new Observer()
// No data for this watcher:
observer.watch('special-event', () => {
  console.log('The special event just fired!')
})

Multiple Watchers for Same Event

It is possible to create multiple watchers for the same event. You might need to do this when you have several components that need to react to the same event. When you create multiple watchers on the same event, whenever that event is sent, all the watchers will execute.

import { Observer } from '@composi/observer

const observer = new Observer()
// First watcher for 'special-event':
observer.watch('special-event', data => {
  console.log(`The first watcher received this data: ${data}`)
})

// Second watcher for 'special-event':
observer.watch('special-event', () => {
console.log('The second watcher just fired!')
})

Sending 'special-event' will cause both of these watchers to execute.

To learn how to send an event to a watcher, read its documentation.

Using Guards

Because you can't know if an event will be send with data or not, it's always best to check that the callback did receive some data before trying to use it.

import { Observer } from '@composi/observer

const observer = new Observer()
observer.watch('special-event', data => {
  // Check that data was passed with the event:
  if (data) {
    console.log(`Just received this data: ${data}`)
  // No event was sended, so do something else:
  } else {
    console.log(`The event happened but no data was received.`)
  }
})

In all our examples we used a simple string as the data for our events. In reality the data could be any type. As such it's best to also check the type of the data before attempting to use it.

import { Observer } from '@composi/observer

const observer = new Observer()
observer.watch('special-event', data => {
  // Check that data was passed with the event:
  if (data) {
    // Dealing with a string:
    if (typeof data === 'string') {
      console.log(`Just received this data: ${data}`)
    // Dealing with an array of strings:
    } else if(Array.isArray(data)) {
      console.log('Received this array:')
      data.map((item, idx) => console.log(`item ${idx}: ${item}))
    }
  // No event was sent, so do something else:
  } else {
    console.log(`The event happened but no data was received.`)
  }
})