Skip to main content

What's new in Svelte: 2023年4月

たくさんの Svelte コンパイラの新機能, そして Svelte Summit と SvelteHack

Dani Sandoval

翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-april-2023

日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

Happy April、みなさん！ 今月は、Svelte コンパイラの全ての新機能や、SvelteKit における QOL の改善、そしてたくさんのショーケースを見ていきますよ (いつものようにね)。

コアチームのニュースとしては、Dominic Gannaway が Vercel にジョインし、フルタイムで Svelte に取り組むことになりました！ Dominic は javascript エンジンのパフォーマンスや、DOM、リアクティビティ、アクセシビリティなどのワールドクラスのエキスパートです！ UI フレームワークの Inferno や Meta の WYSIWYG エディタである Lexical の作者としても知られています。彼の才能が Svelte エコシステムで発揮されたら、とても素晴らしい未来が待っているでしょう🌱

こちらもお忘れなく！ 6回目 となる Svelte のバーチャルカンファレンス、Svelte Summit Spring が 5月6日に開催されます。また、SvelteHack の締め切りまであと2週間です… あなたの作品をコミュニティにシェアする素晴らしい機会ですし、もしかしたら賞品を獲得できるかも！

それでは、今月の更新を見ていきましょう…

What's new in Svelte

  • 3.56.0 でたくさんの新機能が使えるようになりました！
    • |stopImmediatePropagation という on:eventname 向けのイベント修飾子(event modifier) が追加されました (#5085, Docs)
    • slide トランジションに axis パラメータが追加されました (#6182, Docs)
    • writable ストアを読み取り専用に変換する readonly ユーティリティが追加されました (#6518, Docs)
    • メディア要素向けの readyState バインディングが追加されました (#6666, Docs)
    • 画像(image) に naturalWidth と naturalHeight バインディングが追加されました (#7771, Docs)
  • コンポーネントでの <!-- svelte-ignore ... --> がサポートされました (#8082)
  • bind:group の input で、値に undefined がセットされたときにクリアされるようになりました (3.56.0, #8214)
  • {#each} ブロック内にある、spread 属性を持つ <input> 要素を入れ替えたとき、その <input> の値が保持されるようになりました (3.56.0, #7578)
  • 全体的に警告(warning)が改善されました - noreferrer から aria ルールまで！ (3.56.0)
  • <svelte:document> が追加されました (3.57.0, #3310)
  • style: ディレクティブが style= 属性より優先されるようになりました (3.57.0, #7475)
  • fly と blur トランジションで CSS の単位がサポートされました (3.57.0, #7623, Docs)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What's new in SvelteKit

  • リクエストの全ての cookie を cookies.getAll で取得できるようになりました (1.10.0, #9287, Docs)
  • use:enhance の新たに追加された submitter パラメータを使って、(複数の) フォームの送信ステータスを簡単に管理できるようになりました (1.12.0, #9425, Docs)
  • デフォルトのエラーページがダークモードスタイルに対応しました (1.13.0, #9460)
  • SvelteKit にとって特別な意味を持つすべてのメソッドと変数について、型を省略しても完全な型安全性の恩恵を受けることができるようになりました！ 詳細は発表のブログ記事をお読みください

Community Showcase

Apps & Sites built with Svelte

  • Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
  • unplaneted is an interface for exploring very large space images
  • PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
  • papi lets you create prompts for AI models and share them with others with a unique link
  • Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
  • SQLite Playground lets you learn how SQLite runs and stores data in the browser
  • svgl is a beautiful library with SVG logos
  • Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
  • Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
  • Game On Or Not is a free web app that helps you organize sports with your friends
  • Sveltia CMS is a Git-based lightweight headless CMS

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch or Hear

To Read

Libraries, Tools & Components

  • @vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
  • Inlang is building i18n for SvelteKit and is looking for feedback
  • Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
  • SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
  • Svelte Legos is a collection of essential Svelte Composition Utilities
  • svelte-stored-writable is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
  • svelte-virtual provides Svelte components for efficiently rendering large lists.
  • ChatGPT Clones and Starters

お読みいただきありがとうございました！あと、Svelte Hackathon にも是非チャレンジしてみてください 🧑‍💻

いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう！