Frontend Weekly 2024-03-15
Storybook v8のRSCのサポート、Vite5のサポート、Vitestによるテスト、Test flag、Built-in visual testing。Rolldownの公開。Biome v1.6のextendsプロパティなどについて紹介する。
Storybook v8
2024年3月11日に、Storybook 8がリリースされました。
RSCのサポート
React Server Componentがサポートされました。
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
Vite5のサポート及びVitestによるテスト
Vite5がサポートされ、Vitestがフレームワークの一部として統合されました。Vitestによる@storybook/testは、@storybook/jestと@storybook/testing-libraryと互換性が置き換えるものです。
@storybook/test: more streamlined and powerful testing
Test flag
テスト用にドキュメントなどの標準機能を無効にする—-testフラグが追加されました。これによりテストが高速化されます。
How to make Storybook 2-4x faster
Built-in visual testing
ChromaticによるビジュアルテストをStorybook上から実行できるようになりました。
破壊的な変更
storiesOf API、*.stories.mdxフォーマット、Storyshotsが削除されました。
Migration guide for Storybook 8.0 • Storybook docs
Rolldown
Viteの次世代バンドラとして開発されてきたRolldownが公開。Viteのバンドラが置き換わったわけではない。
https://github.com/rolldown/rolldown
Viteは内部的に2つのバンドラRollup、esbuildが利用されている。Rolldownは、これによる問題を解消するために作られているRollup互換のバンドラ。
JavaScript の新しいバンドラ Rolldown について
Biome v1.6
extendsプロパティで他の構成ファイルを解決できるようになった。Prettierから移行するスクリプトの追加など。
unplugin-parcel-macros
Parcelのmacroと同じことをwebpackやrollup、Vite、esbuildで出来るようにするプラグインです。
https://github.com/devongovett/unplugin-parcel-macros
マクロはバンドル時に実行される。
元はBunの機能。
Others
JSON Canvas
Obsidian CanvasのフォーマットがJSON Canvasと名付けられてオープンソースとして公開された。このフォーマットは解析が容易で、ユーザーにデータの所有権を与えるように設計されている。
Announcing JSON Canvas: an open file format for infinite canvas data
Astro Studio
<!— 他の人が詳しいと思うのでやらない —>
良い。TDDの考案者Kent BeckがTDDの定義を改めて明確化した文章をt-wadaさんが翻訳した記事。t-wadaさんの”翻訳してみて”を見てから、翻訳を見るとより理解しやすいかも。
Similarly, an id starting with a digit (E.g., 1234-322-678) or a hyphen followed by a digit (E.g., -123), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:
id - HTML: HyperText Markup Language | MDN
<!— 誰か話してた気がする —>
SameSite CookieにしてOriginヘッダーのチェック、 Sec-Fetch-* ヘッダーも有効
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
LeanとDevOpsの科学は、流し読みでも思ってたのと違うなと思えるので良いぞ。これは今井さんのスライド。
『LeanとDevOpsの科学』をきちんと解読する 〜Four Keys だけじゃ絶対もったいなくなる話〜
本読むの面倒であれば、この辺でも。
https://yigarashi.hatenablog.com/entry/2022/05/30/093000#Four-Keysの妥当性
https://engineering.visional.inc/blog/412/devops-days-tokyo-2022-after/
サバイバルTypeScript GPTs
React Compilerの講演をもとにした解説記事
Testに利用できるスクリーンリーダーのシミュレーターライブラリ
https://github.com/guidepup/virtual-screen-reader
CloudflareアプリケーションとReactサーバー コンポーネントもサポートする最速のJavascript Webサーバーらしい。FirefoxのエンジンであるSpiderMonkeyをベースにしている。
Deno、Node.js、Cloudflare Workersなどが参画する、非Webブラウザ系JavaScriptランタイムのコード互換を目指すWinterCG互換
面白そう。読んでない。