Merge branch 'main' into snippet-types

Author: trueadm

.changeset/beige-cobras-smoke.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: add support for webkitdirectory DOM boolean attribute

.changeset/dull-pots-add.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't override instance methods during legacy class creation

.changeset/mighty-cooks-scream.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: adjust scope parent for named slots

.changeset/olive-mice-fix.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve handling of unowned derived signals

.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/silly-ways-wash.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: take form resets into account for two way bindings

.changeset/small-spiders-fail.md

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

.changeset/smart-turkeys-tell.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure select value is updated upon select option removal

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/elements.d.ts

@@ -1056,6 +1056,7 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	type?: HTMLInputTypeAttribute | undefined | null;
 	value?: any;
 	width?: number | string | undefined | null;
+	webkitdirectory?: boolean | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLInputElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLInputElement> | undefined | null;

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/errors.js

@@ -182,6 +182,7 @@ const runes = {
 		`$props() assignment must not contain nested properties or computed keys`,
 	'invalid-props-location': () =>
 		`$props() can only be used at the top level of components as a variable declaration initializer`,
+	'invalid-bindable-location': () => `$bindable() can only be used inside a $props() declaration`,
 	/** @param {string} rune */
 	'invalid-state-location': (rune) =>
 		`${rune}(...) can only be used as a variable declaration initializer or a class field`,

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

@@ -436,7 +436,7 @@ export function analyze_component(root, options) {
 			);
 		}
 	} else {
-		instance.scope.declare(b.id('$$props'), 'prop', 'synthetic');
+		instance.scope.declare(b.id('$$props'), 'bindable_prop', 'synthetic');
 		instance.scope.declare(b.id('$$restProps'), 'rest_prop', 'synthetic');
 
 		for (const { ast, scope, scopes } of [module, instance, template]) {
@@ -466,7 +466,10 @@ export function analyze_component(root, options) {
 		}
 
 		for (const [name, binding] of instance.scope.declarations) {
-			if (binding.kind === 'prop' && binding.node.name !== '$$props') {
+			if (
+				(binding.kind === 'prop' || binding.kind === 'bindable_prop') &&
+				binding.node.name !== '$$props'
+			) {
 				const references = binding.references.filter(
 					(r) => r.node !== binding.node && r.path.at(-1)?.type !== 'ExportSpecifier'
 				);
@@ -753,12 +756,13 @@ const legacy_scope_tweaker = {
 					state.scope.get(specifier.local.name)
 				);
 				if (
-					binding.kind === 'state' ||
-					binding.kind === 'frozen_state' ||
-					(binding.kind === 'normal' &&
-						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var'))
+					binding !== null &&
+					(binding.kind === 'state' ||
+						binding.kind === 'frozen_state' ||
+						(binding.kind === 'normal' &&
+							(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
 				) {
-					binding.kind = 'prop';
+					binding.kind = 'bindable_prop';
 					if (specifier.exported.name !== specifier.local.name) {
 						binding.prop_alias = specifier.exported.name;
 					}
@@ -796,7 +800,7 @@ const legacy_scope_tweaker = {
 			for (const declarator of node.declaration.declarations) {
 				for (const id of extract_identifiers(declarator.id)) {
 					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
-					binding.kind = 'prop';
+					binding.kind = 'bindable_prop';
 				}
 			}
 		}
@@ -885,11 +889,24 @@ const runes_scope_tweaker = {
 					property.key.type === 'Identifier'
 						? property.key.name
 						: /** @type {string} */ (/** @type {import('estree').Literal} */ (property.key).value);
-				const initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
+				let initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
 
 				const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(name));
 				binding.prop_alias = alias;
-				binding.initial = initial; // rewire initial from $props() to the actual initial value
+
+				// rewire initial from $props() to the actual initial value, stripping $bindable() if necessary
+				if (
+					initial?.type === 'CallExpression' &&
+					initial.callee.type === 'Identifier' &&
+					initial.callee.name === '$bindable'
+				) {
+					binding.initial = /** @type {import('estree').Expression | null} */ (
+						initial.arguments[0] ?? null
+					);
+					binding.kind = 'bindable_prop';
+				} else {
+					binding.initial = initial;
+				}
 			}
 		}
 	},
@@ -1072,6 +1089,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/2-analyze/validation.js

@@ -299,17 +299,19 @@ const validation = {
 			error(node, 'invalid-binding-expression');
 		}
 
+		const binding = context.state.scope.get(left.name);
+
 		if (
 			assignee.type === 'Identifier' &&
 			node.name !== 'this' // bind:this also works for regular variables
 		) {
-			const binding = context.state.scope.get(left.name);
 			// reassignment
 			if (
 				!binding ||
 				(binding.kind !== 'state' &&
 					binding.kind !== 'frozen_state' &&
 					binding.kind !== 'prop' &&
+					binding.kind !== 'bindable_prop' &&
 					binding.kind !== 'each' &&
 					binding.kind !== 'store_sub' &&
 					!binding.mutated)
@@ -328,8 +330,6 @@ const validation = {
 			// TODO handle mutations of non-state/props in runes mode
 		}
 
-		const binding = context.state.scope.get(left.name);
-
 		if (node.name === 'group') {
 			if (!binding) {
 				error(node, 'INTERNAL', 'Cannot find declaration for bind:group');
@@ -780,7 +780,25 @@ function validate_call_expression(node, scope, path) {
 		error(node, 'invalid-props-location');
 	}
 
-	if (rune === '$state' || rune === '$derived' || rune === '$derived.by') {
+	if (rune === '$bindable') {
+		if (parent.type === 'AssignmentPattern' && path.at(-3)?.type === 'ObjectPattern') {
+			const declarator = path.at(-4);
+			if (
+				declarator?.type === 'VariableDeclarator' &&
+				get_rune(declarator.init, scope) === '$props'
+			) {
+				return;
+			}
+		}
+		error(node, 'invalid-bindable-location');
+	}
+
+	if (
+		rune === '$state' ||
+		rune === '$state.frozen' ||
+		rune === '$derived' ||
+		rune === '$derived.by'
+	) {
 		if (parent.type === 'VariableDeclarator') return;
 		if (parent.type === 'PropertyDefinition' && !parent.static && !parent.computed) return;
 		error(node, 'invalid-state-location', rune);
@@ -873,6 +891,8 @@ export const validation_runes_js = {
 			error(node, 'invalid-rune-args-length', rune, [0, 1]);
 		} else if (rune === '$props') {
 			error(node, 'invalid-props-location');
+		} else if (rune === '$bindable') {
+			error(node, 'invalid-bindable-location');
 		}
 	},
 	AssignmentExpression(node, { state }) {
@@ -1022,6 +1042,9 @@ export const validation_runes = merge(validation, a11y_validators, {
 		}
 	},
 	CallExpression(node, { state, path }) {
+		if (get_rune(node, state.scope) === '$bindable' && node.arguments.length > 1) {
+			error(node, 'invalid-rune-args-length', '$bindable', [0, 1]);
+		}
 		validate_call_expression(node, state.scope, path);
 	},
 	EachBlock(node, { next, state }) {
@@ -1062,7 +1085,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 			state.has_props_rune = true;
 
 			if (args.length > 0) {
-				error(node, 'invalid-rune-args-length', '$props', [0]);
+				error(node, 'invalid-rune-args-length', rune, [0]);
 			}
 
 			if (node.id.type !== 'ObjectPattern') {