From 0419039d26cd9556f94c79c1dc3e584e192f3f32 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 24 Oct 2019 08:18:33 -0400
Subject: [PATCH] Don't lose `class:` directive classes on an element with
 `{...spread}` attributes when updating (#3781)

* include all class: directive updates on elements with spreads (#3421)

* add test

* update changelog
---
 CHANGELOG.md                                              | 1 +
 src/compiler/compile/render_dom/wrappers/Element/index.ts | 5 ++++-
 test/runtime/samples/spread-element-class/_config.js      | 7 +++++++
 test/runtime/samples/spread-element-class/main.svelte     | 5 +++++
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/spread-element-class/_config.js
 create mode 100644 test/runtime/samples/spread-element-class/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31fc1eddd1bf..a3ce06485e11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Fix `{#each}` context not shadowing outer scope when using `bind:` ([#1565](https://github.com/sveltejs/svelte/issues/1565))
 * Fix edge cases in matching selectors against elements ([#1710](https://github.com/sveltejs/svelte/issues/1710))
 * Allow exiting a reactive block early with `break $` ([#2828](https://github.com/sveltejs/svelte/issues/2828))
+* Don't lose `class:` directive classes on an element with `{...spread}` attributes when updating ([#3421](https://github.com/sveltejs/svelte/issues/3421))
 * Check attributes have changed before setting them to avoid image flicker ([#3579](https://github.com/sveltejs/svelte/pull/3579))
 * Fix generating malformed code for `{@debug}` tags with no dependencies ([#3588](https://github.com/sveltejs/svelte/issue/3588))
 * Fix generated code in specific case involving compound ifs and child components ([#3595](https://github.com/sveltejs/svelte/issue/3595))
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index bb4c2d310a24..8f54ebf4686f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -809,6 +809,7 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	add_classes(block: Block) {
+		const has_spread = this.node.attributes.some(attr => attr.is_spread);
 		this.node.classes.forEach(class_directive => {
 			const { expression, name } = class_directive;
 			let snippet;
@@ -824,7 +825,9 @@ export default class ElementWrapper extends Wrapper {
 
 			block.chunks.hydrate.push(updater);
 
-			if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
+			if (has_spread) {
+				block.chunks.update.push(updater);
+			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
 				const all_dependencies = this.class_dependencies.concat(...dependencies);
 				const condition = changed(all_dependencies);
 
diff --git a/test/runtime/samples/spread-element-class/_config.js b/test/runtime/samples/spread-element-class/_config.js
new file mode 100644
index 000000000000..7fc3d49012f7
--- /dev/null
+++ b/test/runtime/samples/spread-element-class/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `<div class='foo bar'>hello</div>`,
+	test({ assert, component, target }) {
+		component.blah = 'goodbye';
+		assert.htmlEqual(target.innerHTML, `<div class='foo bar'>goodbye</div>`);
+	}
+};
diff --git a/test/runtime/samples/spread-element-class/main.svelte b/test/runtime/samples/spread-element-class/main.svelte
new file mode 100644
index 000000000000..a67865901314
--- /dev/null
+++ b/test/runtime/samples/spread-element-class/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let blah = 'hello';
+</script>
+
+<div class='foo' class:bar={true} {...{}}>{blah}</div>