What’s new in Svelte: 2023年2月
マイナーバージョンとメジャーな満足度
先月から、Svelte と SvelteKit のマイナーバージョンのリリースがあり、たくさんの教育コンテンツが 1.0 リリースをサポートし、そして State of JS survey の結果は…
Svelte は今回も、満足度、興味、ともに上昇しました。投票してくださった皆さんに感謝します!
それではアップデートを見てみましょう…
What’s new in SvelteKit
Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited bug fixes to SvelteKit’s base path support landed, which means that you can now create SvelteKit projects on remote development environments. There have been several new releases with these fixes as well as a handful of new features such as:
- The submitter’s value will now be included automatically when progressively enhancing
- Added an error in dev mode if global fetch is used with relative URL (1.0.8, #8370)
- A warning will now indicated that hydration may break if comments are removed from HTML (1.0.11, #8423)
- A warning will occur when of page options are used in
.svelte
files or a missing<slot />
in layout is detected (1.1.0, #8475) - The new
text(...)
helper makes it easy to generate text responses (1.2.0, #8371) - The public env can now be accessed within app.html (1.2.0, Docs, #8449)
- An error will now be thrown if cookie exceeds size limit (1.2.1, #8591)
- The generated
tsconfig
can now be modified (1.3.0, #8606)
What’s new in Svelte and Language Tools
- VS Code HTML language service の
html.customData
に対するサポートが追加されました (extensions-107.0.0, #1824) - インポートが必要な store のオートコンプリート (#1823) と object/class メンバーのスニペット (#1817) が Svelte extension に追加されました (extensions-107.0.0)
- 関数の型の promise の検知が改善されました (Svelte 3.55.1, #8162)
- グローバルな
part
属性とon:submit
に、それぞれ不足している型とプロパティが追加されました (Svelte 3.55.1, #8181) - 多くのパフォーマンス改善とバグフィックス (Svelte 3.55.1* and extensions-107.0.x)
*Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、 CHANGELOG をご確認ください。
Community Showcase
Apps & Sites built with Svelte
- Titowest.com is a series of photographic films by the writer & photographer, Tito West
- Verve is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
- Round The World is an interactive guide to the travels of Andrew Carnegie
- Linear Regression is an interactive blog post visual introduction to (almost) everything you should know about linear regression
- Flotes is a free note taking app enhanced with flashcard features
- nomie is a Daily Journal for short attention spans
- nocode.gallery is a collection of stunning websites made with no code
- Whom to Follow helps you find accounts you’ll love by searching the network of accounts you already follow
- poker-simulator is a poker simulation and evaluation tool
- Pixelicious converts your images into pixel art
- Apple Music is now built with Svelte (proof)
Learning Resources
Featuring Svelte Contributors and Ambassadors
- SvelteKit | Rich Harris | ViteConf 2022
- Talking Gradio and AI with pngwn 🐧 from Svelte Radio
- Progressively enhancing the Marvel By Year filter and Advent of SvelteKit 2022: my favorite demos by Geoff Rich
- EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪ by Dani Sandoval
To Watch or Hear
- I built a $5 chat app with Pocketbase & Svelte. Will it scale? by Fireship
- The Comprehensive Introduction To SvelteKit, What Svelte UI Library Should You Use? and Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes) by Joy of Code
- Progressive Enhancement in SvelteKit (use:enhance), Are Your Routes Actually Protected? and 10X Your SvelteKit Developer Experience in VSCode by Huntabyte
- The easiest realtime app I’ve ever built by Beyond Fireship
- Angular developers can learn Svelte so fast... by Joshua Morony
- SvelteKit + PocketBase Integration: User Login and Registration by Jian Yuan Lee
- Marvels Of Using Svelte and SvelteKit - JSJ 566 with Tracey Lee and Adam L Barrett
To Read
- A practical first look at the Svelte framework by Daniel Beer
- State Modeling in Svelte with XState is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
- 🚀 Code your SvelteKit website faster with Stylify CSS by Stylify CSS
- 🎮 Five Svelte Games To Learn How To Code by Tom Smykowski
- How to make declarative (code-based) router instead of file-based router in SvelteKit by Dev Punk
- How to import tailwindcss custom config in JS/TS parts of a SvelteKit app by 0gust1
- SvelteKit Internals: Load function and Svelte and CSS by Justin Ahinon
- Internationalization Formatting with Intl + SSR + SvelteKit by Captain Codeman
- Typesafe i18n with SvelteKit by Andreas Söderlund
- Authorization in your SvelteKit app by Adam Barrett
- Validate your form using Sveltekit, Tailwindcss, Felte and Yup by Hessel
- SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array by Hekili Tech
- Smooth Page Transitions with SvelteKit by Phil Kruft
- Redis Integration in SvelteKit: A Game-Changer for Session Management by Shivam Meena
- SvelteKit and GitHub Pages by Andrew Lester
- Tailwind + Sveltekit in 2023 by Mitch Gent
- Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg
Libraries, Tools & Components
- Sveltepress is a simple, easy to use, content centered site build tool with the full power of SvelteKit
- Svelte Form Helper is a lightweight helper for form validation with Svelte
- Dapper UI is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
- TeilUI is a better way to build design systems with Svelte
- Neodrag is an SSR-friendly, multi-framework draggable library
- Svelvet, a UI library for Svelte, is now 5.0 (read more here)
- Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
- html2svelte makes it easy to convert HTML to Svelte components in a snap
お読みいただきありがとうございます!見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。