You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/blog/2021-02-01-whats-new-in-sve...

7.2 KiB

title: What's new in Svelte: February 2021 description: A Svelte-packed showcase to kick-off the new year! author: Daniel Sandoval authorURL: https://desandoval.net

With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month from new aria roles in the compiler to semantic highlighting hooks in the langugage-tools. 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 Svelte-specific styling in their themes (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)

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 VSCode. 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)!


Community Showcase

Apps & Sites

Demos, Libraries & Components

New Integrations & Starters

  • svelte-derver-starter is a starter for baking fullstack application with client based on Svelte framework 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 called Appwrite (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

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!