Babel plugin

Built-in plugin for babel, which can be used for ssr and debugging. It inserts a name of a unit, inferred from variable name and sid (stable identifier), computed from location in the source code.

For example, in case of effects without handlers, it will improve error message by clearly showing in which effect error happened.

import {createEffect} from 'effector'

const fetchFx = createEffect()

fetchFx()

// => no handler used in fetchFx

Try it

Usage#

In the simplest case, it can be used without any configuration:

.babelrc

{
  "plugins": ["effector/babel-plugin"]
}

.sid#

since

effector 20.2.0

Stable hash identifier for events, effects, stores and domains, preserved between environments, to handle client-server interaction within the same codebase.

The key is that sid can be autogenerated by effector/babel-plugin with default config and it will be stable between builds

See example project

common.js

import {createEffect} from 'effector'

export const getUser = createEffect({sid: 'GET /user'})
console.log(getUsers.sid)
// => GET /user

worker.js

import {getUsers} from './common.js'

getUsers.use(userID => fetch(userID))

getUsers.done.watch(({result}) => {
  postMessage({sid: getUsers.sid, result})
})

onmessage = async ({data}) => {
  if (data.sid !== getUsers.sid) return
  getUsers(data.userID)
}

client.js

import {createEvent} from 'effector'
import {getUsers} from './common.js'

const onMessage = createEvent()

const worker = new Worker('worker.js')
worker.onmessage = onMessage

getUsers.use(
  userID =>
    new Promise(rs => {
      worker.postMessage({sid: getUsers.sid, userID})
      const unwatch = onMessage.watch(({data}) => {
        if (data.sid !== getUsers.sid) return
        unwatch()
        rs(data.result)
      })
    }),
)

Configuration#

noDefaults#

noDefaults: boolean

since

effector 20.2.0

Option for effector/babel-plugin for making custom unit factories with clean configuration.

.babelrc

{
  "plugins": [
    ["effector/babel-plugin", {"addLoc": true}],
    [
      "effector/babel-plugin",
      {
        "importName": "@lib/createInputField",
        "storeCreators": ["createInputField"],
        "noDefaults": true
      },
      "createInputField"
    ]
  ]
}

@lib/createInputField.js

import {createStore} from 'effector'
import {resetForm} from './form'

export function createInputField(defaultState, {sid, name}) {
  return createStore(defaultState, {sid, name}).reset(resetForm)
}

src/state.js

import {createInputField} from '@lib/createInputField'

const foo = createInputField('-')
/*

will be treated as store creator and compiled to

const foo = createInputField('-', {
  name: 'foo',
  sid: 'z&si65'
})

*/

importName#

importName: string | string[]

Specify import to process by plugin. By default has value ["effector", "effector/compat"]

addNames#

addNames: boolean

since

effector 21.8.0

Add names to units factories calls. By default has value true. Useful for minification and obfuscation of production builds.

addLoc#

addLoc: boolean

Add location to methods' calls. Used by devtools, for example effector-logger

reactSsr#

reactSsr: boolean

since

effector 21.5.0

Replace imports from effector-react to effector-react/ssr. Useful for building both server-side and client-side builds from the same codebase.

factories#

factories: string[]

since

effector 21.6.0

Accepts array of module names which exports will be treated as custom factories therefore each function call will provide unique prefix for sids of units inside them. Useful for SSR support, not required for client-only application

Factories can have any amount of arguments.
Factories can create any amount of units.
Factories can call any effector methods.
Factories can call another factories from other modules.
Modules with factories can export any amount of functions.
Factories should be compiled with effector/babel-plugin as well as code which use them.

Example#

.babelrc

{
  "plugins": [
    [
      "effector/babel-plugin",
      {
        "factories": ["src/createEffectStatus", "~/createCommonPending"]
      }
    ]
  ]
}

./src/createEffectStatus.js

import {rootDomain} from './rootDomain'

export function createEffectStatus(fx) {
  const $status = rootDomain
    .createStore('init')
    .on(fx.finally, (_, {status}) => status)
  return $status
}

./src/statuses.js

import {createEffectStatus} from './createEffectStatus'
import {fetchUserFx, fetchFriendsFx} from './api'

export const $fetchUserStatus = createEffectStatus(fetchUserFx)
export const $fetchFriendsStatus = createEffectStatus(fetchFriendsFx)

Import createEffectStatus from './createEffectStatus' was treated as factory function so each store created by it has its own sid and will be handled by serialize independently, although without factories they will share the same sid