What's new in Svelte: April 2021

SvelteKit beta and new way to use slots

Dani Sandoval Apr 1 2021

Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!

What's up with SvelteKit?

SvelteKit - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the latest blog post. Want to know when 1.0 is close? Check out the milestone on github.

Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's episode of Svelte Radio for a deep dive with Antony, Kev and Swyx.

New in Svelte & Language Tools

• Slotted components, including <svelte:fragment slot="..."> lets component consumers target specific slots with rich content (Svelte 3.35.0, Language Tools 104.5.0, check out the docs and the tutorial)
• Linked editing now works for HTML in Svelte files (Language Tools, 104.6.0)
• Type definitions svelte.d.ts are now resolved in order, allowing library authors to ship type definitions with their svelte components (Language Tools, 104.7.0)
• vite-plugin-svelte is available for general use of Svelte in Vite. npm init @vitejs/app includes Svelte options using this plugin.

Community Showcase

Apps & Sites

• Nagato is a task management tool that connects popular time tracking and to-do tools all in one place.
• type-kana is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
• Pittsburgh Steps is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
• Music Mode Wheels is a website that displays music modes as interactive wheels.
• Critical Notes helps game masters and players keep track of their roleplaying games campaigns and adventures.
• Svelte Game of Life is an educational implementation of Conway's Game of Life in TypeScript + Svelte
• foxql is a peer to peer full text search engine that runs on your browser.

Demos, Libraries, Tools & Components

• svelte-nodegui is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
• Svelte Story Format allows you to write your "stories" in Storybook using the Svelte syntax. More info in the Storybook blog
• SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
• Svelte Checklist is a customizable CheckList built with Svelte.
• Suspense for Svelte is a Svelte component that implements the core idea of React's <Suspense>.
• MiniRx is a RxJS Redux Store that works with Svelte and TypeScript
• svelte-formly generates dynamic forms for Svelte and Sapper
• 7ty is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.

Want to contribute your own component? Submit a Component to the Svelte Society site by making a PR to this file.

Starters

• sveltekit-electron is a starter kit for Electron using SvelteKit
• sveltekit-tailwindcss-external-api is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
• Sapper Netlify is a Sapper project that can run on a Netlify function.

Looking for a particular starter? Check out svelte-adders and a number of other template examples at the community site sveltesociety.dev

Learning Resources

• How to Build a Website with Svelte and SvelteKit is a step-by-step tutorial walking through the new SvelteKit setup.
• A Svelte store for prefers-reduced-motion demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility.
• TypeScript support in Svelte is an MDN guide to using TypeScript in Svelte.
• How to merge cells with svelte-window is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see from react-window 1:1 to svelte-window.
• Easy-to-Embed Svelte Components explains how to use Rollup and a script tag to embed Svelte components anywhere.
• Convert Svelte project from Rollup to Snowpack walks through a common migration pattern on video.
• How to internationalize routing in Svelte & Sapper explains how leaf.cloud translated their site to Dutch.
• Svelte Store: Reactive context using Svelte Store is a video answer to the question, "How do we make [a] context value reactive?"
• Creating Social Sharing Images with Cloudinary and Svelte is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website.

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!