What’s new in Svelte: 2021年11月

ショーケースを彩る5000個以上の星たち

Dani Sandoval Nov 1 2021

SvelteKitの完成度が80%を超え、GitHubで5000スターを超え、Sapperよりも多くの利用者がいる現在、SvelteKitを試すには絶好の機会です。コミュニティの多くの人が試しているので、今月はかなり大きなショーケースになっています…。

また、11月20日には、世界各国のスピーカーが参加するSvelte Summitも開催されますので、お見逃しなく。お住まいの地域で開催されるウォッチパーティーにもご注目ください👀

続いては新機能です！

New in Svelte and SvelteKit

svelte.dev now runs on SvelteKit alongside sveltesociety.dev. svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
A new compiler option, enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in .svelte templates (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)
The Svelte Language Tools now support reading the configuration of the VS Code CSS settings (#1219)
vite-plugin-svelte added a new experimental.prebundleSvelteLibraries option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of svelte.config.js. Please test it out and give us feedback!
SvelteKit will only route endpoints on the client, unless marked as rel="external" - reducing the size of the client JS and making it easier to refactor the router in the future (2656)
SvelteKit no longer supports Node 12 (2604)
SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR

To see all updates to Svelte and SvelteKit, check out the Svelte and SvelteKit changelog, respectively.

Community Showcase

Apps & Sites

Tangentは、クリーンでパワフルなMac & Windows用のメモアプリです。
The Puddingは、文化の中で議論されているアイデアをビジュアル・エッセイで説明するデジタル出版物です - SvelteKitで再構築されました。
Power Switcherは、エネルギー源がよりクリーンなものに移行していく中で、スイスの電力供給の発展をインタラクティブに紹介しています。
Subliveは、世界中のミュージシャンを低レイテンシーかつ高品質なオーディオネットワークで繋ぎ、新しい音楽の作り方を提案します。
Vibifyは、Spotifyの再生履歴を利用して、音楽の中に隠れたプレイリストを見つけることができます。
Browse Marvel Unlimited by YearはSveltekitサイトで、Marvel Unlimitedで入手可能な発行物を年ごとに探すことができます。
Filesは、Windows用の最新のファイルエクスプローラーです。SvelteKitで再構築された新しいサイトを公開しています。
lil-hashは、覚えやすく、話しやすい短縮URLを生成するシンプルなURL短縮ツールです。
PWA Havenは、OSのネイティブアプリを置き換える、小さく、速く、シンプルなPWAのコレクションです。
DottoBitは、URL共有機能を備えたマルチカラーの16bitドローイングプログラムです。
Former Fast Document for Printは、美しいデザイン、国際言語対応、自動計算機能を備えた請求書作成ソフトです。
Helvetikonは、スイス・ドイツ語のコミュニティが運営する辞書です。
Palitra Appは、検索ベースのカラーパレットジェネレータです。

Podcasts Featuring Svelte

Svelte Radioでは、先日リリースされたSvelte Summitのウェブサイトを支える技術や、その他の楽しいことをたくさん紹介しています！
PodRocketは、LogRocketのポッドキャストで、Rich HarrisとともにSvelteについて話しています。
また、PodRocketではさらに、Elder.jsについてNick Reeseとともに掘り下げています。
PodRocket also dove deep Nick Reeseと一緒にElder.jsに導入しました。
Web Rushとリッチ・ハリスが、SPAとMPAの違い、サーバーレンダリングが果たす役割、クライアントサイドハイドレーションとは何か、SPAやMPAを開発するための最新ツールの状況などについて語ります。
devtools.fmでは、魅力的なデータビジュアライゼーションの開発とツール構築の将来について、リッチ・ハリスと語り合っています。

Educational Content

Have Single-Page Apps Ruined the Web? 今年のJamstack Confで、リッチ・ハリスが論争の的となった質問に答えました。
Svelte vs SvelteKit - What’s The Difference? LevelUpTutsでは、この2つのプロジェクトの関係を説明するクイックガイドを提供しています。Scott Tolinski氏によるSvelteに関するガイドの残りの部分は、彼の新シリーズである“Weekly Svelte”でチェックできます。
WebJedaのSvelteKit Hooksシリーズは、今月も第3回「クッキーセッション認証」をお届けします。
Writing Context Aware Styles in a Svelte Appは、親に動的に適応することができる自己完結型のコンポーネントを書くためのガイドです。
A Beginner’s Guide to SvelteKitでは、SvelteとSvelteKitの両方を初心者向けに説明し、架空のユーザーのプロフィールページを表示するシンプルなウェブアプリを構築しています。
Svelte vs React: Ending the Debateは、昔からある議論を歴史的に捉えたものです。
Svelte Snacks | Custom Events for Modal Actionsでは、Svelteの便利なカスタムイベントシステムのしっかりとした実装を紹介しています。
What Svelte’s accessibility warnings won’t tell youでは、Svelteのa11y警告がどのように機能するのか、また、アプリケーションをアクセシブルにするために警告をあてにしてはいけない理由を説明しています。

Libraries, Tools & Components

svelte-adapter-azure-swは、動的なサーバーレンダリングにAzure関数を使用してAzure Static Web Appを作成するSvelteアプリ用のアダプタです。
Inlangは、SvelteKitに対応したローカリゼーション・国際化ツールキットです。
svelte-translate-tools ビルド時にSvelteアプリの翻訳ファイルを抽出/生成/コンパイルします。
@egjs/svelte-infinitegridでは、サイズの異なるカード要素で構成された様々なグリッドを実装することができます。
svelte-reactive-css-preprocessは、コンポーネントの状態が変化するたびに、css変数の値を簡単に更新することができます。
Sveltegenは、アクション、コンポーネント、ルートをシンプルかつ簡単に作成するためのCLIです。
svelte-advanced-multistep-formは、レンダリングされるコンポーネントにスタイルを渡すフォーム要素をラップするのに役立ち、また、各フォームステップを順序立ててスタイリッシュに表示します。
gQueryは、SvelteKit用のGraphQL Fetcher & Cacheです。
date-picker-svelteは、Svelte用の日付と時間のピッカーです。
TwelveUIは、アクセシビリティを内蔵したSvelteのコンポーネントライブラリです。
svelte-outclickは、outclickイベントを提供することで、要素の外側でクリックをリッスンすることができるSvelteコンポーネントです。
svelte-zero-apiでは、SvelteKit APIをクライアント関数のように使用することができます - TypeScriptをサポートしています。
svelte-recaptcha-v2は、Svelte SPA、SSR、sveltekitの静的サイト用のGoogle reCAPTCHA v2の実装です。
Svelte Bodyは、SvelteKitやRoutifyと連携して、ルートのボディにスタイルを適用することができます。
svelte-debug-consoleは、Svelte SPA、SSR、sveltekitの静的サイトのためのdebug.jsの実装で、デバッグ文をブラウザ上で確認することができます。
SVEOは、SvelteKitページのメタデータを宣言するための、依存性のないアプローチです。
@svelte-drama/suspenseは、Reactの<Suspense>のコアアイデアを実装したSvelteコンポーネントです。また、SWR for Svelteをチェックすると、リフェッチがさらに簡単になります。
sveltekit-adapter-browser-extensionは、アプリをクロスプラットフォームのブラウザ拡張にするSvelteKit用のアダプタです。

コミュニティサイト sveltesociety.devでは、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。

もっと更新情報をお探しですか？ RedditまたはDiscord にご参加ください！