In June 2023, Svelte announced its most recent stable release, version 4. The Svelte 4 update is primarily a maintenance release of Svelte 3, aimed at setting the stage for the next generation of Svelte to release as Svelte 5.
Svelte 4 adds various improvements to the Svelte ecosystem, including a website redesign, setting local transitions as default, improving web components support, and shifting from TypeScript to JSDoc.
1. Svelte Site Redesign
Svelte 4 arrived along with improvements to the officialSvelte website. The site’s new look is fantastic, with improved TypeScript docs,a dark mode option, and a generally improved user experience across devices.
The Svelte site now has an enhanced REPL which allows you to experiment with Svelte code directly in the browser.
Also, all Svelte tutorial links now point to the new Svelte learners' experience, while old tutorials are available for users of Safari 16.3 and earlier.
2. Local Transitions Are Default
Imagine the painful experience of having to settle for CSS transitions after watching your page load longer than expected because you used Svelte transitions.
Usually, a transition plays when you destroy a parent block. You can override this behavior with the|localmodifier. This causes the transition to run only when you destroy the block containing the target component. In Svelte 4, this|localmodifier is set as default for transitions.
In the snippet below, a slide transition is locally added to thedivelement:
3. Improved Web Components Support
Svelte has always promoted re-usability and maintainability, hence its continuous support for web components. Web components let you create reusable custom HTML elements with injected styles and behavior.
Svelte 4 changes the way in which it generates web components, removing bugs and inconsistencies. These changes include:
4. The Move From TypeScript to JSDoc
JSDoc is a documentation tool that supports adding type annotations and comments to JavaScript codes.
Considering that JSDoc tricks developers into documenting their codes, this migration aims at encouraging more Svelte developers to form the habit of properly documenting their codes. An adequately documented JavaScrpt codebase would require little or no type-checking.
If you’re new to TypeScript, you shouldexplore TypeScript and discover why developers prefer it.
Migrating to Svelte 4
Svelte 4 has enhanced performance and streamlined development, which is excellent for building high-performing web applications. This new release should also encourage better code documentation with the move to JSDoc.
Svelte continues to improve, and while it’s not a framework that every developer is familiar with, those who are praise it strongly.
