merge v4 branch

Author: benmccann

documentation/blog/2023-12-01-whats-new-in-svelte-december-2023.md

@@ -0,0 +1,115 @@
+---
+title: "What's new in Svelte: December 2023"
+description: 'Svelte 5 preview announced at Svelte Summit Fall 2023'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found [here](https://www.youtube.com/watch?v=pTgIx-ucMsY) (timestamps below):
+- [0:00](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=0s) Hype music!
+- [18:20](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=1100s) Exploring Svelte DevTools - Ignatius B (4 minutes)
+- [25:27](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=1527s) How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)
+- [53:00](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=3180s) enhanced:img - Ben McCann (6 minutes)
+- [1:03:44](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=3824s) inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)
+- [1:17:32](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=4652s) How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)
+- [1:53:10](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=6790s) svelte-ecosystem-ci - Dominik G (10 minutes)
+- [2:23:06](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=8586s) Svelte for Creative Development - Steven Stavrakis (10 minutes)
+- [2:35:33](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=9333s) Translating the docs - Romain I'Ourson (11 minutes)
+- [2:49:48](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=10188s) ENHANCE! - Paolo Ricciuti (25 minutes)
+- [3:18:25](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=11905s) Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)
+- [3:49:11](https://www.youtube.com/watch?v=pTgIx-ucMsY&t=13751s) svelte@next - Rich Harris (18 minutes)
+
+Today is also the first day of [Advent of Svelte](https://advent.sveltesociety.dev/): A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte!
+
+Now let's dive into the updates...
+
+## What's new in Svelte (5.0 Preview!)
+
+[Svelte 5 preview](https://svelte-5-preview.vercel.app/docs/introduction) is now available at [svelte@next](https://www.npmjs.com/package/svelte?activeTab=versions) while Svelte 4's current version (`@latest`) is `4.2.7`. All the changes below are from the preview's branch:
+
+- TypeScript is now supported natively via acorn-typescript (**5.0.0-next.9**, [#9482](https://github.com/sveltejs/svelte/pull/9482))
+- The new `$effect.active` rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (**5.0.0-next.10**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#effect-active), [#9591](https://github.com/sveltejs/svelte/pull/9591))
+- The new `$effect.root` rune creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control (**5.0.0-next.14**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#effect-root), [#9638](https://github.com/sveltejs/svelte/pull/9638))
+
+For all the release notes going forward, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). For the highlights, take a look below!
+
+
+## What's new in SvelteKit
+
+- Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta ([#11026](https://github.com/sveltejs/kit/pull/11026))
+- Prettier 3 and `prettier-plugin-svelte` 3 are now the default versions when creating new SvelteKit projects ([#10410](https://github.com/sveltejs/kit/pull/10410))
+- nodejs20.x is now supported via the Vercel adapter ([#11067](https://github.com/sveltejs/kit/pull/11067))
+- `@sveltejs/enhanced-img` makes serving different sizes of images easy, thanks to pre-processing ([Docs](https://kit.svelte.dev/docs/images#sveltejs-enhanced-img), [#10788](https://github.com/sveltejs/kit/pull/10788))
+
+For a complete list of bug fixes and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages).
+
+
+## What's new in Language Tools
+
+- The latest version of language tools adds best-effort fallback typings to `$props()` rune (**extensions-108.1.0**)
+- Language tools better supports the `@render` tag by using the `Snippet` type (**extensions-108.0.0**)
+- The Svelte ESLint plugin has been updated to support the Svelte 5 preview ([v2.36.0-next.2](https://github.com/sveltejs/eslint-plugin-svelte/releases/tag/v2.36.0-next.2))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+
+- [MobileView](https://mobileview.io/) is a Chrome Extension for real-time, cross-device website simulation
+- [ClassroomIO](https://www.classroomio.com/) is an Open Source Platform for Tech Bootcamps
+- [sshx](https://github.com/ekzhang/sshx) is a secure web-based, collaborative terminal
+- [ToneShift](https://www.toneshift.cc/) lets you clone any voice, create music, and join a community of voices
+- [CanvasGPT](https://www.canvasgpt.com/) is Autonomous Mind Maps. Powered by AI
+- [Wordplay](https://wordplay.dev/) is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography ([Blog Post](https://medium.com/bits-and-behavior/wordplay-accessible-language-inclusive-interactive-typography-e4b9027eaf10))
+- [CodeFlow](https://github.com/SikandarJODD/CodeFlow) is a roadmap for programmers to learn, think and code better
+- [Teller](https://github.com/Valink-Solutions/teller) is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend
+- [Sudoku](https://github.com/betofigueiredo/sudoku) is a board created with SvelteKit, Typescript and Tailwind
+
+**Learning Resources**
+
+_Featuring Svelte Contributors and Ambassadors_
+- [View Transitions in SvelteKit and beyond with Geoff Rich](https://www.svelteradio.com/episodes/view-transitions-in-sveltekit-and-beyond-with-geoff-rich) and [Melting UIs with Thomas G. Lopes](https://www.svelteradio.com/episodes/melting-uis-with-thomas-g-lopes) by Svelte Radio
+- [Making The Best Svelte SVG Animation Library](https://www.youtube.com/watch?v=_jWnyJRKOvU), [How To Publish Your JavaScript Code To Npm With SvelteKit](https://www.youtube.com/watch?v=Xvq8rCl1lIM), and [What's New In Svelte 5? (Runes, Events, Snippets)](https://www.youtube.com/watch?v=gGwnF-lxS_Q) by Joy of Code
+- Svelte Society Talks
+  - [Svelte Society - San Diego November 2023](https://www.youtube.com/watch?v=Gh4ESdKP3yQ)
+  - [Building a SvelteKit Adapter for WinterJS](https://www.youtube.com/watch?v=8HaAagG6V-Q) with Willow and Kev
+- This Week in Svelte:
+  - [2023 October 27](https://www.youtube.com/watch?v=jCNl6dtFDn4) - SvelteKit 1.27.1, the pillars of a component library
+  - [2023 November 3](https://www.youtube.com/watch?v=-cyO9xzBXtk) - SvelteKit 1.27.2, choosing a database, preprocessors
+  - [2023 November 10](https://www.youtube.com/watch?v=1ZWqySQNrtQ) - SvelteKit 1.27.4, Svelte 4.2.3, closing modals
+  - [2023 Nov 17](https://www.youtube.com/watch?v=9lK6VvBEtL0) - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features!
+  - [2023 Nov 24](https://www.youtube.com/watch?v=vofaP86-HKU) - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit
+
+_To Watch/Hear_
+
+- [Why Stack Overflow is embracing Svelte](https://stackoverflow.blog/2023/10/31/why-stack-overflow-is-embracing-svelte/) by The Stack Overflow Podcast
+- [Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc](https://www.youtube.com/watch?v=MoHtXyRI7CQ) by Lawal Adebola
+- [SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial](https://www.youtube.com/watch?v=QKxJW6VVp6w) by Prismic
+
+_To Read_
+
+- [Hands-On Experience: How to Build an eCommerce Store with SvelteKit?](https://crystallize.com/blog/building-ecommerce-with-sveltekit) by Bård Farstad
+- [Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen)](https://www.sveltevietnam.dev/en/blog/20231110-behind-the-screen-dark-mode-with-sveltekit-tailwindcss-and-postcss) by Quang Phan
+- [Setting up OAuth with Auth.js in a SvelteKit Project](https://mainmatter.com/blog/2023/11/23/setting-up-oauth-with-auth-js-and-sveltekit/) by Andrey Mikhaylov
+- [SvelteKit 🤝 Storybook](https://mainmatter.com/blog/2023/11/28/sveltekit-storybook/) by Paolo Ricciuti
+- [Integrate Storybook in Svelte: Doing it the Svelte-way](https://mainmatter.com/blog/2023/09/18/integrate-storybook-in-svelte-doing-it-the-svelte-way/) by Óscar Domínguez Celada
+- [Drizzle ORM with Sveltekit](https://medium.com/@anasmohammed361/drizzle-orm-with-sveltekit-8aecbc8cc39d) and [Sveltekit — Streaming SSR](https://medium.com/@anasmohammed361/sveltekit-streaming-ssr-40ce666daffa) by Mohammed Anas
+- [Svelte & WordPress Full Stack Course](https://www.udemy.com/course/svelte-wordpress-full-stack/) by Artneo Web Design on udemy
+- [Add a loading indicator to a Form Action in SvelteKit](https://snippets.khromov.se/add-a-loading-indicator-to-a-form-action-in-sveltekit/) by Useful Snippets (Stanislav Khromov)
+
+**Libraries, Tools & Components**
+
+- [sveltekit-view-transition](https://github.com/paoloricciuti/sveltekit-view-transition) provides a simplified `view-transition-api` for Sveltekit
+- [T18S](https://t18s.sigrist.dev/) aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use
+- [Svelte Flow](https://svelteflow.dev/) is a customizable Svelte component for building node-based editors and interactive diagrams
+- [Super Sitemap](https://github.com/jasongitmail/super-sitemap) is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths
+- [Svelte UX](https://svelte-ux.techniq.dev/) is a Tailwind-based component library to simplify creating highly interactive and visual applications
+- [CanIKit](https://github.com/tombroomfield/CanIKit) provides a simple way to add authorization to your SvelteKit application
+- [Svelte Toggles](https://github.com/Team-GOATS/svelte-toggles-npm-package) manages light & dark mode interactions and preference storage
+- [Baselime](https://baselime.io/docs/sending-data/cloudflare/pages/sveltekit/) now supports SvelteKit for the edge-logger package
+
+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 time 👋

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte
 
+## 4.2.8
+
+### Patch Changes
+
+- fix: port over props that were set prior to initialization ([#9701](https://github.com/sveltejs/svelte/pull/9701))
+
 ## 4.2.7
 
 ### Patch Changes

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "4.2.7",
+  "version": "4.2.8",
   "description": "Cybernetically enhanced web apps",
   "type": "module",
   "module": "src/runtime/index.js",

packages/svelte/src/runtime/internal/Component.js

@@ -270,6 +270,13 @@ if (typeof HTMLElement === 'function') {
 						this.$$d[name] = get_custom_element_value(name, attribute.value, this.$$p_d, 'toProp');
 					}
 				}
+				// Port over props that were set programmatically before ce was initialized
+				for (const key in this.$$p_d) {
+					if (!(key in this.$$d) && this[key] !== undefined) {
+						this.$$d[key] = this[key]; // don't transform, these were set through JavaScript
+						delete this[key]; // remove the property that shadows the getter/setter
+					}
+				}
 				this.$$c = new this.$$ctor({
 					target: this.shadowRoot || this,
 					props: {

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.7';
+export const VERSION = '4.2.8';
 export const PUBLIC_VERSION = '4';

packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/main.svelte

@@ -0,0 +1,9 @@
+<svelte:options
+	customElement={null}
+/>
+
+<script>
+	export let prop;
+</script>
+
+<p>{prop}</p>

packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/test.js

@@ -0,0 +1,23 @@
+import * as assert from 'assert.js';
+import { tick } from 'svelte';
+import Main from './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<custom-element red white></custom-element>';
+	const ce = target.querySelector('custom-element');
+	ce.prop = 1;
+	customElements.define('custom-element', Main.element);
+	await tick();
+	await tick();
+
+	const ce_root = target.querySelector('custom-element').shadowRoot;
+	const p = ce_root.querySelector('p');
+
+	assert.equal(p.textContent, '1');
+
+	ce.prop = 2;
+	await tick();
+	await tick();
+
+	assert.equal(p.textContent, '2');
+}