effector/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:

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

noDefaults

since

effector 20.2.0

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

{
"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'
})
*/
Last updated on