本文へ移動

Svelte 2022年12月版 新機能

SvelteKit 1.0 リリース間近

Dani Sandoval

SvelteKit 1.0 のリリースが間近に迫っています！マイルストーンの課題が99%完了しており、先月から多くの変更がありました…

早速見ていきましょう！

SvelteKit の新機能

  • willUnload プロパティを使用して、ナビゲーションによってアプリがアンロードされるかどうか（完全なページの再読み込み/クローズ/別のページへの移動）を確認できます。（#6813)
  • __data.json リクエストでは、すべての無効化シナリオで一致するレスポンスを確実にキャッシュしながら、キャッシュが可能になりました。（#7532)
  • <a name="hash"> タグへのリンクがサポートされるようになりました。（#7596)
  • handle フックでリダイレクトの送出がサポートされるようになりました。（#7612)
  • フォールバックコンポーネントがないレイアウトに、自動的にフォールバックコンポーネントが追加されるようになりました。（#7619)
  • resolve フック内の新しい preload 関数は、プリロードするファイルにタグに追加する必要があるファイルを決定します。（ドキュメント、#4963、#7704)
  • version は、$app/environment から利用できるようになりました。（#7689、#7694)
  • handleError は、Promise を返すことができるようになりました。（#7780)

破壊的変更：

  • routeId が route.id になりました。（#7450)
  • beforeNavigate および afterNavigate メソッドで、「load」が「enter」に、「unload」が「leave」に名前が変更されました。beforeNavigate は、外部ナビゲーション時に「unload」というタイプで一度呼び出され、リダイレクト中は実行されなくなりました。（#7502、#7529、#7588)
  • redirect ヘルパーでは、リダイレクトのステータスコードは 300～308 の間のみ許可され、エラーのステータスコードは 400～599 の間のみ許可されるようになりました。（#7767）（#7615、#7767)
  • ルートディレクトリ名では、特殊文字が16進/Unicodeエスケープシーケンスでエンコードされるようになりました。（#7644)
  • devalue がアクションデータの（逆）シリアル化に使用されるようになりました。これは、アクションを直接取得して use:enhance を経由しないすべてのユーザーにとって、破壊的変更となります。（#7494)
  • trailingSlash は、設定ではなくページオプションになりました。（#7719)
  • クライアントサイドのルーターは、%sveltekit.body% 外のリンクを無視するようになりました。（#7766)
  • prerendering が building に名前が変更され、config.kit.prerender.enabled が削除されました。（#7762)
  • ビルダーAPIからgetStaticDirectory()が削除されました。（#7809)
  • generateManifest(...) から format オプションが削除されました。（#7820)
  • data-sveltekit-prefetch が -preload-code と -preload-data に置き換えられ、prefetch は preloadData に、prefetchRoutes は preloadCode になりました。（#7776、#7776)
  • SubmitFunction が $app/forms から @sveltejs/kit に移動されました。（#7003)

Svelte の新機能

  • css: false と css: true の CSS コンパイラオプションが 'external' | 'injected' | 'none' 設定に置き換えられ、ssr ビルドのコンパイル速度が向上し、明確性が向上しました (**3.53.0**)

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

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

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

  • Appwrite の新しいコンソール は、Web、モバイル、Flutter 開発者向けのセキュアなバックエンドサーバーをブラウザで利用できるようにします。
  • RepoMagic は、GitHub 用の検索および分析ツールです。
  • Podman Desktop は、コンテナと Kubernetes での開発のためのグラフィカルツールです。
  • Ballerine は、モジュール式ビルディングブロック、コンポーネント、およびサードパーティ統合を使用して、あらゆる業種や地域向けの KYC（Know Your Customer）UX です。
  • Budget Pen は、Tailwind を含む Codepen 風のブラウザコードエディターです。
  • doTogether は、繰り返し発生するタスクのリストを使用して、完了する必要があるタスクの追跡に役立ちます。
  • Webスクレイピングされた大学の結果 は、r/collegeresults のデータの視覚化のコレクションです。
  • Let’s premortem は、プロジェクトが失敗した後に長くてイライラする事後分析を回避するのに役立ちます。
  • BLKMARKET.COM は、商用および個人使用のためのイラストライブラリです。
  • Sigil は、最も投票されたコンテンツによって整理されたスペースを持つ、あらゆるもののためのキャンバスです。
  • corpus-activity-streams は、非公式の ActivityStreams 2.0 語彙データセットと代替ドキュメントです。
  • nodeMyAdmin は、SvelteKit で記述された phpMyAdmin の代替品です。
  • 画像からパターンへの変換 は、クロスステッチパターンの変換ツールで、事前に作成されたパターンの一覧 から始めることができます。
  • Verbums は、言語理解を向上させるための英語語彙トレーナーです。
  • SVGPS は、アイコンを単一の JSON ファイルに変換することで、複数の SVG ファイルの処理の負担を軽減します。
  • この3Dレトロ風の小惑星シューティングゲームは、threlteを使用して作成されました。

学習リソース

聞く

見る

読む

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

  • Skeleton は、Svelte + Tailwind CSS を使用して高速で反応性の高い Web インターフェースを構築するための UI ツールキットです。
  • svelte-svg-spinners は、SVG スピナーコンポーネントのコレクションです。
  • Svelte Floating UI は、アクションを使用したフローティング UI を実現します。ラッパーコンポーネントやコンポーネントバインディングは必要ありません。
  • at-html を使用すると、Svelte アプリでスロットを使用して {@html } タグを使用できます。
  • html-svelte-parser は、サーバー（Node.js）とクライアント（ブラウザ）の両方で動作する HTML から Svelte へのパーサーです。
  • svelte-switcher は、完全にカスタマイズ可能で、タッチフレンドリーで、アクセシビリティが高く、小さなトグルコンポーネントです。
  • sveltkit-hook-html-minifier は、html-minifier をラップするフックです。
  • sveltekit-hook-redirect は、リダイレクトを容易にするフックです。
  • sveltekit-video-meet は、SvelteKit と SocketIO を使用して構築されたビデオ通話 Web アプリです。
  • svelte-colourpicker は、Svelte 用の軽量で意見のあるカラーピッカーコンポーネントです。
  • Svelte-HeadlessUI は、Svelte 用の Tailwind HeadlessUI の非公式実装です。
  • svelte-lazyimage-cache は、IntersectionObserver とキャッシュアクションを持つ Lazy Image コンポーネントです。
  • threlte v5.0 は、高速で、より強力で、非常に柔軟な、全く新しい開発者エクスペリエンスです。

今月は以上です！何か見逃した点がありましたら、Reddit または Discordでお知らせください。

次回まで！🎆