Svelte 4 発表

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

光陰矢の如し - Svelte 3 がリリースされたのはもう4年以上前です！ JavaScript フレームワークの時間としては、それは大昔のことです。Svelte のフレッシュさはずっと保たれたままでしたが、その間に Node.js と ブラウザの API は進化しており、その改善点を取り入れるため、今日、私たちは Svelte を更新します。Svelte 4 は主にメンテナンスリリースであり、要求される最小バージョンを上げ、特定エリアの設計を強化しました。これは、次世代の Svelte、つまり Svelte 5 のための基盤となります - きっとあなたにも気に入って頂けると思います。

If you haven’t tried Svelte yet, take it for a spin in our interactive tutorial, on StackBlitz, or locally with npm create svelte@latest. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch Svelte Radio Live to learn more about this release.

What’s new

Performance

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

Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.

Svelte の dependencies の数は 61 から 16 に大幅に削減されました。つまり、ユーザーにとってはダウンロードが速くなるとともに、サプライチェーンアタックのリスクも低くなったということです。SvelteKit の最新バージョンでも、dependencies の数を少し減らせました。

Developer experience

Svelte 4 では Svelte でのオーサリング・エクスペリエンスが、より一貫性があり直感的になりました: トランジションでは |local がデフォルトとなったことでアニメーションがページトランジションをブロックしないようになり、プリプロセッサは書くのがより簡単になり、またいくつかの修正によって CSP の設定と使用が簡単になりました。

web components のユーザーにとって、最も大きい変更点は Svelte で custom elements を作成する方法がオーバーホールされたことでしょう。生成方法が変わったことにより、あらゆるバグや不整合が取り除かれました。

最後に、IDE のオーサリングエクスペリエンスの改善もいくつか行いました:

• svelte モジュールで cmd+click すると、.d.ts ファイルではなく実装に移動するようになりました
• svelte/internal からのインポートが非表示になり、オートコンプリート候補がきれいになりました
• auto-imports がより確実に動作するようになりました

Updated site, docs, and tutorial

The official svelte.dev site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new tutorial experience.

近日、サイトの全ての変更点についてより詳細なブログ記事を掲載しますので、乞うご期待！

Migrating

Svelte 3 と互換性のあるアプリやライブラリのほとんどは、Svelte 4 にも互換性があるでしょう。ライブラリの作者の方は、もし peerDependencies に svelte が指定されている場合は version range に Svelte 4 を含めるように更新する必要があります。アプリケーションの作者の方は、新しくなった最小バージョンの要求 (Node.js 16 など) を満たすようにツールを更新する必要があるでしょう。その他多くの移行ステップは、npx svelte-migrate@latest svelte-4 で処理できます。

完全な詳細についてはマイグレーションガイドをお読みください。

Svelte 5: the next generation of Svelte

Svelte 5 では Svelte コンパイラとランタイムの書き換えを行う予定です。Svelte 4 の主な目的は、古いバンドラーなの様々なテクノロジーのレガシーバージョンをドロップし、モダンなツールを取り入れ、将来の改善のための土台を整えることでした。これらの変更により、Svelte 5 と Svelte 4 のコードベースを比較するのが簡単になり、新しい実装に対して既存のテストを実行することができるようになり、様々なことが便利になります。Svelte 5 では、大きい新機能とパフォーマンスの改善を予定しています。変更についてはまだ作成中で、まだ共有できる段階ではありませんが、ご期待ください！

Changelog

変更点の完全なリストについては changelog をご参照ください。

Acknowledgements

何よりもまず、このリリースを可能にしてくれた Svelte のメンテナー、コントリビューターの皆さまに感謝したいと思います。このリリースに対する複数の PR をコントリビュートしてくれた開発者は @dummdidumm、@gtm-nayan、@benmccann、@tanhauhau、@Karlinator、@ngtr6788 です。また、the Svelte OpenCollective に寄付してくれたコミュニティメンバーにも感謝したいと思います。この寄付で、PuruVJ によるサイトのオーバーホールと、@gtm-nayan の多数の修正をスポンサーすることができました。

最後に、このリリースの準備を助けてくれたエコシステムの多くのライブラリメンテナーにも感謝します。新しいバージョンの aria-query や axobject-query のリリースを助けてくれた @jessebeach、Storybook との互換性を確保してくれた @jreinhold、svelte-testing-library をアップデートしてくれた @yanick、ありがとうございました。また、様々なものが動作していることを確認するために、@dominikg がセットアップしてくれた svelte-ecosystem-ci は、彼が Vite のために行ってくれた同様の作業をモデルにしており、エコシステム内の主要なプロジェクトに対するテストを継続的に支援しています。