windowed-observable
Messaging lib using a pub/sub observable scoped by namespaces.
windowed-observable is a library for messaging using Observables, making it easier to communicate multiple apps or parts of an app using the window. It exposes an Observable that behaves like a scoped Pub/Sub topic using namespaces.
📦 Installation
npm install windowed-observable
yarn add windowed-observable
⌨️ Introduction
An observable look like a pub/sub topic, there are scoped events and observers(listeners) on each namespace, and those namespaces can be cleared, and changed.
🔨 Usages
Common usage
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
observable.subscribe((ninja) => {
console.log(ninja)
})
observable.publish('Uchiha Shisui');
Retrieving latest event
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
observable.publish('Senju Tobirama');
observable.subscribe((ninja) => console.log(ninja), { latest: true });
Unsubscribing and clearing
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
const observer = (ninja) => console.log(ninja);
observable.subscribe(observer)
observable.publish('Uzumaki Naruto');
observable.unsubscribe(observer);
observable.clear();
React
Simple react usage
Observer component
import React, { Component } from 'react';
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
class NinjasList extends Component {
state: {
ninjas: []
}
componentDidMount() {
this.observer = (ninja) => {
const ninjas = this.state.ninjas.concat(ninja);
this.setState({ ninjas });
}
observable.subscribe(this.observer);
}
componentWillUnmount() {
observable.unsubscribe(this.observer);
}
render() {
...
}
}
Publisher component
import React from 'react';
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
const handleClick = ninja => () => observable.publish(ninja);
const AddNinjaButton = ({ ninja }) => (
<button onClick={handleClick(ninja)}> Add ninja </button>
);