effector-vue - npm Package Versions

effector-vue 20.5.0

• Migrated from Vue.util.defineReactive to Vue.observable

• Effector stores will show in Vue devtools

• Cosmetic improvements for support plugin in the future.

• Now we can add some units to effector object (will be return Store<number>)

const fx = createEffect({...});

export default Vue.extend({
  effector: {
    isCompleted: fx.done
  },
  watch: {
    isCompleted(sid) {
      this.isPopupOpened = false;
    }
  },
  data: () => ({
    isPopupOpened: true,
  })
})

• Support v-model directive for scalar values

const $msg = createStore()

export default Vue.extend({
  effector: {
    $msg,
  },
})

<template>
  <input v-model="$msg" />
</template>

effector-react 20.7.3, effector-vue 20.4.2

• Fix regression in effector-react/compat and effector-vue/compat compatibility with IE11

effector-vue 20.4.1

• Improve typescript typings for usage via Vue.extend (PR #343)

effector-vue 20.4.0

• Add support for vue component watch option (PR #313) (thanks @Fl0pZz)

import {createStore} from 'effector'
import {createComponent} from 'effector-vue'

const counter = createStore(0)

const component = createComponent(
  {
    template: '<div>{{ counter }}</div>',
    watch: {
      counter() {
        /* side-effects here */
      },
    },
  },
  {counter},
)

effector-react 20.6.2, effector-vue 20.3.3

• Fix umd build of effector-react and effector-vue

Cdn with umd build of effector-react Cdn with umd build of effector-vue

effector 20.3.2

• Allow typescript to refine type with split method (PR)
• Improve type inference of effects with optional arguments in Typescript (PR)
• Ensure that effect handler is called only after effect update itself, thereby preventing side-effects from interrupting pure computations

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, createEvent, createEffect, sample} from 'effector'
import {useList} from 'effector-react'

const updateItem = createEvent()
const resetItems = createEvent()
const processClicked = createEvent()

const processItemsFx = createEffect({
  async handler(items) {
    for (let {id} of items) {
      //event call inside effect
      //should be applied to items$
      //only after processItemsFx itself
      updateItem({id, status: 'PROCESS'})
      await new Promise(r => setTimeout(r, 3000))
      updateItem({id, status: 'DONE'})
    }
  },
})

const $items = createStore([
  {id: 0, status: 'NEW'},
  {id: 1, status: 'NEW'},
])
  .on(updateItem, (items, {id, status}) =>
    items.map(item => (item.id === id ? {...item, status} : item)),
  )
  .on(processItemsFx, items => items.map(({id}) => ({id, status: 'WAIT'})))
  .reset(resetItems)

sample({
  source: $items,
  clock: processClicked,
  target: processItemsFx,
})

const App = () => (
  <section>
    <header>
      <h1>Jobs list</h1>
    </header>
    <button onClick={processClicked}>run tasks</button>
    <button onClick={resetItems}>reset</button>
    <ol>
      {useList($items, ({status}) => (
        <li>{status}</li>
      ))}
    </ol>
  </section>
)

ReactDOM.render(<App />, document.getElementById('root'))

Try it

effector 20.3.1

• Fix edge case when clearNode been called on store belonged to certain domain led to the removal of the entire domain

effector-vue 20.3.0

• Add createComponent HOC for TypeScript usage. This HOC provides type-safe properties in vue components.

// component.vue
import {value createStore, value createApi} from 'effector'
import {value createComponent} from 'effector-vue'

const $counter = createStore(0)
const {update} = createApi($counter, {
  update: (_, value: number) => value,
})

export default createComponent(
  {
    name: 'Counter',
    methods: {
      update,
      handleClick() {
        const value = this.$counter + 1 // this.$counter <- number ( typescript tips )
        this.update(value)
      },
    },
  },
  {$counter},
)

effector-vue 20.2.1

• Add typescript typings for object shape, introduced in effector-vue 20.2.0

const counter = createStore(0)

new Vue({
  effector: {
    counter, // would create `counter` in template
  },
})

effector-vue 20.2.0

• Add support for object shape

const counter = createStore(0)

new Vue({
  effector: {
    counter, // would create `counter` in template
  },
})