Skip to main content

What’s new in Svelte: 2022年11月

SvelteKit と Svelte をまたがった、フォーム、ルート、インラインスタイルの改善

Dani Sandoval

10月は Svelte コミュニティにとって忙しい月でした。SvelteKit では use:enhance と 高度なルート(Advanced Routes) が大きく改善され、Svelte コンパイラは日々の開発体験が改善されたマイナーバージョンがリリースされました。

そして 巨大な ショーケースもカバーしなければ… それでは参りましょう！

What’s new in SvelteKit

  • The new update method for use:enhance lets you easily get back the default form behavior while augmenting it with your own logic (docs, #7083 and #7326)
  • [[optional]] parameters are now available for routing (docs, #7051)
  • goto now has invalidateAll to (re-)run all load functions belonging to the new active page (docs, #7407)
  • config.kit.paths.base is now used in adapters looking for static assets - fixing 404 issues across adapter-netlify, adapter-vercel, adapter-cloudflare, and adapter-cloudflare-workers (#4448)

Breaking changes:

  • ルート(routes)がコンフリクトしたとき、エラーがスローされるようになりました (#7051)
  • プリレンダリング時の、グローバルな fetch オーバーライドが削除されました (#7318)
  • Route ID の先頭に / が付与されるようになりました (#7338)

Svelte changes

  • New accessibility warnings, a11y-click-events-have-key-events and a11y-no-noninteractive-tabindex, will now warn when your components lack required key events or tabindex. While a11y-role-has-required-aria-props will no longer warn when elements match their semantic role (3.51.0)
  • --style-props are now supported on <svelte:component> and <svg> (3.51.0, Component Example: Before and After, SVG Example: Before and After)
  • “nullish” values for component event handlers are now supported (3.51.0, Example)
  • Scoped styles can now be applied to <svelte:element> (3.51.0, Example)
  • You can now use important in inline style tags: style:foo|important (3.52.0, #7365)
  • A warning will now be thrown when using <a target="_blank"> without rel="noreferrer" (3.52.0, #6188)

Tom Smykowski さんが 3.52.0 の全変更点 のグレートなサマリを書いてくれました！Svelte コンパイラの全変更点と、今後の変更については、こちらの CHANGELOG をご確認ください！

Community Showcase

Apps & Sites built with Svelte

  • AttendZen is an event management and marketing platform for in-person, virtual or hybrid events
  • Gram Jam is a challenging daily word game using SvelteKit
  • Collabwriting is an actionable knowledge base for your team
  • Dazzle is a Puzzle Game made with Svelte & DallE
  • Figma Autoname plugin automatically names your Figma layers in one click
  • DECK is powerful and high performant local web development studio for MacOS, Ubuntu and Windows
  • Asm editor is a webapp to write and run m68k assembly code
  • Nucleus is a text editor featuring a clean and easy to use user interface inspired by Visual Studio Code, Atom, Fleet, and others
  • Observer is a frontend for Arth Panel, an open-source & self-hosted minecraft server panel
  • .PLAN is a cloud-based notetaking app with markdown and section support
  • Stablecog is a simple, free & open source AI image generator
  • FreeSpeech AAC is a free and open-source assistive communication app written in TypeScript
  • sqrdoff is a dots and boxes to enjoy playing with friends
  • itty is a fresh take on the traditional link-shortener
  • splits lets you track your splits, calculate your race pace, become a better athlete
  • Weaver is an application for creating weave drafts

Learning Resources

To Watch

To Read

Libraries, Tools & Components

  • Threlte is a component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps. It’s being featured again to highlight the new “Playground” button in its examples
  • Svelte Turnstile is a library to integrate Cloudflare’s Turnstile (a new CAPTCHA alternative) into a Svelte app
  • ActionStore allows you to push data directly into Svelte stores via ActionCable
  • SvelteKit + <is-land> is an experiment with partial hydration in SvelteKit using @11ty/is-land
  • Svelte Color Select is an Okhsv Color Selection component for Svelte using OKLab perceptual colorspace
  • svelte-awesome-color-picker is a highly customizable color picker component library
  • rx-svelte-forms creates reactive Svelte forms inspired by Angular reactive forms
  • svelte-wc-bind enables two way data binding in Svelte web components
  • svelte-preprocess-style-child-component allows you to style elements inside a child component using similar syntax as CSS Shadow Parts
  • unplugin-svelte-components allows for on-demand components auto importing for Svelte
  • sveltekit-search-params aims to be the fastest way to read AND WRITE from query search params in SvelteKit
  • svelte-crop-window is a crop window component for images and videos that supports touch gestures (pinch zoom, rotate, pan), as well as mousewheel zoom, mouse-dragging the image, and rotating on right mouse button
  • Open Graph Image Generation lets you generate open graph images dynamically from HTML/CSS without a browser in SvelteKit
  • Svelte Tap Hold is a minimalistic tap and hold component for Svelte/SvelteKit
  • svelte-copy’s new version lets you customize the events that cause text to be copied to the clipboard

UI Kits, Integrations and Starters

Fun ones

今月はこれでおしまいです！見落としなどございましたら Reddit や Discord にてお知らせください。

それではまた来月 👋