1.1.0 • Published 2 years ago

@stein197/value-observer v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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:

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):

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:

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