diff --git a/src/compile/nodes/shared/Tag.ts b/src/compile/nodes/shared/Tag.ts index 94971bef11..0e8527cda4 100644 --- a/src/compile/nodes/shared/Tag.ts +++ b/src/compile/nodes/shared/Tag.ts @@ -10,8 +10,19 @@ export default class Tag extends Node { this.expression = new Expression(component, this, scope, info.expression); this.should_cache = ( - info.expression.type !== 'Identifier' || - (this.expression.dependencies.size && scope.names.has(info.expression.name)) + (info.expression.type !== 'Identifier' || (this.expression.dependencies.size && scope.names.has(info.expression.name))) && + !this.contains_mutable_expression() ); } -} \ No newline at end of file + + contains_mutable_expression() { + const { node: expression } = this.expression; + + if (expression.type !== 'MemberExpression') return false; + + const { name } = expression.object; + const variable = this.component.var_lookup.get(name); + + return variable && variable.mutated; + } +} diff --git a/test/runtime/samples/reactive-values-mutable-array/_config.js b/test/runtime/samples/reactive-values-mutable-array/_config.js new file mode 100644 index 0000000000..3d99fc368a --- /dev/null +++ b/test/runtime/samples/reactive-values-mutable-array/_config.js @@ -0,0 +1,14 @@ +export default { + html: ` + Array in Object: 2,0,1
+ Array in Array in Object: 6,5,3,4 + `, + async test({ assert, target }) { + await new Promise(res => setTimeout(res, 1)); + + assert.htmlEqual(target.innerHTML, ` + Array in Object: 2,1,2
+ Array in Array in Object: 3,5,3,4 + `); + } +}; diff --git a/test/runtime/samples/reactive-values-mutable-array/main.svelte b/test/runtime/samples/reactive-values-mutable-array/main.svelte new file mode 100644 index 0000000000..fa9536137c --- /dev/null +++ b/test/runtime/samples/reactive-values-mutable-array/main.svelte @@ -0,0 +1,20 @@ + + +Array in Object: {obj.arr}
+Array in Array in Object: {obj.arr2}