Svelteの最新情報：2020年12月

ツールの改善、export map、スロットとコンテキストの改善

Dani Sandoval 2020年12月1日

今年最後の「Svelteの最新情報」です！今月は、rollup-plugin-svelte、Sapper、SvelteKitのアップデートや、Svelteコミュニティからの多くのショーケースを紹介します！

新機能と重要なバグ修正

$$props、$$restProps、$$slotsがカスタムWebコンポーネントでサポートされるようになりました (3.29.5、例)。また、slotコンポーネントはスプレッドプロパティをサポートするようになりました: <slot {...foo} /> (3.30.0)
新しいhasContextライフサイクル関数により、親コンポーネントのコンテキストにkeyが設定されているかどうかを簡単に確認できるようになりました (3.30.0 & 3.30.1、ドキュメント)
新しいSvelteComponentTypedクラスが追加され、ベースのSvelteコンポーネントを拡張する型付きコンポーネントを簡単に追加できるようになりました。コンポーネントライブラリとフレームワークの作成者にとって朗報です！例: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0、RFC)
{:else}ブロック内のトランジションが正常に完了するようになりました (3.29.5、例)
Svelteにexport mapが含まれるようになりました。これにより、npmパッケージからどのファイルをインポートできるかが明示的に記述されます (3.29.5、一部修正が3.29.6、3.29.7、3.30.0)
rollup-plugin-svelteの新しい7.0.0リリースがありました。最大の変更点は、cssオプションが削除されたことです。そのオプションを使用していたユーザーは、テンプレートで示されているように、rollup-plugin-css-onlyのような別のプラグインを追加する必要があります。

Sapperの現状は？

Sapperアプリの編集をさらに簡単にするためのTypeScript定義の改善がたくさんあります！動的インポート用のCSSもclient.jsファイルで動作するはずです。（未リリース）

SvelteKitはどうなってる？

よくぞ聞いてくれました！先月初めのRichのブログ記事を見逃した場合は、こちらにあります！

すべての機能とバグ修正については、SvelteとSapperのCHANGELOGを参照してください。

コミュニティショーケース

アプリとサイト

narration.studio (Chromeのみ) は、ナレーション用のブラウザ内自動オーディオ録音・編集プラットフォームです。
Vippetは、ブラウザ用のビデオ録画および編集ツールです。
Pattern Monsterは、繰り返し可能なSVGパターンを作成するためのシンプルなオンラインパターンジェネレーターです。
Plant-based dietsは、世界自然保護基金 (WWF) がSvelteで構築したWebサイトです。
johnells.seは、Svelteを搭載したフレームワークであるCrownで構築されたスウェーデンのファッションeコマースサイトです。
sentence-lengthは、一部の著者がさまざまな長さで遊んでいる一方で、他の著者が1つの長さに固執している様子を示す学習・分析ツールです。
svelte-presenterを使用すると、Svelteとmdsvexを使用して見栄えの良いプレゼンテーションをすばやく作成できます。

デモ

u/loopcake は Java Spring Boot で SSR を動作させました。Svelteをサーバー側でレンダリングしようとしているすべてのJavaショップ向けです。
svelte-liquid-swipeは、SVGパスを使用した派手なインタラクションパターンを示しています。
クロスフェードリンクアニメーションは、（DiscordコミュニティのBluによる）クロスフェードを使用してナビゲーションリンク間でアニメーション化する方法を示しています。
クリップパストランジションは、（DiscordコミュニティのFaberによる）クリップパスとカスタムトランジションを使用して魔法のようなイン/アウトトランジションを作成する方法を紹介しています。

学習リソース

lihautanは、Svelteに関する深い知識を共有するためのわかりやすいビデオを作成しています。
静的サイトジェネレーターを構築することから得た教訓は、Elder.jsの背景と考え方、およびその過程での設計上の決定を共有しています。
Svelteチュートリアルとプロジェクトコースは、生徒が興味深いプロジェクトを構築することでSvelte.jsを学習するJohn SmilgaによるUdemyコースです。
IPFS上にPastebinを構築 - FastAPI、Svelte、およびIPFSを使用は、分散型pastebinのようなアプリケーションを作成する方法について説明します。

コンポーネント、ライブラリ、ツール

svelte-crosswordは、Svelte用のカスタマイズ可能なクロスワードパズルコンポーネントです。
svelte-cloudinaryを使用すると、CloudinaryをSvelte（TypeScriptおよびSSRサポートを含む）と簡単に統合できます。
Svelte Novaは、新しいNovaエディターを拡張してSvelteをサポートします。
saosは、スクロール時に要素をアニメーション化するための小さなsvelteコンポーネントです。
Svelte-nStoreは、Svelteストア契約を満たし、ゲッターと計算機能を追加する汎用ストアの代替品です。
svelte-slimscrollは、任意のdivを、適切なスクロールバーを備えたスクロール可能な領域に変換するSvelteアクションです。
svelte-typewriterは、Svelteアプリケーション用のシンプルで再利用可能なタイプライター効果です。
svelte-store-routerは、ルーティングは別のグローバルステートにすぎず、履歴APIの変更はこのステートのオプションの副作用にすぎないことを示唆する、Svelte用のストアベースのルーターです。
Routifyは、Svelteルーターのバージョン2をリリースしたばかりです。
svelte-error-boundaryは、DOMとSSRの両方のターゲットで使用できる、Svelte用のシンプルなエラー境界コンポーネントを提供します。
svelte2dtsは、svelteファイルからd.tsファイルを生成し、真に共有可能で適切に型付けされたコンポーネントを作成します。

また来月！

ショーケースに追加するアイデアはありますか？ Svelteにさらに参加したいですか？私たちは常にメンテナー、コントリビューター、そして熱狂的なファンを探しています... Svelte Society、Reddit、Discordをチェックして、参加してください！

今年はこのへんで！1月にお会いしましょう😎