Merge pull request #1797 from sveltejs/gh-1793

recognise dependencies in class directives

Author: Rich-Harris

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

@@ -163,6 +163,17 @@ export default class ElementWrapper extends Wrapper {
 			block.addAnimation();
 		}
 
+		// add directive and handler dependencies
+		[node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => {
+			if (directive && directive.expression) {
+				block.addDependencies(directive.expression.dependencies);
+			}
+		});
+
+		node.handlers.forEach(handler => {
+			block.addDependencies(handler.dependencies);
+		});
+
 		if (this.parent) {
 			if (node.actions.length > 0) this.parent.cannotUseInnerHTML();
 			if (node.animation) this.parent.cannotUseInnerHTML();
@@ -394,20 +405,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,15 +105,15 @@ 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()}"`;
 			}
 		});
 	}
 
 	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}

test/runtime/samples/event-handler-each-context/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		items: [
+			'whatever'
+		],
+		foo: 'wrong',
+		bar: 'right'
+	},
+
+	test(assert, component, target, window) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.equal(component.get().foo, 'right');
+
+		component.set({ bar: 'left' });
+		button.dispatchEvent(event);
+		assert.equal(component.get().foo, 'left');
+	}
+};

test/runtime/samples/event-handler-each-context/main.html

@@ -0,0 +1,5 @@
+{#each items as item}
+	<button on:click='set({ foo: bar })'>{item}</button>
+{/each}
+
+<p>foo: {foo}</p>