Svelte の最新情報: 2021年5月

SvelteKit 1.0 と SvelteKit サイトのショーケースを目指して!

Dani Sandoval 2021年5月1日

先週、Svelte Summit は膨大なコンテンツで私たちを圧倒しました！完全な録画をご覧ください、または音声のみの (p)レビューは Svelte Radio でお聴きいただけます。それでは、今月のニュースに入りましょう...

Svelte コンパイラの新しい機能

:global() が複合 CSS セレクターの一部としてサポートされるようになりました (3.38.0, 例)
CSS カスタムプロパティをコンポーネントに渡して、テーマ設定などのユースケースに使用できるようになりました (3.38.0, ドキュメントは近日公開予定です)

kit.svelte.dev は外観を一新し、SvelteKit デモサイトも新しくなりました。npm init svelte@next を実行して確認してください
フォールバックページを指定することで、@sveltejs/adapter-static を使用してシングルページアプリ (SPA) を作成できるようになりました (プルリクエスト, ドキュメント)
サーバーサイドレンダリング (SSR) をアプリ全体またはページごとに無効化できるようになりました (プルリクエスト)
プリレンダリング中に発生したエラーメッセージが、より分かりやすく読みやすくなりました (プルリクエスト, ドキュメント)
ページがルートレイアウトを継承しないように、レイアウトをリセットできるようになりました。これは、ページまたは i18n バリエーションに特定のレイアウトがある場合に便利です (プルリクエスト, ドキュメント)
SvelteKit コードの fetch は、可能な限り環境提供の実装を使用するようになりました。 fetch が利用できない場合は、アダプターによってポリフィルされます (プルリクエスト, ドキュメント)

svelte-preprocess が tsconfig.json の "extends" フィールドをサポートするようになりました (4.7.2)
HTML の style 属性にホバー & オートコンプリートが追加されました。外部名前空間と ESM 設定が Svelte 言語サーバー & 拡張機能でサポートされるようになりました
Svelte 言語ツールは、ジェネリックな関係が定義されている場合、スロット/イベントタイプをプロパティから推測できるようになりました

gitpod.io は最近、サイトを SvelteKit で書き直しました
highlight eel は、YouTube ビデオのお気に入りの部分をマークしてクリップを作成し、誰とでも共有できる Web ベースのエディターです
The Far Star Mission は、Apotheus のアルバム「The Far Star」のインタラクティブなオーディオブックコンパニオンです
JavaScript quiz は、回答をローカルに保存する小さなクイズアプリケーションです
ExtensionPay を使用すると、開発者はバックエンドサーバーコードなしでブラウザ拡張機能で安全な支払いを受け入れることができます。
mk48.io は、SvelteKit で作られた海軍艦艇ゲームです
Frog Safety は、アフリカツメガエルと API 淡水マスターキットのガイドです
Stardew Valley Character Preview は、Stardew Valley のセーブファイルからキャラクターの属性を読み込み、さまざまな衣装、色、アクセサリーを試すことができます。

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

Vercel Analytics と SvelteKit の使用方法では、ユーザーのデバイス全体で Web Vitals を追跡する方法を説明しています
Asp.NETCore + Svelte + Vite は、SpaCliMiddleware (VS2019) を使用して 3 つのフレームワークを接続します
Svelte に CoffeeScript を追加するは、SvelteKit プロジェクトまたは Vite を使用した Svelte アプリに CoffeeScript を追加するために実行する実験的なコマンドです
Svelte に Supabase を追加するは、SvelteKit プロジェクトに Supabase を追加するために実行する実験的なコマンドです
svelte-babylon を使用すると、リアクティブな Svelte コンポーネントを通じて A-Frame のように BabylonJS を使用できます

スターターまたは統合をお探しですか？ svelte-adders と、コミュニティサイト sveltesociety.dev の他の多くのテンプレート例をご覧ください

Svelte での素晴らしい macOS Dock アニメーションは、Svelte と popmotion が一緒にどれほど見栄えが良いかを示しています
再帰的な Svelte テンプレートでハノイの塔を解くは、<svelte:self> 要素を一般的なコンピューターサイエンスの問題に組み込んでいます
DIY SvelteKit CDK アダプターは、SvelteKit と AWS CDK を組み合わせたものです
Fireship の Svelte in 100 Seconds は、Svelte のコアコンセプトを素早く簡単に紹介しています
Tech Downtime は、このプレイリストで SvelteKit を深く掘り下げています。起動と実行からデバッグまで。
lihautan の最新のビデオアップデートである Svelte 101 および Svelte Store プレイリストでは、スロット、ストア、コンテキスト、そしてそれぞれをいつ使用するかについて説明しています
DavidParkerW は、API からブログ投稿リストを表示するなど、実際のシナリオで Svelte、Sapper、SvelteKit を探求しています

何か追加したいことはありますか？ Svelte Society、Reddit、Discord に参加してください！