Skip to main content

What's new in Svelte: 2022年10月

Svelte Summit、`use:enhance`、そして SvelteKit Release Candidate!

Dani Sandoval

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

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

今月は更新がいっぱいあります… Svelte と SvelteKit の新機能から 2日間の サミット まで! それに加えて、Svelte の extension に追加された便利な新機能、新しいアクセシビリティ (a11y) の警告、そして Tan Li Hau による Svelte と Svelte スプレッドシートの構築方法についての講座もございます 😎

What happened at Svelte Summit?

コンテンツが盛り沢山です! それぞれのライブストリームから、タイムスタンプで全ての講演をご覧いただけます。分割されたビデオは近日中に Svelte Society のチャンネルに追加される予定ですので、まだの方は チャンネル登録 をお忘れなく!

Day One

  • 12:31 - How to get Svelte adopted at work
  • 33:21 - Animating Data Visualization in Svelte
  • 2:20:36 - Red flags & code smells
  • 2:53:42 - Enhance your DX
  • 4:42:41 - Svelte in UBS’ knowledge graph
  • 5:06:42 - How to migrate react libraries to svelte
  • 5:45:27 - DX magic in the world of Svelte
  • 7:25:39 - Data visualizations powered by Svelte
  • 7:59:38 - Partial Hydration in Svelte for Increased Performance
  • 8:20:49 - Building the future, faster

Day Two

  • 24:09 - Scrollytell me why: Ain't nothing but a piece of cake
  • 2:02:40 - I told you my dog wouldn’t run
  • 2:29:43 - 10Xing Svelte
  • 3:04:56 - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router
  • 5:09:39 - Having fun with stores: an interactive demo of Svelte’s built in state management library
  • 5:37:06 - When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded
  • 7:22:05 - Getting started with Hooks
  • 7:38:14 - Special Announcement*

*サミットの最後のトークでは、Rich Harris が SvelteKit の最初のリリース候補版(Release Candidate)を発表しました! 破壊的変更は行われなくなる予定で、チームはバグ潰しと 1.0 に向けた残りの機能の追加に懸命に取り組んでいます…

More SvelteKit Updates

  • use:enhance はフォームを漸進的に強化 (progressively enhance) するのに最も簡単な方法です (Docs, #6633, #6828, #7012)
  • デモアプリが更新され、Sverdle ゲームが追加されました。Rich は Svelte Summit で披露し、use:enhance のデモンストレーションを行いました (#6979)
  • Cloudflare Pages の _routes.json の仕様が adapter-cloudflare でサポートされました (#6530)
  • asset とページの圧縮を並行に実行することでビルドパフォーマンスが改善されました (#6710)

Breaking changes:

  • SvelteKit を実行できる Node のミニマムバージョンが Node 16.14 になりました (#6388)
  • App.PrivateEnv と App.PublicEnv が削除され、generated types がその役割を引き継ぎます (#6413)
  • %sveltekit.message% は %sveltekit.error.message% に置き換わります (6659)
  • App.PageError は App.Error となりました - hooks をご確認ください (Docs, #6963)
  • externalFetch は handleFetch となり、サーバー上で実行される load から全ての fetch が実行されます (#6565)

変更の全リストは、SvelteKit の CHANGELOG をご確認ください。

Svelte Updates

  • 新たな a11y warning として incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role、role-has-required-aria-props が追加されました。no-noninteractive-tabindex と click-events-have-key-events も間もなくです! (3.50.0)
  • ComponentEvents and SveltePreprocessor (3.50.0)
  • 新たな型として ComponentEvents と SveltePreprocessor が追加されました (3.50.0)
  • ホワイトスペースの大きいブロックが含まれている場合においてパースのスピードが改善されました (3.50.0)
  • 全てのグローバルな JavaScript オブジェクトと関数が、既知のグローバルなものとして認識されるようになりました (3.50.1)

Svelte コンパイラに対する全ての変更や、今後の変更については、CHANGELOG をご確認ください。

New in Language Tools

  • エディタが提案するコードフォーマットが改善されました (106.0.0, #1598)
  • SvelteKit の route ファイルが、コンテキストメニューやコマンドパレットから簡単に作成できるようになりました (106.1.0, #1620)

Ask Questions in the Svelte Discord

発表を見逃してしまった方、Svelte Discord にエキサイティングな更新があるんです… それはフォーラムです! 新しい questions channel は、Discord の新しいフォーラム機能を利用し、質問とその発見、そして回答をするためのより良いコミュニティとなることを支援します!

Svelte や SvelteKit を使って実現したいことや、コミュニティのライブラリ、ツールなど、なんにでもお使いいただけます。お気軽にどうぞ!

Community Showcase

Apps & Sites built with Svelte

  • Timeflow is a smart calendar & task manager that dynamically schedules your tasks between your events
  • GeoQuest is an open source geography game
  • Houses Of is a project showcasing charismatic houses around the world
  • Greenfield Brewery is a tool for quickly installing a lot of homebrew casks
  • Gram Jam is a word puzzle game inspired by match three games and Scrabble
  • Beatbump is a privacy-respecting alternative frontend for YouTube Music
  • RoomOS Device Widgets is an app for demoing RoomOS device capabilities in Kiosk/PWA mode
  • World Seed is a full blown online multiplayer game
  • Lirify is a song lyrics writing web app tool made in Latvia
  • Splet Tech Konferencija is a tech conference in Serbia with a very fancy website
  • Unbounded is an open-source variable font - funded by blockchain (and an awesome-looking website)
  • Porter's Paints is an eCommerce site for (you guessed it) paints built with Svelte
  • CRAN/E is a search engine for modern R-packages

Learning Resources

Starring the Svelte team

To Watch

To Read

Libraries, Tools & Components

  • Svelte Fit is an extremely simple, no dependency fit text library
  • svelte-switch-case is a switch case syntax for your Svelte components
  • svelte-canvas-confetti uses a single canvas to render full-screen confetti
  • @slidy/svelte is a simple, configurable & reusable carousel component built with Svelte - based on @slidy/core
  • svelte-currency-input is a form input that converts numbers to localized currency formats as you type
  • Adria is a super simple form validation library, with autocomplete and value/type checking
  • Canopy is a Svelte debugging app for the Chrome devtools panel
  • MenuFramework is a menu framework written for alt:V
  • whyframe gives iframes superpowers, making it easy to render anything in isolation
  • @svelte-put/modal is a solution to async, declarative, type-safe modals in Svelte
  • Kitty is a collection of libraries and handlers for developing secure frontend apps
  • svelte-turnstile is a component for Cloudflare Turnstile, the privacy focused CAPTCHA replacement

UI Kits and Starters

  • QWER is a blog starter built with SvelteKit
  • SvelteKit Zero API provides type-safety between the frontend and backend - creating a structure for easy APIs
  • sveltekit-monorepo is monorepo starter with 2022 tech
  • svelte-component-test-recipes uses vitest, @testing-library/svelte, and svelte-htm to test Svelte components that seemed to be hard to test

Whew! 更新が盛り沢山でしたね。何か見逃していることがあれば Reddit や Discord でお知らせください!

それではまた来月 👋