diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index bb67b78d9f..9d926d0d37 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -407,6 +407,8 @@ export default function dom( `); } + const prop_names = `[${props.map(v => JSON.stringify(v.export_name)).join(', ')}]`; + if (options.customElement) { builder.addBlock(deindent` class ${name} extends @SvelteElement { @@ -415,7 +417,7 @@ export default function dom( ${css.code && `this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}); + @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} @@ -449,7 +451,7 @@ export default function dom( constructor(options) { super(${options.dev && `options`}); ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`} - @init(this, options, ${definition}, create_fragment, ${not_equal}); + @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} } diff --git a/src/internal/Component.js b/src/internal/Component.js index 2698b3fe85..58149f8d9d 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -5,6 +5,7 @@ import { blankObject } from './utils.js'; import { children } from './dom.js'; export function bind(component, name, callback) { + if (component.$$.props.indexOf(name) === -1) return; component.$$.bound[name] = callback; callback(component.$$.ctx[name]); } @@ -53,7 +54,7 @@ function make_dirty(component, key) { component.$$.dirty[key] = true; } -export function init(component, options, instance, create_fragment, not_equal) { +export function init(component, options, instance, create_fragment, not_equal, prop_names) { const parent_component = current_component; set_current_component(component); @@ -64,6 +65,7 @@ export function init(component, options, instance, create_fragment, not_equal) { ctx: null, // state + props: prop_names, update: noop, not_equal, bound: blankObject(), diff --git a/test/runtime/samples/component-binding-non-leaky/Counter.svelte b/test/runtime/samples/component-binding-non-leaky/Counter.svelte new file mode 100644 index 0000000000..12229d3aa8 --- /dev/null +++ b/test/runtime/samples/component-binding-non-leaky/Counter.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/test/runtime/samples/component-binding-non-leaky/_config.js b/test/runtime/samples/component-binding-non-leaky/_config.js new file mode 100644 index 0000000000..1b6f29dd74 --- /dev/null +++ b/test/runtime/samples/component-binding-non-leaky/_config.js @@ -0,0 +1,27 @@ +export default { + html: ` + +

count: undefined

+ `, + + async test({ assert, component, target, window }) { + const click = new window.MouseEvent('click'); + const button = target.querySelector('button'); + + await button.dispatchEvent(click); + + assert.equal(component.x, undefined); + assert.htmlEqual(target.innerHTML, ` + +

count: undefined

+ `); + + await button.dispatchEvent(click); + + assert.equal(component.x, undefined); + assert.htmlEqual(target.innerHTML, ` + +

count: undefined

+ `); + } +}; diff --git a/test/runtime/samples/component-binding-non-leaky/main.svelte b/test/runtime/samples/component-binding-non-leaky/main.svelte new file mode 100644 index 0000000000..6ca1ba6ce6 --- /dev/null +++ b/test/runtime/samples/component-binding-non-leaky/main.svelte @@ -0,0 +1,8 @@ + + + +

count: {x}

\ No newline at end of file