watch-state v2.0.0-migration

watch-state

The simplest watcher of your state.

Installation

npm

npm i watch-state

yarn

yarn add watch-state

Using

Simple example:

You can create an instance of State and watch it's value.

import {Watch, State} from 'watch-state'

const count = new State(0)

new Watch(() => console.log(count.value))
// console.log(0)

count.value++
// console.log(1)

count.value++
// console.log(2)

Update argument:

You can check if the watching ran first by update argument.

const count = new State(0)

new Watch(update => {
  console.log(update, count.value)
})
// console.log(false, 0)

count.value++
// console.log(true, 1)

count.value++
// console.log(true, 2)

Force update of State

You can run watchers of a state with update method.

const count = new State(0)

new Watch(() => {
  console.log(count.value)
})
// console.log(0)

count.update()
// console.log(0)

Force update of Watch

You can run a watcher even when it's states are not updated.

const count = new State(0)

const watcher = new Watch(() => {
  console.log(count.value)
})
// console.log(0)

watcher.update()
// console.log(0)

Destructor

You can stop watching by destructor method of Watch.

const count = new State(0)

const watcher = new Watch(() => console.log(count.value))
// console.log(0)

count.value++
// console.log(1)

watcher.destructor()

count.value++
// nothing happens

Watch.onDestructor()

You can react on destruction of Watch by onDestructor method.

const watcher = new Watch(() => {})

watcher.onDestructor(() => console.log('destructor'))

watcher.destructor()
// console.log('destructor')

onDestructor returns this so you can use fluent interface.

const watcher = new Watch(() => {})
  .onDestructor(() => console.log('destructor'))

watcher.destructor()
// console.log('destructor')

Or you can use onDestructor function inside a watcher.

import {Watch, onDestructor} from 'watch-state'

const watcher = new Watch(update => {
  // do something
  if (!update) {
    onDestructor(() => console.log('destructor'))
  }
})

watcher.destructor()
// console.log('destructor')

Deep watch:

You can use Watch inside a watcher. Each watcher reacts on that states which used only inside it.

const watching = new State(true)
const state = new State(0)
let test = 0

new Watch(() => {
  test++
  if (watching.value) {
    new Watch(() => console.log(state.value))
  }
})
// console.log(0), test = 1

state.value++
// console.log(1), test = 1

watching.value = false
// test = 2

state.value++
// nothing happens

Cache:

You may cache computed values. The watcher will not be triggered while new result is the same.

const name = new State('Mike')
const surname = new State('Deight')

const fullName = new Cache(() => (
  `${name.value} ${surname.value[0]}`
))

new Watch(() => console.log(fullName.value))
// console.log('Mike D')

surname.value = 'D8'
// nothing happens

surname.value = 'Mighty'
// console.log('Mike M')

The computing will be triggered only when a state inside the cache will be changed. So you can modify data only when it's needed.

const list = new State(['foo', 'bar', 'baz'])

const sortedList = new Cache(() => {
  console.log('computing')
  return [...list.value].sort()
})
// nothing happens

const value = sortedList.value
// console.log('computing')

console.log(sortedList.value)
// console.log(['bar', 'baz', 'foo'])

console.log(value === sortedList.value)
// console.log(true)

list.value = ['b', 'c', 'a']
// nothing happens

console.log(sortedList.value)
// console.log('computing')
// console.log(['a', 'b', 'c'])

Event:

Use createEvent when you change several states to run their watchers after the event finished.

const name = new State('Mike')
const surname = new State('Deight')

const setFullName = createEvent(fullName => {

  const [newName, newSurname] = fullName.split(' ')

  name.value = newName
  surname.value = newSurname

})

new Watch(() => {
  console.log(name.value, surname.value)
})
// console.log('Mike', 'Deight')

setFullName('Michael Mighty')
// console.log('Michael', 'Mighty')

Decorators:

You can use decorators with watch-sate.
Available: watch state cache event

import {watch, state, cache, event} from 'watch-state'

class Counter {
  // fields
  @state value = 1

  // accessors
  @cache get square () {
    return this.value ** 2
  }

  // methods
  @event tick () {
    this.value++
  }
  @watch run () {
    console.log(this.value, this.square)
  }
}


const counter = new Counter()

counter.run()
// console.log(1, 1)

counter.tick()
// console.log(2, 4)

getState and getCache

You can get State or Cache of a decorated field with getState and getCache.

import {state, getState, Watch} from 'watch-state'

class TodoList {
  @state todos = []
}

const todoList = new TodoList()

new Watch(() => console.log(todoList.todos))
// console.log([])

todoList.todos.push('Do something')
// nothing happens

getState(todoList, 'todos').update()
// console.log(['Do something'])

Typescript:

Generic of State

const key = new State<string | number>()

key.value = false
// error, you can use only streng or number

Generic of Cache

new Cache<string>(() => false)
// error, target of cache should return string

Performance

You can check the performance test with MobX. Clone the repo, install packages and run this command

npm run speed

Issues

If you find a bug or have a suggestion, please file an issue on GitHub