forest

forest

UI engine for web

Usage

import {createStore, createEvent, sample} from 'effector'
import {using, spec, h} from 'forest'

using(document.body, () => {
  const {change, submit, state} = formModel()

  h('section', () => {
    spec({style: {width: '15em'}})

    h('form', () => {
      spec({
        handler: {
          config: {prevent: true},
          on: {submit},
        },
        style: {
          display: 'flex',
          flexDirection: 'column',
        },
      })

      h('input', {
        attr: {placeholder: 'Username'},
        handler: {input: change('username')},
      })

      h('input', {
        attr: {type: 'password', placeholder: 'Password'},
        handler: {input: change('password')},
      })

      h('button', {
        text: 'Submit',
        attr: {
          disabled: state.map(values => !(values.username && values.password)),
        },
      })
    })

    h('section', () => {
      spec({style: {marginTop: '1em'}})
      h('div', {text: 'Reactive form debug:'})
      h('pre', {text: state.map(stringify)})
    })
  })
})

function formModel() {
  const state = createStore({})
  const changed = createEvent()
  const submit = createEvent()

  state.on(changed, (data, {name, value}) => ({...data, [name]: value}))

  const change = name => changed.prepend(e => ({name, value: e.target.value}))

  sample({
    source: state,
    clock: submit,
    fn: stringify,
  }).watch(alert)

  return {change, submit, state}
}

function stringify(values) {
  return JSON.stringify(values, null, 2)
}

Try it

Changelog

0.18.3-0.18.4

• Add version variable to public exports

import {version} from 'effector'

console.log(version)

• Add effect handler to domain 4c6ae8

• Add Unit<T> as common interface implemented by Event, Effect and Store

• Add isStore, isEvent, isEffect and isUnit validators

import {createStore, createEvent, isStore, isEvent, isUnit} from 'effector'

const event = createEvent('some event')
const $store = createStore('value')

isStore($store) // => true
isEvent($store) // => false
isUnit($store) // => true

isStore(event) // => false
isEvent(event) // => true
isUnit(event) // => true

isStore(null) // => false
isEvent(null) // => false
isUnit(null) // => false

• Add extended createStore with config

import {createStore} from 'effector'

const $store = createStore('value', {
  name: 'value store',
})

• Publish babel-plugins

• Improve naming for chrome performance timeline

• Fix typescript typings #45

• Fix event.prepend bug #35