fix spread when an attribute or prop has multiple dependencies (#1515)

src/compile/nodes/Component.ts

@@ -176,7 +176,7 @@ export default class Component extends Node {
 					const { name, dependencies } = attr;
 
 					const condition = dependencies.size > 0 && (dependencies.size !== allDependencies.size)
-						? [...dependencies].map(d => `changed.${d}`).join(' || ')
+						? `(${[...dependencies].map(d => `changed.${d}`).join(' || ')})`
 						: null;
 
 					if (attr.isSpread) {

src/compile/nodes/Element.ts

@@ -559,7 +559,7 @@ export default class Element extends Node {
 			.filter(attr => attr.type === 'Attribute' || attr.type === 'Spread')
 			.forEach(attr => {
 				const condition = attr.dependencies.size > 0
-					? [...attr.dependencies].map(d => `changed.${d}`).join(' || ')
+					? `(${[...attr.dependencies].map(d => `changed.${d}`).join(' || ')})`
 					: null;
 
 				if (attr.isSpread) {

test/runtime/samples/spread-component-multiple-dependencies/Widget.html

@@ -0,0 +1 @@
+{foo} {baz}

test/runtime/samples/spread-component-multiple-dependencies/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: `b baz`,
+	test(assert, component, target) {
+		component.set({ foo: true });
+		assert.htmlEqual(
+			target.innerHTML,
+			`a baz`
+		);
+	},
+};

test/runtime/samples/spread-component-multiple-dependencies/main.html

@@ -0,0 +1,13 @@
+<Widget foo={foo ? a : b} {...bar}/>
+
+<script>
+	export default {
+		components: { Widget: './Widget.html' },
+		data: () => ({
+			foo: false,
+			a: 'a',
+			b: 'b',
+			bar: { baz: 'baz' },
+		}),
+	};
+</script>

test/runtime/samples/spread-element-multiple-dependencies/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: `<div class='b' title='baz'></div>`,
+	test(assert, component, target) {
+		component.set({ foo: true });
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div class='a' title='baz'></div>`
+		);
+	},
+};

test/runtime/samples/spread-element-multiple-dependencies/main.html

@@ -0,0 +1,12 @@
+<div class={foo ? a : b} {...bar}></div>
+
+<script>
+	export default {
+		data: () => ({
+			foo: false,
+			a: 'a',
+			b: 'b',
+			bar: { title: 'baz' },
+		}),
+	};
+</script>