use component.name

pull/11238/head
Rich Harris 2 years ago
parent 32d8b86ba3
commit eccaf00441

@ -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}`)
)
)
);

@ -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}).`
);

@ -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).'
});

@ -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>

Loading…
Cancel
Save