effector-vue - npm Package Versions

effector 22.0.0

• Add support for plain functions to attach: attach({source, async effect(source, params) {}})
• Allow to use fork without domains: const scope = fork()
  • Unit not found in scope error is no longer exists, any unit could be used in any scope
  • Increase performance of fork and serialize a hundredfold
• Add support for attached effects to fork handlers
• Add support for tuples to fork values and handlers: fork({values: [[$user, 'alice'], [$age, 22]]})
• Add serialize: 'ignore' option to createStore to declare store as ignored by serialize calls
• Make onlyChanges: true a default serialize option
• Fix babel plugin issue with parsing method calls (e.g. in react native)
• Validate combine arguments and throw an error in case of undefined and non-store units (issue #509)
• Throw an error when fork handlers or values got units without sid or with duplicate sid
• Deprecate createStoreObject alias for combine
• Deprecate effector/fork module
• Deprecate .thru
• Deprecate second argument in store.map
• Deprecate direct manipulations with derived units:
  • Deprecate .on in derived stores created by store.map and combine
  • Deprecate calls of derived events created by event.map, event.filterMap and event.filter
  • Deprecate calls of fx.done, fx.doneData and other events belongs to effects
• Remove ɔ (latin small letter open o) symbol to prevent incorrect unicode parsing
• Remove undocumented scope.find which is a wrong abstraction for a new fork
• Make Scope a unit:
  • Add support for Scope to is.unit
  • Add is.scope method
• Allow to pass a scope to scopeBind: scopeBind(unit, {scope}), which is also can be used outside from .watch
• Improve es modules support
• Make package size 10% smaller

effector-react 21.1.0

• Add support for object and array of events to useEvent. It's a shorthand for calling several useEvent at once (PR #425 by @sergeysova)

export function ExampleComponent() {
  const handlers = useEvent({emailChanged, passwordChanged})

  return (
    <div>
      <input onChange={handlers.emailChanged} />
      <input onChange={handlers.passwordChanged} />
    </div>
  )
}

export function ExampleComponent() {
  const [changeEmail, changePassword] = useEvent([
    emailChanged,
    passwordChanged,
  ])

  return (
    <div>
      <input onChange={changeEmail} />
      <input onChange={changePassword} />
    </div>
  )
}

effector 21.0.3, effector-react 21.0.4, effector-vue 21.0.3

• Improve native es modules support, add conditional exports declarations

effector 21.0.0

• Add object form of split for pattern-matching without additional forwards

split in documentation

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

const messageReceived = createEvent()
const showTextPopup = createEvent()
const playAudio = createEvent()
const reportUnknownMessageTypeFx = createEffect({
  handler({type}) {
    console.log('unknown message:', type)
  },
})

split({
  source: messageReceived,
  match: {
    text: msg => msg.type === 'text',
    audio: msg => msg.type === 'audio',
  },
  cases: {
    text: showTextPopup,
    audio: playAudio,
    __: reportUnknownMessageTypeFx,
  },
})

showTextPopup.watch(({value}) => {
  console.log('new message:', value)
})

messageReceived({
  type: 'text',
  value: 'Hello',
})
// => new message: Hello
messageReceived({
  type: 'image',
  imageUrl: '...',
})
// => unknown message: image

Try it

You can match directly to store api as well:

import {split, createStore, createEvent, createApi} from 'effector'

const messageReceived = createEvent()
const $textContent = createStore([])

split({
  source: messageReceived,
  match: {
    text: msg => msg.type === 'text',
    audio: msg => msg.type === 'audio',
  },
  cases: createApi($textContent, {
    text: (list, {value}) => [...list, value],
    audio: (list, {duration}) => [...list, `audio ${duration} ms`],
    __: list => [...list, 'unknown message'],
  }),
})

$textContent.watch(messages => {
  console.log(messages)
})

messageReceived({
  type: 'text',
  value: 'Hello',
})
// => ['Hello']
messageReceived({
  type: 'image',
  imageUrl: '...',
})
// => ['Hello', 'unknown message']
messageReceived({
  type: 'audio',
  duration: 500,
})
// => ['Hello', 'unknown message', 'audio 500 ms']

Try it

• Merge effector/fork into effector. Now all methods required for SSR are exported from the library itself, making effector/fork an alias
• Make Scope type alias for Fork
• Add support for es modules: import {createStore} from 'effector/effector.mjs'
• Effect without a handler now throws an error during a call instead of calling console.error with undefined return, which was violating the type of effect
• Remove restore aliases, event.filter(fn) alias for event.filterMap(fn), greedy in sample as separate last argument and unused blocks and Kind

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>