# @artezio/observable

> Typescript library helps you to observe models changes. Library is written with es7 decorators. The decorator listens for any changes in the observable object thanks to the proxy and generates an event.

Latest version **1.0.6** (published 2019-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @artezio/observable
pnpm add @artezio/observable
yarn add @artezio/observable
bun add @artezio/observable
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2019-12-24 |
| First published | 2019-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Maintainers | daniil_yakovenko, kluiko |

## Links

- npm: https://www.npmjs.com/package/@artezio/observable
- Repository: https://github.com/Artezio/SURVEYBUILDER/tree/master/packages/observable
- npm.io page: https://npm.io/package/@artezio/observable

## Dependencies (1)

- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.13

## Recent versions

- 1.0.6 (latest) — 2019-12-24
- 1.0.5 — 2019-12-23
- 1.0.3 — 2019-12-20
- 1.0.1 — 2019-12-18

## README

# **@artezio/observable**
Typescript library helps you to observe models changes. Library is written with es7 decorators. The decorator listens for any changes in the observable object thanks to the proxy and generates an event.

# Installation
Using npm:
>$ npm install @artezio/observable

Using yarn:
>$ yarn add @artezio/observable

 
# Example

Use observable decorator to make all instances observable. To understand that changes have been made we compare old value with new, so to catch changes in complex types like array you should mark array property with "observableProperty" decorator.

```typescript
import { observable, observableProperty, getObservable } from 'artezio/observable';

@observable
class Person {
    name: string;
    @observableProperty
    pets: string[];
    constructor(name: string, pets?: string[]) {
        this.name = name;
        this.pets = pets || [];
    }

    addPet(pet: string) {
        this.pets.push(pet);
    }
}

const person = new Person('Name');
const observableMethods = getObservable(person);
observableMethods && observableMethods.subscribe(person => {
    console.log('updated Person:', person);
})
person.addPet('Cat');/// will log "updated Person: Person {name: "Name", pets: Array(1)}"
```
 
# API

To make you object observable simply run this:
```typescript
import { toObservable } from 'artezio/observable';
var myObject = {...};
myObject = toObservable(myObject);
```
Now your object is observable and you can subscribe on its changes, to do it you should get method subscribe:

```typescript
import { getObservable } from 'artezio/observable';
getObservable(myObject).subscribe(obj => {
    console.log("My object has changed, now it:", obj);
})
```
> NOTICE! getObservable() returns object with methods OR undefined. If you are not sure that object is observable, check the result:

```typescript
const observableMethods = getObservable(someObject);
if(observableMethods) {
    observableMethods.subscribe(...)
}
```
> There is another way to check out if the object is observable, by using the isObservable function. It will be explained later


To fire event immediately do following:
```typescript
getObservable(myObject).emitChange();
```

You can also both mute() and unmute() your observable object:
```typescript
getObservable(myObject).mute();
myObject.name = 'newName';// will not generate an event;
getObservable(myObject).unmute();
myObject.name = 'oldName';// will log "My object has changed, now it: {name: oldName}"
```

To find out if the object is observable use isObservable():
```typescript
import { isObservable } from 'artezio/observable';
console.log(isObservable(myObject));// true;
```

To make all instances of particular Class mark it with observable decorator
```typescript
import { observable } from 'artezio/observable';

@observable
class MyClass {
    ...
}
```

To understand that changes have been made we compare old value with new, so to catch changes in complex types like array you should mark array property with "observableProperty" decorator.

```typescript
import { observable, observableProperty } from 'artezio/observable';

@observable
class MyClass {
    @observableProperty
    myProperty: object;
    ...
}
```

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