What’s new in Svelte: 2022年6月

先月 Svelte Summit があったので、私たちは学んだことすべてをこの6月に適用する準備ができています! また、createEventDispatcher、@const 宣言 などの QOL を上げてくれる変更や、SvelteKit 1.0 に向けた大量の進捗があります。

それでは見ていきましょう!

What’s new in Svelte

• Custom events can now be cancelled in the createEventDispatcher function (3.48.0, Docs, PR)
• The {@const} tag can now be used in {#if} blocks to conditionally define variables (3.48.0, Docs, PR)
• Lots of bug fixes across <svelte:element>, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!

What’s new in SvelteKit

• Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)
• config.kit.alias lets you more easily declare a custom alias to replace values in import statements (Docs, PR)
• Pages marked for prerendering will now fail during SSR at runtime (PR)

Breaking Changes

• Node 14 is no longer supported (PR)
• Requests to /favicon.ico will no longer be suppressed and will instead be handled as a valid route (PR)
• AMP support has been moved to a separate @sveltejs/amp package (Docs, PR)
• Generated types are now written to _types directories - update your imports accordingly (PR)
• %svelte.head% and %svelte.body% are now %sveltekit.head% and %sveltekit.body% in app.html (PR)
• LoadInput is now LoadEvent
• Dropped support for Wrangler 1 in favor of Wrangler 2 (PR)

---

Community Showcase

Apps & Sites built with Svelte

• Plantarium は、3D の植物を手続き的に生成するためのツールです。
• SPATULA は、lamina と threejs を使用するプロジェクトであればコードマテリアルとしてポータブルなシェーディングマテリアルを構築するためのツールです。
• Waaard は、様々な SSO プロバイダーでリンクを保護できるようにし、それを送信することができます
• Magidoc は、高速かつ高いカスタマイズ性を備えた GraphQL ドキュメントジェネレーターです
• myMarkmap は、マークアップ向けのカスタムエディタで、SvelteKit で構築されています
• PassShare では、あなたのパスワードをあなたの友人に、安全かつ効率的に共有することができます
• DashingOS は、(Notion + CodeSandbox のような)ツールで、プロトタイプと文書化を一箇所で、素早く簡単に行うことができます
• worker-kit-email は、通常の SvelteKit のルート(routes)を使用して、トランザクショナルな email を開発するのに便利です
• kaios-weather-svelte は、KaiOS 向けのとても親しみやすい天気アプリです
• svelte-gantt は、軽量で高速かつインタラクティブなガントチャート/リソースブッキングコンポーネントです
• Miru は、cats 向けの BitTorrent ストリーミングソフトウェアです

素晴らしい SvelteKit Web サイトに貢献してみませんか? Svelte Society のサイトの構築を手伝っていただけませんか!

Learning Resources

To Read

• Component party is a site that compares common patterns in different frameworks
• Quick tip: style prop defaults by Geoff Rich
• Working with reduced motion in Svelte by GHOST
• Building a Musical Instrument with the Web Audio API by Tania Rascia
• Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices and Svelte-Cubed: Loading Your glTF Models by Alex Warnes

To Watch

From Svelte Society:

• The Svelte Summit Spring 2022 stream recording has been updated with chapter markers to make it easy to watch again and again
• The full recording of Svelte London, April 2022 is up! Check out the amazing talks from across the Svelte London community
• Persian Svelte Society is making Persian-language videos about Svelte
• Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
  • SvelteKit + Sanity.io: a match made in heaven on May 13
  • Slicing up your Svelte Sites with Prismic on May 20
  • Rendering your Svelte apps on Render on May 24
  • The story behind the (unofficial) Svelte newsletter on May 27

Across the Web:

• Building vite-plugin-svelte-inspector, What is Singleton? and What is Navigation? by lihautan
• Auto Import Components In Svelte Kit - Weekly Svelte by LevelUpTuts
• 🧪 Test SvelteKit with TDD & VITEST 🧪 by Johnny Magrippis
• Google Analytics With SvelteKit, Using WebSockets With SvelteKit, SvelteKit Authentication Using Cookies and Svelte Headless UI Component Library by Joy of Code
• Named Layouts In Nested Routes in SvelteKit by The Svelte Junction
• SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks and Svelte Capsize Styling: Typography Tooling by Rodney Lab

To Hear

• Svelte Radio has been putting out weekly episodes:
  • The Adventures of Running a Svelte Meetup
  • The other Rich! Geoff! (feat. Geoff Rich)
  • Inspecting Svelte Code with Dominik G.
  • Stores Galore
• Svelte and the Future of Frontend Development (feat. Rich Harris) from The New Stack

Libraries, Tools & Components

• vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don’t leak into production
• Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
• y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
• Svelcro is a component performance tracker for Svelte applications
• Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
• svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
• svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
• svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components

Special Feature: Svelte Stores

There were lots of Svelte stores released this month from a number of authors...

• svelte-mutable-store is a Svelte store for mutable values with the immutable compiler option
• svelte-damped-store is a derived writable store that can suspend updates while svelte-lens-store is a functional lens over Svelte stores
• svelte-persistent-store is a writable svelte store that saves and loads data from Window.localStorage or Window.sessionStorage.

もし見落としがありましたら、Reddit や Discord で教えてください。

ストックホルムで開催される Svelte Summit に現地参加することもできますので、お忘れなく! Svelteの素晴らしいコンテンツでいっぱいの2日間に是非加わってください! チケットはこちらです。

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