binding member expression should only invalidate the object, not the member property

pull/7008/head
tanhauhau 5 years ago
parent 81fc3f898a
commit 0a3b7c0e53

@ -70,6 +70,21 @@ export default class BindingWrapper {
return dependencies;
}
get_update_dependencies() {
const object = get_object(this.node.expression.node).name;
const dependencies = new Set();
dependencies.add(object);
const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(object);
if (indirect_dependencies) {
indirect_dependencies.forEach(indirect_dependency => {
dependencies.add(indirect_dependency);
});
}
return dependencies;
}
is_readonly_media_attribute() {
return this.node.is_readonly_media_attribute();
}

@ -466,7 +466,7 @@ export default class ElementWrapper extends Wrapper {
binding_group.bindings.forEach(binding => {
// TODO this is a mess
add_to_set(dependencies, binding.get_dependencies());
add_to_set(dependencies, binding.get_update_dependencies());
add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
binding.render(block, lock);

@ -12,7 +12,7 @@ export default function bind_this(component: Component, block: Block, binding: B
const callee = block.renderer.reference(fn.name);
const { contextual_dependencies, mutation } = binding.handler;
const dependencies = binding.get_dependencies();
const dependencies = binding.get_update_dependencies();
const body = b`
${mutation}

@ -0,0 +1,18 @@
// binding member expression shouldn't invalidate the property name
export default {
async test({ assert, component, target, window }) {
const input = target.querySelector('input');
assert.deepEqual(component.logs.length, 1);
assert.equal(input.value, 'abc');
input.value = 'hij';
await input.dispatchEvent(new window.Event('input'));
assert.deepEqual(component.values.a, 'hij');
assert.deepEqual(component.logs.length, 1);
component.paths = ['b'];
assert.deepEqual(component.logs.length, 2);
assert.equal(input.value, 'def');
}
};

@ -0,0 +1,9 @@
<script>
export let values = { a: "abc", b: "def" };
export let paths = ["a"];
export let logs = [];
$: paths && logs.push("paths updated");
</script>
<input bind:value={values[paths[0]]} />

@ -0,0 +1,10 @@
export default {
html: '<div>content</div><div>content</div><div>content</div>',
test({ assert, target, component }) {
const divs = target.querySelectorAll('div');
assert.equal(component.refs[0], divs[0]);
assert.equal(component.refs[1], divs[1]);
assert.equal(component.refs[2], divs[2]);
}
};

@ -0,0 +1,13 @@
<script>
export let data = [ { id: "1" }, { id: "2" }, { id: "3" } ];
export let refs = [];
$: list = data.reverse()
</script>
{#each list as { id }, index (id)}
<div bind:this={refs[index]}>
content
</div>
{/each}

@ -0,0 +1,8 @@
// binding member expression shouldn't invalidate the property name
export default {
test({ assert, component, target }) {
const div = target.querySelector('div');
assert.equal(div, component.container.a);
assert.deepEqual(component.logs.length, 1);
}
};

@ -0,0 +1,9 @@
<script>
export let container = {};
export let paths = ["a"];
export let logs = [];
$: paths && logs.push("paths updated");
</script>
<div bind:this={container[paths[0]]} />
Loading…
Cancel
Save