What's new in Svelte: June 2023

SvelteHack winners, lots of new bindings, Svelte 4.0.0-next.0, and a bunch of new features in SvelteKit

Welcome to June everyone and congrats to our SvelteHack winners, across all the categories! If you missed it, these winners were announced at Svelte Summit on May 6th 🎉

The entire playlist of the summit, including all the talks broken up in to separate videos, can be found on the Svelte Society YouTube channel. So check it out, if you haven't already.

Lots to cover in this month's newsletter, including a lot of improvements to both Svelte and Kit...

What's new in Svelte

Svelte 4.0.0-next.0, the first pre-release version of Svelte 4.0 is out! An explanation of the changes, improvements and goals of this release can be found in the Releases page on GitHub. Check it out to get an early sneak peek of the future of Svelte. It also includes a migration guide, for those interested in the minimal amount of breaking changes and deprecations.

Svelte 3.59.0 is also out, with a ton of new features:

• Restructuring arrays with the spread operator (...) is now handled correctly (3.59.0, #8552, #8554)

• The new a11y-autocomplete-valid warning will now warn if the autocomplete attribute isn't used according to the HTML specification (3.59.0, Examples, #8520)

• fullscreenElement and visibilityState bindings are now available for the <svelte:document> element (3.59.0, #8507)

• The devicePixelRatio binding is now available for the <svelte:window> element (3.59.0, #8285)

• The ResizeObserver bindings contentRect/contentBoxSize/borderBoxSize/devicePixelContentBoxSize are now usable with bind:(3.59.0, #8022)

For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

What's new in SvelteKit

• Route-level entry generators allows exporting an entries function from +page, +page.server, and +server files via export const entries (1.16.0, Docs, #9571)

• URLs in <meta> tags are now crawled to make programmatic social-images much easier (1.17.0, Docs, #9900)

• data and form have been unshadowed in the enhance function - a future deprecation warning has been added for them in dev mode (1.17.0, Docs, #9902)

• Link options can now be set to true and false (1.19.0, Docs, #10039)

• The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, Docs, #9949)

---

Community Showcase

Apps & Sites built with Svelte

• a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells

• Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web

• JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data

• Typepost is a simple text post generator for social media

• tall.ly is a website for sharing bookmarks (example)

• bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture

• Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit

• WeWatch allows watching videos together in sync

• Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip

• CodingView.io is an online coding interview tool

• MeatGPT is an art-site that promptly ignores your prompt

• Vim Ninja is an interactive Vim course in the browser

• prcl is a Pastebin-alternative focused on speed and simplicity

• md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

• This Week in Svelte:

  • 2023 April 28 - SK 1.15.9, colour contrast, SK reusable types, path aliases

  • 2023 May 5 - SvelteKit 1.16.0, reactive statement lifecycle, custom stores

  • 2023 May 12 - Svelte 4.0 preview, SvelteKit 1.16.3, Svelte 3.59.1

  • 2023 May 19 - SvelteKit 1.18.0, accessible HTML tables, CSS nesting

  • 2023 May 26 - SvelteKit 1.19.0, choosing a UI library, breakpoint debugging

• Svelte Radio

  • Svelte Summit Hypisode (May 4, 2023)

  • A primer on AI for developers with Swyx from Latent Space (May 11, 2023 | Video Version)

To Watch

• Build a Blazing Fast SvelteKit Markdown Blog, Page Versus Standalone Endpoints In SvelteKit and Learn How Data Flows In Your SvelteKit App by Joy of Code

• Build a ChatGPT Plugin with SvelteKit by SuperMilkDaddy

• Svelte makes Drag And Drop API easy! and Simple native-like App in SvelteKit! by Antonio Sarcevic

• Let's Learn Svelte.js in 60 Minutes (fun speed run). by developedbyed

To Read

• Bridging Vue 2 and Svelte by Alexis Faizeau

• Write Once, Run Anywhere by Ross Robino

• Reflections on Migrating my SaaS To SvelteKit by SvelteKitSaaS

• Authentication system using rust (actix-web) and SvelteKit by John Owolabi Idogun

• SvelteKit Forms: Grammar Check App, SvelteKit Ably: Sqvuably Real‑Time Game and Svelte Login Form Example: Best Practices by Rodney Lab

• The Correct Way to Use Stores in SvelteKit and Rich Harris is NOT Getting Rid of TS Support in Svelte by Jonathan Gamble

• How to add a basic SEO component to SvelteKit by Thilo Maier

• SvelteKit Contact Form Example with Airtable by Scott Spence

• Performant Reactivity with Svelte-Kit by Erxk

• Svelte stores: the curious parts by Valdimir Klepov

Libraries, Tools & Components

• svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project

• sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL

• Sveltronics is a collection of Svelte utility functions for your project

• Prompta is yet another interface for chatting with ChatGPT (or GPT-4)

• Colibri is a lightweight, customizable component library for Svelte apps

• Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation

• Tailwind Elements now has a Svelte Integration

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