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

Svelte 2023年4月の新機能

Svelteコンパイラの多数の新機能、Svelte SummitとSvelteHack

ダニ・サンドバル

皆さん、ハッピーエイプリル！今月は、Svelteコンパイラのすべての新機能、SvelteKitのいくつかの品質向上、そして（いつものように）大規模なショーケースについてお伝えします。

コアチームのニュースとしては、ドミニク・ギャナウェイがSvelteのフルタイム開発者としてVercelに入社しました！ドミニクは、JavaScriptエンジンのパフォーマンス、DOM、リアクティビティ、アクセシビリティなどに関する世界クラスのエキスパートです！彼はUIフレームワークInfernoや、MetaのWYSIWYGエディターであるLexicalの作成者として知られているかもしれません。彼の才能がSvelteエコシステム全体で発揮されるのが楽しみです🌱

お忘れなく！Svelteの6回目のバーチャルカンファレンスであるSvelte Summit Springが5月6日に開催されます。また、SvelteHackの締め切りまであと2週間です...コミュニティとあなたの作品を共有し、賞を獲得するチャンスです！

それでは、今月の変更点を見ていきましょう...

Svelteの新機能

  • 多くの新機能が3.56.0から利用可能になりました！
  • コンポーネントで <!-- svelte-ignore ... --> をサポート (#8082)
  • bind:group 内の入力は、その値が undefined に設定されるとクリアされる (3.56.0, #8214)
  • <input> の値は、{#each} ブロックでスプレッド属性を持つ要素を切り替える際に保持されるようになる (3.56.0, #7578)
  • noreferrer から aria ルールまで、全体的に改善された警告 (3.56.0)
  • svelte:document を追加 (3.57.0, #3310)
  • style: ディレクティブは style= 属性よりも優先されるようになる (3.57.0, #7475)
  • CSS単位が fly および blur トランジションでサポートされるようになった (3.57.0, #7623, ドキュメント)

リリースされていない変更を含む、Svelteコンパイラのすべての変更については、CHANGELOGを参照してください。

SvelteKitの新機能

  • cookies.getAll でリクエストのすべてのCookieを取得できるようになりました (1.10.0, #9287, ドキュメント)
  • use:enhance の新しい公開された submitter パラメーターを使用して、（複数の）フォームの送信ステータスを簡単に管理できます (1.12.0, #9425, ドキュメント)
  • デフォルトのエラーページにダークモードスタイルが追加されました (1.13.0, #9460)
  • SvelteKitにとって特別な意味を持つすべてのメソッドと変数で型を省略できるようになり、完全な型安全性の恩恵を受けることができます！詳細については、発表ブログ記事を参照してください。

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

Svelteで構築されたアプリとサイト

  • Peerbeer は、第三者やデータ制限なしでファイルをピアツーピア（p2p）で共有できます。
  • unplaneted は、非常に大きな宇宙画像を探索するためのインターフェースです。
  • PokeBook は、美しい邪魔のない環境と自動保存を提供する、詩を書くためのデジタルノートです。
  • papi を使用すると、AIモデルのプロンプトを作成し、一意のリンクで他の人と共有できます。
  • Mathesar は、PostgreSQLデータベースへのスプレッドシートのようなインターフェースを提供する、シンプルなオープンソースツールです。
  • SQLite Playground を使用すると、ブラウザでSQLiteがどのように実行され、データを保存するかを学習できます。
  • svgl は、SVGロゴを備えた美しいライブラリです。
  • Swehl は、授乳中の母親向けの通販サイト、コミュニティ、チュートリアルサイトです。
  • Codeverter は、GPTを搭載したコード変換ツールで、さまざまな言語やフレームワーク間で変換できます。
  • Game On Or Not は、友達とスポーツを整理するのに役立つ無料のWebアプリです。
  • Sveltia CMS は、Gitベースの軽量なヘッドレスCMSです。

学習リソース

Svelteの貢献者とアンバサダーをフィーチャー

見る、または聞く

読む

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

  • @vavite/node-loader は、Viteを使用してモジュールをトランスパイルし、SvelteKit（または任意のVite）プロジェクトでソースマップとブレークポイントのサポートを有効にするNode ESMローダーです。
  • Inlang はSvelteKit用のi18nを構築しており、フィードバックを求めています。
  • Skeleton - SvelteとTailwind用のUIツールキット - が1.0になりました🎉
  • SvelteKit-integrated-WebSocket は、グローバル状態にWebSocketサーバーをアタッチすることにより、SvelteKit内でのWebSocketをファーストクラスでサポートします。
  • Svelte Legos は、必須のSvelteコンポジションユーティリティのコレクションです。
  • svelte-stored-writable は、localStorageを使用してコンテンツを保存および復元するSvelteの書き込み可能な拡張機能です。
  • svelte-virtual は、大規模なリストを効率的にレンダリングするためのSvelteコンポーネントを提供します。
  • ChatGPTクローンとスターター
    • chatwithme.chat は、オープンソースのChatGPT UIです。
    • SlickGPT は、Svelteで記述された、OpenAI API用の軽量な「独自のAPIキーを使用する」Webクライアントです。
    • AI Chat Bestie は、非公式のChatGPTアプリです。
    • chatgpt-svelte は、ChatGPT Open AI API用のシンプルなUIです。

お読みいただきありがとうございます！また、Svelteハッカソンにも挑戦してみてください🧑‍💻

いつものように、RedditまたはDiscordで、何か見逃したことがあればお気軽にお知らせください。

それでは、次回まで！