instrument update expressions

src/compile/nodes/shared/Expression.ts

@@ -256,6 +256,12 @@ export default class Expression {
 								pending_assignments.add(name);
 							}
 						});
+					} else if (node.type === 'UpdateExpression') {
+						const { name } = getObject(node.argument);
+
+						if (!scope.declarations.has(name)) {
+							pending_assignments.add(name);
+						}
 					}
 				} else {
 					if (node.type === 'AssignmentExpression') {

src/compile/render-dom/index.ts

@@ -181,6 +181,15 @@ export default function dom(
 					});
 				}
 
+				else if (node.type === 'UpdateExpression') {
+					const { name } = getObject(node.argument);
+
+					if (scope.findOwner(name) === component.instance_scope) {
+						pending_assignments.add(name);
+						component.has_reactive_assignments = true;
+					}
+				}
+
 				if (pending_assignments.size > 0) {
 					if (node.type === 'ArrowFunctionExpression') {
 						const insert = [...pending_assignments].map(name => `$$make_dirty('${name}')`).join(';');

src/utils/getObject.ts

@@ -1,6 +1,7 @@
 import { Node } from '../interfaces';
 
 export default function getObject(node: Node) {
+	while (node.type === 'ParenthesizedExpression') node = node.expression;
 	while (node.type === 'MemberExpression') node = node.object;
 	return node;
 }

test/runtime/samples/instrumentation-script-update/_config.js

@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 1</p>
+		`);
+	}
+};

test/runtime/samples/instrumentation-script-update/main.html

@@ -0,0 +1,11 @@
+<script>
+	let x = 0;
+
+	function foo() {
+		x++;
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+
+<p>x: {x}</p>

test/runtime/samples/instrumentation-template-update/_config.js

@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 1</p>
+		`);
+	}
+};

test/runtime/samples/instrumentation-template-update/main.html

@@ -0,0 +1,7 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => x++}">foo</button>
+
+<p>x: {x}</p>