📝

Weekly Frontend News 2022年4月3週目/react-testing-libraryにrenderHookが追加、など

2022/04/18に公開

寒くなったり暑くなったりして大変ですね。体調にお気をつけて。
自分が今週見たフロントエンド記事のまとめ。

react-testing-libraryにrenderHookの追加、react-hooks-testing-libraryが非推奨へ

https://github.com/testing-library/react-testing-library/releases/tag/v13.1.0

react-testing-library v13.1でrenderHookが追加された。
これにより、react-hooks-testing-libraryの大部分の機能がカバーされるので、react-hooks-testing-libraryを非推奨としてアーカイブする予定とのこと。
https://github.com/testing-library/react-testing-library/pull/991#issuecomment-1100374235

RFC: New Bundler in Gatsby

https://github.com/gatsbyjs/gatsby/discussions/35357

Gatsbyがwebpack以外のバンドラーを模索中とのこと。
さまざまなバンドラーのベンチマークをしているbundler-benchmarkingも紹介されていて気になるところ。

Storybook Lazy Compilation for Webpack

https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/

コアな部分をコンパイルしてStorybookの表示を早くし、Story表示時に該当Storyをコンパイルして表示するlazy compilationの機能紹介。
自分のプロジェクトで試したところ、3~4倍起動が早くなった。

kintoneの内部を(こっそり)Reactに置き換えるチームがあるってホント?

https://blog.cybozu.io/entry/2022/04/14/110000

大規模なサービスをReact化しているチームの紹介。

Lexical

https://github.com/facebook/lexical

Metaが公開したテキストエディタのOSS。
Core部分は独自のDOM Reconcilerが存在し、React非依存になっており、@lexical/reactを使用してReactで使用できるぽい。

Meta社内はdraft-jsからlexicalに全面移行しているとのこと。
https://github.com/facebook/draft-js/issues/3091

Storybook Connect

https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect

FigmaとStorybookを繋ぐFigma plugin

Building a dialog component

https://web.dev/building-a-dialog-component

<dialog>の基本から、ダークモードや属性によるスタイルの変更などの解説。

Discussion