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: ``,
+
+ test ( assert, component, target, window ) {
+ const button = target.querySelector( 'button' );
+ const click = new window.MouseEvent( 'click' );
+
+ button.dispatchEvent( click );
+ assert.htmlEqual( target.innerHTML, `` );
+ }
+};
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 @@
+
+
+
\ No newline at end of file