@ -18,13 +18,22 @@ Have a suggestion for a compiler feature or want to help implement new features/
- 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**)
- 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](https://github.com/sveltejs/language-tools/releases).
A great way to try the language tools is to download the [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-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](https://github.com/coc-extensions/coc-svelte) for example)!
## Big improvements across the sveltejs ecosystem
- [svelte-loader](https://github.com/sveltejs/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](https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md)
- [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent `compilerOptions`. If you're using an older version of Svelte, Node or Rollup, be sure to [checkout the changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) before upgrading
- [svelte-preprocess](https://github.com/sveltejs/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](https://github.com/sveltejs/svelte-preprocess/blob/main/CHANGELOG.md)
- [sapper](https://github.com/sveltejs/sapper) got some big 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](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md)
- [prettier-plugin-svelte](https://github.com/sveltejs/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](https://github.com/sveltejs/prettier-plugin-svelte/blob/master/CHANGELOG.md)
---
## Community Showcase
@ -47,7 +56,7 @@ A great way to try the language tools is to download the [Svelte Extension for V
- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons
- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
- [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component
- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that only exposes a readable iterface.
- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that exposes only a readable interface.
**New Integrations & Starters**
@ -55,7 +64,7 @@ A great way to try the language tools is to download the [Svelte Extension for V
- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site.
- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/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](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal
- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative called Appwrite ([Github Repo](https://github.com/appwrite/sdk-for-svelte))
- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [Github Repo](https://github.com/appwrite/sdk-for-svelte)
- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app
- [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a svelte preprocessor to compile tailwindcss at build time based on windicss compiler
@ -65,9 +74,10 @@ A great way to try the language tools is to download the [Svelte Extension for V
**Learning Resources**
- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teachings how Actions work and how they can help solve common problems when developing Svelte applications
- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) 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 ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API
- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VSCode
- [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) walks through the new static site generator in detail
Daniel Sandoval
6 years ago