この記事では、
- ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び
- 巷にあふれるWebComponentsに対する見方への違和感
についてメモっておきます。
ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。
そのせいで勘違いされがちな概念なんかも、知らんけど。
まずは巷にあふれる意見に対する気持ちから。
続きを読むJestでES Moudlesなモジュールをテストしたい
import { observable } from 'mobx'; class Store { // ... } export default Store;
のような、`import / export`で書いたモジュールを、Jestでそのままテストしたい。
が、そのまま`require()`することもできないので、なんとかする必要がある。
続きを読むWebRTC Meetup Tokyo #18 に行ってきたメモ #webrtcjp
MobX 5.0.0 について
出ました！
リリースブログもあるけど、どことなくポエミーなので、おとなしくChangeLog見たほうがいいかも・・ｗ
3行まとめ
- v4移行してればほぼやることない
- `Proxy` ベースになったので、古い環境は要Polyfill
- コードベースがES5からES6(ES2015)になったので、古い環境は（ｒｙ
v4移行についてはこちらもどうぞ。
基本的に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`のリリース待ち。