What’s new in Svelte: 2021年5月

SvelteKit 1.0に向けた取り組みとSvelteKitサイトでいっぱいのショーケース！

先週、Svelte Summitの大量のコンテンツにとても感激しました！フルレコーディングをご覧いただけますし、音声のみの(プ)レビューをSvelte Radioでお聞きいただけます。それでは今月のニュースに参りましょう…

New features in the Svelte Compiler

:global() is now supported as part of compound CSS selectors (3.38.0, Example)
CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)

kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@next
You can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)
Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)
Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)
Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)
fetch in SvelteKit code will now use the environment-provided implementation, whenever possible. If fetch is unavailable, it will be polyfilled by adapters (PR, Docs)

svelte-preprocess が tsconfig.json の “extends” フィールドをサポートしました (4.7.2)
HTML の style 属性に hover と auto-complete が追加されました。Foreign namespaces と ESM configs が Svelte language server と extension でサポートされました
Svelte language tools は slot/event にジェネリックな関係が定義されている場合にそれらのプロパティから型を推測できるようになりました (原文: The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined)

gitpod.io は最近 SvelteKit でサイトを書き直しました
highlight eel はあらゆるYoutubeビデオのお気に入りの部分をマークしてクリップし、誰とでも共有できるWebベースのエディターです
The Far Star Mission は、Apotheus のアルバム「The Far Star」に付属する対話型のオーディオブックです。
JavaScript quiz は解答をローカルに保存できる小さなクイズアプリケーションです
ExtensionPay を使用すると、バックエンドのサーバーコードなしで、ブラウザ拡張機能で安全な支払いを受け取ることができます。
mk48.io は SvelteKitで作られた海軍戦艦のゲームです
Frog Safety は African Dwarf Frogs と API freshwater master kit のガイドです
Stardew Valley Character Preview Stardew Valley のセーブファイルからキャラクターの属性をロードし、様々な服、色、アクセサリーで遊ぶことができます

あなたが作成したコンポーネントをコントリビュートしたいですか? あなたが作成したコンポーネントを Svelte Society のサイトから提出して頂ければ、パッケージのリストに追加することができます。

How to use Vercel Analytics with SvelteKit では、ユーザーのデバイス間で Web Vitals をトラッキングする方法を説明しています
Asp.NETCore + Svelte + Vite は3つのフレームワークを SpaCliMiddleware (VS2019) で接続します
Add CoffeeScript to Svelte は、SvelteKit プロジェクトや Vite を使用している Svelte アプリに CoffeeScript を追加する実験的なコマンドです
Adds Supabase to Svelte は、SvelteKit プロジェクトに Spabase を追加する実験的なコマンドです
svelte-babylon はリアクティブな Svelte コンポーネントを通して BabylonJS を A-Frame のように使用することができます

特定のスターターをお探しですか？ svelte-adders や、その他多数のテンプレート例をコミュニティサイト sveltesociety.dev からチェックしてみてください。

Amazing macOS Dock animation in Svelte では Svelte と popmotion の相性の良さを示しています
Solving the Tower of Hanoi with recursive Svelte templates では、<svelte:self> 要素を一般的なコンピュータサイエンスの問題に組み込んでいます
DIY SvelteKit CDK adapter は SvelteKit と AWS CDK を統合します
Fireshipの Svelte in 100 Seconds は Svelte のコアコンセプトをすばやく簡単に紹介しています
Tech Downtime は、Svlete の起動と実行、デバッグまで深く掘り下げているプレイリストです
lihautan の Svelte 101 と Svelte Store の最新ビデオは、slots、store、context と、それをいつどこで使用するかを説明しています
DavidParkerW は、Svelte、Sapper、SvelteKitをいくつかの実世界のシナリオで探求しています。例えば、APIからブログポストのリストを表示する、などです。

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！