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.id('$$props'),
b.array(bindable), b.array(bindable),
b.array(exports), 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 {Record<string, any>} $$props
* @param {string[]} bindable * @param {string[]} bindable
* @param {string[]} exports * @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) { for (const key in $$props) {
var setter = get_descriptor($$props, key)?.set; var setter = get_descriptor($$props, key)?.set;
var name = filename.split('/').pop()?.split('.')[0] || 'Component'; var name = component.name;
if (setter) { if (setter) {
if (exports.includes(key)) { if (exports.includes(key)) {
throw new Error( 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} />) ` + `Instead, use bind:this (e.g. <${name} bind:this={component} />) ` +
`and then access the property on the bound component instance (e.g. component.${key}).` `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 dev: true // to ensure we we catch the error
}, },
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).' '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> <script>
import Counter from './Counter.svelte'; import Counter from './counter/index.svelte';
let increment; let increment;
</script> </script>
<Counter bind:increment={increment} /> <Counter bind:increment={increment} />
<button onclick={increment}>increment</button> <button onclick={increment}>increment</button>

Loading…
Cancel
Save