Merge branch 'main' into props-bindable-2

Author: dummdidumm

.changeset/pre.json

@@ -13,6 +13,7 @@
     "afraid-moose-matter",
     "angry-books-jam",
     "angry-plums-punch",
+    "beige-cobras-smoke",
     "beige-flies-wash",
     "beige-mirrors-listen",
     "beige-rabbits-shave",
@@ -63,6 +64,7 @@
     "dry-eggs-retire",
     "dull-coins-vanish",
     "dull-mangos-wave",
+    "dull-pots-add",
     "dull-roses-relate",
     "early-ads-tie",
     "eight-steaks-shout",
@@ -166,6 +168,7 @@
     "lucky-schools-hang",
     "lucky-toes-begin",
     "many-trees-fix",
+    "mighty-cooks-scream",
     "mighty-files-hammer",
     "moody-carrots-lay",
     "moody-frogs-exist",
@@ -192,6 +195,7 @@
     "old-mails-sneeze",
     "old-oranges-compete",
     "olive-kangaroos-brake",
+    "olive-mice-fix",
     "olive-seals-sell",
     "olive-shirts-complain",
     "olive-socks-kick",
@@ -233,6 +237,7 @@
     "rotten-rules-invite",
     "rude-ghosts-tickle",
     "selfish-dragons-knock",
+    "selfish-spies-help",
     "selfish-tools-hide",
     "serious-kids-deliver",
     "serious-needles-joke",
@@ -265,6 +270,7 @@
     "small-papayas-laugh",
     "small-sheep-type",
     "smart-parents-swim",
+    "smart-turkeys-tell",
     "smart-zebras-pay",
     "smooth-rings-rush",
     "soft-clocks-remember",
@@ -306,6 +312,7 @@
     "tasty-cheetahs-appear",
     "tasty-numbers-perform",
     "tasty-steaks-smile",
+    "ten-eels-move",
     "ten-foxes-repeat",
     "ten-jokes-divide",
     "ten-peaches-sleep",

.changeset/selfish-spies-help.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve element class attribute behaviour

.changeset/small-spiders-fail.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: apply fallback value every time in runes mode

packages/svelte/.gitignore

@@ -11,3 +11,5 @@
 /motion.d.ts
 /store.d.ts
 /transition.d.ts
+
+/scripts/_bundle.js

packages/svelte/CHANGELOG.md

@@ -1,5 +1,23 @@
 # svelte
 
