Тема
Миграция на 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 API | MobX 7 API |
|---|---|
observable.ref | observableRef |
observable.shallow | observableShallow |
observable.deep | observableDeep |
observable.struct | observableStruct |
computed.struct | computedStruct |
action.bound | actionBound |
flow.bound | flowBound |
comparer.identity | compareIdentity |
comparer.default | compareDefault |
comparer.structural | compareStructural |
comparer.shallow | compareShallow |
Например:
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@^5mobx-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.