What's new in Svelte: 2021年6月
SvelteKit 1.0に向けた進捗と language tools における TypeScript/Svelte 統合の強化
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-june-2021日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
今月は、SvelteKit とそのドキュメントに多くの貢献がありました。language tools にもいくつか新機能が追加され、特に注目すべきは JavaScript または TypeScript ファイルと Svelte ファイルの深い統合です。それではアップデートに参りましょう…
New in SvelteKitpermalink
svelte.config.js
コンフィグファイルが ESM フォーマットでロードされるようになりました (.cjs
ではなく.js
).- AMP ページでレンダリングされた CSS が使われるようになります
svelte-check
が TypeScript テンプレートに追加されました (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
ページの末尾にスラッシュをつけることを前提とした静的ホスティングプロバイダで動作するサイトの構築が簡単になり、より複雑な動作を必要とする人向けのエスケープハッチが提供されることになります。
Notable bug fixes in SvelteKitpermalink
adapter-netlify
が sveltejs/kit#1467 で修正され、readme に新しいドキュメントが作成されました。- アプリが所有していないURLのナビゲーションをルーターがインターセプトしなくなりました。これにより、同じオリジンでベースパスを共有していない
<a>
要素をページに持つアプリのクラッシュが修正されました。 - ハッシュのみの変更がルーターによって処理されるようになり、ある状況でハッシュ変更中にブラウザの"戻る"ナビゲーションが実行されてしまうことが修正されました。
New in Svelte & Language Toolspermalink
- Svelte 3.38.1 と 3.38.2 ではハイドレーションで要素の重複が発生する問題が修正されました。もしこの問題が発生している場合は最新のバージョンにアップデートしてください!
- 新しい TypeScriptプラグインは、JavaScriptやTypeScriptファイルとSvelteファイルのより深い統合を提供します。これには変数の診断、参照、名前変更などが含まれます。このプラグインは VS Code extension にパッケージされていますが、現在はデフォルトでオフになっています。こちらの設定で有効にすることができます。是非お試しいただき、フィードバックをお寄せください
- 最新バージョンの
svelte-check
はtsconfig.json
やjsconfig.json
のパスを指定できるようになりました。例:svelte-check --tsconfig "./tsconfig.json"
。 これにより、そのコンフィグで参照されているファイルに対してのみ診断が行われます。また、JavaScriptやTypeScriptのファイルに対しても診断が実行されるため、Svelte 以外のファイルに対して (tsc --noEmit
のような) 別のチェックを実行する必要がなくなります (svelte-check
version 1.6.0) - VS Code extension と
svelte-check
が新しくメジャーリリースされました。以前は、イニシャライザを持たないプロパティ (export let foo;
) は、ユーザが TypeScript を使用していて、かつstrict
モードを有効にしている場合にのみ必須とされました。これが変更されました。TypeScriptを使用している場合や、JavaScriptでもcheckJs
を使用している場合は、これらのプロパティが常に必須としてマークされるようになりました (svelte-check
version 2.0.0, extension version 105.0.0)
Community Showcasepermalink
Apps & Sites
- vidu はミニマルな Web アナリティクスコレクターとダッシュボードです
- River Runner は川の流れを仮想的に追うことができ、 Mapbox と Svelte で構築されています。
- JSDoc Type Generator は有効なJSONの JSDoc 型定義を生成します。
- pagereview.io は Webサイトのフィードバックツールで、レビューするサイトに直接コメントを残すことができます。
- gamesroom.io はビデオチャットが組み込まれているオンラインボードゲームプラットフォームです。
- Greedy Goblin はオールドスクールな Runescape プレイヤーのためのレシピアプリです。
- hashbrown.geopjr.dev は GNOME-shell にインスパイアされたWebページで、ソースコードについて学んだり、調べたり、Hashbrown GTK アプリをダウンロードすることができます (ソースのリンク)。
Libraries, Tools & Components
- svelte-image-crop は、Web APIを利用したシンプルなクリック&ドラッグ式の画像切り抜きライブラリです。
- svelte-datepicker は、Svelteで構築された軽量で包括的な date picker です。
- svelte-regex-router は、Svelteアプリケーションでルーティングを簡単に扱うための、シンプルで軽量なライブラリです。
- Svelte Micro は、Svelte向けの軽量かつリアクティブな単一コンポーネントルーターです。
- svelte-entity-store は、エンティティオブジェクトのコレクションを保存するためのシンプルで汎用的なソリューションを提供します。
- svelte-animation-store は、Svelteのトゥイーンストアをベースにしたストアで、トゥイーンの一時停止、継続、リセット、リプレイ、リバース、スピード調整などを行うことができます。
あなたが作成したコンポーネントをコントリビュートしたいですか? あなたが作成したコンポーネントを Svelte Society のサイトから提出して頂ければ、パッケージのリストに追加することができます。
See you next month!permalink
なにかご意見がありますか? Svelte Society、Reddit、Discordにジョインしてください!