insert semicolons in the right place

src/compile/nodes/shared/Expression.ts

@@ -364,20 +364,26 @@ export default class Expression {
 
 				if (/Statement/.test(node.type)) {
 					if (pending_assignments.size > 0) {
-						const insert = [...pending_assignments].map(name => `$$make_dirty('${name}')`).join('; ');
+						const has_semi = code.original[node.end - 1] === ';';
+
+						const insert = (
+							(has_semi ? ' ' : '; ') +
+							[...pending_assignments].map(name => `$$make_dirty('${name}')`).join('; ')
+						);
+
 
 						if (/^(Break|Continue|Return)Statement/.test(node.type)) {
 							if (node.argument) {
 								code.overwrite(node.start, node.argument.start, `var $$result = `);
-								code.appendLeft(node.argument.end, `; ${insert}; return $$result`);
+								code.appendLeft(node.argument.end, `${insert}; return $$result`);
 							} else {
 								code.prependRight(node.start, `${insert}; `);
 							}
 						} else if (parent && /(If|For(In|Of)?|While)Statement/.test(parent.type) && node.type !== 'BlockStatement') {
 							code.prependRight(node.start, '{ ');
-							code.appendLeft(node.end, `${code.original[node.end - 1] === ';' ? '' : ';'} ${insert}; }`);
+							code.appendLeft(node.end, `${insert}; }`);
 						} else {
-							code.appendLeft(node.end, `; ${insert}`);
+							code.appendLeft(node.end, `${insert};`);
 						}
 
 						component.has_reactive_assignments = true;

test/runtime/samples/instrumentation-script-multiple-assignments/_config.js

@@ -0,0 +1,28 @@
+export default {
+	props: {
+		foo: 0,
+		bar: 0
+	},
+
+	html: `
+		<button>click me</button>
+		<p>foo: 0</p>
+		<p>bar: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.foo, 4);
+		assert.equal(component.bar, 2);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>foo: 4</p>
+			<p>bar: 2</p>
+		`);
+	}
+};

test/runtime/samples/instrumentation-script-multiple-assignments/main.html

@@ -0,0 +1,12 @@
+<script>
+	export let foo, bar;
+
+	function click() {
+		foo = 4; bar = 2;
+	}
+</script>
+
+<button on:click={click}>click me</button>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>

test/runtime/samples/instrumentation-template-multiple-assignments/_config.js

@@ -0,0 +1,28 @@
+export default {
+	props: {
+		foo: 0,
+		bar: 0
+	},
+
+	html: `
+		<button>click me</button>
+		<p>foo: 0</p>
+		<p>bar: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.foo, 4);
+		assert.equal(component.bar, 2);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>foo: 4</p>
+			<p>bar: 2</p>
+		`);
+	}
+};

test/runtime/samples/instrumentation-template-multiple-assignments/main.html

@@ -0,0 +1,8 @@
+<script>
+	export let foo, bar;
+</script>
+
+<button on:click="{() => { foo = 4; bar = 2; }}">click me</button>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>