wu

Reactive, functional and declarative framework for webapps

View the Project on GitHub migueldelmazo/wu

Wu framework: Watcher documentation

Watcher works exactly like ensurer but does not save the result of the function in the data model. The goal is to use it to call third-party libraries such as React JS, LocalStorage, Stripe…

Data flow:

Reactive data model ➤ Watcher (non-pure function) ➤ Third-party libraries. Pattern

Watcher definition properties:

| Properties | Required | |:—————————————————-:|:——–:| | onChange | Required | | when | Optional | | args | Optional | | run | Required |

Example:

wu.create('watcher', 'consoleLog', { // name of the watcher item
  // path of the data model that we are watching
  onChange: 'user.id',
  // arguments that will receive the function 'run'
  args: 'user.id',
  // impure function that runs when 'onChange' has changed
  run: (userId) => {
    console.log(userId)
  }
})

// when 'user.id' changes show in console its value

Example with when property:

wu.create('watcher', 'setUserIdInLocalStorage', { // name of the watcher item
  // path of the data model that we are watching
  onChange: 'user.id',
  // 'run' function will only be executed when the value of 'user.id' is a non-empty string
  when: {
    'user.id': [_.negate(_.isEmpty), _.isString]
  },
  // arguments that will receive the function 'run'
  args: 'user.id',
  // impure function that runs when 'onChange' has changed and 'when' conditions match
  run: (userId) => {
    window.localStorage.setItem('userId', userId)
  }
})

// when 'user.id' is 'asdf1234' or similar localStorage > userId is updated