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

Svelte の新機能：2022 年 6 月

キャンセル可能な dispatched イベント、より深い {@const} 宣言など！

Dani Sandoval

先月の Svelte Summit を終え、6 月の新たなスタートです！今月は、`createEventDispatcher`、`@const` 宣言の使い勝手の向上、そして SvelteKit 1.0 に向けた大きな進展などがあります。

早速見ていきましょう！

Svelte の新機能

  • カスタムイベントが `createEventDispatcher` 関数でキャンセルできるようになりました（3.48.0、ドキュメント、プルリクエスト）
  • `{@const}` タグが `{#if}` ブロック内で使用できるようになり、条件付きで変数を定義できるようになりました（3.48.0、ドキュメント、プルリクエスト）
  • `<svelte:element>`、アニメーション、およびさまざまな DOM 要素全体で多くのバグ修正が行われました。詳細は 変更履歴 をご覧ください！

SvelteKit の新機能

  • Vite 2.9.9 が、Vite 2 の最後のリリースの 1 つとしてリリースされました。Svelte チームは、SvelteKit と Vite の統合をこれまで以上にスムーズにするために、Vite 3 リリースに貢献するために尽力してきました（Vite 3.0 マイルストーン）
  • `config.kit.alias` を使用すると、`import` ステートメントの値を置き換えるカスタムエイリアスをより簡単に宣言できます（ドキュメント、プルリクエスト）
  • 事前レンダリング用にマークされたページは、実行時に SSR 中に失敗するようになりました（プルリクエスト）

破壊的変更

  • Node 14 のサポートが終了しました（プルリクエスト）
  • `/favicon.ico` へのリクエストは抑制されなくなり、有効なルートとして処理されるようになりました（プルリクエスト）
  • AMP のサポートが、別の `@sveltejs/amp` パッケージに移動されました（ドキュメント、プルリクエスト）
  • 生成された型は `_types` ディレクトリに書き込まれるようになりました。それに応じてインポートを更新してください（プルリクエスト）
  • `%svelte.head%` と `%svelte.body%` は、`app.html` では `%sveltekit.head%` と `%sveltekit.body%` になりました（プルリクエスト）
  • `LoadInput` は `LoadEvent` になりました
  • Wrangler 1 のサポートを廃止し、Wrangler 2 をサポートするようになりました（プルリクエスト）

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

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

  • Plantarium は、3D 植物の手続き型生成ツールです。
  • SPATULA は、lamina と threejs を使用するプロジェクトでコードマテリアルとしてエクスポートできるシェーディングマテリアルを構築するためのツールです
  • Waaard を使用すると、さまざまな SSO プロバイダーを使用して保護されたリンクを作成および送信できます
  • Magidoc は、高速で高度にカスタマイズ可能な GraphQL ドキュメントジェネレーターです
  • myMarkmap は、SvelteKit で構築された Markmap のカスタムエディターです
  • PassShare は、安全かつ簡単に友達にパスワードを共有する方法です
  • DashingOS は、（Notion + CodeSandbox のように）作業のプロトタイプを作成し、すべて 1 か所でドキュメント化することを迅速かつ簡単にするためのツールです
  • worker-kit-email は、通常の SvelteKit ルートを使用してトランザクションメールを迅速に開発するのに役立ちます
  • kaios-weather-svelte は、KaiOS 用の非常に見慣れた天気アプリです
  • svelte-gantt は、軽量で高速なインタラクティブなガントチャート/リソース予約コンポーネントです
  • Miru は、猫用の BitTorrent ストリーミングソフトウェアです

貢献できる優れた SvelteKit ウェブサイトをお探しですか？Svelte Society サイトの構築にご協力ください！

学習リソース

読む

見る

Svelte Society から

ウェブ全体で

聞く

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

  • vite-plugin-svelte-console-remover は、ビルド中に Svelte、JS、および TS ファイルからすべての console ステートメント（log、group、dir、error など）を削除して、本番環境にリークしないようにする Vite プラグインです
  • Svelte Headless Tables は、Svelte 用の、意見がなく拡張可能なデータテーブルです
  • y-presence は、任意のウェブアプリケーションにプレゼンス（ライブカーソル/アバター）を簡単に追加するための一連の軽量ライブラリです（現在は Svelte をサポートしています！）
  • Svelcro は、Svelte アプリケーションのコンポーネントパフォーマンストラッカーです
  • Svelte-Splitpanes を使用すると、アプリケーションをレイアウトするための動的で予測可能なビューパネルを作成できます
  • svelte-miniplayer は、メディア用の軽量、高速、サイズ変更可能、ドラッグ可能なミニプレーヤーです
  • svelte-keybinds は、再バインドと保存を備えた最小限のキーバインドインターフェースです
  • svelte-speech-recognition は、マイクからの音声をテキストに変換し、Svelte コンポーネントで使用できるようにします

特集：Svelte ストア

今月は、多くの著者から多くの Svelte ストアがリリースされました...

  • svelte-mutable-store は、`immutable` コンパイラオプションを使用した可変値用の Svelte ストアです
  • svelte-damped-store は、更新を一時停止できる派生書き込み可能ストアですが、svelte-lens-store は、Svelte ストア上の関数レンズです
  • svelte-persistent-store は、`Window.localStorage` または `Window.sessionStorage` からデータを読み書きする Svelte ストアです。

何か見逃しましたか？Reddit または Discord に参加して、ご意見をお聞かせください。

ストックホルムで開催される Svelte Summit にもご参加いただけます！2 日間の素晴らしい Svelte コンテンツにご参加ください！今すぐチケットを入手してください。

来月また会いましょう！