diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index ab140a75c500..ba1a9603fbcc 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -112,7 +112,7 @@ export default class InlineComponentWrapper extends Wrapper { return; } - const ignores = extract_ignores_above_node(this.node); + const ignores = extract_ignores_above_node(this.node); this.renderer.component.push_ignores(ignores); if (variable.reassigned || variable.export_name || variable.is_reactive_dependency) { this.renderer.component.warn(this.node, compiler_warnings.reactive_component(name)); @@ -309,6 +309,9 @@ export default class InlineComponentWrapper extends Wrapper { }`); } + + const is_key_block_child = this.parent && this.parent.node.type === 'KeyBlock'; + const key_called = '_called'; const munged_bindings = this.node.bindings.map(binding => { component.has_reactive_assignments = true; @@ -397,7 +400,8 @@ export default class InlineComponentWrapper extends Wrapper { component.partly_hoisted.push(body); - return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`; + const run_call_back = is_key_block_child && x`!${block.name}.${key_called}`; + return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}, ${run_call_back}));`; }); const munged_handlers = this.node.handlers.map(handler => { @@ -523,9 +527,9 @@ export default class InlineComponentWrapper extends Wrapper { ${props && b`let ${props} = ${attribute_object};`}`} ${statements} ${name} = new ${expression}(${component_opts}); - ${munged_bindings} ${munged_handlers} + ${is_key_block_child && x`${block.name}.${key_called} = true`} `); if (has_css_custom_properties) { diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index a8a500b25b02..86ce9d8fb3a1 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -5,11 +5,13 @@ import { children, detach, start_hydrating, end_hydrating } from './dom'; import { transition_in } from './transitions'; import { T$$ } from './types'; -export function bind(component, name, callback) { +export function bind(component, name, callback, runCallback = true) { const index = component.$$.props[name]; if (index !== undefined) { component.$$.bound[index] = callback; - callback(component.$$.ctx[index]); + if (runCallback) { + callback(component.$$.ctx[index]); + } } } diff --git a/test/runtime/samples/binding-object-in-key-block/Component.svelte b/test/runtime/samples/binding-object-in-key-block/Component.svelte new file mode 100644 index 000000000000..9330ff4ca039 --- /dev/null +++ b/test/runtime/samples/binding-object-in-key-block/Component.svelte @@ -0,0 +1,7 @@ + + +
+ {obj.value} +
diff --git a/test/runtime/samples/binding-object-in-key-block/_config.js b/test/runtime/samples/binding-object-in-key-block/_config.js new file mode 100644 index 000000000000..7614428150bf --- /dev/null +++ b/test/runtime/samples/binding-object-in-key-block/_config.js @@ -0,0 +1,4 @@ +// fix: https://github.com/sveltejs/svelte/issues/8305 +export default { + html: '0
' +}; diff --git a/test/runtime/samples/binding-object-in-key-block/main.svelte b/test/runtime/samples/binding-object-in-key-block/main.svelte new file mode 100644 index 000000000000..5867a59f402f --- /dev/null +++ b/test/runtime/samples/binding-object-in-key-block/main.svelte @@ -0,0 +1,10 @@ + + +{#key obj} +