recognise dependencies in class directives - fixes #1793

src/compile/render-dom/wrappers/Element/index.ts

@@ -163,6 +163,14 @@ export default class ElementWrapper extends Wrapper {
 			block.addAnimation();
 		}
 
+		if (node.classes) {
+			node.classes.forEach(({ expression }) => {
+				if (expression) {
+					block.addDependencies(expression.dependencies);
+				}
+			});
+		}
+
 		if (this.parent) {
 			if (node.actions.length > 0) this.parent.cannotUseInnerHTML();
 			if (node.animation) this.parent.cannotUseInnerHTML();
@@ -394,20 +402,6 @@ export default class ElementWrapper extends Wrapper {
 			: `{}`}, ${this.node.namespace === namespaces.svg ? true : false})`;
 	}
 
-	// addBindings(block: Block) {
-	// 	if (this.bindings.length === 0) return;
-
-	// 	if (this.node.name === 'select' || this.isMediaNode()) {
-	// 		this.renderer.hasComplexBindings = true;
-	// 	}
-
-	// 	this.bindings.forEach(binding => {
-	// 		binding.render(block);
-	// 	});
-
-	// 	this.initialUpdate = this.bindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
-	// }
-
 	addBindings(block: Block) {
 		const { renderer } = this;
 

src/compile/render-ssr/handlers/Element.ts

@@ -105,7 +105,7 @@ export default function(node, renderer, options) {
 				openingTag += '${' + attribute.chunks[0].snippet + ' ? " ' + attribute.name + '" : "" }';
 			} else if (attribute.name === 'class' && classExpr) {
 				addClassAttribute = false;
-				openingTag += ` class="\${ [\`${attribute.stringifyForSsr()}\`, ${classExpr} ].join(' ').trim() }"`;
+				openingTag += ` class="\${[\`${attribute.stringifyForSsr()}\`, ${classExpr}].join(' ').trim() }"`;
 			} else {
 				openingTag += ` ${attribute.name}="${attribute.stringifyForSsr()}"`;
 			}
@@ -113,7 +113,7 @@ export default function(node, renderer, options) {
 	}
 
 	if (addClassAttribute) {
-		openingTag += ` class="\${ [${classExpr}].join(' ').trim() }"`;
+		openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`;
 	}
 
 	openingTag += '>';

test/runtime/samples/class-in-each/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		things: ['one', 'two', 'three'],
+		selected: 'two'
+	},
+
+	html: `
+		<div></div>
+		<div class="selected"></div>
+		<div></div>
+	`,
+
+	test(assert, component, target) {
+		component.set({ selected: 'three' });
+		assert.htmlEqual(target.innerHTML, `
+			<div></div>
+			<div class=""></div>
+			<div class="selected"></div>
+		`);
+	}
+};

test/runtime/samples/class-in-each/main.html

@@ -0,0 +1,3 @@
+{#each things as thing}
+	<div class:selected="selected === thing"></div>
+{/each}