merge master

Author: benmccann

.changeset/twelve-suits-drive.md

@@ -0,0 +1,94 @@
+---
+title: "What's new in Svelte: August 2023"
+description: "Extending Custom Element Classes and new +server exports"
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Some sweet new features have dropped in both Svelte and SvelteKit, this month. It's also great to see how many products and side projects have launched using Svelte as their core technology!
+
+More on all that down below...
+
+## What's new in Svelte & Language Tools
+There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
+
+The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
+
+In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).
+
+## What's new in SvelteKit
+- The `HEAD` server method is now available in API routes (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#9753](https://github.com/sveltejs/kit/pull/9753))
+- Responses with `Vary` headers are now cached, too (except for `Vary: *`) (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server-content-negotiation), [#9993](https://github.com/sveltejs/kit/pull/9993))
+- There's now a more helpful error for preview if SvelteKit's build output doesn't exist (**1.22.2**, [#10337](https://github.com/sveltejs/kit/pull/10337))
+
+For all the patches and performance updates from this month, 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).
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [GitLight](https://github.com/ColinLienard/gitlight) brings GitHub & GitLab notifications to your desktop
+- [Days](https://github.com/paprikka/days) is paprikka's life in days, inspired by Buster Benson's Life in Weeks
+- [Mofi](https://mofi.loud.red/) is a content-aware fill and trim for music
+- [JSON Bucket](https://github.com/Nico-Mayer/json-bucket) stores your JSON data so you can access it anywhere through generated API routes
+- [Soggy Planet](https://www.cosmicplayground.org/soggy-planet) is an interactive map of Earth where sea levels rise and fall and the lights of civilization shine through the night ([Source](https://github.com/ryanatkn/cosmicplayground))
+- [PaperClip](https://www.paperclipapp.xyz/) is a Chrome extension that makes it easy to memorize details from papers in machine learning, computer vision, and natural language processing.
+- [Maktaba](https://www.maktaba.digital/) is a bookmark manager that "you will actually use"
+- [Whispering](https://github.com/braden-w/whispering-extension) is a Chrome extension that lets you access OpenAI's Whisper API for fast transcription in the browser (including ChatGPT)
+- [DocuTalk](https://docutalk.co/) is an AI Customer Support chatbot for your website
+- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite 
+- [Been](https://beeneverywhere.net/) is a map builder with travel stats like visited countries, extreme visited points, etc.
+- [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail
+- [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects
+
+
+**Learning Resources**
+_Featuring Svelte Contributors and Ambassadors_
+- [Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod](https://www.youtube.com/watch?v=YOL0HGGVib4) by This Dot Media
+- [Svelte Sirens Stream Design Systems: Lessons Learned](https://www.youtube.com/live/YHZaiIGSqsE?feature=share) featuring Eric Liu creator of Carbon Components Svelte and Svelde the docgen library
+- This Week in Svelte:
+  - [2023 June 30](https://www.youtube.com/watch?v=sDz4_BLoYQ4) - Svelte 4.0.1, SK 1.21, lists, screen readers, loading
+  - [2023 July 7](https://www.youtube.com/watch?v=0tq1ph4DDFA) - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
+  - [2023 July 21](https://www.youtube.com/watch?v=AG4_3kon3zU) - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement
+
+
+_To Watch/Hear_
+- [What is The Transitional Web? with Chris Ferdinandi](https://www.smashingmagazine.com/2023/07/smashing-podcast-episode-63/?ref=dailydevbytes.com) by Smashing Podcast
+- [SvelteKit in 100 seconds](https://www.youtube.com/watch?v=H1eEFfAkIik) by Fireship
+- [Primo V2 Introduction](https://www.youtube.com/watch?v=ThInVXgxJ1Q) by Primo (a [visual CMS](https://primocms.org/) based on Svelte)
+- [Understanding Svelte (vs React)](https://www.youtube.com/watch?v=lYYGhm7p74Q) by Kodaps Academy
+- [Is it thàt simple? - Mastering SvelteKit](https://www.youtube.com/watch?v=6Vrc1VO8pgs) by Threeveloper
+- [Markdown in SvelteKit with custom Components: mdsvex](https://www.youtube.com/watch?v=VJFkyGd0FEA) by hartenfellerdev
+- [How To Add Confetti for Svelte and Sveltekit 🎉](https://www.youtube.com/watch?v=gXtWSb94704) and [Make Your SvelteKit Code 10x Faster With Rust and WebAssembly](https://www.youtube.com/watch?v=Vn2bIv_J_UE) by SvelteRust
+
+
+_To Read_
+- [SvelteJS: My ecosystem is bigger than yours](https://hackmd.io/@roguegpu/r1RKQMdt3) by roguegpu
+- [Avoid shared state on the server in SvelteKit](https://blog.aakashgoplani.in/avoid-shared-state-on-the-server-in-sveltekit) by Aakash Goplani
+- [SvelteKit Fontaine: Reduce Custom Font CLS](https://rodneylab.com/sveltekit-fontaine/) by Rodney Lab
+- [A Simple Guide to Redirects in Svelte Kit](https://rgbstudios.org/blog/redirects-in-svelte-kit) by Justin Golden
+- [React vs Svelte (Q3 2023)](https://gee-astro-personal.vercel.app/blog/post2) by Gee
+- [SvelteKit Page Reaction Component with Upstash Redis](https://scottspence.com/posts/sveltekit-page-reaction-component-with-upstash-redis) by Scott Spence
+- [Building a privacy-friendly, self-hosted application architecture with SvelteKit](https://khromov.se/building-a-privacy-friendly-self-hosted-application-architecture-with-sveltekit/) and [Building a privacy-friendly, self-hosted application architecture with SvelteKit](https://khromov.se/building-a-privacy-friendly-self-hosted-application-architecture-with-sveltekit/) by Stanislav Khromov
+- [Deploying Sveltekit on IIS](https://dev.to/nnutnonn/deploying-sveltekit-on-iis--5gf6) by Nutchapon Makelai
+- [Streamlined Authentication and Secrets Management](https://eman.hashnode.dev/streamlined-authentication-and-secrets-management) by Eman
+
+
+**Libraries, Tools & Components**
+- [Melt UI](https://github.com/melt-ui/melt-ui) is a set of headless, accessible component builders for Svelte
+- [MDsveX](https://github.com/pngwn/MDsveX/releases/tag/mdsvex%400.11.0) has been updated to work with Svelte 4
+- [Svelte Sonner](https://github.com/wobsoriano/svelte-sonner) is an opinionated toast component for Svelte
+- [WebExtensionTemplate](https://github.com/kyle-n/WebExtensionTemplate) lets you skip the boilerplate and write a Web Extension with TypeScript and Svelte or React
+- [svelte-rust](https://github.com/Hugo-Dz/svelte-rust) lets you run Rust code in your Svelte app
+- [SvelteKit SSE](https://github.com/tncrazvan/sveltekit-sse) provides an easy way to produce and consume server sent events
+- [better-svelte-writable](https://github.com/tnthung/better-svelte-writable) provides a type-safe writable which gives you more control over the container
+- [Svetch.ts](https://github.com/Bewinxed/svetch#readme) is a client/types/schema/docs generator for your API endpoints
+- [sveltekit-localize-url](https://github.com/rinart73/sveltekit-localize-url) handles URL localization and routing
+- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte 
+- [Molly](https://github.com/renefournier/molly/tree/main) is a bash script and npm module that helps you clean up unused Svelte components in your project
+- [sveltekit-bot](https://github.com/begoon/sveltekit-bot) is a Telegram bot made with SvelteKit and Vercel
+
+Thanks for reading! As always, 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 👋

documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md

@@ -85,13 +85,13 @@ An element or component can have multiple spread attributes, interspersed with r
 <Widget {...things} />
 ```
 
-`$$props` references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
+`$$props` references all props that are passed to a component, including ones that are not declared with `export`. Using `$$props` will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of `$$props`. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.
 
 ```svelte
 <Widget {...$$props} />
 ```
 
-`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as `$$props`, and is likewise not recommended.
+`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as `$$props`.
 
 ```svelte
 <input {...$$restProps} />

documentation/docs/02-template-syntax/02-basic-markup.md

@@ -738,7 +738,7 @@ DOMRect {
 
 An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
 
-Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-transition-functions).
+Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-animation-functions).
 
 ```svelte
 <!-- When `list` is reordered the animation will run-->

documentation/docs/02-template-syntax/05-element-directives.md

@@ -8,13 +8,34 @@ title: Component directives
 on:eventname={handler}
 ```
 
-Components can emit events using [createEventDispatcher](/docs/svelte#createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
+
+```svelte
+<!-- SomeComponent.svelte -->
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<!-- programmatic dispatching -->
+<button on:click={() => dispatch('hello')}>
+  one
+</button>
+
+<!-- declarative event forwarding -->
+<button on:click>
+  two
+</button>
+```
+
+Listening for component events looks the same as listening for DOM events:
 
 ```svelte
 <SomeComponent on:whatever={handler} />
 ```
 
-As with DOM events, if the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.
+As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.
 
 ```svelte
 <SomeComponent on:whatever />
@@ -92,6 +113,8 @@ You can bind to component props using the same syntax as for elements.
 <Keypad bind:value={pin} />
 ```
 
+While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
+
 ## bind:this
 
 ```svelte
@@ -100,10 +123,10 @@ bind:this={component_instance}
 
 Components also support `bind:this`, allowing you to interact with component instances programmatically.
 
-> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
-
 ```svelte
 <ShoppingCart bind:this={cart} />
 
 <button on:click={() => cart.empty()}> Empty shopping cart </button>
 ```
+
+> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.

documentation/docs/02-template-syntax/06-component-directives.md

@@ -1,5 +1,13 @@
 # svelte
 
+## 4.1.2
+
+### Patch Changes
+
+- fix: allow child element with slot attribute within svelte:element ([#9038](https://github.com/sveltejs/svelte/pull/9038))
+
+- fix: Add data-\* to svg attributes ([#9036](https://github.com/sveltejs/svelte/pull/9036))
+
 ## 4.1.1
 
 ### Patch Changes

packages/svelte/CHANGELOG.md

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

packages/svelte/package.json

@@ -530,7 +530,6 @@ export default class Element extends Node {
 				this.name === 'option' ||
 				this.is_dynamic_element ||
 				this.tag_expr.dynamic_dependencies().length ||
-				this.is_dynamic_element ||
 				component.compile_options.dev
 			) {
 				this.parent.cannot_use_innerhtml(); // need to use add_location
@@ -1414,7 +1413,9 @@ const regex_minus_sign = /-/;
 function within_custom_element(parent) {
 	while (parent) {
 		if (parent.type === 'InlineComponent') return false;
-		if (parent.type === 'Element' && regex_minus_sign.test(parent.name)) return true;
+		if (parent.type === 'Element') {
+			if (regex_minus_sign.test(parent.name) || parent.is_dynamic_element) return true;
+		}
 		parent = parent.parent;
 	}
 	return false;

packages/svelte/src/compiler/compile/nodes/Element.js

@@ -26,11 +26,7 @@ function _distance(str1, str2) {
 	str1 = String(str1);
 	str2 = String(str2);
 	const distance = levenshtein(str1, str2);
-	if (str1.length > str2.length) {
-		return 1 - distance / str1.length;
-	} else {
-		return 1 - distance / str2.length;
-	}
+	return 1 - distance / Math.max(str1.length, str2.length);
 }
 
 // helper functions

packages/svelte/src/compiler/utils/fuzzymatch.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '4.1.1';
+export const VERSION = '4.1.2';
 export const PUBLIC_VERSION = '4';