Update mobx to 6.9 and mobx-react to 9.1

[alexander-schranz]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Fixed tickets	fixes #
Related issues/PRs	#
License	MIT
Documentation PR	sulu/sulu-docs#

What's in this PR?

Update mobx to 6.9 and mobx-react to 9.1

Why?

With the support for decorators again in mobx we could smoothly upgrade to latest version.

To Do

• Replace isArrayLike with isArray and isObservableArray see https://github.com/mobxjs/mobx/blob/main/packages/mobx/CHANGELOG.md
• FlowJS Types (not longer provided by mobx 6)
• Use new instead of legacy decorators?

[alexander-schranz]

this should make the above variables observable, but the beneath test fails expect(isObservable(router.route)).toBe(true) as router.route is still not observable based on isObservable:

[alexander-schranz]

Looks like this error maybe related to some babel issues as I tried now define the observable via makeObservable directly and run into the following error:

[alexander-schranz]

Strange is that it still output the route is defined:

but as expected it is undefined:

[mweststrate]

there are some subtleties in how Babel defines its class fields. From top of my head in 'loose' mode, it only allocates the field on first assignment, so you might want to set this to 'strict' (or the other way around, it has been a while). Explicitly initializing it might also help, e.g. route: ?Route = undefined.

[mweststrate]

Also you probably want to check expect(isObservableProp(router, "route")), otherwise it checks if the value stored in the route field is observable, not whether the property itself is.

[alexander-schranz]

Thx @mweststrate for your response. It really seems to be that in this case isObservable is failing but your suggested expect(isObservableProp(router, "route")) works. So in Mobx 6 (or 5) only the class itself knows if its observable property not the property itself?

It look like / I hope it is only used in tests and so I can maybe just do a replace via regex to convert existing isObservable to isObservableProp:

\(isObservable\((.*)\.(.*)\)\)\.
(isObservableProp($1, '$2')).

Following changes seems to make the Router.test.js work: b8cd486. Seems I need to check this on a lot of other tests.

If props and params are never itself observable is the replacement of isArrayLike not required:

-if (!isArrayLike(values)) {
+if (!(Array.isArray(values) || isObservableArray(values))) {

and could it just be:

+if (!(Array.isArray(values)) {

[mweststrate]

I suspect your old tests where just testing the wrong thing, and that somehow the value got observable or not. Whether that should be the case probably differs per case. E.g. what you were testing previously was const x = a.b; isObservable(x). Sometimes x was I guess supposed to be observable, sometimes maybe not (e.g. built in objects not managed by MobX etc.

[mweststrate]

Array.isArray should now work on MobX observable arrays indeed as well