# es7-object-observe

> Object.observe polyfill without dirty checking

Latest version **2.0.6** (published 2015-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install es7-object-observe
pnpm add es7-object-observe
yarn add es7-object-observe
bun add es7-object-observe
```

## 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 | 2.0.6 |
| Published | 2015-12-21 |
| First published | 2015-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yohei K |
| Maintainers | yohei-k-outt |
| Keywords | polyfill, shim, Object.observe, Array.observe, object, array, observe, es7, es7-object-observe |

## Links

- npm: https://www.npmjs.com/package/es7-object-observe
- npm.io page: https://npm.io/package/es7-object-observe

## Recent versions

- 2.0.6 (latest) — 2015-12-21
- 2.0.5 — 2015-12-20
- 2.0.4 — 2015-12-16
- 2.0.3 — 2015-12-16
- 2.0.2 — 2015-12-15
- 2.0.1 — 2015-12-15
- 2.0.0 — 2015-10-24

## README

# es7-object-observe

## Introduction
es7-object-observe is [Object.observe](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe) polyfill without dirty-checking.

```js
const oo = require('es7-object-observe');

const obj = new oo.Object({ foo: 0, bar: 1 });

oo.Object.observe(obj, (changes) => { console.log(changes); });

obj.foo = 'hello';
obj.bar = 'world';
// [
//   {name: 'foo', object: <obj>, type: 'update', oldValue: 0},
//   {name: 'bar', object: <obj>, type: 'update', oldValue: 1},
// ]
```

```js
const arr = new oo.Array(['a', 'b', 'c']);

oo.Array.observe(arr, (changes) => { console.log(changes); });

arr[1] = 'B';
arr.splice(1, 2, 'beta', 'gamma', 'delta');
// [
//   {type: 'update', object: <arr>, name: '1', oldValue: 'b'},
//   {type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}
// ]
```

## Install

```
npm install es7-object-observe
```

## Caveats

es7-object-observe(oo) is based on [spec proposal](http://arv.github.io/ecmascript-object-observe)
and almost the same as chrome implementation, but there are some differences.

### 1. Wrap object in oo.Object or oo.Array.

```js
const obj = oo.Object({ id: 1 });
```

### 2. Use oo.Object.method to oo-object.

```js
function observer(changes) {
  console.log(changes);
}

oo.Object.observe(obj, observer, ['update', 'reconfigure', 'preventExtensions']);

oo.Object.defineProperty(obj, 'a', { enumerable: false });
oo.Object.preventExtensions(obj);
// [
//   { object: obj, type: 'reconfigure', name: 'a' },
//   { object: obj, type: 'preventExtensions' }
// ]

oo.Object.unobserve(obj, observer);
```

### 3. Use special methods 'set' and 'delete' to notify 'add' and 'delete'.

```js
// Bad example; they can't deliver changes.
obj.a = 'b';
delete obj.a;
```

```js
obj.set('a', 'b');
obj.delete('a');
// [
//   { object: obj, type: 'add', name: 'a' },
//   { object: obj, type: 'delete', name: 'a', oldValue: 'b' }
// ]
```

I prefer to use oo-object with oo.Object.seal,
because it can eliminates the need for uncool 'set' and 'delete'.

```js
oo.Object.seal(obj);

// Another example
class Square extends oo.Object {
  constructor(x, y, width, height) {
    super({x, y, width, height});
    oo.Object.seal(this);
  }

  scale(ratio) {
    Square.getNotifier(this).performChange('scale', () => {
      this.width *= ratio;
      this.height *= ratio;
      return {
        ratio: ratio
      };
    });
  }

  static observe(square, callback) {
    return oo.Object.observe(square, callback, ['update', 'scale']);
  }
}
```

### 4. oo.Array is not 'array' but 'array-like object'.

```js
const arr = oo.Array([1, 2, 3, 4]);

// arr is not array.
(arr instanceof Array) !== true

// But you can use all methods of Array.
arr.forEach((v) => {
  ...
});

// You can use for-loop on a browser supporting iterator.
for (let i of arr) {
  // not working on IE and Safari...
}

// arr.method which returns 'array' returns 'array', not 'oo-array'.
arr.copyWithin(...);  // returns 'normal' array
```

### 5. To prevent memory leaks, call oo.Object.unobserve before oo-object gets unused.

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