effector-vue - npm Package Versions

effector 20.1.1

• Add support for IE11 to effector/compat
• Fix flow typings for sample
• Allow effector/babel-plugin to work in browser

effector 20.1.0

• Add effector/compat module to use with Smart TV (Chrome 47) apps without babel (fix #152). Starting with this release, the library code is tested by browserstack.com for compatibility with our targets, including smart tv
• Improve typescript typings for sample (thanks @abliarsar) (PR #156)
• Fix webpack issue, which generated incorrect code with some ancient targets (IE10)

effector 20.0.0

• Add merge for merging events

import {createEvent, merge} from 'effector'

const foo = createEvent()
const bar = createEvent()
const baz = merge([foo, bar])

baz.watch(v => console.log('merged event triggered: ', v))

foo(1)
// => merged event triggered: 1
bar(2)
// => merged event triggered: 2

Try it

• Add split for pattern-matching over events

import {createEvent, split} from 'effector'

const message = createEvent()

const messageByAuthor = split(message, {
  bob: ({user}) => user === 'bob',
  alice: ({user}) => user === 'alice',
})
messageByAuthor.bob.watch(({text}) => {
  console.log('[bob]: ', text)
})
messageByAuthor.alice.watch(({text}) => {
  console.log('[alice]: ', text)
})

message({user: 'bob', text: 'Hello'})
// => [bob]: Hello
message({user: 'alice', text: 'Hi bob'})
// => [alice]: Hi bob

/* default case, triggered if no one condition met */
const {__: guest} = messageByAuthor
guest.watch(({text}) => {
  console.log('[guest]: ', text)
})
message({user: 'unregistered', text: 'hi'})
// => [guest]: hi

Try it

• Allow clearNode to automatically dispose all related intermediate steps

import {createEvent, clearNode} from 'effector'

const source = createEvent()
const target = source.map(x => {
  console.log('intermediate step')

  return x
})

target.watch(x => console.log('target watcher'))
source()
// => intermediate step
// => target watcher
clearNode(target)
source() // ~ no reaction ~

Try it

• Fix promise warning for effects

• Add effect.finally

import {createEffect} from 'effector'

const fetchApiFx = createEffect({
  handler: n =>
    new Promise(resolve => {
      setTimeout(resolve, n, `${n} ms`)
    }),
})

fetchApiFx.finally.watch(response => {
  console.log(response)
})

await fetchApiFx(10)
// => {status: 'done', result: '10 ms', params: 10}

// or

// => {status: 'fail', error: Error, params: 10}

Try it

• Add types for createEvent with config instead of string
• Add types for createEffect with config instead of string
• Add event.filterMap as new alias for event.filter(fn)
• Remove extract, withProps, is.* re-exports

effector-vue 19.0.1

• Fix typescript typings #116

effector, effector-react, effector-vue 19.0.0

To indicate the stability of the project, we adopting semantic versioning and happy to announce version 19.0.0 for all packages. And to make the transition easier, that release contains no breaking changes; simple replacement of "^0.18.*" to "^19.0.0" is safe for sure ☄️

0.18.5-0.18.6

• Optimize combined stores: no intermediate steps no more

import {createStore, createEvent, createStoreObject, combine} from 'effector'

const updateField = createEvent('update $field value')

const $field = createStore('').on(updateField, (state, upd) => upd.trim())

const $isEmpty = $field.map(value => value.length === 0)
const $isTooLong = $field.map(value => value.length > 12)
const $isValid = combine(
  $isEmpty,
  $isTooLong,
  (isEmpty, isTooLong) => !isEmpty && !isTooLong,
)

createStoreObject({
  field: $field,
  isEmpty: $isEmpty,
  isTooLong: $isTooLong,
  isValid: $isValid,
}).watch(data => {
  console.log(data)
})

// => {field: '', isEmpty: true, isTooLong: false, isValid: false}

updateField('bobby')

// => {field: 'bobby', isEmpty: false, isTooLong: false, isValid: true}

• Use the new kernel. Provide improved eventual consistency: any side effects will be triggered only after performing all pure computations

• Add is namespace for all type validators

import {createStore, createEvent, is} from 'effector'

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

is.store($store) // => true
is.event($store) // => false
is.unit($store) // => true

is.store(event) // => false
is.event(event) // => true
is.unit(event) // => true

is.store(null) // => false
is.event(null) // => false
is.unit(null) // => false

• Add clearNode to break references and subscriptions between events, stores, etc

• Add support for custom datatypes by making step constructors, createNode and launch functions public

import {createNode, launch, step, createStore} from 'effector'

const $target = createStore(0)
$target.watch(n => console.log('current n = ', n))
// => current n = 0

const customNode = createNode({
  scope: {max: 100, lastValue: -1, add: 10},
  child: [$target], // you can forward later as well
  node: [
    step.compute({
      fn: (arg, {add}) => arg + add,
    }),
    step.filter({
      fn: (arg, {max, lastValue}) => arg < max && arg !== lastValue,
    }),
    step.compute({
      fn(arg, scope) {
        scope.lastValue = arg
        return arg
      },
    }),
  ],
})

launch(customNode, 3)
// => current n = 13
launch(customNode, 95)
// no reaction, as 95 + 10 > 100
launch(customNode, 5)
// => current n = 15
launch(customNode, 5)
// no reaction, as we filtered it out with step.filter

• Fix fromObservable, ensure it works with redux as a typical library with Symbol.observable support

import {fromObservable} from 'effector'
import * as redux from 'redux'

const INCREMENT_STATE = 'INCREMENT_STATE'
const reduxStore = redux.createStore((state = 1, action) => {
  switch (action.type) {
    case INCREMENT_STATE:
      return state + 1
    default:
      return state
  }
})

const updateEvent = fromObservable(reduxStore)
updateEvent.watch(state => {
  console.log('redux state = ', state)
})

reduxStore.dispatch({type: INCREMENT_STATE})
// => redux state = 1

• Fix version, now it always equals version in package.json

import {version} from 'effector'

console.log(version)
// => 0.18.6

• Add support forwarding to effects

import {createEffect, createEvent, forward} from 'effector'

const trigger = createEvent()

const fx = createEffect('side-effect', {
  async handler(args) {
    await new Promise(rs => setTimeout(rs, 500))
    console.log('args: ', args)
  },
})

forward({
  from: trigger,
  to: fx,
})

trigger('payload')
// ~ after 500 ms
// => args: payload

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

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

0.18.2

• Fix webpack usage issue. To prevent this in a future, webpack integration test was added.

• Improve typescript typings for createApi. This code example became type checked

import {createStore, createApi} from 'effector'

const $text = createStore('')

const {addMessage, cut} = createApi($text, {
  addMessage: (text, message) => text + `\n` + message
  cut: (text, {fromIndex, size}) => text.slice(fromIndex, fromIndex + size),
})

• Add umd bundle to npm. Therefore, you can use cdn to include library without bundlers

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/effector@0.18.2/effector.umd.js"></script>
  </head>
  <body>
    <script>
      const header = document.createElement('h1')
      document.body.appendChild(header)
      const $text = effector.createStore('hello')
      $text.watch(str => (header.innerHTML = str))
    </script>
  </body>
</html>