@effector/babel-plugin-react - npm Package Versions

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
  },
})

effector-react 20.0.3

• Allow as const typescript assertion for useStoreMap keys. It helps us to infer type for fn arguments

import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'

type User = {
  username: string
  email: string
  bio: string
}

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: 'alice@example.com',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: 'bob@example.com',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: 'carol@example.com',
    bio: '- - -',
  },
])

export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
  const value = useStoreMap({
    store: $users,
    keys: [id, field] as const,
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

In typescript versions below 3.4, you can still use an explicit type assertion

import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'

type User = {
  username: string
  email: string
  bio: string
}

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: 'alice@example.com',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: 'bob@example.com',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: 'carol@example.com',
    bio: '- - -',
  },
])

export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
  const value = useStoreMap({
    store: $users,
    keys: [id, field] as [number, keyof User],
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

as const in typescript docs

effector-react 20.0.2

• Fix bug with additional rerender in case of useStore argument change

effector-react 20.0.1

• Fix flow typings for useStoreMap