svelte/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md

title	description	author	authorURL
What's new in Svelte: February 2021	Integrations and improvements at lightning speed...	Dani Sandoval	https://dreamindani.com

With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in svelte-loader, prettier-plugin-svelte, rollup-plugin-svelte, and language-tools to steady progress in Sapper and svelte-preprocess. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.

New compiler features

• Aria roles from the WAI-ARIA Graphics Module are now recognized as valid aria roles in Svelte components (3.31.1)
• Compiler warnings for the common React attributes, className and htmlFor, now make it easier to port React components to Svelte (3.31.1)

Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the "triage: good first issue" tag for Svelte

New bits in language-tools

• User disabled auto import suggestions no longer show in VS Code (103.0.0)
• Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (104.0.0)
• Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (104.0.0)
• "Extract Component" has been added to the context menu - allowing you to extract components out of files without having to open the command window to type "Svelte: Extract Component" (104.0.0)
• The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (104.1.0)

For the complete list of changes, check out the language-tools Releases page.

A great way to try the language tools is to download the Svelte Extension for VS Code. This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see coc-svelte for example)!

Big improvements across the Svelte ecosystem

• svelte-loader released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new compilerOptions to match rollup-plugin-svelte. Breaking changes include dropping Svelte 2 and Node 8 support. More info in the changelog
• rollup-plugin-svelte is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent compilerOptions. Be sure to checkout the changelog for breaking changes when upgrading
• svelte-preprocess iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. More info in the changelog
• Sapper got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don't support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found in the changelog
• prettier-plugin-svelte version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for svelteBracketNewLine and options-scripts-markup-styles should now match how the majority of users like to order the code blocks. Additionally, Prettier's htmlWhitespaceSensitivity setting is now supported. More info in the changelog

New changes to the Svelte Society website include a new cheat sheet for easy access to useful code patterns and some smaller visual fixes across the site. Want to help make the Svelte Society website ready for prime time? Checkout the GitHub repo to get started!

---

Community Showcase

Apps & Sites

• The official German vaccination dashboard tracks the current COVID vaccine rollout and features some well-done dataviz.
• La neuva era de la educatión conectada is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape
• sho.rest is a self-hostable url shortener
• night.fm is a cyberpunk-themed radio station

Demos, Libraries & Components

• Svelte Reactive Debugger is a way to monitor Svelte reactive statements in Firefox devtools
• svelte-actions is a set of prototype Svelte actions for inclusion into official actions in future. See RFC and Discuss High Level Policy.
• This css grid gallery made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position
• Patchcab is a modular Eurorack style synthesizer made with Web Audio.
• svelte-knob is a knob control to help with speedometer-style visualization
• descent-ripple is a highly customizable javascript ripple animation for buttons
• makeItSnow is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component (Demo)
• svelte-video-player is a customizable VideoPlayer component
• svelte-readonly is a very small store that exposes only a readable interface.

New Integrations & Starters

• svelte-derver-starter is a starter for baking fullstack application with the client based on Svelte and server side powered by Derver.
• eleventy-plugin-embed-svelte makes it easy to embed Svelte components into an 11ty site.
• svelte-tailwind-extension-boilerplate is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system.
• snowpack-ui lets you run & manage Snowpack projects from the browser instead of the terminal
• Svelte for Appwrite explains how to integrate with Appwrite, a self-hosted Firebase alternative GitHub Repo
• here-maps-svelte makes it easy to include HERE maps in a Svelte app
• p5-svelte is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
• svelte-windicss-preprocess is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
• MitzaCoder/svelte-boilerplate features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.

Want to share your Svelte Component with the world? Head over to the Components page on the Svelte Society site. You can contribute by making a PR to this file.

Learning Resources

• lihautan's Svelte Actions Playlist teaches how actions work and how they can help solve common problems when developing Svelte applications
• One-click Portfolio/Personal blog generator from dev.to API walks through creating a Sapper site that also fetches your articles from DEV.to using the API
• How to Code a VS Code Extension features Svelte as a way to render a custom UI within VS Code
• This YouTube series on Plenti walks through the new static site generator in detail

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!