メインコンテンツへスキップ

Svelte の新機能: 2021年3月

Svelte Summit の講演者募集中！SSR の改善、非 HTML5 コンパイルターゲット、ESLint TypeScript サポート

ダニ・サンドバル

今月は Svelte エコシステム全体でリリースが多数ありました。最も重要なこととして、Svelte Summit Spring 2021 が 講演者の公募を行っています。締め切りは 3 月 14 日ですので、発表のアイデアがある方は今すぐ応募してください！

ニュースを見ていきましょう 🐬

sveltejs/svelte の新機能

  • SSR ストアの処理が、DOM モードのようにサブスクライブとアンサブスクライブするように変更されました。これにより、SSR ストアの動作がより一貫性のあるものになるはずです (3.31.2、カスタムストアとサーバーサイドコンポーネント API を参照)
  • 同じアクションの複数のインスタンスが、要素で許可されるようになりました (3.32.0、例)
  • 新しい foreign 名前空間により、特定の HTML5 固有の動作とチェックを無効にすることで、代替コンパイルターゲット (Svelte Native や SvelteGUI など) がより簡単になるはずです (3.32.0、詳細)
  • プリプロセッサからのコードでのインラインコメントソースマップのサポート (3.32.0)
  • 分割代入のデフォルトで他の変数を参照できるようになりました (3.33.0、例)
  • カスタム要素は接続時に onMount 関数を呼び出し、切断時にクリーンアップするようになりました (3.33.0、Svelte を Web Components で使用している人々の興味深い会話については、この PR を確認してください)
  • CSS スコープに使用するクラス名を制御するために、cssHash オプションがコンパイラオプションに追加されました (3.34.0、ドキュメント)
  • TypeScript 定義の継続的な改善

バグ修正や PR へのリンクなど、変更点の完全なリストについては、CHANGELOG を確認してください。

sveltejs/language-tools の新機能

  • didChangeWatchedFiles をサポートしない言語サーバークライアントの場合、代わりにフォールバックファイルウォッチャーが使用されます
  • ストアアクセサーと要素ディレクティブ (bind: や class: など) の新しい強調表示ルール
  • HTML タグをまとめて名前変更できるようになりました
  • マスタッシュタグの解析がより堅牢になり、より多くの状況でより優れたインテリセンスを提供するようになります

まだ language-tools を試したことがないですか？VSCode 用 Svelte 拡張機能 をチェックするか、お気に入りの IDE 用のプラグインを見つけてください！

sveltejs/* のその他の変更

  • eslint-plugin-svelte3 が 3.1.0 から TypeScript をサポートするようになりました
  • prettier-plugin-svelte は、空白とコメントのトリミングの問題に対処するために、いくつかのマイナーバージョンをリリースしました。
  • svelte-preprocess の今月のバグ修正には、postcss 変換の修正と、postcss-load-config の v2 および v3 の両方のサポートが含まれています。
  • sapper の 0.29.1 リリースでは、型定義のいくつかの間違ったインポートを修正し、型定義を express/polka と互換性のあるように更新し、すべての CSS ファイル名のハッシュを復元しました。

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

アプリとサイト

  • NYTimes の 新型コロナウイルスの追跡 は、SvelteKit を本番環境で使用している例です
  • Budibase は、開発者や IT プロフェッショナルが独自のインフラストラクチャ上で内部ツールを 50 倍高速に構築、自動化、出荷できるようにする、オープンソースのローコードプラットフォームです。
  • Track the Parcel は、すべての主要な荷物配送業者での荷物ステータスを追跡するためのワンストップツールです。
  • Memo は、最新のメッセージングに Svelte を使用したメールの代替となるものです
  • Userscripts Safari は、Safari 用のオープンソースのユーザー スクリプト エディターです... Mac OS 用のネイティブ Svelte アプリ！
  • SVGX は、「デザイナーと開発者が欲しいと思っていたデスクトップ SVG アセットマネージャー」です。
  • Armoria は、手続き型紋章ジェネレーターおよびエディターです
  • FictionBoard は、塗りつぶし可能でレスポンシブなキャラクターシートをリリースしたばかりの仮想テーブルトップ (VTT) プラットフォームです
  • Castles & Crusades Treasure Generator は、テーブルトップ RPG「Castles and Crusades」用の宝物ジェネレーターです。
  • NESBit Studio は、自作 NES ゲームの開発を支援するツールキットです
  • ElectroBlocks は、組み込みシミュレーターを備えたオンライン Arduino IDE です (Chrome のみ)
  • Goblin.life は、UI が Svelte で構築された 3D ワールドビルダーです
  • farmbox は、アラブ首長国連邦に拠点を置く食料品配達サービスです
  • heroeswearmasks.fun は、マスクを着用しているかどうかを判断するクライアントサイドの機械学習ツールです。
  • weatherify は、非常に美しい (そして オープンソース) 天気アプリです
  • DSN Live を使用すると、NASA/JPL と惑星間宇宙ミッション間の接続をリアルタイムで監視できます。

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

  • spc は、Web 用の特殊文字ピッカーコンポーネントです
  • svelte-injector を使用すると、React、Angular、Vue、jQuery、Vanilla JS に Svelte コンポーネントを挿入できます。
  • Felte は、簡単な検証レポート機能を備えた Svelte 用のフォームライブラリです。
  • svelte-use-form は、「使いやすく、ボイラープレートが 0」のフォームライブラリです。
  • Formula は、「Svelte 用のゼロ設定リアクティブフォーム」を提供します。
  • Houdini は、「Sapper および Sveltekit 用に構築された、消えていく GraphQL クライアント」です。
  • svelte-split-pane は、ドラッグ可能な分割ペインコンポーネントです
  • svelte-virtualized-auto-sizer は、単一の子の幅と高さを自動的に調整する高階コンポーネントです。
  • svelte-window は、大きくスクロール可能なリストと表形式のデータを効率的にレンダリングするためのコンポーネントです。
  • Svelte Persistent store は、ページやリロード間で値を保持する Svelte ストアです
  • Svelte Dark は、svelte.dev REPL に触発された VSCode テーマです
  • Import Cost は、Svelte ライブラリをサポートするように更新され、開発者がバンドルサイズを制御できるようにするのに役立ちます。
  • Tree-sitter-svelte は、svelte の tree-sitter 文法を提供します
  • Svelte Ripple は、@material/ripple に依存しないマテリアルデザインのリップル効果です (Svelte Discord の @karakara によって作成されました)
  • アナログ SVG 時計 は、イージング関数の優れた例です (Svelte Discord の @tonmcg によって作成されました)
  • Console Log Styler を使用すると、擬似 HTML および CSS を使用してスタイル設定されたコンソールログを生成できます (Svelte Discord の @EmNudge によって作成されました)
  • svelte-heroicons は、Heroicons アイコンライブラリの便利なラッパーです
  • supabase-ui-svelte は、Supabase 認証用の UI コンポーネントです

独自の Svelte コンポーネントを共有しますか？Svelte Society サイトの パッケージのリストに、独自のコンポーネントを送信してください。

学習リソースとスターター

また来月お会いしましょう！

何か追加したいものがありますか？Svelte Society、Reddit、Discord でご参加ください！