Skip to main content

What's new in Svelte: 2022年11月

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

Dani Sandoval

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

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

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

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

What's new in SvelteKit

  • use:enhance の新しい update メソッドによって、独自のロジックでフォームを拡張しつつ、デフォルトのフォームの挙動に戻すことが簡単になります (docs, #7083 と #7326)
  • ルーティングで [[optional]] パラメータが使用できるようになりました (docs, #7051)
  • goto に invalidateAll オプションが追加され、新しいアクティブなページに属するすべての load 関数が (再)実行できるようになりました (docs, #7407)
  • 静的なアセットを探す adapter で、config.kit.paths.base が使用されるようになりました - adapter-netlify、adapter-vercel、adapter-cloudflare、adapter-cloudflare-workers で発生していた 404 の問題が修正されました (#4448)

Breaking changes:

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

Svelte changes

  • 新しいアクセシビリティ警告の a11y-click-events-have-key-events と a11y-no-noninteractive-tabindex は、コンポーネントが必須のキーイベントやタブインデックスを持たない場合に警告を出すようになりました。a11y-role-has-required-aria-props は、要素がセマンティックロール(semantic role)に一致する場合に警告を出さないようになりました (3.51.0)
  • --style-props が、<svelte:component> と <svg> でサポートされました (3.51.0, コンポーネント例: Before と After, SVG の例: Before と After)
  • コンポーネントのイベントハンドラで "nullish" な値がサポートされました (3.51.0, Example)
  • スコープされたスタイル(Scoped styles)が <svelte:element> に適用できるようになりました (3.51.0, Example)
  • インラインスタイルタグで important が使用できるようになりました: style:foo|important (3.52.0, #7365)
  • rel="noreferrer" なしで <a target="_blank"> を使用したときに警告がスローされるようになりました (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 にてお知らせください。

それではまた来月 👋