# windowed-observable

> windowed-observable

Latest version **1.0.0** (published 2021-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install windowed-observable
pnpm add windowed-observable
yarn add windowed-observable
bun add windowed-observable
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-10-11 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 34.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 162 |
| Author | Luis Takahashi |
| Maintainers | luistak |

## Links

- npm: https://www.npmjs.com/package/windowed-observable
- Repository: https://github.com/luistak/windowed-observable
- Homepage: https://github.com/luistak/windowed-observable/tree/master/packages/core#readme
- Issues: https://github.com/luistak/windowed-observable/issues
- npm.io page: https://npm.io/package/windowed-observable

## Recent versions

- 1.0.0 (latest) — 2021-10-11
- 0.4.3 — 2021-10-03
- 0.4.2 — 2020-08-08
- 0.4.1 — 2020-08-08
- 0.4.0 — 2020-07-30
- 0.3.4 — 2020-02-02
- 0.3.3 — 2020-02-02
- 0.3.1 — 2020-02-02
- 0.3.0 — 2019-12-26
- 0.2.3 — 2019-12-11
- 0.2.2 — 2019-12-11
- 0.1.2 — 2019-11-22
- 0.1.1 — 2019-11-14
- 0.1.0 — 2019-11-14

## README

<div align="center">
  <h1>windowed-observable</h1>

  <img
    width="200"
    height="auto"
    alt="Windowed observable"
    src="https://res.cloudinary.com/daiqkausy/image/upload/v1596144724/windowed-observable.png"
  />

  <p>Messaging lib using a pub/sub observable scoped by namespaces.</p>
</div>
<hr />

![Npm version](https://img.shields.io/npm/v/windowed-observable)
![Build](https://img.shields.io/github/workflow/status/luistak/windowed-observable/CI/master)
![Size](https://img.shields.io/bundlephobia/minzip/windowed-observable)
![License](https://img.shields.io/github/license/luistak/windowed-observable)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style)](http://makeapullrequest.com)
![Downloads](https://img.shields.io/npm/dt/windowed-observable)

**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
```sh
npm install windowed-observable

# or

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
```ts
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
observable.subscribe((ninja) => {
  console.log(ninja)
})
observable.publish('Uchiha Shisui');
// > Uchiha Shisui
```

### Retrieving latest event
```ts
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

observable.publish('Senju Tobirama');

observable.subscribe((ninja) => console.log(ninja), { latest: true });
// > Senju Tobirama
```

### Unsubscribing and clearing
```ts
import { Observable } from 'windowed-observable';

const observable = new Observable('konoha');

const observer = (ninja) => console.log(ninja);

observable.subscribe(observer)
observable.publish('Uzumaki Naruto');
// > Uzumaki Naruto

// Unsubscribing
observable.unsubscribe(observer);

// Clearing
observable.clear();
```

### React

Simple react usage

#### Observer component
```tsx
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() {
    ...
    // ninjas listing
  }
}
```

#### Publisher component

```tsx
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>
);
```

---
_Source: https://npm.io/package/windowed-observable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._