SvelteKitとの併用

SvelteKitプロジェクトでFSDを実装することは可能ですが、SvelteKitのプロジェクト構造要件とFSDの原則の違いにより、以下の2点でコンフリクトが発生してしまいます。

• SvelteKitはsrc/routesフォルダー内でファイル構造を作成することを提案しているが、FSDではルーティングはapp層の一部である必要がある
• SvelteKitは、ルーティングに関係のないすべてのものをsrc/libフォルダーに入れることを提案している

コンフィグファイルの設定

svelte.config.ts

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config}*/
const config = {
  preprocess: [vitePreprocess()],
  kit: {
    adapter: adapter(),
    files: {
      routes: 'src/app/routes', // ルーティングをapp層内に移動
      lib: 'src',
      appTemplate: 'src/app/index.html', // アプリケーションのエントリーポイントをapp層内に移動
      assets: 'public'
    },
    alias: {
        '@/*': 'src/*' // srcディレクトリのエイリアスを作成
    }
  }
};
export default config;

src/app内へのファイルルーティングの移動

app層を作成し、アプリケーションのエントリーポイントであるindex.htmlを移動し、routesフォルダーを作成します。 最終的にファイル構造は次のようになります。

• ディレクトリsrc/

  • ディレクトリapp/

    • index.html
    • ディレクトリroutes/

      • …
  • ディレクトリpages/ FSDに割り当てられたpagesフォルダー

    • …

これで、app内にページのルートを作成したり、pagesからのページをルートに接続したりできます。

例えば、プロジェクトにホームページを追加するには、次の手順を実行します。

• pages層内にホームページスライスを追加する
• app層のroutesフォルダーに対応するルートを追加する
• スライスのページとルートを統合する

ホームページスライスを作成するには、CLIを使用します。

fsd pages home

uiセグメント内にhome-page.svelteファイルを作成し、公開APIを介してアクセスできるようにします。　

src/pages/home/index.ts

export { default as HomePage } from './ui/home-page.svelte';

このページのルートをapp層内に作成します。

• ディレクトリsrc/

  • ディレクトリapp/

    • ディレクトリroutes/

      • +page.svelte
    • index.html
  • ディレクトリpages/

    • ディレクトリhome/

      • ディレクトリui/

        • home-page.svelte
      • index.ts

最後に+page.svelteファイル内にページコンポーネントを追加します。

src/app/routes/+page.svelte

<script>
  import { HomePage } from '@/pages/home';
</script>


<HomePage/>

参照

• SvelteKitのディレクトリ設定変更に関するドキュメント