Skip to main content

What’s new in Svelte: 2023年4月

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

Dani Sandoval

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

  • A bunch of new features are now available as of 3.56.0!
    • Add |stopImmediatePropagation event modifier for on:eventname (#5085, Docs)
    • Add axis parameter to slide transition (#6182, Docs)
    • Add readonly utility to convert writable store to readonly (#6518, Docs)
    • Add readyState binding for media elements (#6666, Docs)
    • Add naturalWidth and naturalHeight bindings to images (#7771, Docs)
  • Support <!-- svelte-ignore ... --> on components (#8082)
  • Inputs in a bind:group will clear when their value is set to undefined (3.56.0, #8214)
  • <input> values will now persist when swapping elements with spread attributes in an {#each} block (3.56.0, #7578)
  • Better warnings across the board - from noreferrer to aria rules (3.56.0)
  • Add svelte:document (3.57.0, #3310)
  • The style: directive will now take precedence over a style= attribute (3.57.0, #7475)
  • CSS units are now supported in the fly and blur transitions (3.57.0, #7623, Docs)

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

What’s new in SvelteKit

  • You can now get all cookies for a request with cookies.getAll (1.10.0, #9287, Docs)
  • Easily manage the submission status of (multiple) forms with the new exposed submitter parameter in use:enhance (1.12.0, #9425, Docs)
  • The default error page now has dark mode styles (1.13.0, #9460)
  • You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the announcement blog post

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 にてお気軽にお知らせください。

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