togami2864

react-ts-github-calendarを公開しました。

2020-12-04

github-calendarのReact + TypeScriptに対応したコンポーネントライブラリreact-ts-github-calendarを公開しました。

ちゃっかりこのブログのProfileにも使っています。

動機

もともとReact用のコンポーネントライブラリは存在していたのですが、

  1. TypeScriptに対応していない
  2. レガシーな書き方(ReactのStrictModeで引っかかる)が残っていた。
  3. 最終更新が２年前
  4. 単純に何故か動かなかった。

というのもあり、作りました。

大変だったこと

コンポーネントの書き換えは１時間かからなかったのですが他の要素で時間を潰しまくり、結局公開するのに２週間かかりました。

1.テストが動かない。
テスト環境をjsdomにしているにも関わらず、コンポーネント内の関数でwindow.documentが定義されず、
２日潰しましたが、結局解決できませんでした。

2.Next.jsへの対応
どうもデフォルトでSSRされるようなので、dynamic importでssrをoffにすることで解決しました。
github-calendar側でdomをいじる動作がある === Browserでの動作が前提なので、いかにしてnode側で動かさせないかに苦労しました。

3.npmパッケージをローカルデバックでつみかけた。
yarnのキャッシュを消さないと永遠に変更が反映されないという初見殺し要素にはめられました。

4.webpackの設定にてまどった。
JSの関数をライブラリとして外部に公開したい場合には、output.libraryとoutput.libraryTargetを設定しなければなりませんでした。また、とにかくmodule設定で沼にハマりました。

3,4に関してはそこそこトラブルシューティングができるようになったので、記事を書きます。

一番良かったこと

JavaScriptのmoduleシステムがちょっとだけ分かるようになった。


ESmoduleとcommonJSの違いが1mmもわかっていなかったのが原因で一生分の

SyntaxError: Cannot use import statement outside a module

を見る羽目になりましたが、npmで公開することを目指しながら作業することで、
commonJS, ESModule, umd, import文 とexport文,requireとmodule.exports.....といった要素のあやふやな部分を理解せざるを得ない状況になり、結果としては良かったと思います。

今後

Contribution,issue諸々大歓迎です！...といってはみますが本当にただのラッパーなので修正しようにもほとんど本家のgithub-calendarをいじる必要がありそうな気がしてます。

最近JAMstackな個人ブログづくりはやっている？のでReactやNext.js使う方はぜひ。
https://github.com/togami2864/react-ts-github-calendar