+## 5.0.0-next.81
+
+### Patch Changes
+
+- feat: add support for webkitdirectory DOM boolean attribute ([#10847](https://github.com/sveltejs/svelte/pull/10847))
+
+- fix: don't override instance methods during legacy class creation ([#10834](https://github.com/sveltejs/svelte/pull/10834))
+
+- fix: adjust scope parent for named slots ([#10843](https://github.com/sveltejs/svelte/pull/10843))
+
+- fix: improve handling of unowned derived signals ([#10842](https://github.com/sveltejs/svelte/pull/10842))
+
+- fix: improve element class attribute behaviour ([#10856](https://github.com/sveltejs/svelte/pull/10856))
+
+- fix: ensure select value is updated upon select option removal ([#10846](https://github.com/sveltejs/svelte/pull/10846))
+
+- fix: ensure capture events don't call delegated events ([#10831](https://github.com/sveltejs/svelte/pull/10831))
+
 ## 5.0.0-next.80
 
 ### Patch Changes

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.80",
+  "version": "5.0.0-next.81",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/scripts/check-treeshakeability.js

@@ -12,6 +12,15 @@ async function bundle_code(entry) {
 			virtual({
 				__entry__: entry
 			}),
+			{
+				name: 'resolve-svelte',
+				resolveId(importee) {
+					if (importee.startsWith('svelte')) {
+						const entry = pkg.exports[importee.replace('svelte', '.')];
+						return path.resolve(entry.browser ?? entry.default);
+					}
+				}
+			},
 			nodeResolve({
 				exportConditions: ['production', 'import', 'browser', 'default']
 			})
@@ -65,7 +74,7 @@ for (const key in pkg.exports) {
 }
 
 const client_main = path.resolve(pkg.exports['.'].browser);
-const without_hydration = await bundle_code(
+const bundle = await bundle_code(
 	// Use all features which contain hydration code to ensure it's treeshakeable
 	compile(
 		`
@@ -99,15 +108,18 @@ const without_hydration = await bundle_code(
 		{ filename: 'App.svelte' }
 	).js.code
 );
-if (!without_hydration.includes('current_hydration_fragment')) {
+
+if (!bundle.includes('current_hydration_fragment')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);
 } else {
 	// eslint-disable-next-line no-console
-	console.error(without_hydration);
+	console.error(bundle);
 	// eslint-disable-next-line no-console
 	console.error(`❌ Hydration code not treeshakeable`);
 	failed = true;
+
+	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 
 // eslint-disable-next-line no-console

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -1088,6 +1088,7 @@ const common_visitors = {
 			}
 
 			if (
+				context.state.analysis.runes &&
 				node !== binding.node &&
 				// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
 				// it's likely not using a primitive value and thus this warning isn't that helpful.

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -271,10 +271,23 @@ export function client_component(source, analysis, options) {
 		for (const [name, binding] of properties) {
 			const key = binding.prop_alias ?? name;
 
-			component_returned_object.push(
-				b.get(key, [b.return(b.call(b.id(name)))]),
-				b.set(key, [b.stmt(b.call(b.id(name), b.id('$$value'))), b.stmt(b.call('$.flushSync'))])
-			);
+			const getter = b.get(key, [b.return(b.call(b.id(name)))]);
+
+			const setter = b.set(key, [
+				b.stmt(b.call(b.id(name), b.id('$$value'))),
+				b.stmt(b.call('$.flushSync'))
+			]);
+
+			if (analysis.runes && binding.initial) {
+				// turn `set foo($$value)` into `set foo($$value = expression)`
+				setter.value.params[0] = {
+					type: 'AssignmentPattern',
+					left: b.id('$$value'),
+					right: /** @type {import('estree').Expression} */ (binding.initial)
+				};
+			}
+
+			component_returned_object.push(getter, setter);
 		}
 	}
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -28,10 +28,14 @@ import {
 	AttributeAliases,
 	DOMBooleanAttributes,
 	EACH_INDEX_REACTIVE,
+	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
 	EACH_IS_STRICT_EQUALS,
 	EACH_ITEM_REACTIVE,
-	EACH_KEYED
+	EACH_KEYED,
+	TRANSITION_GLOBAL,
+	TRANSITION_IN,
+	TRANSITION_OUT
 } from '../../../../../constants.js';
 import { regex_is_valid_identifier } from '../../../patterns.js';
 import { javascript_visitors_runes } from './javascript-runes.js';
@@ -473,6 +477,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
 	const state = context.state;
 	const name = get_attribute_name(element, attribute, context);
+	const is_svg = context.state.metadata.namespace === 'svg';
 	let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context);
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
@@ -507,13 +512,19 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		if (name === 'class') {
 			if (singular) {
 				return {
-					singular: b.stmt(b.call('$.class_name_effect', node_id, b.thunk(singular))),
-					grouped: b.stmt(b.call('$.class_name', node_id, singular)),
+					singular: b.stmt(
+						b.call(
+							is_svg ? '$.svg_class_name_effect' : '$.class_name_effect',
+							node_id,
+							b.thunk(singular)
+						)
+					),
+					grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, singular)),
 					skip_condition: true
 				};
 			}
 			return {
-				grouped: b.stmt(b.call('$.class_name', node_id, value)),
+				grouped: b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value)),
 				skip_condition: true
 			};
 		} else if (!DOMProperties.includes(name)) {
@@ -1916,7 +1927,7 @@ export const template_visitors = {
 		state.init.push(
 			b.stmt(
 				b.call(
-					'$.animate',
+					'$.animation',
 					state.node,
 					b.thunk(
 						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
@@ -1933,25 +1944,21 @@ export const template_visitors = {
 		error(node, 'INTERNAL', 'Node should have been handled elsewhere');
 	},
 	TransitionDirective(node, { state, visit }) {
-		const type = node.intro && node.outro ? '$.transition' : node.intro ? '$.in' : '$.out';
-		const expression =
-			node.expression === null
-				? b.literal(null)
-				: b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression)));
+		let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
+		if (node.intro) flags |= TRANSITION_IN;
+		if (node.outro) flags |= TRANSITION_OUT;
 
-		state.init.push(
-			b.stmt(
-				b.call(
-					type,
-					state.node,
-					b.thunk(
-						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
-					),
-					expression,
-					node.modifiers.includes('global') ? b.true : b.false
-				)
-			)
-		);
+		const args = [
+			b.literal(flags),
+			state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name))))
+		];
+
+		if (node.expression) {
+			args.push(b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression))));
+		}
+
+		state.init.push(b.stmt(b.call('$.transition', ...args)));
 	},
 	RegularElement(node, context) {
 		if (node.name === 'noscript') {
@@ -2339,6 +2346,19 @@ export const template_visitors = {
 			each_type |= EACH_ITEM_REACTIVE;
 		}
 
+		// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
+		// we can determine at compile time whether the each block is animated or not (in which
+		// case it should measure animated elements before and after reconciliation).
+		if (
+			node.key &&
+			node.body.nodes.some((child) => {
+				if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+				return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+			})
+		) {
+			each_type |= EACH_IS_ANIMATED;
+		}
+
 		if (each_node_meta.is_controlled) {
 			each_type |= EACH_IS_CONTROLLED;
 		}
@@ -2551,22 +2571,44 @@ export const template_visitors = {
 			context.visit(node.consequent)
 		);
 
-		context.state.after_update.push(
-			b.stmt(
-				b.call(
-					'$.if',
-					context.state.node,
-					b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
-					b.arrow([b.id('$$anchor')], consequent),
-					node.alternate
-						? b.arrow(
-								[b.id('$$anchor')],
-								/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
-							)
-						: b.literal(null)
-				)
-			)
-		);
+		const args = [
+			context.state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
+			b.arrow([b.id('$$anchor')], consequent),
+			node.alternate
+				? b.arrow(
+						[b.id('$$anchor')],
+						/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
+					)
+				: b.literal(null)
+		];
+
+		if (node.elseif) {
+			// We treat this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else}
+			//     {#if y}
+			//       <div transition:foo>...</div>
+			//     {/if}
+			//   {/if}
+			//
+			// ...slightly differently to this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else if y}
+			//     <div transition:foo>...</div>
+			//   {/if}
+			//
+			// ...even though they're logically equivalent. In the first case, the
+			// transition will only play when `y` changes, but in the second it
+			// should play when `x` or `y` change — both are considered 'local'
+			args.push(b.literal(true));
+		}
+
+		context.state.after_update.push(b.stmt(b.call('$.if', ...args)));
 	},
 	AwaitBlock(node, context) {
 		context.state.template.push('<!>');

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

@@ -219,7 +219,7 @@ export function function_declaration(id, params, body) {
 /**
  * @param {string} name
  * @param {import('estree').Statement[]} body
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: import('estree').FunctionExpression}}}
  */
 export function get(name, body) {
 	return prop('get', key(name), function_builder(null, [], block(body)));
@@ -314,11 +314,12 @@ export function object_pattern(properties) {
 }
 
 /**
+ * @template {import('estree').Expression} Value
  * @param {'init' | 'get' | 'set'} kind
  * @param {import('estree').Expression} key
- * @param {import('estree').Expression} value
+ * @param {Value} value
  * @param {boolean} computed
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: Value }}
  */
 export function prop(kind, key, value, computed = false) {
 	return { type: 'Property', kind, key, value, method: false, shorthand: false, computed };
@@ -364,7 +365,7 @@ export function sequence(expressions) {
 /**
  * @param {string} name
  * @param {import('estree').Statement[]} body
- * @returns {import('estree').Property}
+ * @returns {import('estree').Property & { value: import('estree').FunctionExpression}}
  */
 export function set(name, body) {
 	return prop('set', key(name), function_builder(null, [id('$$value')], block(body)));