Merge branch 'props-bindable-2' into props-bindable-2-error-message

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

@@ -182,7 +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 as part of the $props() rune`,
+	'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

@@ -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/2-analyze/validation.js

@@ -891,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 }) {
@@ -1070,10 +1072,10 @@ export const validation_runes = merge(validation, a11y_validators, {
 		// TODO some of this is duplicated with above, seems off
 		if ((rune === '$derived' || rune === '$derived.by') && args.length !== 1) {
 			error(node, 'invalid-rune-args-length', rune, [1]);
-		} else if (rune === '$state' && args.length > 1) {
+		} else if ((rune === '$state' || rune === '$bindable') && args.length > 1) {
 			error(node, 'invalid-rune-args-length', rune, [0, 1]);
 		} else if (rune === '$props') {
-			if (rune === '$props' && state.has_props_rune) {
+			if (state.has_props_rune) {
 				error(node, 'duplicate-props-rune');
 			}
 

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

@@ -270,20 +270,24 @@ export function client_component(source, analysis, options) {
 	if (analysis.accessors) {
 		for (const [name, binding] of properties) {
 			const key = binding.prop_alias ?? name;
-			if (
-				binding.kind === 'prop' &&
-				[...analysis.instance.scope.declarations].some(
-					([name, d]) => d.kind === 'bindable_prop' && (d.prop_alias ?? name) === key
-				)
-			) {
-				// bindable prop takes precedence
-				continue;
+
+			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(
-				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'))])
-			);
+			component_returned_object.push(getter, setter);
 		}
 	}