Svelte の最新情報: 2021年6月

今月、SvelteKit とそのドキュメントに多くの貢献がありました。言語ツールにもいくつかの新機能が追加され、特に JavaScript または TypeScript ファイル内の Svelte ファイルとのより深い統合が実現しました。アップデートの内容を見ていきましょう...

SvelteKit の新機能

• svelte.config.js 設定ファイルは、ESM 形式（.cjs の代わりに .js）でロードされるようになりました。
• AMP ページは、出力された CSS ではなく、レンダリングされた CSS を使用するようになりました。
• TypeScript テンプレートに svelte-check が追加されました (sveltejs/kit#1556)
• https 鍵ペアのサポートが追加されました sveltejs/kit#1456
• SvelteKit に Vite をバンドルし、アップグレードされたバージョンを使用するようになりました。package.json に Vite がある場合は削除してください。
• バイナリレスポンスの Etag が追加されました sveltejs/kit#1382
• $layout は __layout に、$error は __error に名前が変更されました。
• getContext は request.locals に置き換えられました。
• .svelte 出力ディレクトリの名前が .svelte-kit に変更されました。それに応じて .gitignore を更新してください。
• 設定で trailingSlash: 'never' | 'always' | 'ignore' が使用できるようになりました。これにより、index.html ページの末尾にスラッシュが必要な静的ホスティングプロバイダーで動作するサイトを構築しやすくなり、より複雑な動作が必要なユーザーのための回避策が提供されます。

SvelteKit の主なバグ修正

• adapter-netlify の修正が行われ sveltejs/kit#1467、README に新しいドキュメントが追加されました https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
• ルーターは、アプリが所有していない URL のナビゲーションをインターセプトしなくなりました。これにより、アプリと同じオリジンを持つが、アプリとベースパスを共有しない <a> 要素がページ上にある場合のクラッシュが修正されます。
• ハッシュのみの変更は、特定の状況下でのハッシュ変更間のブラウザの「戻る」ナビゲーションを修正するルーターによって処理されるようになりました。

Svelte と言語ツールの新機能

• Svelte 3.38.1 と 3.38.2 では、要素の重複を引き起こしていたハイドレーションの問題が修正されました。プロジェクトでこの問題が発生している場合は、最新バージョンに更新してください。
• 新しい TypeScript プラグインは、JavaScript または TypeScript ファイル内の Svelte ファイルとのより深い統合を提供します。これには、変数の診断、参照、名前変更が含まれます。VS Code 拡張機能にパッケージされていますが、現在はデフォルトでオフになっています。この設定 で有効にすることができます。テストしてフィードバックを提供することをお勧めします。
• 最新バージョンの svelte-check では、tsconfig.json または jsconfig.json へのパスを指定できるようになりました。例: svelte-check --tsconfig "./tsconfig.json"。これにより、診断はその設定で参照されているファイルに対してのみ実行されます。また、JavaScript および/または TypeScript ファイルの診断を実行するため、Svelte 以外のファイルに対して別のチェック（tsc --noEmit など）を実行する必要がなくなります（svelte-check バージョン 1.6.0）
• VS Code 拡張機能と svelte-check のメジャーリリースが行われました。以前は、初期化子を持たないプロパティ（export let foo;）は、ユーザーが TypeScript を使用していて、strict モードを有効にしている場合にのみ必須でした。これは変更されました。TypeScript を使用しているユーザー、および JavaScript ファイルで checkJs を使用しているユーザーは、これらのプロパティが常に必須としてマークされます（svelte-check バージョン 2.0.0、拡張機能バージョン 105.0.0）

---

コミュニティショーケース

アプリとサイト

• vidu は、最小限の Web 分析コレクターとダッシュボードです。
• River Runner は、Mapbox と Svelte で構築された、川を下流に仮想的にたどることができるツールです。
• JSDoc Type Generator は、有効な JSON の JSDoc タイプを生成します。
• pagereview.io は、レビュー対象のサイトに直接コメントを残すことができる Web サイトフィードバックツールです。
• gamesroom.io は、ビデオチャットを内蔵したオンラインボードゲームプラットフォームです。
• Greedy Goblin は、昔ながらの Runescape プレイヤー向けのレシピアプリです。
• hashbrown.geopjr.dev は、GNOME シェルにインスパイアされた Web ページで、Hashbrown GTK アプリについて学び、ソースコードを探索し、ダウンロードできます（ソースへのリンク）。

ライブラリ、ツール、コンポーネント

• svelte-image-crop は、Web API を使用したシンプルなクリックアンドドラッグ画像トリミングライブラリです。
• svelte-datepicker は、Svelte で構築された軽量で包括的な日付ピッカーです。
• svelte-regex-router は、Svelte アプリケーションでルートを簡単に処理できるシンプルで軽量なライブラリです。
• Svelte Micro は、Svelte 用の軽量でリアクティブな単一コンポーネントルーターです。
• svelte-entity-store は、エンティティオブジェクトのコレクションを格納するためのシンプルで汎用的なソリューションを提供します。
• svelte-animation-store は、Svelte の tweened ストアに基づくストアで、トゥイーンの一時停止、続行、リセット、再生、逆再生、速度調整ができます。

コンポーネントを提供したいですか？ 独自のコンポーネントを提出して、Svelte Society サイトのパッケージリストに追加してください。

来月もお会いしましょう！

何か見逃しましたか？Svelte Society、Reddit、Discord に参加してください！