dob

Dob ·

Dob is a tool for monitoring object changes. Using Proxy.

Examples

There are some demo on fiddle. Here's the simplest:

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

import { Action, observable } from 'dob'
import { Provider, Connect } from 'dob-react'
import { injectFactory, inject } from 'dependency-inject';

@observable
export class UserStore {
    name = 'bob'
}

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

    @Action setName () {
        this.store.name = 'lucy'
    }
}

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

const store = injectFactory({
    UserStore,
    UserAction
})

ReactDOM.render(
    <Provider {...store}> <App /> </Provider>
, document.getElementById('react-dom'))

Installation

Dob is available as the dob package on npm. It is also available on a CDN.

npm i dob

Project Examples

• React application example with dob

Apis

You can read quick start first, then read them:

• observable, observe
• unobserbe
• Action

Combination

Combining dob-react

Quick start

Here is a basic demo, and here is a demo with fractal.

Combining dependency-inject

Here is a basic demo, and here is a demo with fractal and dependency-inject.

Combining react-redux

Here is a basic demo

• createReduxStore
• task

You can clone this project, and run npm start to see redux todoMVC demo.

Debug in console

import { startDebug, stopDebug, useStrict, event } from 'dob'

// first, must useStrict
useStrict()

// start debug
startDebug()

// you can receive debug info from event
event.on("debug", debugInfo: IDebugInfo => {

})

// end debug
stopDebug()

The debug mode prints the trigger timing and assignment steps for all the @Action functions.

IDebugInfo:

interface IDebugInfo {
  /**
   * uniqueId, you can also receive it from `observe` or `reaction` callback first argument's field `debugId`
   */
  id?: number
  /**
   * action's name
   */
  name?: string
  changeList?: Array<{
    type: string
    callStack: PropertyKey[]
    oldValue?: any
    /**
     * new value
     */
    value?: any
    /**
     * used when type is delete
     */
    deleteKey?: PropertyKey
    customMessage?: any[]
  }>
  /**
   * child actions
   */
  childs?: IDebugInfo[]
}

demo

Inspired

• mobx
• nx-js