実行環境

ライブラリ	バージョン
SvelteKit	1.0.0-next.121
storybook-builder-vite	0.0.10
@storybook/svelte	6.4.0-alpha.11

インストール

npx sb@next init --builder storybook-builder-vite

SvelteKitがviteでバンドルされているので、Storybookもviteでバンドルされるものを使用する。

これを実行すると

.storybook
src/stories

が生成される

SvelteKitで動くようにする

SvelteKitプロジェクトではpackage.jsonに"type": "module"が設定されているので、このままでは動かない。

拡張子の変更

.storybook/main.js → .storybook/main.cjs
.storybook/preview.js → .storybook/preview.cjs

ESMファイルに対してrequireは出来ないのでコメントアウトする。

Storybook内でsvelte.configを読んでる?

// .storybook/main.cjs

svelteOptions: {
	//"preprocess": require("../svelte.config.js").preprocess
}

aliasを設定する

import Hoge from "$lib/Hoge.svelteのようなコードが動かないのでaliasを設定する。
$appは以下のような設定をするとdevサーバ起動時にエラーは起こらなくなったが、ランタイムでエラーが発生してしまった。
回避策が思いつかなかったので一旦放置で

// .storybook/main.cjsに追加

async viteFinal(config, { configType }) {
	const { resolve } = await import('path');
	// customize the Vite config here
	config.resolve.alias = {
		$lib: resolve('src/lib'),
		$app: resolve('node_modules/@sveltejs/kit/assets/runtime/app')
	};
	// return the customized config
	return config;
}

参考

https://github.com/sveltejs/kit/issues/1485
https://github.com/storybookjs/storybook/issues/14929

タグ: SvelteKit

SvelteKitでVitestを使う

SvelteKitのプロジェクトにStoryBookを導入した

SvelteKitでMarkdownブログを作った