What's new in Svelte: 2022年10月
Svelte Summit、`use:enhance`、そして SvelteKit Release Candidate!
翻訳 : 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?permalink
コンテンツが盛り沢山です! それぞれのライブストリームから、タイムスタンプで全ての講演をご覧いただけます。分割されたビデオは近日中に 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 Updatespermalink
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 Updatespermalink
- 新たな 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
andSveltePreprocessor
(3.50.0)- 新たな型として
ComponentEvents
とSveltePreprocessor
が追加されました (3.50.0) - ホワイトスペースの大きいブロックが含まれている場合においてパースのスピードが改善されました (3.50.0)
- 全てのグローバルな JavaScript オブジェクトと関数が、既知のグローバルなものとして認識されるようになりました (3.50.1)
Svelte コンパイラに対する全ての変更や、今後の変更については、CHANGELOG をご確認ください。
New in Language Toolspermalink
- エディタが提案するコードフォーマットが改善されました (106.0.0, #1598)
- SvelteKit の route ファイルが、コンテキストメニューやコマンドパレットから簡単に作成できるようになりました (106.1.0, #1620)
Ask Questions in the Svelte Discordpermalink
発表を見逃してしまった方、Svelte Discord にエキサイティングな更新があるんです… それはフォーラムです! 新しい questions channel は、Discord の新しいフォーラム機能を利用し、質問とその発見、そして回答をするためのより良いコミュニティとなることを支援します!
Svelte や SvelteKit を使って実現したいことや、コミュニティのライブラリ、ツールなど、なんにでもお使いいただけます。お気軽にどうぞ!
Community Showcasepermalink
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
- Upgrading SvelteKit by Svelte Sirens (with Brittney, Kev, and GHOST!)
- Build your own Svelte by lihautan
- Native Page Transitions in SvelteKit: Part 1 by Geoff Rich
- Build a cross platform app with Tauri by GHOST
To Watch
- How To Use Future CSS In Svelte and Master Animation With Svelte by Joy of Code
- Svelte Kit Form Actions 101 - New Svelte Kit API and Svelte Kit Form Actions - Real World Examples - Q&A by LevelUpTuts
To Read
- What's new in
svelte-kit, 1.0.0-next.445
: (group) layout by Parables - Handling breaking changes in SvelteKit pre-1.0 by Thilo Maier
- Svelte Custom Stores Demystified by Raqueebuddin Aziz
- Sveltekit Changes: Advanced Layouts, Form Actions and Progressive Enhancement and Cookies and Authentication by Shivam Meena
- How to add an Emoji Picker to Sveltekit by Xavier Coiffard
- Get Started with SvelteKit Headless WordPress by Rodney Lab
- Speed up SvelteKit Pages With a Redis Cache and How to await Firebase Auth with SvelteKit by Captain Codeman
- Deploying SvelteKit with NodeJS to a Server Using GitLab and PM2 by A Byte of Coding
- Quality of Life Tips when using SvelteKit in VS Code by doa-doa
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
, andsvelte-htm
to test Svelte components that seemed to be hard to test
Whew! 更新が盛り沢山でしたね。何か見逃していることがあれば Reddit や Discord でお知らせください!
それではまた来月 👋