From 755f085b1bda2b60809cd21d0481728e4b9aa95f Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 30 May 2018 12:03:36 -0400
Subject: [PATCH] fix spread when an attribute or prop has multiple
 dependencies (#1515)

---
 src/compile/nodes/Component.ts                      |  2 +-
 src/compile/nodes/Element.ts                        |  2 +-
 .../Widget.html                                     |  1 +
 .../_config.js                                      | 10 ++++++++++
 .../main.html                                       | 13 +++++++++++++
 .../spread-element-multiple-dependencies/_config.js | 10 ++++++++++
 .../spread-element-multiple-dependencies/main.html  | 12 ++++++++++++
 7 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/Widget.html
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/_config.js
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/main.html
 create mode 100644 test/runtime/samples/spread-element-multiple-dependencies/_config.js
 create mode 100644 test/runtime/samples/spread-element-multiple-dependencies/main.html

diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts
index 8bb5537856..c5efd25afb 100644
--- a/src/compile/nodes/Component.ts
+++ b/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) {
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 8c7fe2b217..6c174f0272 100644
--- a/src/compile/nodes/Element.ts
+++ b/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) {
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/Widget.html b/test/runtime/samples/spread-component-multiple-dependencies/Widget.html
new file mode 100644
index 0000000000..ab2d2d0242
--- /dev/null
+++ b/test/runtime/samples/spread-component-multiple-dependencies/Widget.html
@@ -0,0 +1 @@
+{foo} {baz}
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/_config.js b/test/runtime/samples/spread-component-multiple-dependencies/_config.js
new file mode 100644
index 0000000000..42b0c5693f
--- /dev/null
+++ b/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`
+		);
+	},
+};
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/main.html b/test/runtime/samples/spread-component-multiple-dependencies/main.html
new file mode 100644
index 0000000000..dedfa27477
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/spread-element-multiple-dependencies/_config.js b/test/runtime/samples/spread-element-multiple-dependencies/_config.js
new file mode 100644
index 0000000000..e8f3d68e32
--- /dev/null
+++ b/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>`
+		);
+	},
+};
diff --git a/test/runtime/samples/spread-element-multiple-dependencies/main.html b/test/runtime/samples/spread-element-multiple-dependencies/main.html
new file mode 100644
index 0000000000..f6f436714d
--- /dev/null
+++ b/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>