diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index ebb7d8666e..d7c928ac3a 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -532,11 +532,12 @@ export default class ElementWrapper extends Wrapper { renderer.component.declarations.push(name); renderer.component.template_references.add(name); - const { handler } = this_binding.munge(block); + const { handler, object } = this_binding.munge(block); renderer.component.partly_hoisted.push(deindent` function ${name}($$node) { ${handler.mutation} + $$make_dirty('${object}'); } `); diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index a73a23b8e4..00ff21a225 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -11,6 +11,7 @@ import deindent from '../../../../utils/deindent'; import Attribute from '../../../nodes/Attribute'; import getObject from '../../../../utils/getObject'; import Binding from '../../../nodes/Binding'; +import flattenReference from '../../../../utils/flattenReference'; export default class InlineComponentWrapper extends Wrapper { var: string; @@ -196,12 +197,15 @@ export default class InlineComponentWrapper extends Wrapper { } const munged_bindings = this.node.bindings.map(binding => { + component.has_reactive_assignments = true; + if (binding.name === 'this') { const fn = component.getUniqueName(`${this.var}_binding`); component.declarations.push(fn); component.template_references.add(fn); let lhs; + let object; if (binding.isContextual && binding.expression.node.type === 'Identifier') { // bind:x={y} — we can't just do `y = x`, we need to @@ -209,13 +213,17 @@ export default class InlineComponentWrapper extends Wrapper { const { name } = binding.expression.node; const { object, property, snippet } = block.bindings.get(name)(); lhs = snippet; + + // TODO we need to invalidate... something } else { + object = flattenReference(binding.expression.node).name; lhs = component.source.slice(binding.expression.node.start, binding.expression.node.end).trim(); } component.partly_hoisted.push(deindent` function ${fn}($$component) { ${lhs} = $$component; + ${object && `$$make_dirty('${object}');`} } `); @@ -223,8 +231,6 @@ export default class InlineComponentWrapper extends Wrapper { return `@add_binding_callback(() => ctx.${fn}(${this.var}));`; } - component.has_reactive_assignments = true; - const name = component.getUniqueName(`${this.var}_${binding.name}_binding`); component.declarations.push(name); component.template_references.add(name); diff --git a/test/runtime/samples/binding-this-component-reactive/Foo.html b/test/runtime/samples/binding-this-component-reactive/Foo.html new file mode 100644 index 0000000000..066a48b65e --- /dev/null +++ b/test/runtime/samples/binding-this-component-reactive/Foo.html @@ -0,0 +1 @@ +