From 9b0a884035dc5a031dc29a499402a33d7cfb94d2 Mon Sep 17 00:00:00 2001 From: Jacob Wright Date: Mon, 26 Mar 2018 09:39:00 -0600 Subject: [PATCH 1/2] 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 45b6bad6b41f..288a508758a5 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 fe0b795b7f51..bfb6e00c9e75 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 0eceeae646f4..6e1b5ef60062 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 000000000000..69525389be8f --- /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 000000000000..95da3d4a8c77 --- /dev/null +++ b/test/runtime/samples/action-this/main.html @@ -0,0 +1,22 @@ + + + \ No newline at end of file From 297ee657371040e4ea50e7e411179946e95adb83 Mon Sep 17 00:00:00 2001 From: Jacob Wright Date: Mon, 26 Mar 2018 09:45:57 -0600 Subject: [PATCH 2/2] Make tests work when running all of them together. They were only passing when running just the runtime tests, but failing with `` when running all the tests. --- test/runtime/samples/action-this/_config.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/runtime/samples/action-this/_config.js b/test/runtime/samples/action-this/_config.js index 69525389be8f..df204a7a615d 100644 --- a/test/runtime/samples/action-this/_config.js +++ b/test/runtime/samples/action-this/_config.js @@ -1,10 +1,9 @@ export default { - html: ``, - test ( assert, component, target, window ) { const button = target.querySelector( 'button' ); const click = new window.MouseEvent( 'click' ); + assert.htmlEqual( target.innerHTML, `` ); button.dispatchEvent( click ); assert.htmlEqual( target.innerHTML, `` ); }