Posted on 2019.03.11
Migrate storybook v4 to v5
Storybook v4.0からv5.0にアップデートした
Storybook v5がリリースされたので、v4からv5にアップデートした。
公式アナウンスのマイグレーション方法はこちら。
webpack.config.js
Storybookのwebpack.config.jsをfull-controll modeで使っている(functionをexportsするやつ)場合は、functionの引数をObjectに変更する必要がある。
- module.exports = (storybookBaseConfig, configType) => {
+ module.exports = ({config, mode}) => {
今までは第一引数、第二引数にStorybookから値が投げ込まれていたが、引数がObjectになったことで変数名(key名)が決め打ちになった。
storiesOfの第一引数に日本語が使えない
storiesOfの第一引数のサニタイズに使われている関数が追加され下記リンクのような実装になっているので、storiesOfの第一引数にA-Za-z0-9以外の文字が使えなくなった。
このサニタイズは、Storybookにカテゴリ名やストーリー名を登録する際に実行される。サニタイズの結果、カテゴリ名やストーリー名がカラになったときにエラーが返却されて登録が弾かれる。
実際にサニタイズを実行してみると、下記のような結果になる。
'ヘッドライン'
.toLowerCase()
.replace(/[^a-z0-9-]/g, '-')
.replace(/-+/g, '-')
.replace(/^-+/, '')
.replace(/-+$/, '') // ''
'headline ヘッドライン'
.toLowerCase()
.replace(/[^a-z0-9-]/g, '-')
.replace(/-+/g, '-')
.replace(/^-+/, '')
.replace(/-+$/, '') // 'headline'
頭に半角英数を入れればStorybookへの登録はできるが、サニタイズ後の名前が登録されてしまう。
そのため、icon: ログイン
やicon: ログアウト
を登録すると、両方ともicon
となるため最初に登録されたStoryしか有効にならない。
このサニタイズ部分を修正してテストを実行するといくつかのテストがコケたので、修正のPRを送るのには骨が折れそう。
ひとまずフォークしてぐちゃぐちゃコードをいじってみようと思う。
Tweet