diff --git a/documentation/blog/2019-04-20-write-less-code.md b/documentation/blog/2019-04-20-write-less-code.md index 8ccc2c04391f..b20b3a43d41e 100644 --- a/documentation/blog/2019-04-20-write-less-code.md +++ b/documentation/blog/2019-04-20-write-less-code.md @@ -40,7 +40,7 @@ Reducing the amount of code you have to write is an explicit goal of Svelte. To
diff --git a/documentation/blog/2024-04-30-svelte-5-release-candidate.md b/documentation/blog/2024-04-30-svelte-5-release-candidate.md new file mode 100644 index 000000000000..2173e11f18db --- /dev/null +++ b/documentation/blog/2024-04-30-svelte-5-release-candidate.md @@ -0,0 +1,55 @@ +--- +title: Svelte 5 Release Candidate +description: We're almost there +author: The Svelte team +authorURL: https://svelte.dev/ +--- + +Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped. + +It _doesn't_ mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the 'Try the Svelte 5 preview' option when starting a new SvelteKit project... + +```bash +npm create svelte@latest +``` + +...or you can add Svelte 5 to an existing project... + +```bash +npm install --save-dev svelte@next +``` + +...or you can tinker in the [Svelte 5 Preview](https://svelte-5-preview.vercel.app) website. + +## I'm out of the loop. What's Svelte 5? + +For the last several months, we've been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we've collectively learned from several years of building apps with Svelte. + +You can learn more about the new features from the [preview documentation](https://svelte-5-preview.vercel.app/docs), and by watching the presentation from the most recent [Svelte Summit](https://www.sveltesummit.com/): + +
+
+
+ +
+ +
What You Can Do For Your Framework
+
+
+ +The highlights include: + +- [runes](/blog/runes), the new signal-powered reactivity API that sits at the heart of Svelte 5 and unlocks _universal, fine-grained reactivity_ +- overhauled event handling with less boilerplate and more flexibility +- better component composition through [_snippets_](https://svelte-5-preview.vercel.app/docs/snippets) +- native TypeScript support, including inside your markup + +## Will I need to rewrite everything? + +Components written for Svelte 4 will continue to work with Svelte 5, with a [handful of exceptions](https://svelte-5-preview.vercel.app/docs/breaking-changes). If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable. (In the meantime, if you're currently on Svelte 3 then you should [update to Svelte 4](/docs/v4-migration-guide).) + +Eventually — in Svelte 6 or 7 — support for certain Svelte 4 features will be dropped in favour of their modern replacements. Because of that, we do encourage you to incrementally migrate your components (you can mix and match old and new components in the same app). We'll release a command line tool for automating much of this migration, and you can try an experimental version of that tool in the [playground](https://svelte-5-preview.vercel.app) by pasting in some Svelte 4 code and clicking the 'migrate' button. + +## When is the stable release? + +[When it's done](https://github.com/sveltejs/svelte/milestone/9), and we've updated all the documentation. Bear with us! diff --git a/documentation/blog/2024-05-01-whats-new-in-svelte-may-2024.md b/documentation/blog/2024-05-01-whats-new-in-svelte-may-2024.md new file mode 100644 index 000000000000..88c581b23fbe --- /dev/null +++ b/documentation/blog/2024-05-01-whats-new-in-svelte-may-2024.md @@ -0,0 +1,109 @@ +--- +title: "What's new in Svelte: May 2024" +description: 'Svelte 5 Release Candidate and all the other highlights from Svelte Summit Spring' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +Svelte Summit was last week - featuring a number of fantastic talks from across the community. In the final talk, What You Can Do For Your Framework, Rich Harris (with a little help from PuruVJ's neoconfetti library) [announced that Svelte 5 is now in the "Release Candidate"](https://www.youtube.com/live/gkJ09joGBZ4?si=O5HR0PF-TDvNdVNf&t=8898). + +Lots of pre-release changes to cover in this post and a host of community showcase items... so let's dive in! + +## Highlights from Svelte Summit Spring 2024 + +Below, you'll find links to all the talks in the livestream version of Svelte Summit. + +- [Simple and Sustainable web development in academic libraries with Svelte](https://www.youtube.com/live/gkJ09joGBZ4?si=ha0iruRIXv2Mql1w&t=894) +- [Building a SaaS module for SvelteKit](https://www.youtube.com/live/gkJ09joGBZ4?si=bqRe0Fbykm9sUqZS&t=1517) +- [Intro To LayerChart](https://www.youtube.com/live/gkJ09joGBZ4?si=o3rn0WqGBBQckF_2&t=2680) +- [Spatial Programming with Threlte Studio](https://www.youtube.com/live/gkJ09joGBZ4?si=dBL-EfWTLtu4fYSt&t=4026) +- [Convex (Sponsored talk)](https://www.youtube.com/live/gkJ09joGBZ4?si=5KKpLYXi0fLQqwZZ&t=4891) +- [Kitbook: Easily Build, Document, Inspect & Test Svelte Components](https://www.youtube.com/live/gkJ09joGBZ4?si=NMhjp5rBWgf3lV76&t=5903) +- [Fullstack Testing](https://www.youtube.com/live/gkJ09joGBZ4?si=8p5CRD9z-LADsMtO&t=6749) +- [What You Can Do For Your Framework](https://www.youtube.com/live/gkJ09joGBZ4?si=h4LKM12I_vJBBLZ-&t=8515) - also covers a ton of the new features listed below + +These will all get broken up into more sharable (and rewatchable) videos over time, so make sure you subscribe to the [Svelte Society YouTube channel](https://www.youtube.com/@SvelteSociety/featured) to keep up to date. + +## What's new in Svelte + +[Svelte 5 is officially in the Release Candidate stage](https://svelte-5-preview.vercel.app/docs/introduction) and gets closer to release every day. Below, you'll find some highlights from its pre-release [changelog](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md): + +- Hot module reloading is now supported in Svelte 5 (**5.0.0-next.97 and 101**, [#11106](https://github.com/sveltejs/svelte/pull/11106), [#11132](https://github.com/sveltejs/svelte/pull/11132)) +- It is now possible to define global (or child global) styles in a block (**5.0.0-next.111**, [#11276](https://github.com/sveltejs/svelte/pull/11276)) +- Compiled code is even more efficient for `if` blocks, `each` blocks and attribute updates (**5.0.0-next.83-85**, [#10906](https://github.com/sveltejs/svelte/pull/10906), [#10937](https://github.com/sveltejs/svelte/pull/10937) and [#10917](https://github.com/sveltejs/svelte/pull/10917)) +- The built-ins from `svelte/reactivity` are now re-exported to be available on the server (**5.0.0-next.88**, [Docs](https://svelte-5-preview.vercel.app/docs/imports#svelte-reactivity), [#10973](https://github.com/sveltejs/svelte/pull/10973)) +- A new reactive URL object is now available in `svelte/reactivity` (**5.0.0-next.103**, [Docs](https://svelte-5-preview.vercel.app/docs/imports#svelte-reactivity), [#11157](https://github.com/sveltejs/svelte/pull/11157)) +- HTML tags are now faster with more efficient hydration markers (**5.0.0-next.90-91**, [#10986](https://github.com/sveltejs/svelte/pull/10986) and [#11019](https://github.com/sveltejs/svelte/pull/11019)) +- The new `$host` rune retrieves the `this` reference of the custom element that contains a component - removing the need for `createEventDispatcher` (**5.0.0-next.96**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#host), [#11059](https://github.com/sveltejs/svelte/pull/11059)) + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** + +- [Collabwriting](https://www.reddit.com/r/sveltejs/comments/1c6zylc/weve_just_raised_12m_launched_new_product_2year/) just raised $1.2M and launched a new product - [Collabwriting for Teams](https://www.producthunt.com/posts/collabwriting-for-teams). Congrats! +- [Skypix](https://github.com/GhostWalker562/css475-music-library) is a music library that allows users to create playlists, add songs to their library, and share their music with friends +- [Jonze](https://github.com/Pelps12/jonze) is an open-source but managed tool for managing member information. It features attendance tracking and membership plans +- [midi-note-trainer](https://github.com/TeemuKoivisto/midi-note-trainer) is a music notation trainer app built with Web MIDI +- [Easy-Rd](https://easyrd.dev/) is a free tool for coding-based ER diagram creation +- [Gamera](https://gamera.app/) is a simple site analytics tool for a privacy-first world +- [Collecta](https://collecta.space/) lets you collect your internet in a single space - organize images, bookmarks, inspiration, and share your vibe with friends +- [ColdCraft](https://coldcraft.ai/) writes for you by turning bullet points and LinkedIn profiles into effective cold emails +- [Fourplay](https://github.com/kilroyjones/fourplay) is a multiplayer word game written with Rust and Svelte +- [how-long-is-a-click](https://www.how-long-is-a-click.com/) is a site that measures how long *exactly* a click is on the web + + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [Preprocessors Are The Most Powerful Svelte Feature No One Talks About](https://www.youtube.com/watch?v=FNIwqQx7mOo), [How To Make A Custom Markdoc Renderer](https://www.youtube.com/watch?v=mWt7jsgZIWw) and [Responsive CSS Grid Layout In One Line Of Code](https://www.youtube.com/watch?v=b9N1qLTVhvs) by JoyOfCode +- [Phoenix LiveView and Svelte with Wout De Puysseleir](https://www.svelteradio.com/episodes/phoenix-liveview-and-svelte-with-wout-de-puysseleir) by Svelte Radio +- Svelte London - April 2024: + - [Auth in SvelteKit, the hard & easy ways](https://www.youtube.com/live/IJh7w6DtOIs?si=Y7f0U3y8FUGtdU_X&t=191) by Ajit Krishna + - [3 stories of walking in the fire with my SvelteKit project](https://www.youtube.com/live/IJh7w6DtOIs?si=uOoqnEa1MWUZsHJp&t=1993) by Rowan Aldean +- This Week in Svelte: + - [29 Mar](https://www.youtube.com/watch?v=OqwVuE2I5lM) - Superforms + - [5 Apr](https://www.youtube.com/watch?v=MmiBRw8aoXI) - When to go serverless? + - [12 Apr](https://www.youtube.com/watch?v=WQFjaM1-Hm0) - svelte-api-keys with Captain Codeman + - [19 Apr](https://www.youtube.com/watch?v=r_snb9XDX6Q) - Multiple Action Forms + - [26 Apr](https://www.youtube.com/watch?v=TbZpK-LtCME) - Service Workers + + +_To Read_ + +- [LiveView is best with Svelte](https://blog.sequin.io/liveview-is-best-with-svelte/) by Anthony Accomazzo +- [Optimizing My SvelteKit Blog](https://www.refact0r.dev/blog/optimizing-sveltekit) by refac0r +- [Why Lucia might be the best authentication library for SvelteKit](https://omrecipes.dev/blog/lucia-best-auth-library-sveltekit) by Justin Ahinon +- [Deploying a Svelte App with Docker and Node.js: A Developer's Guide](https://www.klevertopee.com/post?id=d85fccb0-ed24-4175-8165-b601e661a37d) by Klevert Opee +- [SvelteKit Todo App with Firebase Admin](https://code.build/p/sveltekit-todo-app-with-firebase-admin-tqdc5j) by Jonathan Gamble +- [Dependency injection in Svelte for fun and profit](https://kylenazario.com/blog/dependency-injection-in-svelte) by Kyle Nazario +- [Don't Lazy-Load Translations](https://inlang.com/g/mqlyfa7l/guide-lorissigrist-dontlazyload) by Loris Sigrist +- [View Transitions in SvelteKit](https://thnee.se/sveltekit-view-transitions) by Mattias Tomas Bobo Lindvall +- [Why is Svelte better?](https://www.zackwebster.com/blogs/why-is-svelte-better) by Zack Webster +- [Mocking SvelteKit Stores in Storybook](https://tylergaw.com/blog/mocking-sveltekit-stores-in-storybook/) by Tyler Gaw +- [Deploy SvelteKit to AWS Amplify: A Step-by-Step Guide](https://www.launchfa.st/blog/deploy-sveltekit-aws-amplify) by Rishi Raj Jain +- [SvelteKit and Stripe demo](https://www.thespatula.io/projects/sveltekit-stripe-demo/demo/) by the spatula +- [SvelteKit Turso Fly.io App Guide](https://scottspence.com/posts/sveltekit-turso-flyio-app-guide) by Scott Spence + + +_To Watch_ + +- [Build a Animated Website with SvelteKit, GSAP & Prismic](https://www.youtube.com/watch?v=v5Ncz5AcXjI) by Prismic +- [Svelte 5: What's New](https://www.youtube.com/watch?v=kvFqpaTP0a0) by Simon Holthausen +- [Build the Ultimate Learning Platform with SvelteKit, PocketBase & TailwindCSS!](https://www.youtube.com/watch?v=b2ftRSX1iZ0&t=47s) and [Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash](https://www.youtube.com/watch?v=5urk4ui_l5o) by Lawal Adebola +- [Porting a vanilla JavaScript library to Svelte 5](https://www.youtube.com/watch?v=apIJlWJ3HgQ) by Stanislav Khromov + + +**Libraries, Tools & Components** + +- [sk-seo](https://github.com/TheDahoom/Sveltekit-seo/) is a dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you +- [Svelte Lib Helpers](https://github.com/shinokada/svelte-lib-helpers) is a utility package designed to streamline various tasks when developing Svelte libraries +- [skitsa](https://github.com/michaelcuneo/sveltekit-sst-auth) is a simple yet fully fledged operational demonstration of SvelteKit Magic Links using SST, hosted on AWS, as a Lambda application +- [svelte-zoomable-circles](https://www.npmjs.com/package/svelte-zoomable-circles) is a Svelte component for displaying and browsing hierarchical data using zoomable circles + + +That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). + +Until next month 👋 diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index d53f8c2d2457..159c15d24e84 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,11 @@ # svelte +## 4.2.16 + +### Patch Changes + +- fix: check if svelte component exists on custom element destroy ([#11489](https://github.com/sveltejs/svelte/pull/11489)) + ## 4.2.15 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 56c0bb8ee682..b3d800de615b 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "4.2.15", + "version": "4.2.16", "description": "Cybernetically enhanced web apps", "type": "module", "module": "src/runtime/index.js", diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js index e41717642100..a0b0f5817217 100644 --- a/packages/svelte/src/runtime/internal/Component.js +++ b/packages/svelte/src/runtime/internal/Component.js @@ -335,7 +335,7 @@ if (typeof HTMLElement === 'function') { this.$$cn = false; // In a microtask, because this could be a move within the DOM Promise.resolve().then(() => { - if (!this.$$cn) { + if (!this.$$cn && this.$$c) { this.$$c.$destroy(); this.$$c = undefined; } diff --git a/packages/svelte/src/shared/version.js b/packages/svelte/src/shared/version.js index bfea4c83a159..2fc7259808cf 100644 --- a/packages/svelte/src/shared/version.js +++ b/packages/svelte/src/shared/version.js @@ -6,5 +6,5 @@ * https://svelte.dev/docs/svelte-compiler#svelte-version * @type {string} */ -export const VERSION = '4.2.15'; +export const VERSION = '4.2.16'; export const PUBLIC_VERSION = '4';