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 @@ +
foo
\ No newline at end of file diff --git a/test/runtime/samples/binding-this-component-reactive/_config.js b/test/runtime/samples/binding-this-component-reactive/_config.js new file mode 100644 index 0000000000..415d2e641c --- /dev/null +++ b/test/runtime/samples/binding-this-component-reactive/_config.js @@ -0,0 +1,8 @@ +export default { + skip_if_ssr: true, + + html: ` +
foo
+
has foo: true
+ ` +}; diff --git a/test/runtime/samples/binding-this-component-reactive/main.html b/test/runtime/samples/binding-this-component-reactive/main.html new file mode 100644 index 0000000000..b9a4709bd7 --- /dev/null +++ b/test/runtime/samples/binding-this-component-reactive/main.html @@ -0,0 +1,9 @@ + + + +
+ has foo: {!!foo} +
diff --git a/test/runtime/samples/binding-this-element-reactive/_config.js b/test/runtime/samples/binding-this-element-reactive/_config.js new file mode 100644 index 0000000000..44609fa3d1 --- /dev/null +++ b/test/runtime/samples/binding-this-element-reactive/_config.js @@ -0,0 +1,5 @@ +export default { + skip_if_ssr: true, + + html: '
has div: true
' +}; diff --git a/test/runtime/samples/binding-this-element-reactive/main.html b/test/runtime/samples/binding-this-element-reactive/main.html new file mode 100644 index 0000000000..cf37519b18 --- /dev/null +++ b/test/runtime/samples/binding-this-element-reactive/main.html @@ -0,0 +1,7 @@ + + +
+ has div: {!!div} +
diff --git a/test/runtime/samples/refs-no-innerhtml/_config.js b/test/runtime/samples/binding-this-no-innerhtml/_config.js similarity index 100% rename from test/runtime/samples/refs-no-innerhtml/_config.js rename to test/runtime/samples/binding-this-no-innerhtml/_config.js diff --git a/test/runtime/samples/refs-no-innerhtml/main.html b/test/runtime/samples/binding-this-no-innerhtml/main.html similarity index 100% rename from test/runtime/samples/refs-no-innerhtml/main.html rename to test/runtime/samples/binding-this-no-innerhtml/main.html diff --git a/test/runtime/samples/refs-unset/_config.js b/test/runtime/samples/binding-this-unset/_config.js similarity index 100% rename from test/runtime/samples/refs-unset/_config.js rename to test/runtime/samples/binding-this-unset/_config.js diff --git a/test/runtime/samples/refs-unset/main.html b/test/runtime/samples/binding-this-unset/main.html similarity index 100% rename from test/runtime/samples/refs-unset/main.html rename to test/runtime/samples/binding-this-unset/main.html diff --git a/test/runtime/samples/refs/_config.js b/test/runtime/samples/binding-this/_config.js similarity index 100% rename from test/runtime/samples/refs/_config.js rename to test/runtime/samples/binding-this/_config.js diff --git a/test/runtime/samples/refs/main.html b/test/runtime/samples/binding-this/main.html similarity index 100% rename from test/runtime/samples/refs/main.html rename to test/runtime/samples/binding-this/main.html