Svelte 4 リリースのお知らせ

数ヶ月にわたる開発を経て、Svelte 4 の安定版リリースを発表できることを嬉しく思います。

Svelte 3 のリリースから4年以上が経ちました。JavaScript フレームワークの世界では、これは非常に長い期間です。Svelte はその新鮮さを保ってきましたが、Node.js とブラウザ API はその間に進化しました。今回のアップデートでは、これらの改善点を活用するために Svelte を更新しました。Svelte 4 は主にメンテナンスリリースであり、最低限のバージョン要件を引き上げ、特定の領域のデザインを強化しています。これは、次世代の Svelte である Svelte 5 のリリースに向けた準備となります。きっと気に入っていただけると思います。

まだ Svelte を試したことがない方は、インタラクティブチュートリアル、StackBlitz、またはローカルで npm create svelte@latest を使用して試してみてください。Svelte を使用すると、HTML、CSS、JS、そして Svelte コンパイラの力を活用して、Web UI を簡単に構築できます。このリリースの詳細については、Svelte Radio Live をご覧ください。

新機能

パフォーマンス

このリリースにより、ハイドレーションコードがより小さく、より高速になりました。その影響を確認するために、SvelteKit ユーザーは .svelte-kit/output/client/_app/immutable/nodes フォルダを調べて、コンパイルされた出力のサイズが縮小されていることを確認できます。たとえば、kit.svelte.dev では、サイト全体で生成される JS のサイズが 12.7% (126.3 kB から 110.2 kB) 削減されました。

Svelte 4 は Svelte パッケージのサイズを約 75% (10.6 MB から 2.8 MB) 削減します。これは、npm install の待ち時間が短縮されることを意味します。インタラクティブな学習体験を初めて利用するユーザー、Svelte REPL のユーザー、接続が制限されているユーザーにとって、この改善は特に顕著です。パッケージサイズの残りの大部分は eslint サポートであり、CJS ビルドの配布が必要ですが、eslint の書き換えが完了すると、Svelte パッケージのサイズはさらに 50% 以上削減できます。

Svelte の依存関係の数は 61 から 16 に大幅に削減されました。これは、ユーザーにとってダウンロードが高速になるだけでなく、サプライチェーン攻撃の影響を受けにくくなることを意味します。また、最新バージョンの SvelteKit でも依存関係の数をわずかに削減しました。

開発者エクスペリエンス

Svelte 4 は、Svelte のオーサリングエクスペリエンスをより直感的で一貫性のあるものにします。アニメーションがページ遷移をブロックするのを避けるために、トランジションのデフォルトが |local になりました。プリプロセッサの作成が容易になり、CSP の設定と使用が容易になる複数の修正が行われました。

Web コンポーネントのユーザーにとって、最大の変更点は、Svelte を使用してカスタム要素を作成する方法の全面的な見直しです。生成方法を変更することで、あらゆる種類のバグや不整合が解消されました。

最後に、IDE オーサリングエクスペリエンスの改善も行いました。svelte モジュールで cmd+クリックすると、.d.ts ファイルではなく実装に移動します。svelte/internal からのインポートは非表示になり、オートコンプリートの候補が煩雑になることはありません。自動インポートがより確実に機能するようになりました。

サイト、ドキュメント、チュートリアルの更新

公式の svelte.dev サイトが刷新されました。モバイルナビゲーションの改善、TypeScript ドキュメントの全面的な見直し、ダークモード、REPL の強化など、複数のページに分割されました。SvelteKit サイトも同様に更新されています。また、すべてのチュートリアルリンクを新しい チュートリアル エクスペリエンスを指すように更新しました。

今後数日中に、サイトの変更点に関する詳細なブログ記事を公開する予定です。

移行

Svelte 3 と互換性のあるほとんどのアプリとライブラリは、Svelte 4 と互換性があるはずです。ライブラリの作者は、peerDependencies に svelte が指定されている場合、Svelte 4 を含むようにバージョン範囲を更新する必要があります。アプリケーションの作成者にとって、最も一般的な変更は、Node.js 16 などの新しい最小バージョン要件を満たすようにツールを更新することです。その他の多くの移行手順は、npx svelte-migrate@latest svelte-4 で処理できます。

詳細は移行ガイドをご覧ください。

Svelte 5: 次世代の Svelte

Svelte 5 は、Svelte コンパイラとランタイムの書き換えとなります。Svelte 4 は主に、最新のツールを採用し、古いバンドラーなど、さまざまなテクノロジーのレガシーバージョンのサポートを終了することで、これらの将来の改善のための基盤を築くことに重点を置いていました。これらの変更は、Svelte 5 と Svelte 4 のコードベースをより簡単に比較したり、既存のテストを新しい実装に対して実行したりできるようになるなど、さまざまな点で役立ちます。Svelte 5 は、Svelte に主要な新機能とパフォーマンスの向上をもたらします。変更はまだ準備段階であり、まだ共有できる状態ではありませんが、乞うご期待ください。

変更履歴

変更点の完全なリストは、変更履歴をご覧ください。

謝辞

まず第一に、このリリースを可能にしてくれた多くの Svelte メンテナーとコントリビューターの皆様に感謝いたします。このリリースに複数の PR を提供してくれた開発者は、@dummdidumm、@gtm-nayan、@benmccann、@tanhauhau、@Karlinator、@ngtr6788 です。また、Svelte OpenCollective に寄付してくれた多くのコミュニティメンバーにも感謝いたします。これらの寄付は、PuruVJ が行ったサイトのオーバーホールと、@gtm-nayan による最近の修正のいくつかを支援しました。

最後に、このリリースの準備に協力してくれたエコシステム全体のさまざまなライブラリメンテナーに感謝いたします。aria-query と axobject-query の新しいバージョンのリリースにご協力いただいた @jessebeach、Storybook との互換性を確保してくれた @jreinhold、svelte-testing-library を更新してくれた @yanick に感謝いたします。また、@dominikg によって設定された svelte-ecosystem-ci (Vite での同様の作業をモデルにしたもの) は、エコシステムの主要プロジェクトに対して継続的にテストを行うのに役立っています。