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

Svelte 2023年3月の新機能

SvelteHack、1.0以降のSvelteKitの改善、そして大規模なショーケース

ダニ・サンドバル

3月は、SvelteKitの1.0リリース後に多数の重要な機能が追加され、熱いスタートを切っています。先週のブログ記事で詳細を確認してください。

また、Svelte Societyは先月、12,000ドル以上の賞金を用意したSvelteHackを立ち上げました。新旧のすべてのSvelte開発者は、4月17日の締め切りまでに何か素晴らしいものを作りましょう！

そして、まだ聞いていないなら、Svelte Summitがまた開催されます！SvelteSummit.comにアクセスして、次のイベントに関する最新情報を受け取るためのニュースレターにサインアップしてください 📬

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

SvelteKitの新機能

  • $app/pathsをアプリなしで使用できるようになり、Vitestを使用したコンポーネントテストやStorybookの使用などが容易になりました（1.4.0、#8838）
  • アダプターをルートレベルで構成できるようになりました（1.5.0、ドキュメント、#8740）
  • 新しいスナップショットメカニズムにより、ナビゲーションやページのリロード後でも一時的なDOMの状態が保持されます（1.5.0、ドキュメント、#8710）
  • OPTIONSがサーバーメソッド内で利用できるようになりました（1.6.0、ドキュメント、#8731）
  • 無効なエクスポートに対してより豊富なエラーメッセージが追加されました（1.7.0、#9055）
  • ストリーミングプロミスがサーバーロード関数で利用できるようになりました（1.8.0、ドキュメント、#8901）
  • 新しい構成オプションpreloadStrategyは、特定のブラウザでのインポートの「ウォーターフォール」を回避するためにプリロードを調整するのに役立ちます（1.8.4、ドキュメント、#9179）
  • 新しいpaths.relativeオプションは、paths.assetsとpaths.baseの解釈を制御できます（1.9.0、ドキュメント、#9220）

Svelteと言語ツールの新機能

  • svelte.devのREPLは、package.jsonのexportsフィールドをサポートするようになりました（#445）
  • 新しいコール階層機能により、関数またはクラスがどこで呼び出されているかを確認し、コールスタックをたどることができます（extensions-107.1.0、#1889）
  • declarationMapのサポートがSvelte拡張機能に追加されました。ライブラリに宣言マップがある場合、.svelteファイルでの「定義に移動」でソースコードに移動するようになりました（extensions-107.1.0、#1878）
  • TypeScriptインレイヒントのサポートがSvelte拡張機能を通じて利用できるようになりました。javascript.inlayHints.*またはtypescript.inlayHints.*で有効にしてください（extensions-107.1.0、#1855）

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

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

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

  • win32.runは、ブラウザ上で動作するWindows XPのバージョンです。ファイルシステム、プログラム、XPスタイルのファイルピッカーとセーバーダイアログ、サードパーティ製プログラムなどが含まれています。
  • Svelte Radial Menuは、Raunoのラジアルメニューをベースにしたラジアルメニューの実験です。
  • apod color searchは、今日の天文写真（APO）を色で検索できます。
  • SvHighlightは、SvelteKitとTailwindCSS用のコードハイライターで、ぼかしとフォーカスブロックを備えています。
  • Limeyを使用すると、数分で美しい1ページのWebサイトを作成できます。
  • a/linksは、短く構成可能なブックマークの拡張機能です。
  • Sprint Cardsは、デザインチャレンジジェネレーターです。
  • Ploughtは、意思決定におけるノイズを減らすためのツールです。
  • ArcOS-Frontendは、ArcオペレーティングシステムのフロントエンドをSvelteで書き直したものです。
  • Poxiは、ユーザーが作成したWebサイトを、ドラッグアンドドロップで描画可能な、共同作業が容易なWebサイトエディターで実現します。
  • demo-threlte-scroller-rocinanteは、svelte-sequenceとThrelteを組み合わせた「スクローリーテリング」の概念実証です。
  • Phonics + Stuffは、フォニックスの学習と指導のためのリソースのセットです。

学習リソース

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

視聴または聴取

読む

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

