use component.name

Author: Rich-Harris

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

@@ -270,7 +270,7 @@ export function client_component(source, analysis, options) {
 					b.id('$$props'),
 					b.array(bindable),
 					b.array(exports),
-					b.id(`${analysis.name}.filename`)
+					b.id(`${analysis.name}`)
 				)
 			)
 		);

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

@@ -86,17 +86,17 @@ export function loop_guard(timeout) {
  * @param {Record<string, any>} $$props
  * @param {string[]} bindable
  * @param {string[]} exports
- * @param {string} filename
+ * @param {Function & { filename: string }} component
  */
-export function validate_prop_bindings($$props, bindable, exports, filename = '') {
+export function validate_prop_bindings($$props, bindable, exports, component) {
 	for (const key in $$props) {
 		var setter = get_descriptor($$props, key)?.set;
-		var name = filename.split('/').pop()?.split('.')[0] || 'Component';
+		var name = component.name;
 
 		if (setter) {
 			if (exports.includes(key)) {
 				throw new Error(
-					`Component ${filename} has an export named ${key} that a consumer component is trying to access using bind:${key}, which is disallowed. ` +
+					`Component ${component.filename} has an export named ${key} that a consumer component is trying to access using bind:${key}, which is disallowed. ` +
 						`Instead, use bind:this (e.g. <${name} bind:this={component} />) ` +
 						`and then access the property on the bound component instance (e.g. component.${key}).`
 				);

packages/svelte/tests/runtime-runes/samples/export-binding/_config.js

@@ -5,6 +5,6 @@ export default test({
 		dev: true // to ensure we we catch the error
 	},
 	error:
-		'Component .../samples/export-binding/Counter.svelte has an export named increment that a consumer component is trying to access using bind:increment, which is disallowed. ' +
+		'Component .../export-binding/counter/index.svelte has an export named increment that a consumer component is trying to access using bind:increment, which is disallowed. ' +
 		'Instead, use bind:this (e.g. <Counter bind:this={component} />) and then access the property on the bound component instance (e.g. component.increment).'
 });

packages/svelte/tests/runtime-runes/samples/export-binding/Counter.svelte renamed to packages/svelte/tests/runtime-runes/samples/export-binding/counter/index.svelte

@@ -1,7 +1,7 @@
 <script>
-    import Counter from './Counter.svelte';
+    import Counter from './counter/index.svelte';
     let increment;
 </script>
 
 <Counter bind:increment={increment} />
-<button onclick={increment}>increment</button>
+<button onclick={increment}>increment</button>