Make actions execute with the component context

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);`
 			);
 		});
 	}

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);
 		}
 	};
 }

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);
 		}
 	};
 }

test/runtime/samples/action-this/_config.js

@@ -0,0 +1,10 @@
+export default {
+	test ( assert, component, target, window ) {
+		const button = target.querySelector( 'button' );
+		const click = new window.MouseEvent( 'click' );
+
+		assert.htmlEqual( target.innerHTML, `<button>0</button>` );
+		button.dispatchEvent( click );
+		assert.htmlEqual( target.innerHTML, `<button>1</button>` );
+	}
+};

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>