Skip to main content

What’s new in Svelte: 2022年5月

で動的に HTML 要素タイプを切り替える

Dani Sandoval

昨日 Svelte Summit があったので、シェアするニュースがたくさんあります！Svelte Society YouTube Channel のレコーディングをチェックしてみてください。それでは、今月の更新情報をどうぞ…

What’s new in Svelte

  • The <svelte:element> element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the docs or the tutorial for more info (3.47.0)!

Language Tools updates

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

What’s new in SvelteKit

  • Files and directories can now be named __tests__ and __test__ in the routes directory (#4438)
  • Netlify Edge Functions (#4657) and the Vercel build output API (#4663) are now supported
  • Custom load dependencies, array of strings representing URLs the page depends on, are now available when loading routes (Docs, #4536)

Breaking Changes

  • Validators are now called “matchers” (Docs, #4358)
  • __layout.reset has been replaced by named layouts - which have much configurability for shared layout elements (Docs, #4388)
  • Prerendering is now skipped for rel="external" links (#4545)
  • maxage is now cache in LoadOutput (#4690)

Community Showcase

Apps & Sites built with Svelte

  • polySpectra AR は、AR のファイルを渡すことで 3D プリントを早くプロトタイプすることができます (video demo)
  • Pixel Art Together は、複数人で使用できるフリーのピクセルアートエディタです。Liveblocks を使用しています
  • Tooling Manager では、あなたの JavaScript の技術スタックと、業界の標準的なボイラープレートを比較することができます
  • Easy Portfolio は、あなたの GitHub プロフィールをもとにポートフォリオを生成します
  • FLOAT は、イベント用の出席管理プログラムです
  • The Coin Perspective は暗号通貨の価格トラッカー兼ポートフォリオ管理ツールです
  • Locutionis は、修辞的表現法の小さなオンラインリファレンスです (フランス語)
  • ASM Editor は、M68K と MIPS 向けのオールインワンなエディタです
  • Otium はフリーでオープンソースのブックマネージャーであり、ブックシェルフオーガナイザーです。あなたの本や読みたい本を管理するのに役立ちます
  • Sinwaver は正弦波の SVG を生成するジェネレーターです

モダンな SvelteKit webサイト に貢献してみたいですか？Svelte Society のサイト構築を手伝っていただけませんか!

Learning Resources

To Read

To Watch or Hear

Libraries, Tools & Components

  • KitDocs は SvelteKit 向けのドキュメントのインテグレーションです。Svelte にとっての VitePress のようなものです。
  • Svelte Copy は、クリック/タップで簡単にクリップボードにコピーすることができるライブラリです
  • Svend3r は D3 のパワーを活用した美しいビジュアライゼーションを提供してデータに命を吹き込み、それだけでなく、命令形のコードを抽象化できます
  • Svelte Hamburgers は Svelte 向けの簡単に使えるハンバーガーメニューコンポーネントです
  • Svelte Droplet は Svelte 向けのファイルドロップゾーンです
  • Svelte MP3 は Svelte 向けの、軽量で高速かつシンプルでミニマルなオーディオプレーヤーです
  • SvelteUI は高機能でアクセシブルな Web アプリケーションをより速く構築するためのコンポーネントライブラリです
  • svelte-spotlight はヘッドレスな spotlight コンポーネントで、短時間でサイト全体の検索ボックスを構築するのに役立ちます
  • svelte-pdf-simple は PDF を表示するためのシンプルな Svelte ライブラリで、コントロールがカスタマイズ可能です
  • persistent-svelte-store は永続化のための汎用的な書き込み可能なストア(writable store)です。TypeScriptでスクラッチで構築されており、Svelte のストアコントラクト(store contract)に準拠しています
  • svelte-exmarkdown は markdown を動的にレンダリングするための Svelte コンポーネントです
  • Bookit は storybook ライクなコンポーネントレンダリング環境です。SvelteKit プロジェクトで動作するように細かくチューニングされています

この続きは Reddit や Discord で！

オフラインでのコミュニティ参加を待ち望んでいた方に朗報です。ついに Svelte Summit がリアルワールドに移行します。是非、素晴らしい Svelte コンテンツ でいっぱいの2日間にご参加ください！チケットはこちら！

また来月お会いしましょう！