Svelte の最新情報: 2022 年 9 月

SvelteKit の新しいファイルシステムベースのルーターへの移行

Dani Sandoval 2022 年 9 月 1 日

今月何か予定をお探しですか？ストックホルムで開催される Svelte Summit のチケットを入手できる最後のチャンスです！9 月 8 日～9 日にぜひご参加ください 🎉

SvelteKit のファイルシステムベースのルーターの再設計が先月上旬にマージされたことに伴い、移行スクリプトから、多数の新しいブログ投稿、ビデオ、チュートリアルまで、今月はお伝えすることがたくさんあります。

しかし、新しいルーティングは SvelteKit の唯一の新機能ではありません...

SvelteKit の新機能

Link が HTTP ヘッダーとしてサポートされ、Cloudflare の Automatic Early Hints でそのまま動作するようになりました (1.0.0-next.405, PR)
機密性の高い値がディスクに書き込まれないように、$env/static/* が仮想になりました (1.0.0-next.413, PR)
$app/stores がブラウザのどこからでも使用できるようになりました (1.0.0-next.428, PR)
config.kit.env.dir は、.env ファイルを検索するディレクトリを設定する新しい設定です (1.0.0-next.430, PR)

ファイルシステムベースのルーターと load API により、ルートの管理方法が改善されました。バージョン @sveltejs/kit@1.0.0-next.406 以後をインストールする前に、この移行ガイドに従ってください (PR, Issue)
event.session が load から削除され、session ストアと getSession も削除されました。代わりに event.locals を使用してください (1.0.0-next.415, PR)
名前付きレイアウトは削除され、(groups) が採用されました (1.0.0-next.432, ドキュメント, PR & 移行手順)
event.clientAddress が event.getClientAddress() になりました (1.0.0-next.438, PR)
$env/... とのあいまいさを解消するため、$app/env が $app/environment に名前変更されました (1.0.0-next.445, PR)

変更点の完全なリストについては、kit の変更履歴をご確認ください。

TypeScript は SvelteKit の $types へのインポートをうまく解決できませんでしたが、Svelte の言語ツールの最新バージョンで改善されました (105.21.0, #1592)

canno は、重力、砲撃力、デバッグビジュアライザーを調整できるシンプルなインタラクティブな 3D 物理ゲームで、threlte を使用して作成されています
straw.page は、スマートフォンから直接ユニークな Web サイトを作成できる非常にシンプルな Web サイトビルダーです
Patra を使用すると、リンクだけで短いメモを共有できます。データベースもストレージもありません
promptoMANIA は、オンラインプロンプトビルダーを備えた AI アートコミュニティです
Album by Mood では、気分に合わせて音楽を聴くことができます
Daily Sumeiro は、数学と論理のスキルをテストする毎日のゲームです
Lofi and Games - ブラウザから直接リラックスできるカジュアルゲームをプレイできます
Pitch Pipe は、周波数アナライザーと純正律インターバルを備えたデジタルピッチパイプです
classes.wtf は、Go と Svelte で記述されたカスタムの分散型検索エンジンであり、標準のコースカタログよりもはるかに迅速にハーバード大学のコースを検索できます
Scrumpack は、アジャイル/スクラムチームがプランニングポーカーやレトロスペクティブなどのセレモニーを行うのに役立つツールセットです

Svelte チーム主演

新しい SvelteKit ルーティングの学習

視聴するもの

読むもの

@svelte-plugins/tooltips は、Svelte 用に設計されたシンプルなツールチップアクションとコンポーネントです
Lucia は、SvelteKit アプリをデータベースに接続する SvelteKit 用のシンプルな認証ライブラリです
remix-router-svelte は、react-router-dom API の Svelte 実装です (@remix-run/router によって駆動されます)
MKRT は、SvelteKit ルートを高速に作成するのに役立つ CLI です
Histoire は、ストーリーアプリケーション (特定のユースケースのコンポーネントを紹介するシナリオ) を生成するためのツールです
sveltekit-flash-message は、一時的なデータを次のリクエスト (通常はエンドポイントから) に渡す Sveltekit ライブラリです
svelte-particles は、パーティクルを作成するための軽量な TypeScript ライブラリです
svelte-claps は、SvelteKit アプリの任意のページに拍手ボタン (Medium など) を追加します
Neon Flicker は、テキストをサイバーパンクスタイルで点滅させる Svelte コンポーネントです
ComboBox は、ユーザーが多数のアイテムから選択するのに役立つ検索入力です
@svelte-put は、プロジェクトに配置するのに役立つ svelte のものです
vite-plugin-svelte-bridge を使用すると、Svelte コンポーネントを作成し、React & Vue から使用できます

UI キットとスターター

Svelte-spectre は、spectre.css に基づき、Svelte によって強化された UI キットです
Skeleton を使用すると、Svelte + Tailwind のパワーを活用して、高速で反応性の高い Web UI を構築できます
iconsax-svelte は、人気のあるアイコンキットを Svelte にもたらします
laravel-vite-svelte-spa-template は、Laravel 9、Vite、Svelte SPA、Tailwind CSS (フォームプラグインとアスペクト比プラグイン付き)、Axios、& TypeScript スターターテンプレートです
neutralino-svelte-boilerplate-js は、Neutralino と Svelte 用のクロスプラットフォームデスクトップテンプレートです
figma-plugin-svelte-vite は、Svelte、Vite、Typescript を使用して Figma プラグインを作成するためのボイラープレートです
Urara は、素晴らしく強力な SvelteKit ブログスターターです
SvelteKit Commerce は、Vercel によって SvelteKit で構築された、高性能 e コマースサイト向けのオールインワンスターターキットです

何か見落としはありましたか？Reddit または Discord でお知らせください！

来月また会いましょう！