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

Svelte の最新情報: 2022 年 5 月

を使用して HTML 要素タイプを動的に切り替える

Dani Sandoval

昨日の Svelte Summit が終わり、たくさんのニュースを共有します！Svelte Society YouTube チャンネルで全ての録画をチェックし、以下の今月のアップデートの残りの部分をご覧ください...

Svelte の最新情報

  • <svelte:element> 要素を使用すると、動的に指定されたタイプの要素をレンダリングできます。これは、例えば CMS からリッチテキストコンテンツをレンダリングする場合に便利です。詳細については、ドキュメントまたはチュートリアルをご覧ください (3.47.0)！

言語ツールのアップデート

  • svelte:element と sveltekit:reload がサポートされるようになりました
  • 無効な Svelte インポートパスが自動的に検出されるようになりました - 以前の動作に戻す方法については PR をご覧ください (#1448)
  • source.sortImports を使用すると、未使用のインポートを削除せずにインポートをソートできます (#1338)
  • HTML 属性にカーソルを合わせると、TS ホバー情報ではなく HTML ホバー情報が表示されるようになり、より有用な情報が得られるようになりました (#1447)
  • VS Code では、Insert Snippet コマンドを使用して、既存のコードブロックを制御フロータグでラップできるようになりました (#1373)

SvelteKit の最新情報

  • ルートディレクトリ内のファイルとディレクトリに __tests__ と __test__ という名前を付けることができるようになりました (#4438)
  • Netlify Edge Functions (#4657) と Vercel ビルド出力 API (#4663) がサポートされるようになりました
  • ページが依存する URL を表す文字列の配列であるカスタム load 依存関係が、ルートの読み込み時に使用できるようになりました (ドキュメント, #4536)

破壊的変更

  • バリデーターは désormais「マッチャー」と呼ばれます (ドキュメント, #4358)
  • __layout.reset は名前付きレイアウトに置き換えられました。これにより、共有レイアウト要素の構成可能性が大幅に向上します (ドキュメント, #4388)
  • rel="external" リンクのプリレンダリングは désormais スキップされます (#4545)
  • LoadOutput の maxage は désormais cache になりました (#4690)

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

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

  • polySpectra AR を使用すると、シームレスな AR ファイルハンドオフにより、3D プリントのプロトタイピングを高速化できます (ビデオデモ)
  • Pixel Art Together は、Liveblocks を利用した無料のマルチプレイヤーピクセルアートエディターです
  • Tooling Manager を使用すると、JavaScript テックスタックを業界標準のボイラープレートと比較できます
  • Easy Portfolio は、GitHub プロファイルに基づいてポートフォリオを生成します
  • FLOAT は、イベントの出欠追跡プログラムです
  • The Coin Perspective は、暗号通貨の価格トラッカーとポートフォリオ管理ツールです
  • Locutionis は、比喩の小さなオンラインリファレンスです (フランス語)
  • ASM Editor は、M68K と MIPS 用のオールインワンウェブエディターです
  • Otium は、書籍や読みたい書籍の管理に役立つ、無料のオープンソースブックマネージャー兼本棚オーガナイザーです
  • Sinwaver は、SVG 正弦波ジェネレーターです

最新の SvelteKit ウェブサイトに貢献したいですか？Svelte Society サイトの構築にご協力ください！

学習リソース

読むべきもの

視聴するもの

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

  • KitDocs は、SvelteKit 用のドキュメント統合です。Svelte 用の VitePress のようなものです。
  • Svelte Copy は、クリップボードに簡単にコピーできるクリック/タップしてコピーするライブラリです
  • Svend3r は、D3 のパワーを活用してデータを生き生きとさせる美しい視覚化を提供しながら、その命令型スタイルのコードを抽象化します
  • Svelte Hamburgers は、Svelte 用の使いやすいハンバーガーメニューコンポーネントです
  • Svelte Droplet は、Svelte 用のファイルドロップゾーンです
  • Svelte MP3 は、Svelte 用の非常に高速でありながらシンプルでミニマルなオーディオプレーヤーです
  • SvelteUI は、完全に機能的でアクセスしやすいウェブアプリケーションをこれまで以上に速く構築するためのコンポーネントライブラリです
  • svelte-spotlight は、サイトのグローバル検索ボックスを数分で構築するのに役立つヘッドレススポットライトコンポーネントです
  • svelte-pdf-simple は、PDF を表示し、すべてのコントロールを提供するシンプルな svelte ライブラリです
  • persistent-svelte-store は、Svelte ストアコントラクトに従って TypeScript でゼロから構築された、一般的な永続的な書き込み可能ストアです
  • svelte-exmarkdown は、markdown を動的にレンダリングする Svelte コンポーネントです
  • Bookit は、storybook のようなコンポーネントレンダリング環境であり、SvelteKit プロジェクト内で直接動作するように微調整されています

会話を続けるには、Reddit または Discord にご参加ください。

直接参加したい場合は、Svelte Summit がついに現実の世界に移行しつつあります。素晴らしい Svelte コンテンツの 2 日間にご参加ください！今すぐチケットを入手してください！

来月また会いましょう！