Встроенный плагин для babel, который можно использовать для ssr и отладки. Он вставляет имя юнита, выводимое из имени переменной, и sid (стабильный идентификатор), вычисляемый по расположению в исходном коде.

К примеру, в случае эффектов без обработчиков, это улучшит сообщение об ошибке, четко показывая, в каком эффекте произошла ошибка.

import { createEffect } from "effector";

const fetchFx = createEffect();

fetchFx();

// => no handler used in fetchFx

Запустить пример

Использование

В простейшем случае его можно использовать без какой-либо настройки:

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

sid

Стабильный идентификатор для событий, эффектов, сторов и доменов, сохраняемый между окружениями, для обработки клиент-серверного взаимодействия в рамках одной кодовой базы. Ключевым преимуществом является то, что sid может быть автоматически сгенерирован через effector/babel-plugin с конфигурацией по умолчанию и будет стабилен между сборками.

Пример проекта

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

Конфигурация

importName

• Type: string | string[]
• Default: ['effector', 'effector/compat']

Имя импорта или имена импортов, которые(-й) будут(-ет) обрабатываться плагином.

factories

• Type: string[]

Принимает массив имен модулей, экспорты которых будут рассматриваться как пользовательские фабрики, и каждый вызов таких фабрик будет иметь уникальный префикс для сидов юнитов внутри них. Применяется для реализации SSR, для чисто клиентского приложения не требуется.

• Фабрики могут иметь любое количество аргументов
• Фабрики могут создавать любое количество юнитов
• Фабрики могут вызывать любые эффекторные методы
• Фабрики могут вызывать другие фабрики из других модулей
• Модули с фабриками могут экспортировать любое количество функций
• Фабрики должны быть скомпилированы с effector/babel-plugin, как и код, который их использует

Пример

// .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);

Импорт createEffectStatus из './createEffectStatus' рассматривается как фабричная функция, поэтому каждый созданный ею стор получит свой собственный sid и будет обрабатываться serialize независимо, в то время как без factories они все будут иметь один и тот же sid.

reactSsr

• Type: boolean
• Default: false

Заменяет импорты из effector-react на effector-react/scope. Полезно для создания серверных и клиентских сборок из одной и той же кодовой базы.

addNames

• Type: boolean
• Default: true

Добавляет имена к вызовам фабрик юнитов. Отключение применяется для минификации и обфускации продакшн сборок.

addLoc

• Type: boolean
• Default: false

Добавляет местоположение к вызовам методов. Используется инструментами для разработчиков, например, effector-logger

debugSids

debugSids: boolean

Добавляет в sid путь к файлу и имя переменной где объявлен unit. Очень полезно при отладке SSR.

noDefaults

• Type: boolean
• Default: false

Опция для effector/babel-plugin для создания пользовательских фабрик юнитов с чистой конфигурацией, изначально не делающей ничего.

// .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'
})

*/