console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

MobX 5.0.0 について

出ました!

リリースブログもあるけど、どことなくポエミーなので、おとなしくChangeLog見たほうがいいかも・・w

mobx/CHANGELOG.md at master · mobxjs/mobx · GitHub

3行まとめ

  • v4移行してればやることない
  • `Proxy` ベースになったので、古い環境は要Polyfill
  • コードベースがES5からES6(ES2015)になったので、古い環境は(ry

v4移行についてはこちらもどうぞ。

MobX 4.0.0 について - console.lealog();

基本的にv4とv5のAPIにそこまで違いはなく、中身の実装が違うだけでパフォーマンス的にもそこまで差はないとのこと。

Proxyベースになって変わったこと

v5からは、内部的な実装が`Proxy`を使ったものに変わりました。`immer`で培ったノウハウですね。

Object

これまでのMobXは、宣言時点でマークされてないプロパティはObservableではなかったので、そのあたりの扱いがやや面倒だった。

const { observable, autorun } = mobx;

const obj = observable({ x: 1 });

autorun(() => {
  console.log(Object.keys(obj));
})

obj.y = 1; // <-

v4までは、`obj.y`が増えても検知できなくて、それ用のAPIを使ってた or `Map`でがんばってた。

しかしついにこれがv5では検知できるように!やった!

Array

const { observable } = mobx;

const arr = observable([1, 2, 3]);

Array.isArray(arr); // <-

v4までは、これが`false`だった。
なのでMobX界の外に出るときは、`.slice()`するなり`toJS()`したりしてた。

しかしこれがv5では`true`になります!!Proxy最高!

v4 -> v5移行

  • v4時点でDepricatedだったものを確実に消す
  • 上記のObjectとArrayのワークアラウンドがあれば消す
    • ただし、ObservableArrayに対して`.reverse()`と`.sort()`を呼んでるところは、`.slice()`したままに
  • `mobx-react`と一緒に使ってる場合は、そっちのバージョンも上げる

これだけ。

Jestとの組み合わせでバグがあったっぽいけど、すでに解消済み。

`toEqual` does not treat non-enumerable properties equally · Issue #6392 · facebook/jest · GitHub

`master`にはマージ済みなので、`23.1.1`のリリース待ち。