What's new in Svelte: July 2022
Faster SSR, language tools improvements and a new paid contributor!
From faster SSR to support for Vitest and Storybook in SvelteKit, there's a lot to cover in this month's newsletter...
So let's dive in!
OpenCollective funding drives Svelte forward
Svelte supporters have donated approximately $80,000 to the project on OpenCollective. We're happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. @gtm-nayan has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We're happy that this funding has allowed Svelte to get much more of his time.
We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend Svelte Summit in person this fall. Thanks to everyone who has donated so far!
What's new in Svelte & Language Tools
learn.svelte.dev is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! (PR)
"Find File References" (0.14.28) and "Find Component References" (0.14.29) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used (Demo)
The Svelte extension now supports CSS path completion (0.14.29)
What's new in SvelteKit
Introduced
@sveltejs/kit/experimental/vite
which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook (#5094). Please leave feedback as to whether the feature works and is helpful as we consider taking it out of experimental and makingvite.config.js
required for all usersStreaming in endpoints is now supported (#3419). This was enabled by switching to the Undici
fetch
implementation (#5117)Static assets can now be symlinked in development environments (#5089)
server
andprod
environment variables are now available as a correlary tobrowser
anddev
(#5251)
Community Showcase
Apps & Sites built with Svelte
Virtual Maker lets you make interactive 3D and VR scenes in your browser
Apple Beta Music appears to have been written in some combination of Svelte and web components
Itatiaia, the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
Pronauns helps you learn pronunciation online with IPA to speak better and sound more native
Immich is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
Pendek is a link shortener built with SvelteKit, Prisma and PlanetScale
Grunfy is a set of guitar tools - recently migrated to SvelteKit
Radiant: The Future of Radio is a personal radio station app built with Svelte and Capacitor
Imperfect Reminders is a todo list for things that are only sort of time sensitive
Periodic Table is a dynamic Periodic Table component written in Svelte
Svelvet is a lightweight Svelte component library for building interactive node-based diagrams
publint lints for packaging errors to ensure compatibility across environments
Playlistr helps manage and create Spotify playlists
Geoff Rich's page transitions demo shows how SvelteKit's
beforeNavigate
/afterNavigate
hooks can make smooth document transitions in the latest Chrome CanaryMenger Sponge is a fractal built with Threlte
Want to contribute to a site using the latest SvelteKit features? Help build the Svelte Society site!
Learning Resources
Starring the Svelte team
Svelte Origins: A JavaScript Documentary by OfferZen Origins
Full Stack Documentation (announcing learn.svelte.dev) by Rich Harris @ JSNation 2022
All About the Sirens by Svelte Radio
To Watch
SvelteKit Page Endpoints, Named Layouts and Passing data from page component to layout component with $page.stuff by lihautan
🍞 & 🧈: Magically load data with SvelteKit Endpoints by Johnny Magrippis
Svelte for React developers by frontendtier
Learn Svelte JS || Javascript Compiler for Building Front end Applications by Code with tsksharma
SvelteKit Authentication by Joy of Code
Svelte + websockets: Build a real-time Auction app by Evgeny Maksimov
To Read
Up-To-Date Analytics on a Static Website and Fast, Lightweight Fuzzy Search using Fuse.js by paullj
Use SvelteKit as a handler in the ExpressJs project by Tran Chien
Creating a desktop application with Tauri and SvelteKit by Stijn-B
List of awesome Svelte stores by samuba
SvelteKit Content Security Policy: CSP for XSS Protection by Rodney Lab
SvelteKit Hooks. Everything You Need To Know by Lucretius K. Biah
3 tips for upgrading the performance of your Svelte stores by Mathias Picker
Libraries, Tools & Components
Svend3r is a plug and play D3 charting library for Svelte
Svelte Hover Draw SVG is a lightweight Svelte component to draw SVG on hover
Svelte French Toast provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
SVooltip is a basic Svelte tooltip directive, powered by Floating UI
Svelte Brick Gallery is a masonry-like image gallery component for Svelte
use-vest is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
Svelidate is a simple and lightweight form validation library for Svelte with no dependencies
Svve11 is an "accessbility-first" component library for Svelte
Slidy is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
Svelte Component Snippets is a VS Code extension with access to common Svelte snippets
Svelte Confetti adds a little bit of flair to your app with some confetti 🎊
What did we miss? Let us know on Reddit or Discord to add your voice.
Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! Get your tickets now.
See y'all next month!