Skip to content

Миграция на MobX 7

@dubium/query-layer начиная с текущей версии workspace требует mobx >=7.0.3 <8.0.0. В репозитории миграция проверяется против MobX 7.0.3.

Минимум 7.0.3 выбран намеренно: эта версия добавляет node export condition для Node/Bun и гарантирует единый экземпляр MobX при смешанном import/require. Для SSR и Node-based тестов это снижает риск получить две независимые reactive graph из-за разных ESM/CJS entry points. В browser Module Federation singleton по-прежнему настраивается отдельно, как показано ниже.

Что изменилось в MobX 7

MobX 7 удалил несколько ранее deprecated API и старые compatibility paths:

  • observable objects и arrays теперь всегда используют Proxy; ES5 fallback удалён;
  • configure({ useProxies: ... }) больше не поддерживается;
  • { proxy: false } для observable, observable.object и observable.array удалён;
  • legacy decorators удалены; используйте современную decorator model или makeObservable / makeAutoObservable;
  • namespaced annotations и comparers заменены именованными экспортами;
  • публичный trace удалён.

Основные замены:

MobX 6 APIMobX 7 API
observable.refobservableRef
observable.shallowobservableShallow
observable.deepobservableDeep
observable.structobservableStruct
computed.structcomputedStruct
action.boundactionBound
flow.boundflowBound
comparer.identitycompareIdentity
comparer.defaultcompareDefault
comparer.structuralcompareStructural
comparer.shallowcompareShallow

Например:

ts
import {
    actionBound,
    makeObservable,
    observable,
    observableRef,
    observableShallow,
} from "mobx"

class Store {
    data: unknown = null
    items = new Map<string, unknown>()

    constructor() {
        makeObservable(this, {
            data: observableRef,
            items: observableShallow,
            refresh: actionBound,
        })
    }

    refresh(): void {
        // ...
    }
}

Фабрики коллекций observable.map, observable.set, observable.array и observable.object не удалены. Их можно продолжать использовать с { deep: false }; это не то же самое, что удалённая annotation observable.shallow.

Обновление приложения

Для package consumer:

bash
npm install @dubium/query-layer axios mobx@^7.0.3

Для React-приложения:

bash
npm install mobx@^7.0.3 mobx-react-lite@^5

mobx-react-lite 5 требует React 18 или новее. Если нужны class components или Stage 3 @observer class decorator, используйте совместимую ветку mobx-react 10.x.

Module Federation

MobX должен оставаться singleton во всём runtime graph. Host и все remote должны согласовать MobX 7.0.3+:

ts
export const shared = {
    mobx: {
        singleton: true,
        requiredVersion: "^7.0.3",
    },
    "mobx-react-lite": {
        singleton: true,
        requiredVersion: "^5.0.0",
    },
}

Два экземпляра MobX создают две независимые reactive graph и могут приводить к неочевидным проблемам подписки. Не допускайте одновременного разрешения MobX 6 и MobX 7 в одной странице.

Проверка миграции

После обновления зависимостей выполните:

bash
npm ci
npm run package:check:mobx7
npm run package:typecheck
npm run package:test
npm run package:build
npm run frontend:typecheck
npm run frontend:build
npm run playwright:test
npm run docs:build

Также проверьте исходники приложения на удалённые API:

text
observable.ref
observable.shallow
observable.deep
observable.struct
computed.struct
action.bound
flow.bound
comparer.*
useProxies
proxy: false
trace(

Внутренний код Query Layer уже использует именованные annotations MobX 7 и не содержит этих removed API.