fix: warn instead of error when binding a non-existent prop

Co-authored-by: Paolo Ricciuti <[email protected]>

Author: oscard0m

.changeset/nervous-pans-call.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: warn instead of error when binding a non-existent prop

packages/svelte/messages/client-warnings/warnings.md

@@ -1,3 +1,7 @@
+## binding_non_existent_prop
+
+> A component is attempting to bind to a non-existent property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`)
+
 ## binding_property_non_reactive
 
 > `%binding%` is binding to a non-reactive property

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

@@ -286,16 +286,26 @@ export function client_component(analysis, options) {
 
 	const properties = [...analysis.instance.scope.declarations].filter(
 		([name, binding]) =>
-			(binding.kind === 'prop' || binding.kind === 'bindable_prop') && !name.startsWith('$$')
+			(binding.kind === 'prop' ||
+				binding.kind === 'bindable_prop' ||
+				binding.kind === 'rest_prop') &&
+			!name.startsWith('$$')
 	);
 
 	if (dev && analysis.runes) {
 		const exports = analysis.exports.map(({ name, alias }) => b.literal(alias ?? name));
 		/** @type {ESTree.Literal[]} */
 		const bindable = [];
+		const non_bindable = [];
+		let has_rest = false;
+
 		for (const [name, binding] of properties) {
 			if (binding.kind === 'bindable_prop') {
 				bindable.push(b.literal(binding.prop_alias ?? name));
+			} else if (binding.kind === 'rest_prop') {
+				has_rest = true;
+			} else {
+				non_bindable.push(b.literal(binding.prop_alias ?? name));
 			}
 		}
 		instance.body.unshift(
@@ -304,8 +314,10 @@ export function client_component(analysis, options) {
 					'$.validate_prop_bindings',
 					b.id('$$props'),
 					b.array(bindable),
+					b.array(non_bindable),
 					b.array(exports),
-					b.id(`${analysis.name}`)
+					b.id(`${analysis.name}`),
+					b.literal(has_rest)
 				)
 			)
 		);

packages/svelte/src/internal/client/validate.js

@@ -49,10 +49,19 @@ export function validate_each_keys(collection, key_fn) {
 /**
  * @param {Record<string, any>} $$props
  * @param {string[]} bindable
+ * @param {string[]} non_bindable
  * @param {string[]} exports
  * @param {Function & { [FILENAME]: string }} component
+ * @param {boolean} has_rest
  */
-export function validate_prop_bindings($$props, bindable, exports, component) {
+export function validate_prop_bindings(
+	$$props,
+	bindable,
+	non_bindable,
+	exports,
+	component,
+	has_rest
+) {
 	for (const key in $$props) {
 		var setter = get_descriptor($$props, key)?.set;
 		var name = component.name;
@@ -63,7 +72,10 @@ export function validate_prop_bindings($$props, bindable, exports, component) {
 			}
 
 			if (!bindable.includes(key)) {
-				e.bind_not_bindable(key, component[FILENAME], name);
+				if (has_rest || non_bindable.includes(key)) {
+					e.bind_not_bindable(key, component[FILENAME], name);
+				}
+				w.binding_non_existent_prop(key, component[FILENAME], name);
 			}
 		}
 	}

packages/svelte/src/internal/client/warnings.js

@@ -5,6 +5,21 @@ import { DEV } from 'esm-env';
 var bold = 'font-weight: bold';
 var normal = 'font-weight: normal';
 
+/**
+ * A component is attempting to bind to a non-existent property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`)
+ * @param {string} key
+ * @param {string} component
+ * @param {string} name
+ */
+export function binding_non_existent_prop(key, component, name) {
+	if (DEV) {
+		console.warn(`%c[svelte] binding_non_existent_prop\n%cA component is attempting to bind to a non-existent property \`${key}\` belonging to ${component} (i.e. \`<${name} bind:${key}={...}>\`)`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("binding_non_existent_prop");
+	}
+}
+
 /**
  * `%binding%` (%location%) is binding to a non-reactive property
  * @param {string} binding

packages/svelte/tests/runtime-runes/samples/props-bindable-non-existent/Input.svelte

@@ -0,0 +1,7 @@
+<script>
+	let {
+		value = $bindable()
+	} = $props()
+</script>
+
+<input type="text" bind:value  />

packages/svelte/tests/runtime-runes/samples/props-bindable-non-existent/InputEditable.svelte

@@ -0,0 +1,9 @@
+<script>
+	let {
+		value = $bindable(),
+		content = $bindable(),
+	} = $props()
+</script>
+<div bind:innerText={content} contenteditable>
+</div>
+<input type="text" bind:value />

packages/svelte/tests/runtime-runes/samples/props-bindable-non-existent/_config.js

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		'A component is attempting to bind to a non-existent property `content` belonging to Input.svelte (i.e. `<Input bind:content={...}>`)'
+	]
+});

packages/svelte/tests/runtime-runes/samples/props-bindable-non-existent/main.svelte

@@ -0,0 +1,15 @@
+<script>
+    import Input from './Input.svelte';
+    import InputEditable from './InputEditable.svelte';
+
+		const components = [
+			Input,
+			InputEditable
+		]
+
+		const results = $state([{}, {}]);
+</script>
+
+{#each components as Component, i}
+	<Component bind:content={results[i].content} bind:value={results[i].value} />
+{/each}