# @stein197/value-observer

> JavaScript wrapper around values that can be observed

Latest version **1.1.0** (published 2022-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @stein197/value-observer
pnpm add @stein197/value-observer
yarn add @stein197/value-observer
bun add @stein197/value-observer
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-01-11 |
| First published | 2021-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nail' Gafarov |
| Maintainers | stein197 |
| Keywords | value, observer |

## Links

- npm: https://www.npmjs.com/package/@stein197/value-observer
- Repository: https://github.com/stein197/js-value-observer
- Homepage: https://github.com/stein197/js-value-observer#readme
- Issues: https://github.com/stein197/js-value-observer/issues
- npm.io page: https://npm.io/package/@stein197/value-observer

## Dependencies (1)

- [@stein197/observer](https://npm.io/package/@stein197/observer.md) ^1.1.0

## Recent versions

- 1.1.0 (latest) — 2022-01-11
- 1.0.0 — 2021-10-30

## README

# JavaScript wrapper around values that can be observed
This package allows you to observe changes made on different values.

## Installation
```
npm i @stein197/value-observer
```

## Usage
The package comes with two classes: `Value` and `Container`. The first one is just a simple wrapper that could be used as follows:
```ts
import {Value} from "@stein197/value-observer";

const v = new Value(12);
v.addListener((oldValue, newValue) => console.log(oldValue, newValue)); // Adding an event listener. The callback takes two arguments - old value before chaging and the new one (current)
v.get(); // 12
v.set(12); // Does not fire an event because the new value is the same as the old one
v.set(24);
> 12 24
```

And the second class bundles a group of different values that can be tracked (which used `Value` class inside):
```ts
import {Container} from "@stein197/value-observer";

const c = new Container({
	age: 12,
	name: "John",
	status: "Online"
});
c.addEventListener("status", (oldValue, newValue) => console.log(oldValue, newValue)); // Tracking the change of "status" field. The usage is the same as the addListener above
c.get(); // {age: 12, name: "John", status: "Online"}
c.get("status"); // "Online"
c.set("age", 24); // Does not call the listener above
c.set("status", "Offline");
> "Online" "Offline"
```

The package also provides two interfaces similar to the classes discussed above: `ReadonlyValue` and `ReadonlyContainer` which could be used as a signature parameter in TypeScript code or implemented in other classes. "Readonly" means that the value cannot be set - only read and listen to changes:
```ts
import {ReadonlyValue, ReadonlyContainer} from "@stein197/value-observer";

function observe(value: ReadonlyValue<boolean>): void {
	value.get(); // Ok
	value.addListener(console.log); // Ok
	value.set(true); // Compile-time error
}

class AnotherContainer implements ReadonlyContainer<string> {/* ... */}

```

## NPM scripts
- `clean` cleans working directory from compiled files
- `compile` compiles source code
- `bundle` bundles compiled code into a single file
- `test` runs unit tests

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