Zenn
Open7

npm create svelte + svelte-add tailwindcss + npx storybook + ...

Storybook
Tailwind CSS
Svelte
SvelteKit
melt
ciscornciscorn

各種の公式 (or 準公式) ツールで SvleteKit のプロジェクト周りをセットアップして、それによって追加されるファイルを見てみる。

以下をセットアップする：

  • SvelteKit
  • Tailwind CSS
  • Storybook
  • shadcn-svelte
  • Melt UI
  • Sentry
ciscornciscorn

SvelteKit

create-svelte を実行：

npm create svelte@latest

選択肢では以下を選んだ：

  • template: Skeleton project
  • TypeScript
  • ESLint, Prettier, Vitest, Playwright, Svelte 4 or 5

git-status-tree を使ってファイルの増減を表示：

❯ git tree
.
├── src
│   ├── lib
│   │   └── index.ts (A+)
│   ├── routes
│   │   └── +page.svelte (A+)
│   ├── app.d.ts (A+)
│   ├── app.html (A+)
│   └── index.test.ts (A+)
├── static
│   └── favicon.png (A+)
├── .gitignore (A+)
├── .npmrc (A+)
├── .prettierignore (A+)
├── .prettierrc (A+)
├── README.md (A+)
├── eslint.config.js (A+)
├── package.json (A+)
├── package-lock.json (A+)
├── svelte.config.js (A+)
├── tsconfig.json (A+)
└── vite.config.ts (A+)
ciscornciscorn

Tailwind CSS

svelte-addを使ってTailwind CSSを自動でセットアップする；

❯ npx @svelte-add/tailwindcss@latest --typography true

追加・変更されるファイル：

❯ git tree
.
├── src
│   ├── routes
│   │   └── +layout.svelte (A+)
│   └── app.css (A+)
├── .prettierrc (M+)
├── package-lock.json (M+)
├── package.json (M+)
├── postcss.config.js (A+)
└── tailwind.config.ts (A+)

基本的に https://tailwindcss.com/docs/guides/sveltekit に書かれている最小限の設定が行われる。余計なことはされない。

ほかに Prettier 用の公式プラグイン prettier-plugin-tailwindcss が追加されるだけ。

追加されたパッケージ：

    "@tailwindcss/typography": "^0.5.13",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "prettier-plugin-tailwindcss": "^0.6.4",
    "tailwindcss": "^3.4.4",
ciscornciscorn

Storybook

なんとなく Storybook も入れてみる：

https://storybook.js.org/docs/get-started/frameworks/sveltekit

Storybook の公式ツールを使ってセットアップする：

❯ npx storybook@latest init

（storybook@latest init が動かないときは少しバージョンを下げるとよい。その後にパッケージのバージョンを上げる。）

使っているフレームワークが自動で検出されて、SvelteKit 用の構成がなされる。

❯ git tree
.
├── .storybook
│   ├── main.ts (A+)
│   └── preview.ts (A+)
├── src
│   └── stories
│       ├── assets
│       │   ├── accessibility.png (A+)
│       │   ├── accessibility.svg (A+)
│       │   ├── addon-library.png (A+)
│       │   ├── assets.png (A+)
│       │   ├── avif-test-image.avif (A+)
│       │   ├── context.png (A+)
│       │   ├── discord.svg (A+)
│       │   ├── docs.png (A+)
│       │   ├── figma-plugin.png (A+)
│       │   ├── github.svg (A+)
│       │   ├── share.png (A+)
│       │   ├── styling.png (A+)
│       │   ├── testing.png (A+)
│       │   ├── theming.png (A+)
│       │   ├── tutorials.svg (A+)
│       │   └── youtube.svg (A+)
│       ├── Button.stories.ts (A+)
│       ├── Button.svelte (A+)
│       ├── Configure.mdx (A+)
│       ├── Header.stories.ts (A+)
│       ├── Header.svelte (A+)
│       ├── Page.stories.ts (A+)
│       ├── Page.svelte (A+)
│       ├── button.css (A+)
│       ├── header.css (A+)
│       └── page.css (A+)
├── .gitignore (M+)
├── package-lock.json (M+)
└── package.json (M+)
  • ./stories/ 以下のファイルは、ただのサンプルファイル。
  • *.stories.svelte ファイルで Story を書けるようにする storybookjs/addon-svelte-csf もあるが、ここでは導入されない（今回追加されるサンプルは *.stories.ts で記述するスタイルになっている）。CSFが必要なら自分でインストールする。

追加されたパッケージ：

    "@chromatic-com/storybook": "^1.6.1",
    "@storybook/addon-essentials": "^8.1.11",
    "@storybook/addon-interactions": "^8.1.11",
    "@storybook/addon-links": "^8.1.11",
    "@storybook/blocks": "^8.1.11",
    "@storybook/svelte": "^8.1.11",
    "@storybook/sveltekit": "^8.1.11",
    "@storybook/test": "^8.1.11",
    "eslint-plugin-storybook": "^0.8.0",
    "storybook": "^8.1.11",
ciscornciscorn

shadcn-svelte

Tailwind CSS と Bits UI（ヘッドレスコンポーネント powered by Melt UI）をもとにした、できあいのコンポーネント集。それを手軽に導入するCLIツールが付属しているのがミソ。

https://www.shadcn-svelte.com/docs/installation/sveltekit

以下を実行：

npx shadcn-svelte@latest init

追加・変更されるファイル：

├── src
│   ├── lib
│   │   └── utils.ts (A+)
│   └── app.css (M+)
├── components.json (A+)
├── package-lock.json (M+)
├── package.json (M+)
└── tailwind.config.ts (M+)

追加されるパッケージ：

  "dependencies": {
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.4.0",
    "tailwind-variants": "^0.2.1"
  }

適当に Buttonを追加してみる

npx shadcn-svelte@latest add button

├── src
│   └── lib
│       └── components
│           └── ui
│               └── button
│                   ├── button.svelte (A+)
│                   └── index.ts (A+)
├── package-lock.json (M+)
└── package.json (M+)

追加されたパッケージ：

  "dependencies": {
    "bits-ui": "^0.21.12",

Bits UI + Tailwind CSS をうまく使って書かれたコンポーネントが配置されるほか、Bits UIやその他の依存ライブラリが自動で追加される。

https://www.bits-ui.com/docs/introduction

ciscornciscorn

Melt UI

Bits UI の基盤である Melt UI も入れてみる。

https://melt-ui.com/

以下を実行：

❯ npx @melt-ui/cli@latest init

追加されたパッケージ：

    "@melt-ui/pp": "^0.3.2",
    "@melt-ui/svelte": "^0.83.0",

svelte.config.js に Melt UI のプリプロセッサが追加される：

svelte.config.js
    preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
ciscornciscorn

Sentry

https://docs.sentry.io/platforms/javascript/guides/sveltekit/

npx @sentry/wizard@latest -i sveltekit

dsn と environment は、環境変数と mode で渡すようにしておく：

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.MODE,

ソースマップ送信用の authToken は環境変数 SENTRY_AUTH_TOKEN で渡すようにしておく：

vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { sentrySvelteKit } from "@sentry/sveltekit";

export default {
  plugins: [
    sentrySvelteKit({
      sourceMapsUploadOptions: {
        org: "<org>",
        project: "<project>",
        authToken: process.env.SENTRY_AUTH_TOKEN,

GitHub Actions のワークフローはこんな感じか：

        run: npm run build -- --mode ${{ env.MODE }}
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          VITE_SENTRY_DSN: ...