Frontend Weekly 2024-05-31

Storybook 8.1#

2024 年 5 月 23 日に Storybook 8.1 がリリースされました。

Storybook 8.1

GUI 上から Story ファイルの自動生成する機能が追加されました。

What’s a story? • Storybook docs

Subpath imports を利用した型安全なモジュールモック機能が追加されました。

Mocking modules • Storybook docs

RSC のユニットテストがサポートされました。多数の Next.js モジュールのモックを作成することで対応されているようです。

https://github.com/storybookjs/storybook-rsc-demo/blob/main/app/note/edit/page.stories.tsx

実験的な機能として、Story をcomposeStories　を利用してポータブルストーリーに変換し、Playwright のテストを実行できる機能が入りました。これによりコンポーネントを個別にブラウザテスト出来るだけでなく、Playwright のテストコード生成機能など様々な恩恵を受けることが出来ます。

Portable stories for Playwright Component Tests

Portable stories in Playwright CT • Storybook docs

SolidStart v1.0#

2024 年 5 月 22 日、SolidStart の初メジャーリリースが行われました。SolidStart は、Vite ベースの SolidJS アプリを構築するためのフレームワークです。

SolidJS

React Conf 2024 Recap#

公式による React Conf 2024 の振り返り。

React Conf 2024 Recap – React

React Conf Follow-Up - Remix#

Remix による React Conf のフォローアップ記事。

React Router v7 は、Remix/React Router から破壊的な変更なしで移行可能であること。React 19 に対応していることなどについて触れられています。

Incremental Path to React 19: React Conf Follow-Up

明示的な型注釈によって推論コストを下げる#

現状 tsc の完全な代替は存在せず、Rust 製のツールでも tsc が大きなボトルネックになっていることに触れた上で、パフォーマンスを改善する手段としてユーザに明示的な型注釈を求めることで推論コストを下げるアプローチを紹介しています。

明示的な型注釈によって推論コストを下げるというアプローチ

これを実現する手法として、TypeScript 5.5 でサポート予定のisolatedDeclarations ****モジュールからエクスポートされる関数や変数に明示的な型注釈をつけることを強制するオプションなどが紹介されています。

1
// Function must have an explicit return type annotation with --isolatedDeclarations.(9007)
2
export const getRandomNum = () => Math.random() * 10; // ❌
3
// export const getRandomNum = (): number => Math.random() * 10; // ✅