Svelte 5 アップデートに向けて行っていること

これは CAMPFIRE Advent Calendar 2024 の 14 日目の記事です。

CAMPFIRE ではフロントエンドフレームワークに Svelte を利用しています。
参考: https://note.com/tkhs0813/n/n93f7affdddd3

10 月に Svelte5 がリリースされたので、アップデートに向けて行っていることを書いてみます。

やっていること

レガシーモードでの動作確認

Svelte5 では Runes、Snippet など新しい機能がありますが、現時点ではレガシーモードを使用し、Svelte 4 までの構文で動作させています。
Runes モードとレガシーモードは共存できないため、以下の対応を行っています：

• compilerOptions の runes オプションを無効化。
• 必要なコンポーネントに <svelte:options runes={true} /> を設定し、段階的に移行。

また、レガシーモードで動作させた際、独自プリプロセッサで使用していた svelte/compiler#walk が非推奨となりエラーが発生しました。これを estree-walker に置き換えることで解消しています。
参考: https://svelte.dev/docs/svelte/svelte-compiler#walk

さらに、Svelte 5 では HTML 構造の厳格化に伴い、違反するコードがコンパイルエラーを引き起こすようになりました。このため該当箇所を修正しました。
参考: https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-HTML-structure-is-stricter

これらの対応を経て、アプリケーションの起動が確認できました。

Svelte Compiler の警告対応

レガシーモードでの動作は確認できたものの、Svelte Compiler から多数の警告が出力されていましたので修正します。
参考: https://svelte.dev/docs/svelte/compiler-warnings

一部コンポーネントの Rune モード移行

警告対応を進める中で、一部コンポーネントは Rune モードにする必要があったので移行しています。
このとき、Rune モードで Breaking Change のものがあったり、Slot を Snippet に書き換える必要があったりして修正ファイル数が膨らんでしまいましたが、Svelte VSCode Plugin のマイグレーション機能を活用し、そこまで時間をかけずに移行することができました
参考: https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode
参考: https://svelte.dev/docs/svelte/v5-migration-guide#Migration-script

やってみて感じたこと

• レガシーモードの有用性
  • Svelte4 までの構文もサポートしているため、大規模なコード修正を行わずに動作確認を行えた点はとても助かりました。
• マイグレーションツールが便利
  • 今回は使ってないですが、npx sv migrateで一括移行できたり、Svelte VSCode Plugin でファイル単位で Rune に書き換えてくれるのがとても便利でした。

日頃の取り組みが役立ったこと

• ライブラリ、Node.js の自動バージョンアップ
  • Renovate を活用し、毎週ライブラリや Node.js の自動アップデートを行っていたため、他ライブラリの古いバージョンが原因で移行が妨げられることがありませんでした。
• ライブラリの使用を最小限に抑える
  • 基本的に自作可能な部分は自作し、採用するライブラリについても可能な限り Svelte に依存しないものを選定していたため、移行作業がスムーズに進みました。

最後に

Svelte 5 リリース当初は多くの Issue が報告され、不安定感じがあったので現段階ではリリースを見送っています。
しかし、アップデートの見通しは立っているので近い将来 Svelte5 アップデートを行いたいと思っています。