# dob

> Dob Dob is a tool for monitori

Latest version **2.5.10** (published 2018-12-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install dob
pnpm add dob
yarn add dob
bun add dob
```

## 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 | 2.5.10 |
| Published | 2018-12-17 |
| First published | 2017-07-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 139.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 729 |
| Author | ascoders |
| Maintainers | ascoders |

## Links

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

## Dependencies (3)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [dependency-inject](https://npm.io/package/dependency-inject.md) ^1.1.5

## Recent versions

- 2.5.10 (latest) — 2018-12-17
- 2.5.9 — 2018-06-04
- 2.5.8 — 2018-02-02
- 2.5.7 — 2017-12-03
- 2.5.6 — 2017-12-03
- 2.5.5 — 2017-12-03
- 2.5.4 — 2017-11-13
- 2.5.2 — 2017-11-06
- 2.5.1 — 2017-11-02
- 2.5.0 — 2017-11-02
- 2.4.15 — 2017-10-24
- 2.4.14 — 2017-10-22
- 2.4.13 — 2017-10-19
- 2.4.12 — 2017-10-19
- 2.4.11 — 2017-10-19
- … 30 more at https://npm.io/package/dob/versions

## README

<p align="center">
    <img src="https://avatars1.githubusercontent.com/u/32093464?s=400&u=d360e449a9d59cf7422100349711ab0e0389d06a&v=4" height=100/>
    <h2 align="center">Dob</h2>
    <p align="center">
        <i>
            Dob is a tool for monitoring object changes. Using <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a>. <a target="_blank" href="https://dobjs.github.io/dob-docs/">Online Docs</a>.
        </i>
    <p>
    <p align="center">
        <i>
            <a href="https://travis-ci.org/dobjs/dob">
              <img src="https://img.shields.io/travis/dobjs/dob/master.svg?style=flat" alt="CircleCI Status">
            </a>
            <a href="https://www.npmjs.com/package/dob">
              <img src="https://img.shields.io/npm/v/dob.svg?style=flat" alt="NPM Version">
            </a>
            <a href="https://codecov.io/github/dobjs/dob">
              <img src="https://img.shields.io/codecov/c/github/dobjs/dob/master.svg" alt="Code Coverage">
            </a>
        </i>
    </p>
</p>

## Examples

There are some [demo](https://jsfiddle.net/1q772uL0/20/) on fiddle. Here's the simplest:

```typescript
import { observable, observe } from "dob";

const obj = observable({ a: 1 });

observe(() => {
  console.log("obj.a has changed to", obj.a);
}); // <· obj.a has changed to 1

obj.a = 2; // <· obj.a has changed to 2
```

You can enjoy the benefits of proxy, for example `obj.a = { b: 5 }` is effective.

## Use in react component

```typescript
import { Action, observable, combineStores, inject } from "dob";
import { Connect } from "dob-react";

@observable
export class UserStore {
  name = "bob";
}

export class UserAction {
  @inject(UserStore) userStore: UserStore;

  @Action
  setName() {
    this.userStore.name = "lucy";
  }
}

@Connect(
  combineStores({
    UserStore,
    UserAction
  })
)
class App extends React.Component {
  render() {
    return (
      <span onClick={this.props.UserAction.setName}>
        {this.props.UserStore.name}
      </span>
    );
  }
}
```

> Use `inject` to pick stores in action, do not `new UserStore()`, it's terrible for later maintenance.

## Use in react project

```typescript
import { Action, observable, combineStores, inject } from "dob";
import { Provider, Connect } from "dob-react";

@observable
export class UserStore {
  name = "bob";
}

export class UserAction {
  @inject(UserStore) userStore: UserStore;

  @Action
  setName() {
    this.userStore.name = "lucy";
  }
}

@Connect
class App extends React.Component {
  render() {
    return (
      <span onClick={this.props.UserAction.setName}>
        {this.props.UserStore.name}
      </span>
    );
  }
}

ReactDOM.render(
  <Provider
    {...combineStores({
      UserStore,
      UserAction
    })}
  >
    <App />
  </Provider>,
  document.getElementById("react-dom")
);
```

## Project Examples

* [dob-react simple example](https://github.com/ascoders/dob-example)
* [dob-react hackernews](https://github.com/dobjs/dob-react-hackernews)
* [dob-react todoMVC](https://github.com/dobjs/dob-react-todomvc)
* [dob-react complex online web editor](https://github.com/ascoders/gaea-editor)
* [dob-redux todoMVC](https://github.com/dobjs/dob-redux-todomvc)

## Ecosystem

* [dob-react](https://github.com/dobjs/dob-react) - Connect dob to react! Here is a basic [demo](https://jsfiddle.net/yp90Lep9/21/), and here is a [demo](https://jsfiddle.net/g19ehhgu/11/) with fractal. [Quick start](./docs/dob-react.md).
* [dob-react-devtools](https://github.com/dobjs/dob-react-devtools) - Devtools for dob-react, with action and ui two way binding.
* [dob-redux](https://github.com/dobjs/dob-redux) - You can use both dob and Redux by using it! Enjoy the type and convenience of dob, and the ecology of Redux.

## Communication

Talk to us about dob using DingDing.

<img src="https://user-images.githubusercontent.com/7970947/40582019-39bdd16e-619b-11e8-8e82-43cf529a9fff.JPG" width=500/>

## Note

### Dependency injection does not support circular references

Do not allow circular dependencies between store and action, It's impossible to do like this:

```typescript
class A {
  @inject(B) b;
}
class B {
  @inject(A) a;
}
```

### Do not deconstruct to the last level on dynamic object

```typescript
const obj = observable({ a: 1 });

// good
obj.a = 5;
// bad
let { a } = obj;
a = 5;
```

## Inspired

* [mobx](https://github.com/mobxjs/mobx)
* [nx-js](https://github.com/nx-js/observer-util)

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