mobx

Patch Changes

• 39eca50d #2757 Thanks @urugator! - Fix error stringification on minified build Fix isObservableProp not supporting Symbols Fix makeAutoObservable not ignoring inferredAnnotationsSymbol

This release fixes a plethora of bugs related to sub-classing and reflecting / iterating on observable objects. The behavior of MobX is in many edge cases much more explicitly defined now.

A new annotation was introduced: @override / override to support re-defining actions and computed values(!) on sub classses.

For idiomatic MobX usage this release should have little impact, but if you are using a lot of sub-classing, reflection APIs or direct object manipulations like defineProperty, this release might introduce previously unseen errors for cases that silently failed before, or even worked successfully even though the correct behavior wasn't specified earlier.

If you are migrating from MobX 4/5 we strongly recommend to go to 6.1 in one go, and skip 6.0.*, as some buggy behavior compared to the previous majors has been corrected.

As always, our libraries come as-is and are maintained by volunteers. Upgrades are at own risk and voluntary. Bug reports require a minimal reproductions and a correctly filled out issue template.

Support the ongoing maintenance at: https://opencollective.com/mobx

Minor Changes

28f8a11d #2641 Thanks @urugator!

• action, computed, flow defined on prototype can be overridden by subclass via override annotation/decorator. Previously broken.
• Overriding anything defined on instance itself (this) is not supported and should throw. Previously partially possible or broken.
• Attempt to re-annotate property always throws. Previously mostly undefined outcome.
• All annotated and non-observable props (action/flow) are non-writable. Previously writable.
• All annotated props of non-plain object are non-configurable. Previously configurable.
• Observable object should now work more reliably in various (edge) cases.
• Proxied objects now support Object.defineProperty. Previously unsupported/broken.
• extendObservable/makeObservable/defineProperty notifies observers/listeners/interceptors about added props. Previously inconsistent.
• keys/values/entries works like Object.keys/values/entries. Previously included only observables.
• has works like in. Previously reported true only for existing own observable props.
• set no longer transforms existing non-observable prop to observable prop, but simply sets the value.
• remove/delete works with non-observable and computed props. Previously unsupported/broken.
• Passing options to observable/extendObservable/makeObservable throws if the object is already observable . Previously passed options were mostly ignored.
• autoBind option is now sticky - same as deep and name option.
• observable/extendObservable now also picks non-enumerable keys (same as make[Auto]Observable).
• Removed deprecated action.bound("name")
• Proxied objects should be compatible with Reflect API. Previously throwing instead of returning booleans.

Patch Changes

• 6b304232 #2644 Thanks @rokoroku! - Fix broken error reference in errors.ts

• 83b84fd3 #2740 Thanks @iChenLei! - Infer optional / promise action args type correctly

• 65c7b73b #2717 Thanks @ahoisl! - The TypeScript type CreateObservableOptions is now exported.

• 989390d4 #2594 Thanks @urugator! - Fixed #2579 - observable does not ignore class instances

• dea1cf18 #2726 Thanks @mweststrate! - fix: onBecomeObserved was not triggered correctly for computed dependencies of computeds. Fixes #2686, #2667

• 592e6e99 #2743 Thanks @vkrol! - Remove sideEffects section in mobx-react-lite package.json

🚨🚨🚨 If you are upgrading from V4/V5, please follow the migration guide.

Patch Changes

• 79a09f49 #2615 Thanks @urugator! - Fix #2614 - makeObservable does not respect options.name

Patch Changes

