# rkdrnf-watcher

> watch objects using proxy

Latest version **1.0.6** (published 2019-07-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install rkdrnf-watcher
pnpm add rkdrnf-watcher
yarn add rkdrnf-watcher
bun add rkdrnf-watcher
```

## 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.0.6 |
| Published | 2019-07-18 |
| First published | 2019-07-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | rkdrnf |
| Maintainers | rkdrnf |

## Links

- npm: https://www.npmjs.com/package/rkdrnf-watcher
- Repository: https://github.com/rkdrnf/rkdrnf-watcher
- Homepage: https://github.com/rkdrnf/rkdrnf-watcher#readme
- Issues: https://github.com/rkdrnf/rkdrnf-watcher/issues
- npm.io page: https://npm.io/package/rkdrnf-watcher

## Recent versions

- 1.0.6 (latest) — 2019-07-18
- 1.0.5 — 2019-07-18
- 1.0.4 — 2019-07-18
- 1.0.3 — 2019-07-18
- 1.0.2 — 2019-07-18
- 1.0.1 — 2019-07-18
- 1.0.0 — 2019-07-18

## README

# rkdrnf-watcher
This library provides base class for watching properties inside.


# Usage
`class Component` offers `watch()` and `step()` method to watch it's own property and represent single step of tracking.
By calling step() repetitively according to any refresh cycle you intended, you can mimick variable tracking feature in those UI Framework such as React or Angular

# API
### ```watch(propName, callback)``` 
### ```step()```

# Example
```
import { Component } from "rkdrnf-watcher";

class MyComponent extends Component {
    ...
    constructor() {
        super();
        this.clickCount = 0;
        this.watch("clickCount", (prop, changes) => {
            console.log(`${prop} old: ${changes.old}, new: ${changes.val}`);
        });
    }
    
    onClickUI() {
        this.clickCount++;
    }

    onEachFrame() {
        this.step();
    }
}
```

# Test
`$ npm test`

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