UIキットとコンポーネント

  • Pinkは、Appwriteのフレームワークに依存しないデザインシステムです。
  • quick-pickは、検索カタログを制御するシンプルな検索ツールです。
  • Grail UIは、アクセシブルで高品質なSvelteアプリケーションをより迅速に構築するのに役立つコンポーネントプリミティブ、アクション、ユーティリティのセットを提供し、優れた開発者エクスペリエンスを提供します。
  • svelte-image-comparisonは、画像またはキャンバス要素を比較するためのSvelteコンポーネントです。
  • simple-font-selectは、すべてのローカルフォントをCSSフォントファミリーとして公開するシンプルなフォント選択コンポーネントです。
  • svelte-datatables-netは、データをインタラクティブなHTMLテーブルに変換するSvelteコンポーネントです。
  • svelte-flextableは、Svelteでサーバーサイド処理のデータテーブルコンポーネントを作成するためのツールキットです。
  • svelte-algolia-instantsearchは、Svelte用のinstantsearch.jsのコミュニティ開発によるラッパーです。
  • svelte-deep-zoomは、インタラクティブなDeep Zoom画像（タイル化された画像ピラミッド）をレンダリングするSvelteコンポーネントです。
  • SVoastは、Svelte用のシンプルなトーストコンポーネントです。
  • svelte-otpは、Svelte用のシンプルな軽量OTP入力コンポーネントです。
  • trace-svelteは、Svelteの行ごとのハイライターです。
  • Svelte Auth UIは、Svelte用の認証コンポーネントのセットです。
  • KitDocsは、SvelteKit用のドキュメント統合です。Svelte用のVitePressの代替手段です。
  • svelte-signature-padは、優れたperfect-freehandライブラリを使用して、スムーズな署名をSVGパスとしてキャプチャするSvelteアクションです。

ヘルパー、ストア、アクション

  • SvelteKit-Documentは、SvelteKit用の小さなユーティリティで、すべてのページまたはレイアウトから<html>、<head>、<body>タグを変更できます。完全なSSRサポート付きです。
  • SvelteKit Form Dataは、SvelteKitフォームデータパーサーの自動ミドルウェアです。
  • sveltekit-superformsは、SvelteKitフォームを多数のQoL機能で強化します。「ライブラリの原動力」であるとされています。
  • Houdini - SvelteKit用の「消える」GraphQLクライアントがバージョン1.0になりました。
  • sveltekit-modal-langchain は、sveltekit-modal を使用したSvelteKitのサンプルプロジェクトで、SvelteKitでPythonエンドポイントを記述するのがいかに簡単かを示しています。
  • mdsvex-excerpt を使用すると、特定のレイアウトでドキュメントの一部のみを表示できます。
  • Svelte Action Balancer は、タイトルをより読みやすくするためのシンプルなSvelteアクションです。
  • svelte-object は、コンポーネントを使用してオブジェクトを作成および管理するのに役立ちます。値はストアであり、直感的にサブスクライブおよび更新できます。
  • svelte-relative-time は、相対時間をレンダリングするための小さなSvelteアクションとコンポーネントです。
  • svelte-disable-preload は、ドキュメントレベルのSvelteKitイベントハンドラーの呼び出しを防ぐために、no-opイベントリスナーを要素に適用するシンプルなアクションです。
  • SvelteKit Static Sitemap は、ビルド中にページのsitemap.xmlを生成します。
  • svelte-intersection-observer-action は、IntersectionObserverを使用して要素の位置通知を行うためのSvelteアクションです。
  • svelte-sequence は、複数のステップにわたるトゥイーンアニメーションシーケンスを構成するためのカスタムストアを提供します。
  • @svelte-put/inline-svg は、（ネットワークからフェッチされた）動的なSVGをインライン化するためのSvelteアクションです。

その他の便利なツール

  • sveltekit-modal を使用すると、Modalを使用してSvelteKitでPythonエンドポイントを記述できます。
  • svelte-kit-bot-block は、SvelteKitでスパムリクエストを処理するためのサーバーフックです。
  • Svelte Email を使用すると、Svelteでメールテンプレートを作成および設計し、HTMLまたはプレーンテキストにレンダリングできます。
  • Inertia.js を使用すると、従来のサーバーサイドルーティングとコントローラーを使用して、最新のシングルページReact、Vue、およびSvelteアプリをすばやく構築できます。
  • svelte-adapter-bun は、スタンドアロンのBunサーバーを生成するSvelteKitアプリ用のアダプターです。
  • React in Svelte は、SvelteでReactコンポーネントを使用できるようにするライブラリです。
  • SvelteKit Redis Session Manager は、セッション管理のためのSvelteKitでのRedis統合です。

お読みいただきありがとうございます！ Svelte Hackathonにもぜひ挑戦してみてください！

Reddit または Discord で、何か見落としがあった場合はお気軽にお知らせください。