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 ****モジュールからエクスポートされる関数や変数に明示的な型注釈をつけることを強制するオプションなどが紹介されています。

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

tscの代替実装は難しい。機能だけでなくtsc自体のパフォーマンス改善に追い付かないといけない。TypeScriptのエコシステムでは、代替実装ではない別のアプローチが模索されている。

tsc の代替実装は作れるのか - mizdra’s blog

Hidden vs. Disabled In UX

ユーザーが利用できない機能を無効にするべきか非表示にするべきか。

Hidden vs. Disabled In UX — Smashing Magazine

どちらを使うべきかに次のロードマップを提示している。

特定のユーザーはこの要素を操作できるようになりますか? はい → 無効化すべき いいえ → 非表示すべき

インジケーター、バリデーション、通知：適切な伝達手段の選択

ユーザーへの情報の伝達方法としてインジケーターとバリデーション、通知の比較。

インジケーター、バリデーション、通知： 適切な伝達手段の選択

次のようにまとめている。

• インジケーター：動的なコンテンツやUI要素に関する補足情報を提供する。インジケーターは条件つきの伝達手段であり、特定の条件下で表示されたり変化したりする。
• バリデーション：ユーザーの行動や入力に密接な関連がある。
• 通知：システム関連のイベントを対象とする。

Rethinking Text Resizing on Web - Airbnb

フォントズームを考慮して、remを優先して使う意思決定をした話。デザイナー・エンジニアがスムーズに移行できるために、どちらにもpxを自動的にremに変換する機能を提供した。コントロールが難しいMobile Safariへの対応もされている。

Rethinking Text Resizing on Web

Others

City In A Bottle – A 256 Byte Raycasting System

HTMLの表示をMarkdownにする遊び。擬似要素を多用して実現しようとしている。img要素が画像が指定されていない表示になってしまっている点以外は実現できていそう。display:contentsなどを指定するとこれも回避できる。

CSS を使って HTML を Markdown に復元してみよう！