• d0e6778d - Create ESM bundles with NODE_ENV correctly replaced so it can be used in browser (#2564)

Patch Changes

• b5d64d19 #2548 Thanks @urugator! - Fixed 2542, makeAutoObservable not respecting deep option @urugator

• f4c22925 #2582 Thanks @tomenden! - Support running in a web-worker

• Fixed issue in TS typings of makeObservable in combination with a member named toString()

New features

• makeObservable(target, annotations) is now the recommended way to make objects with a fixed shape observable, such as classes.
• makeAutoObservable(target) will automatically determine the annotations used by makeObservable. Methods will be marked as 'autoAction', so that they can be used both from a computed value or as standalone method.
• MobX 6 can be used in both modern environments, and environments that don't support Proxy. So both MobX 4 and 5 users can upgrade to 6. See proxy support for more details.
• observable.array now supports { proxy: false } as option.
• reaction's effect function now receives the previous value seen by the reaction as second argument.
• flow can now be used as annotation as well. You might need flowResult in case you use TypeScript to extract the correct result type. details.

Breaking changes

Changes that might affect you

• The decorate API has been removed, and needs to be replaced by makeObservable in the constructor of the targeted class. It accepts the same arguments. The mobx-undecorate can transform this automatically.
• When using extendObservable / observable, fields that contained functions used to be turned into observables. This is no longer the case, they will be converted into autoActions.
• Strict mode for actions is now enabled by default in observed mode.
• toJS no longer takes any options. It no longer converts Maps and Sets to plain data structures. Generic, flexible serialization of data structures is out of scope for the MobX project, and writing custom serialization methods is a much more scalable approach to serialization (tip: leverage computeds to define how class instances should be serialized).
• The methods intercept and observe are no longer exposed on observable arrays, maps and boxed observables. Import them as utility from mobx instead: import { observe, intercept } from "mobx", and pass the collection as first argument: observer(collection, callback). Note that we still recommend to avoid these APIs.
• observableMap.toPOJO(), observableMap.toJS() have been dropped. Use new Map(observableMap) instead if you want to convert an observable map to a plain Map shallowly.
• observableMap.toJSON() now returns an entries array rather than a new Map, to better support serialization.
• observableSet.toJS() has been dropped. Use new Set(observableSet) instead if you want to convert an observable Set to a plain Set shallowly.
• observableSet.toJSON() now returns an array rather than a new Set, to better support serialization.
• Sorting or reversing an observableArray in a derivation (without slicing first) will now throw rather than warn. In contrast, it is now allowed to sort or reverse observable arrays in-place, as long as it happens in an action.
• isArrayLike is no longer exposed as utility. Use Array.isArray(x) || isObservableArray(x) instead.

Obscure things that don't work anymore, but that probably won't affect you

• It is no longer possible to re-decorate a field (through either @observable or makeObservable) that is already declared in a super class.
• runInAction no longer supports passing a name as first argument. Name the original function or use action(name, fn)() if you care about the debug name.
• computed(getterFn, setterFn) no longer accepts a setter function as a second argument. Use the set option instead: computed(getterFn, { set: setterFn }).
• In observable arrays, for findIndex / find method, the offset argument (the third one) is no longer supported, to be consistent with ES arrays.
• The option computedConfigurable of configure is no longer supported as it is now the default.
• observableArray.toJS() has been removed, use observableArray.slice() instead, which does the same.
• Killed support for the IGNORE_MOBX_MINIFY_WARNING environment flag.
• _allowStateChangesInComputation(fn) is no longer needed, use runInAction(fn) instead.
• In computed, the when predicate (first arg), and reaction predicate (first arg) it is now forbidden to directly change state. State changes should be done in their effect functions, or otherwise at least wrapped in runInAction (only the state change, not the observables you want to track!). Note that this is still an anti-pattern.
• The observableArray.get() and observableArray.set() methods are no longer supported.
• The IObservableObject interface is no longer exported from MobX.
• The second argument to the reaction effect function, the disposer object, is now passed in as third argument. The second argument is now the previous value seen by the reaction.
• onBecomeObserved / onBecomeUnobserved will now only trigger for observables that are actually used by a reaction (see #2309 for background).

Fixes

• #2326: Incorrect this for array callbacks such as in array.forEach
• #2379: Fixed issue with array.concat
• #2309: Fixed several inconsistencies between keepAlive'd computed values and on(un)BecomeObserved
• Fixed several inconsistencies when on(un)BecomeObserved was triggered for observables changed in actions without having an observer

The minimum required TypeScript version is now 3.6

• Fixed flow typings with Typescript v3.6. This means that version of Typescript is required when using flows.
• Cancelled flows now reject with a FlowCancellationError instance whose error message is the same as in previous versions ("FLOW_CANCELLED") so this is not breaking. #2172 by @vonovak
• Fix running mobx in web worker #2184 by @shahata
• Fixed flow typings for Facebook's Flow. A new CancellablePromise Flow type is exported. #2164 by @vonovak
• Added support for symbol keys on observable properties (MobX 5 only). #2175 by @StephenHaney

• Fixed installation issue trying to run postinstall hook for a website #2165.

• Fixed a recent regression where array update events would send undefined as change.object through #1985 by xaviergonz

• Fixed #1667: creating a large array could result in undefined items (MobX 4.* was not affected)

• Fixed #1685: expose IAutorunOptions
• decorate now can apply multiple decorators, by accepting an array and applying them right to left: decorate(Todo, { title: [serializable(primitive), persist('object'), observable] }). By @ramybenaroya through #1691 and #1686
• Improved typings of flow so that it accepts async generators. By @dannsam through #1656 and #1655
• keys() now also supports arrays. Fixes #1600 through #1601 by @nunocastromartins

• Fixed issue where it was no longer possible to define custom properties on observable arrays

• Fixed issue where iterators where not compiled to ES5, breaking the ES5 based builds.

Release blogpost

Proxy support!

MobX 5 is the first MobX version fully leveraging Proxies. This has two big advantages

1. MobX can now detect the addition of properties on plain observable objects, so it is now possible to use plain observable objects as dynamic collections.
2. Observable arrays are now recognized as arrays by all third party libraries, which will avoid the need to slice them.

The system requirements to run MobX has been upped

• MobX 5 can only be used on environments that support Proxies. See the browser support for details.
• Since MobX no longer runs on older browsers, the compilation target has been upgraded to ES2015 syntax supporting browsers. This means that MobX is not loadable on older browsers without down compilation to ES5.
• If for whatever reason your project cannot meet this requirements, please stick to MobX 4. It will be actively maintained. All current features of MobX 5 are expressable in MobX 4 as well, but it means that for example to use dynamic objects some additional APIs are needed.
• The performance footprint of MobX 5 should be pretty similar to MobX 4. In our performance tests we saw some minor improvements in memory footprint, but overall it should be pretty comparable.

Breaking changes

• The required runtime needs to support the non-polyfillable Proxy API.
• The minimum runtime target is now ES2015, not ES5
• spy has become a no-op in production builds
• All earlier deprecated APIs are dropped. Make sure to not have any deprecation warnings before upgrading.
• array.move and array.peek are removed from the API
• Dropped the third argument to array.find and array.findIndex since they were not standardized in ES.
• .$mobx property has been dropped from all observables and replaced by a Symbol. Instead of using x.$mobx.name, use import { $mobx } from "mobx"; x[$mobx].name etc.
• In some cases, the order in which autoruns are fired could have changed due to some internal optimizations (note that MobX never had a guarantee about the order in which autoruns fired!)

New features

• It is possible to pass the proxy: false argument to observable.object to disable proxying (theoretically slightly faster, but removes no dynamic key addition)

Known Issues

• Observable objects can no longer be frozen (otherwise they would become un-observable😎). If you are actually trying to do so MobX will now throw an exception like: [mobx] Dynamic observable objects cannot be frozen]. A place where that might happen unexpectedly is when passing an observable object as style property to a React component. Like <span style={someObservableObject} />, since React will freeze all style objects. The work-around is to simply pass a fresh, non-observable object for styling like: <span style={{...someObservableObject}} />.
• If you are using mobx with mobx-react, and you are upgrading mobx-react to the MobX 5 compatible version (mobx-react@5.2.0) you will notice that this.props or this.state are not yet observable in the constructor or componentWillMount. This is for forward compatibility with React 16.3 where componentWillMount has been deprecated. In most cases using componentDidMount instead will suffice, especially when the goal is to setup reactions. For more info see #478. Fixed in mobx-react 5.2.1. But note that you should still migrate away from componentWillMount😎.
• Jest toEqual might throw an error allKeys[x].match is not a function when trying to equal observable arrays. This is a bug in Jest report. The simple work around for now is to slice (or toJS if the problem is recursive) the array first.
• Jest toEqual matcher might no longer correctly equal your class instances, complaining about differences in the MobX adminstration. This is due to a bug with the processing of symbols: report. For now you might want to use a custom matcher if you are directly equalling observable objects. As a work around toJS(object) could be used before diffing.

Note June 7th, 2018: Both issues are already in Jest master and should be released soon.

Migration guide

• Make sure to not use any API that produces deprecation warnings in MobX 4. Beyond that MobX 5 should pretty well as drop-in replacement of MobX 4.
• You could perform the following clean ups:
  • Don't slice() arrays when passing them to external libraries. (Note you still shouldn't pass observable data structures to non-observer React components, which is an orthogonal concept)
  • You could replace observable maps with observable objects if you are only using string-based keys.
• Don't call the reverse or sort operations directly on observableArray's anymore, as it's behavior slightly differed from the built-in implementations of those methods. Instead use observableArray.slice().sort() to perform the sort on a copy. This gives no additional performance overhead compared to MobX 4. (The reason behind this is that built-in sort updates the array in place, but the observable array implementation always performed the sort on a defensive copy, and this change makes that explicit).
• you may remove usages of isArrayLike() since Array.isArray() will now return true for observable arrays

API's that have been dropped

• The arrayBuffer setting is no longer supported by configure (it has become irrelevant)
• observable.shallowBox, observable.shallowArray, observable.shallowMap, observable.shallowObject, extendShallowObservable api's have been removed. Instead, pass { deep: false } to their non-shallow counter parts.
• observableArray.peek, observableArray.move