今年初のビッグバンリリースです
tl;dr
既存のコードを全て捨てて全部書き直しました
書き直した経緯
- GitLab API v4に対応するにあたって、既存のコードベースでv3とv4両方対応するのはいろいろつらそうだったため
- 特にjQueryでDOMをゴリゴリ操作してるところとか
- テストを書いてないことはなかったけど、jQueryでDOM操作してるviewや定期的にGitLab APIをたたいてポーリングしてるバッググラウンド処理のテストが全然なくて、かつ今までの経験上一番不具合起こってた場所だったので手厚くテストを書きたかった
主な変更点
https://github.com/sue445/chrome-gitlab-notifier/blob/master/CHANGELOG.md#200-20170504 からの抜粋です
- 全てのjsをES6で書き直した
- jQueryに依存してた処理を mithril.js に移植
- Jasmineでやってたユニットテストを mocha に変更
- ESLint 導入
- 仕事でrubocopをよく使ってるのでjsでも使いたいと思って探していたらESLintに行き着いた
- yarn 導入
- Travis CIでnpm installしたパッケージのキャッシュを効かせるにはyarnが必要っぽかったので導入
- せっかくなので使ってるライブラリも諸々アップデート
- Twitter Bootstrap v3.2.0 -> v3.3.7
- jQuery v2.0.3 -> v3.2.1
- Font Awesome v3.1.0 -> v4.7.0
- v4系でGitLabアイコンができていて便利 http://fontawesome.io/icon/gitlab/
- その他細かいバグ修正など
差分
- https://github.com/sue445/chrome-gitlab-notifier/pull/105
- https://github.com/sue445/chrome-gitlab-notifier/milestone/1?closed=1
プルリクエストだと差分しかなくてワケワカメなので細かいdiff読むならマイルストーンがおすすめ
プルリクエスト上だとライブラリのアップデート内容も含まれてるので無駄に差分が大きいですが、書き直したソースの差分だけならこんな感じ
$ git diff --stat 1.4.3...2.0.0 -- src/ src/avatar_cache.js | 69 +++++++-------- src/background.js | 356 +++++++++++++++++++++++++++++++++++------------------------------------------ src/background_init.js | 42 ++++++++++ src/base_cache.js | 19 +++++ src/config.js | 348 ++++++++++++++++++++++++++++++++++----------------------------------------- src/gitlab.js | 313 ++++++++++++++++++++++++++++++++++++++------------------------------ src/notification.js | 130 +++++++++++++++------------- src/notification_cache.js | 71 ++++++++-------- src/options.js | 489 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------- src/options_init.js | 42 ++++++++++ src/popup.js | 235 +++++++++++++++++++++++++++------------------------ src/popup_init.js | 36 ++++++++ src/util.js | 61 -------------- 13 files changed, 1237 insertions(+), 974 deletions(-) $ git diff --stat 1.4.3...2.0.0 -- test/ test/avatar_cache_test.js | 56 +++++++++++++++++++++ test/background_test.js | 273 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ test/base_cache_test.js | 38 ++++++++++++++ test/notification_cache_test.js | 65 ++++++++++++++++++++++++ test/notification_test.js | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ test/options_test.js | 31 ++++++++++++ test/popup_test.js | 63 +++++++++++++++++++++++ test/stub/projects.json | 112 +++++++++++++++++++++++++++++++++++++++++ 8 files changed, 786 insertions(+) $ git diff --stat 1.4.3...2.0.0 -- spec/ spec/SpecRunner.html | 63 --- spec/gitlab_spec.js | 98 ---- spec/lib/jasmine-1.3.1/MIT.LICENSE | 20 - spec/lib/jasmine-1.3.1/jasmine-html.js | 681 ------------------------ spec/lib/jasmine-1.3.1/jasmine.css | 82 --- spec/lib/jasmine-1.3.1/jasmine.js | 2600 -------------------------------------------------------------------------------------------- spec/lib/jquery.mockjax.js | 587 --------------------- spec/lib/run-jasmine.js | 86 ---- spec/notification_spec.js | 94 ---- spec/spec_helper.js | 4 - spec/stub.js | 89 ---- 11 files changed, 4404 deletions(-)
spec/ 全消しなのはJasmineを捨ててmochaに乗り換えたためです
mithril.jsを採用した経緯
実は最初Vue.jsを使って書き直してたのですが、Vue.jsの中で使ってるevalがChrome拡張だとサンドボックスモードを有効にしないと使えなくて、サンドボックスを有効にすると今度はChromeのlocalStorageにアクセスできなくてVue.jsは断念しました。
が、後日Twitterでのやりとりで事前に全部コンパイルしているとChrome拡張でもVue.jsが使えるということが判明。
@sue445 なるほど…。スタンドアローンバージョン(実行時コンパイル)だとCSPに引っかかるわけですね。少し調べましたが、今だとwebpack+vue-loader等を使って事前にコンパイルするやり方だと大丈夫なようです。https://t.co/bJkP3Zwkgm環境
— razokulover (@razokulover) 2017年4月3日
次にChrome拡張作る時はVue.jsワンチャンありそう
開発期間とか
前述のVue.js時代から含めるとかれこれ2ヶ月くらいかかって全部のコードを書き直しています
あとビッグバンリリースと銘打ってますが、TDDのこころ に従って1ファイルずつ地道にES6化＆テスト追加しています
1ヶ月くらい自分のローカルで動かしてたので致命的なバグはないはずです。
