What's new in Svelte: June 2021
Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools
New in SvelteKit
svelte.config.jsconfig files are now loaded in ESM format (
- AMP pages will now use the rendered CSS, rather than emitted CSS
svelte-checkhas been added to the TypeScript template (sveltejs/kit#1556)
- Support for https keypair sveltejs/kit#1456
- Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your
package.jsonif it's there
- Etags for binary responses sveltejs/kit#1382
getContextin favor of
.svelteoutput directory to
.svelte-kit. Update your
trailingSlash: 'never' | 'always' | 'ignore'is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for
index.htmlpages, and provides an escape hatch for anyone that needs more complex behaviour.
Notable bug fixes in SvelteKit
adapter-netlifygot a fix sveltejs/kit#1467 and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
- The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have
<a>elements on the page with the same origin but don't share a base path with the app.
- Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances.
New in Svelte & Language Tools
- Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version!
- In the latest version of
svelte-checkyou can now provide the path to your
tsc --noEmit) for non-Svelte files (
- The VS Code extension and
svelte-checkgot a new major release. Previously, properties that had no initializer (
export let foo;) were only required if the user was using both TypeScript and activated
strictmode. This is changed now: People using TypeScript, and those using
svelte-checkversion 2.0.0, extension version 105.0.0)
Apps & Sites
- vidu is a minimal web analytics collector and dashboard
- River Runner is a virtual way to follow rivers downstream - built with Mapbox and Svelte.
- JSDoc Type Generator generates JSDoc types for valid JSON.
- pagereview.io is a website feedback tool that lets you leave comments directly on the site being reviewed.
- gamesroom.io is an online board game platform with video chat built-in.
- Greedy Goblin is a recipe app for old-school Runescape players.
- hashbrown.geopjr.dev is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app (link to source).
Libraries, Tools & Components
- svelte-image-crop is a simple click'n'drag image cropping library using Web APIs.
- svelte-datepicker is a lightweight and inclusive date picker build with Svelte.
- svelte-regex-router is a simple, lightweight library for you to easily handle routes in your Svelte application.
- Svelte Micro is a light & reactive one-component router for Svelte.
- svelte-entity-store is to provide a simple, generic solution for storing collections of entity objects.
- svelte-animation-store is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.
Want to contribute a component? Submit a Component to the Svelte Society site by making a PR to this file.
See you next month!
Did we miss something? Join us on Svelte Society, Reddit and Discord!