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

Svelteの新機能: 2022年8月

SvelteKitの1.0リリース前のloadの変更、Vite 3とvite.config.jsのサポート！

ダニ・サンドバル

この数か月で多くの変更がありました。1.0を完了する前に、SvelteKitの設計に大きな変更が行われます。まだ確認していない方は、リッチのディスカッショントピック「Fixing load, and tightening up SvelteKit’s design before 1.0 #5748」をご覧ください。

@dummdidumm（サイモン H）はSvelteでフルタイムで働くためにVercelに参加し、@tcc-sejohnsonはSvelteKitメインテナーのグループに参加しました。SvelteとSvelteKitに取り組む新しいメインテナーが参加し、その影響が早くも感じられています。7月はSvelteKitの変更が最も多かった3か月間でした。

ではほかのアップデートを見ていきましょう。

SvelteKitの新機能

  • 動的にインポートしたスタイルがSSRに含まれるようになりました（#5138）
  • 不要なレンダリングを防止するためのルートとプロップのアップデートを改善（#5654、#5671）
  • エラー処理の改善（#4665、#5622、#5619、#5616）
  • SSRビルドでカスタムViteモードがサポートされました（#5602）
  • カスタムVite構成の場所がサポートされました（#5705）
  • プライベート環境変数（エイリアス「シークレット」）がさらに安全になりました。間違ってクライアント側のコードにインポートした場合、エラーが表示されます（#5663、ドキュメント）
  • Vercelのv3ビルド出力APIがadapter-vercelで使用されるようになりました（#5514）
  • vite-plugin-svelteが1.0に達し、Vite 3をサポートするようになりました。dev（ポート5173）とpreview（ポート4173）に新しい初期ポートが追加されました（#5005、vite-plugin-svelte CHANGELOG）

重大な変更:

  • $app/envではmode、prod、serverは使用できなくなりました（#5602）
  • svelte-kit CLIコマンドはviteコマンドを使用して実行され、vite.config.jsが必要になりました。これにより、Viteエコシステム内の他のプロジェクト（VitestやStorybookなど）との高度なサポートが可能になります（#5332、ドキュメント）
  • endpointExtensionsがmoduleExtensionsに変更され、パラメーターマッチャーのフィルタリングに使用できるようになりました（#5085、ドキュメント）
  • SvelteKitの最低バージョンがNode 16.9になりました（#5395）
  • %エンコードされたファイル名が許可されました。ルートに%を使用する場合、%25でエンコードする必要があります（#5056）
  • HTTP仕様に合わせるため、エンドポイントメソッド名が大文字になりました（#5513、ドキュメント）
  • Viteの構成に合わせるためwriteStaticが削除されました（#5618）
  • transformPageがtransformPageChunkに変わりました（#5657、ドキュメント）
  • package.jsonではprepareスクリプトは必要なくなりました（#5760）
  • adapter-nodeはcompressionライブラリでバグを修正するのを待つ間、圧縮を行わなくなりました(バグ修正 (#5560)

変更の全リストについては、キットのCHANGELOGを確認してください。

Svelteと言語ツールの新機能

  • Svelteコンポーネントでは@layerCSSアットルールがサポートされるようになりました（3.49.0、PR
  • Svelteの言語ツールおよびプラグインで、inert HTML属性がサポートされるようになりました（105.20.0、PR)
  • Svelteプラグインは利用可能な場合はSvelteComponentTypedの型を使用します（105.19.0、PR)

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

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

  • PocketBaseは、単一のファイルとSvelteで構築された管理ダッシュボードを備えたオープンソースのGoバックエンドです
  • Hondoは、複数のラウンドで行われる単語当てゲームです
  • Hexapipesは、六角形のパイプのパズルをプレイするためのサイトです
  • Mail Must Moveは、より多くの成果を出したい人のためのメールです
  • Jot Downは、すばやく簡単にメモを取ることができるVisual Studio Code拡張機能です
  • Kadiumは、YouTubeチャンネルのアップロードを把握するためのアプリです
  • Samen zjin we #1metS10は、オランダのユーロビジョンファイナリストのS10をサポートするためのキャンペーンWebサイトです。応援メッセージまたは応援イラストを送信できます
  • On Writing Codeは、プログラミングデザインパターンを学ぶインタラクティブなWebサイトです
  • Svelte-In-Motionを使用すると、ブラウザでSvelteアニメーションビデオを作成できます
  • Svelte Terminalは、端末のようなWebサイトです
  • Bulletlistは、単一の目的を持ったシンプルなツールです。リストの作成です
  • Remind Me Againは、Mac、Linux、Windowsでトグル可能なリマインダー用のアプリです
  • Heyweekは、フリーランサーのために構築され、ちょっとした活気をもたらすためのタイムトラッキングアプリです

学習リソース

Svelteチームの出演

視聴について

読書について

技術デモ

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

  • Lucia は SvelteKit のシンプルで JWT ベースの認証ライブラリであり、SvelteKit アプリとデータベースを接続します。
  • Skeleton は Svelte + Tailwind で使用するための UI コンポーネントライブラリです。
  • pass-composer は、three.js シーン用のポストプロセシングパスを構成するのに役立ちます。
  • @crikey/stores-* は一般的なユースケース向けに Svelte ストアを拡張するためのライブラリのコレクションです。
  • Svelte Chrome Storage は Svelte ストアと Chrome 拡張機能ストレージの間の軽量なアブストラクションです。
  • Svelte Schema Form は JSON スキーマ用のフォームジェネレーターです。
  • svelte-gesture は、より豊富なマウスイベントやタッチイベントを任意のコンポーネントまたはビューにバインドできるライブラリです。
  • スナップレイアウト と universal-title-bar は Windows 11 のスナップレイアウトとタイトル機能を Web アプリと PWA にもたらします。どちらも .svelte モジュールまたは Web コンポーネントとしてインポートできます。
  • svelte-adapter-bun はスタンドアロンの Bun サーバーを生成する SvelteKit アプリ用のアダプターです。
  • json2dir は JSON オブジェクトをディレクトリツリーに変換します。
  • Svelte コマンドパレット はドロップイン型コマンドパレットコンポーネントです。
  • svelte-use-drop-outside は、要素を領域外にドロップするための Svelte アクションです。
  • PowerTable は JSON データをインタラクティブな HTML テーブルに変換する JavaScript コンポーネントです。
  • svelte-slides は Reveal.js を使用した Svelte のスライドショーテンプレートです。
  • Svelte Theme Light は Svelte REPL に基づく Visual Studio Code テーマです。

何かを見逃していませんか? Reddit か Discord までお知らせください!

9 月にやるべきことがまだ見つかりませんか? ストックホルムで開催される Svelte Summit に参加しましょう! 今すぐチケットを手に入れましょう.

また来月にお会いしましょう!