From 97f74dc8a6b980c80192debcb38bf899bcd532e9 Mon Sep 17 00:00:00 2001
From: Jacob Wright <jacwright@gmail.com>
Date: Mon, 26 Mar 2018 09:39:00 -0600
Subject: [PATCH] Make actions execute with the component context

---
 src/generators/nodes/Element.ts             | 10 +++++-----
 test/js/samples/action/expected-bundle.js   |  6 +++---
 test/js/samples/action/expected.js          |  6 +++---
 test/runtime/samples/action-this/_config.js | 11 +++++++++++
 test/runtime/samples/action-this/main.html  | 22 +++++++++++++++++++++
 5 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 test/runtime/samples/action-this/_config.js
 create mode 100644 test/runtime/samples/action-this/main.html

diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
index 45b6bad6b4..288a508758 100644
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -660,7 +660,7 @@ export default class Element extends Node {
 				snippet = attribute.metadata.snippet;
 				dependencies = attribute.metadata.dependencies;
 			}
-			
+
 			const name = block.getUniqueName(
 				`${attribute.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`
 			);
@@ -669,22 +669,22 @@ export default class Element extends Node {
 			const fn = `%actions-${attribute.name}`;
 
 			block.builders.hydrate.addLine(
-				`${name} = ${fn}(${this.var}${snippet ? `, ${snippet}` : ''}) || {};`
+				`${name} = ${fn}.call(#component, ${this.var}${snippet ? `, ${snippet}` : ''}) || {};`
 			);
 
 			if (dependencies && dependencies.length) {
 				let conditional = `typeof ${name}.update === 'function' && `;
 				const deps = dependencies.map(dependency => `changed.${dependency}`).join(' || ');
 				conditional += dependencies.length > 1 ? `(${deps})` : deps;
-				
+
 				block.builders.update.addConditional(
 					conditional,
-					`${name}.update(${snippet});`
+					`${name}.update.call(#component, ${snippet});`
 				);
 			}
 
 			block.builders.destroy.addLine(
-				`if (typeof ${name}.destroy === 'function') ${name}.destroy();`
+				`if (typeof ${name}.destroy === 'function') ${name}.destroy.call(#component);`
 			);
 		});
 	}
diff --git a/test/js/samples/action/expected-bundle.js b/test/js/samples/action/expected-bundle.js
index fe0b795b7f..bfb6e00c9e 100644
--- a/test/js/samples/action/expected-bundle.js
+++ b/test/js/samples/action/expected-bundle.js
@@ -184,7 +184,7 @@ var proto = {
 /* generated by Svelte vX.Y.Z */
 
 function link(node) {
-  
+
   function onClick(event) {
     event.preventDefault();
     history.pushState(null, null, event.target.href);
@@ -210,7 +210,7 @@ function create_main_fragment(component, state) {
 
 		h: function hydrate() {
 			a.href = "#";
-			link_action = link(a) || {};
+			link_action = link.call(component, a) || {};
 		},
 
 		m: function mount(target, anchor) {
@@ -224,7 +224,7 @@ function create_main_fragment(component, state) {
 		},
 
 		d: function destroy$$1() {
-			if (typeof link_action.destroy === 'function') link_action.destroy();
+			if (typeof link_action.destroy === 'function') link_action.destroy.call(component);
 		}
 	};
 }
diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js
index 0eceeae646..6e1b5ef600 100644
--- a/test/js/samples/action/expected.js
+++ b/test/js/samples/action/expected.js
@@ -2,7 +2,7 @@
 import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
 
 function link(node) {
-  
+
   function onClick(event) {
     event.preventDefault();
     history.pushState(null, null, event.target.href);
@@ -29,7 +29,7 @@ function create_main_fragment(component, state) {
 
 		h: function hydrate() {
 			a.href = "#";
-			link_action = link(a) || {};
+			link_action = link.call(component, a) || {};
 		},
 
 		m: function mount(target, anchor) {
@@ -43,7 +43,7 @@ function create_main_fragment(component, state) {
 		},
 
 		d: function destroy() {
-			if (typeof link_action.destroy === 'function') link_action.destroy();
+			if (typeof link_action.destroy === 'function') link_action.destroy.call(component);
 		}
 	};
 }
diff --git a/test/runtime/samples/action-this/_config.js b/test/runtime/samples/action-this/_config.js
new file mode 100644
index 0000000000..69525389be
--- /dev/null
+++ b/test/runtime/samples/action-this/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `<button>0</button>`,
+
+	test ( assert, component, target, window ) {
+		const button = target.querySelector( 'button' );
+		const click = new window.MouseEvent( 'click' );
+
+		button.dispatchEvent( click );
+		assert.htmlEqual( target.innerHTML, `<button>1</button>` );
+	}
+};
diff --git a/test/runtime/samples/action-this/main.html b/test/runtime/samples/action-this/main.html
new file mode 100644
index 0000000000..95da3d4a8c
--- /dev/null
+++ b/test/runtime/samples/action-this/main.html
@@ -0,0 +1,22 @@
+<button use:foo>{{x}}</button>
+
+<script>
+	export default {
+		actions: {
+			foo(node) {
+				let x = 0;
+
+				const handler = () => this.set({ x: x++ });
+
+				node.addEventListener('click', handler);
+				handler();
+
+				return {
+					destroy() {
+						node.removeEventListener('click', handler);
+					}
+				};
+			}
+		},
+	};
+</script>
\ No newline at end of file