allow window events to access state

pull/497/head
Rich-Harris 8 years ago
parent 3d576582da
commit f1bef92e9b

@ -29,6 +29,13 @@ export default function visitWindow ( generator, block, node ) {
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.addSourcemapLocations( attribute.expression );
let usesState = false;
attribute.expression.arguments.forEach( arg => {
const { contexts } = block.contextualise( arg, null, true );
if ( contexts.length ) usesState = true;
});
const flattened = flattenReference( attribute.expression.callee );
if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
// allow event.stopPropagation(), this.select() etc
@ -36,10 +43,12 @@ export default function visitWindow ( generator, block, node ) {
}
const handlerName = block.getUniqueName( `onwindow${attribute.name}` );
const handlerBody = ( usesState ? `var root = ${block.component}.get();\n` : '' ) +
`[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
block.builders.create.addBlock( deindent`
var ${handlerName} = function ( event ) {
[${attribute.expression.start}-${attribute.expression.end}];
function ${handlerName} ( event ) {
${handlerBody}
};
window.addEventListener( '${attribute.name}', ${handlerName} );
` );

@ -0,0 +1,24 @@
export default {
data: {
foo: true
},
html: `true`,
skip: /^v4/.test( process.version ), // node 4 apparently does some dumb stuff
'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
test ( assert, component, target, window ) {
const event = new window.Event( 'click' );
window.dispatchEvent( event );
assert.equal( component.get( 'foo' ), false );
assert.htmlEqual( target.innerHTML, `false` );
window.dispatchEvent( event );
assert.equal( component.get( 'foo' ), true );
assert.htmlEqual( target.innerHTML, `true` );
component.destroy();
}
};

@ -0,0 +1,3 @@
<:Window on:click='set({ foo: !foo })'/>
{{foo}}
Loading…
Cancel
Save