What's new in Svelte: November 2021
Over 5000 stars to light up the showcase
With SvelteKit crossing the 80% complete mark, over 5000 stars on GitHub, and now having more usage than Sapper, there's never been a better time to try it out! Many in the community have, making for quite a large showcase this month...
Also, don't miss out on Svelte Summit on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀
Now onto what's new!
New in Svelte and SvelteKit
svelte.dev now runs on SvelteKit alongside sveltesociety.dev. svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
A new compiler option,
enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in
.sveltetemplates (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)
The Svelte Language Tools now support reading the configuration of the VS Code CSS settings (#1219)
vite-plugin-svelteadded a new
experimental.prebundleSvelteLibrariesoption that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of
svelte.config.js. Please test it out and give us feedback!
SvelteKit will only route endpoints on the client, unless marked as
rel="external"- reducing the size of the client JS and making it easier to refactor the router in the future (2656)
SvelteKit no longer supports Node 12 (2604)
SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR
Apps & Sites
Tangent is a clean and powerful notes app for Mac & Windows
The Pudding is a digital publication that explains ideas debated in culture with visual essays - rebuilt in SvelteKit
Power Switcher is an interactive overview of the development of the power supply in Switzerland, as energy sources migrate to cleaner sources
Sublive is a new way of making music by connecting musicians all over the world with a low-latency and high-quality audio network
Vibify helps you find hidden playlists within your music using your Spotify listening history
Browse Marvel Unlimited by Year is a SvelteKit site to see what issues are available on Marvel Unlimited for a given year
Files, a modern file explorer for Windows, has a new site rebuilt with SvelteKit
lil-hash is a simple URL shortener that produces easily rememberable and speakable shortened URLs
PWA Haven is a collection of small, fast, simple PWAs to replace native OS apps
DottoBit is a multi-color 16-bit drawing program with URL sharing built-in
Former Fast Document for Print is an invoice generator with beautiful designs, abilities for international languages and auto calculation
Helvetikon is a community maintained dictionary for the Swiss German language
Palitra App is a search-based color pallete generator
Podcasts Featuring Svelte
Svelte Radio dives into the tech behind the recently released Svelte Summit website and a bunch of other fun stuff!
PodRocket, LogRocket's podcast, talks Svelte with Rich Harris
PodRocket also dove deep into Elder.js with Nick Reese
Web Rush and Rich Harris talk about the differences between a SPA and MPA, what role the server rendering plays, what client side hydration is, and the state of modern tooling for developing an SPA or MPA
devtools.fm talks with Rich Harris about developing engaging data visualizations and building the tools of tomorrow
Have Single-Page Apps Ruined the Web? Rich Harris answers the controversial question at this year's Jamstack Conf
Svelte vs SvelteKit - What's The Difference? LevelUpTuts provides a quick guide to explaining the relationship between the two projects. You can check out the rest of Scott Tolinski's guides to Svelte in his new series, "Weekly Svelte"
WebJeda's SvelteKit Hooks series continues this month with Part 3 - Cookie Session Authentication
Writing Context Aware Styles in a Svelte App is a guide to writing self-contained components that are able to dynamically adapt to their parents
A Beginner’s Guide to SvelteKit takes a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users
Svelte vs React: Ending the Debate is a historical take on the age-old argument
Svelte Snacks | Custom Events for Modal Actions walks through a solid implementation of Svelte's handy custom event system
What Svelte's accessibility warnings won't tell you explains how Svelte's a11y warnings work and why you shouldn't count on them to make your app accessible
Libraries, Tools & Components
svelte-adapter-azure-swa is an adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering
Inlang is a localization and internationalization toolkit that now supports SvelteKit
svelte-translate-tools extract/generate/compile translation files for your Svelte App at build time
@egjs/svelte-infinitegrid lets you implement various grids composed of different card elements whose sizes vary
svelte-reactive-css-preprocess makes it easier to update css variable values whenever your component state changes
Sveltegen is a CLI for simple and easy creation of actions, components, and routes
svelte-advanced-multistep-form helps to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way
gQuery is a GraphQL Fetcher & Cache for SvelteKit
date-picker-svelte is a date and time picker for Svelte
TwelveUI is a Svelte component library with accessibility built-in
svelte-outclick is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
svelte-zero-api lets you use SvelteKit APIs like client functions - with support for Typescript
svelte-recaptcha-v2 is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
Svelte Body lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
svelte-debug-console is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
SVEO is a dependency-free approach to declare metadata on SvelteKit pages
sveltekit-adapter-browser-extension is an adapter for SvelteKit which turns your app into a cross-platform browser extension
Check out the community site sveltesociety.dev for more tools, templates, adders and adapters from across the Svelte ecosystem.