The (Unofficial) Svelte JS Newsletter

Share this post
What's new in Svelte: May 2021
svelte.substack.com

What's new in Svelte: May 2021

Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!

Daniel E Sandoval
May 1, 2021
2
Share this post
What's new in Svelte: May 2021
svelte.substack.com

Last week, Svelte Summit blew us away with a mountain of content! Check out the full recording or an audio-only (p)review on Svelte Radio. Now let's get into this month's news...

New features in the Svelte Compiler

  • :global() is now supported as part of compound CSS selectors (3.38.0, Example)

  • CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)

New in SvelteKit

  • kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@next

  • You can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)

  • Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR, Docs)

  • Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)

  • Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)

  • fetch in SvelteKit code will now use the environment-provided implementation, whenever possible. If fetch is unavailable, it will be polyfilled by adapters (PR, Docs)

New in Svelte & Language Tools

  • svelte-preprocess now supports the "extends" field of the tsconfig.json (4.7.2)

  • HTML style attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions

  • The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined


Community Showcase

Apps & Sites

  • gitpod.io recently rewrote its site with SvelteKit

  • highlight eel is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone

  • The Far Star Mission is an interactive audiobook companion to the album, The Far Star by Apotheus

  • JavaScript quiz is a small quiz application that saves your answers locally

  • ExtensionPay lets developers accept secure payments in browser extensions with no backend server code.

  • mk48.io is a naval warship game made with SvelteKit

  • Frog Safety is a guide for African Dwarf Frogs and the API freshwater master kit

  • Stardew Valley Character Preview loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.

Demos, Libraries, Tools & Components

  • svelte-parallax is a spring-based parallax component for Svelte

  • @svelte-plugins/viewable is a simple rule-based approach to tracking element viewability.

  • Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.

  • EZGesture makes it easy to add gestures functionality with simple native DOM events

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

Starters

  • How to use Vercel Analytics with SvelteKit teaches how to track Web Vitals across your users' devices

  • Asp.NETCore + Svelte + Vite connects the three frameworks with SpaCliMiddleware (VS2019)

  • Add CoffeeScript to Svelte is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app

  • Adds Supabase to Svelte is an experimental command to run to add Supabase to your SvelteKit project

  • svelte-babylon lets you use BabylonJS like A-Frame through reactive Svelte Components

Looking for a starter or integration? Check out svelte-adders and a number of other integration examples at sveltejs/integrations

Learning Resources

  • Amazing macOS Dock animation in Svelte demonstrates how nice Svelte and popmotion look together

  • Solving the Tower of Hanoi with recursive Svelte templates incorporates the <svelte:self> element into a common computer science problem

  • DIY SvelteKit CDK adapter puts together SvelteKit and AWS CDK

  • Fireship's Svelte in 100 Seconds is a quick and easy introduction to Svelte's core concepts

  • Tech Downtime has been diving into SvelteKit in this playlist - from getting up and running to debugging.

  • lihautan's latest video updates in the Svelte 101 and Svelte Store playlists cover slots, stores and context - and when to use which

  • DavidParkerW has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like displaying a blog post list from an API

See you next month!

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

Share this post
What's new in Svelte: May 2021
svelte.substack.com
Comments

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

TopNewCommunity

No posts

Ready for more?

© 2022 Daniel E Sandoval
Privacy ∙ Terms ∙ Collection notice
Publish on Substack Get the app
Substack is the home for great writing