9.9 KiB
| title | description | author | authorURL |
|---|---|---|---|
| What's new in Svelte: October 2021 | A whole year of "What's new in Svelte" | Dani Sandoval | https://dreamindani.com |
Hey y'all 👋 It's been 1 year since "What's new in Svelte" started being cross-posted to the Svelte blog. I wanted to take this moment at the top to thank all of you for reading and for all the contributors every month. From the maintainers to everyone who posts their work in the Discord and Reddit, it's amazing to witness all the effort that goes into making the Svelte community great.
Keep up the good work, everyone! Now, let's dive into this month's news...
New around Svelte
- New additions to Svelte's export map now expose no-op versions of lifecycle functions for SSR (Svelte 3.43.0)
- Custom components with a
srcattribute no longer breaksvelte-nativebuilds (Svelte 3.42.4) - Svelte plugin users without the TypeScript plugin enabled will now be prompted to enable it. It enhances TypeScript and JavaScript files with additional intellisense to interact with Svelte files. Please leave feedback if you are using it (Svelte extensions 105.4.0)
- Event modifiers have been added to intellisense as autocomplete and hover info (Svelte extensions 105.4.0)
- TypeScript users no longer have to strictly separate type imports and value imports when using Svelte version 3.39 or higher and
svelte-preprocessversion 4.9.5 or higher. This means you can now writeimport { MyInterface, myValue } from './somewhere'instead ofimport type { MyInterface } from './somewhere'; import { myValue } from './somewhere'. Huge thanks to community member @SomaticIT who mainly implemented this!
For a full list of features and bug fixes, check out the Svelte changelog.
SvelteKit Updates
Nearly 100 PRs committed again this past month, but there's still lots to do and Svelte maintainers are looking for help getting SvelteKit to 1.0. Antony said it well in a recent comment on the issue:
If you think you are too n00b to contribute (you're not), then add tests, or write tests for the feature you want to add, before you add it! Start small, and learn the codebase that way.
If you'd like to help, please consider working on any of the 1.0 milestone issues labeled with "help wanted".
Notable SvelteKit improvements this month include...
- Service workers are now allowed to access files using the
$libalias (#2326) - Svelte libraries should now work out-of-the-box without any Vite configuration (#2343)
- Improvements to package exports field (#2345 and #2327)
- [breaking] The
prerender.pagesconfig option has been renamed toprerender.entries(#2380) - A new generic argument has been added to allow typing Body from hooks (#2413)
- The
sveltefield will be added to package.json when running the package command (#2431) - [breaking] The
contextparameter of the load function was renamed tostuff(#2439) - Added an
entryPointoption for building a custom server withadapter-node(#2414) vite-plugin-svelteimproved support for useVitePreprocess, which uses Vite to automatically preprocess TypeScript, PostCSS, Scss, etc in Svelte components (#173)
To see all updates to SvelteKit, check out the SvelteKit changelog.
Community Showcase
Apps & Sites
- radiofrance just migrated their website to SvelteKit
- FLAYKS is the portfolio site for Félix Péault made with SvelteKit, Sanity, and Anime.js
- hirehive is a candidate and job tracking site
- Microsocial is an experimental Peer-to-Peer Social Platform
- Dylan Ipsum is a random text generator to replace lorem ipsum with Bob Dylan lyrics
- Chip8 Svelte is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript
Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better? Check out the list of open issues if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
Podcasts Featuring Svelte
- Syntax Podcast: From React to SvelteKit Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
- Web Rush Podcast: Svelte Tools and Svelte Society Kevin Åberg Kultalahti talks about what Svelte Society is, what he's excited about with Svelte, how important documentation is to any product, and much much more
- Svelte: The Compiled Future of Front End details the history of component-based frontends and how a compiler changes everything
- Svelte Radio: Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra Grygrflzr shares his journey to becoming a maintainer and his views on React, Vite and a host of other things
- Svelte Radio: Routify 3 with Jake and Willow the Svelte Radio crew sits down with the maintainers of Routify and discusses the just-released Routify 3
- JS Party: 1Password mentioned on the latest episode of The Changelog's JS Party that they use Svelte to power their in-page suggestions
Educational Content
- How I built a blog with Svelte and SvelteKit is an introduction to Svelte, SvelteKit and Progressive Enhancement with code examples
- I built a decentralized chat dapp is a tutorial on how to use popular web3 technologies like GUN to build a decentralized web app (dapp)
- Writing a Svelte Store with TypeScript is a deep dive into writing Svelte stores with TypeScript
- How Svelte scopes component styles explains scoping using classes and more complex CSS specifiers
- SvelteKit Hooks shows how to use hooks.js in Sveltekit.. When you're done, check out Part 2
- An early look at SvelteKit is a post from Infoworld walking through the features and onboarding of SvelteKit
Libraries, Tools & Components
- sveltekit-netlify-cms is a SvelteKit skeleton app configured for use with Netlify CMS
- SvelteFireTS is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io
- stores-x lets you use Svelte stores just like vueX
- sveltekit-snippets is a VS Code extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
- svelte-xactor is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
- vite-plugin-pages-svelte is a vite plugin for automatic filesystem-based routing
- sveltio is a Svelte wrapper for valtio - a proxy-state library
- svelte-transition-classes is a custom Svelte transition for adding and swapping CSS classes
- Svelte-Boring-Avatars is Svelte port of the popular Boring Avatars React project
- Svelte DataTables brings DataTable, a popular JavaScript library allowing you to easily display your data in a user-friendly table, into your Svelte project.
- focus-svelte is a focus trap for Svelte with zero dependencies
- filedrop-svelte is a file dropzone action & component for Svelte
Check out the community site sveltesociety.dev for more templates, adders and adapters from across the Svelte ecosystem.
Before you go, answer the call for speakers!
Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk proposal before 30 October... all are welcome to present and attend.