Migration guide for Storybook 8.0

DonTacos

https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io

翻訳メモ

🩻 新しいビジュアルテストワークフローを提供する「Visual Tests」アドオン

  • 新しく導入された「Visual Tests」アドオンを使って、視覚的なテストワークフローを実行できるようになりました。

💨 テストビルドが2〜4倍速くなり、Reactのドキュメント生成が25〜50%速くなり、WebpackプロジェクトでSWCがサポートされました

  • テストビルドが2〜4倍速くなり、Reactのドキュメント生成が25〜50%速くなり、WebpackプロジェクトでSWCがサポートされました。これにより、プロジェクトのビルドと開発がよりスムーズに行えるようになります。

🧩 フレームワークのサポートが向上しました：非Reactレンダラーを使用する場合でも、Reactをピア依存関係としてインストールする必要がなくなりました

  • フレームワークのサポートが向上しました。非Reactレンダラーを使用する場合でも、Reactをピア依存関係としてインストールする必要がなくなりました。これにより、フレームワークの選択肢が広がり、より柔軟な開発が可能になります。

🎛️ ReactおよびVueプロジェクトでのコントロール生成の強化

  • ReactおよびVueプロジェクトでのコントロール生成の強化が行われました。これにより、プロジェクトのコントロールの生成が向上し、開発プロセスがより効率的になります。

⚡️Viteのアーキテクチャの改善、Vitestのテスト、およびVite 5のサポートが向上しました

  • Viteのアーキテクチャが改善され、Vitestのテスト、およびVite 5のサポートが向上しました。これにより、Viteを使用したプロジェクトのパフォーマンスと開発体験が向上します。

🌐 React Server Components（RSC）のサポート

  • React Server Components（RSC）のサポートが追加されました。この実験的な解決策により、ブラウザで非同期のRSCをレンダリングし、Nodeコードをモックできるようになります。

✨ 新しいデスクトップUIとモバイルUX

  • 新しいデスクトップUIとモバイルUXがリフレッシュされました。これにより、ユーザーインターフェースがより洗練され、ユーザーエクスペリエンスが向上します。

Major breaking changes

このガイドの残りの部分は、自動的にまたは手動で正常にアップグレードできるように支援します。ただし、まず、Storybook 8 でいくつかの破壊的な変更があります。さらに進む前に、以下の最も影響の大きい変更について知っておくべきことがあります。

  • storiesOf APIが削除されました。

  • *.stories.mdx形式が削除されました。

  • レンダリング中に暗黙のアクション（argTypesRegexからのもの）を使用することはできなくなりました（たとえば、play関数内で）。

  • コンポーネント解析のデフォルトには、react-docgen（react-docgen-typescriptの代わりに）が使用されます。

  • Storyshotsが削除されました。

  • Storybook 7で導入されたアドオンAPIが必須となりました。

  • エコシステムのアップデート

    • Node 18以上が必要です。

    • Next.js 13.5以上が必要です。

    • Vue 3以上が必要です。

    • Angular 15以上が必要です。

    • Svelte 4以上が必要です。

  • Yarn 1はサポートされなくなりました。

以下の変更がプロジェクトに適用される場合は、続行する前にリンクされた移行ノートをお読みください。

これらの新しい要件や変更のいずれかがプロジェクトにとってブロッカーである場合、Storybook 7.x の使用をお勧めします。

移行する前に完全な移行ノートを読んでいただくことをお勧めします。または、以下の手順に従っていただければ、私たちがすべてを対応しますので、読んでみてください！

╭ Migration check ran successfully ───────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                     │
│   Successful migrations:                                                                                                            │
│                                                                                                                                     │
│   sb-scripts, remove-jest-testing-library, autodocsTrue, upgradeStorybookRelatedDependencies                                        │
│                                                                                                                                     │
│   Manual migrations:                                                                                                                │
│                                                                                                                                     │
│   remove-argtypes-regex                                                                                                             │
│                                                                                                                                     │
│   ─────────────────────────────────────────────────                                                                                 │
│                                                                                                                                     │
│   If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                              │
│                                                                                                                                     │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the      │
│   latest version of Storybook.                                                                                                      │
│                                                                                                                                     │
│   Please check the changelog and migration guide for manual migrations and more information:                                        │
│   https://storybook.js.org/docs/8.0/migration-guide                                                                                 │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                           │
│                                                                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

この記事が気に入ったらサポートをしてみませんか？