mirror of https://github.com/sveltejs/svelte
parent
89f0fb00e6
commit
9f832c2e37
@ -0,0 +1,32 @@
|
|||||||
|
import flattenReference from '../../../../utils/flattenReference.js';
|
||||||
|
import deindent from '../../../../utils/deindent.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
enter ( generator, node ) {
|
||||||
|
node.attributes.forEach( attribute => {
|
||||||
|
if ( attribute.type === 'EventHandler' ) {
|
||||||
|
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
||||||
|
generator.addSourcemapLocations( attribute.expression );
|
||||||
|
|
||||||
|
const flattened = flattenReference( attribute.expression.callee );
|
||||||
|
if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
|
||||||
|
// allow event.stopPropagation(), this.select() etc
|
||||||
|
generator.code.prependRight( attribute.expression.start, 'component.' );
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerName = generator.current.getUniqueName( `onwindow${attribute.name}` );
|
||||||
|
|
||||||
|
generator.current.builders.init.addBlock( deindent`
|
||||||
|
var ${handlerName} = function ( event ) {
|
||||||
|
[✂${attribute.expression.start}-${attribute.expression.end}✂];
|
||||||
|
};
|
||||||
|
window.addEventListener( '${attribute.name}', ${handlerName} );
|
||||||
|
` );
|
||||||
|
|
||||||
|
generator.current.builders.teardown.addBlock( deindent`
|
||||||
|
window.removeEventListener( '${attribute.name}', ${handlerName} );
|
||||||
|
` );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,26 @@
|
|||||||
|
export default {
|
||||||
|
html: `<div>undefinedxundefined</div>`,
|
||||||
|
|
||||||
|
test ( assert, component, target, window ) {
|
||||||
|
const event = new window.Event( 'resize' );
|
||||||
|
|
||||||
|
// JSDOM executes window event listeners with `global` rather than
|
||||||
|
// `window` (bug?) so we need to do this
|
||||||
|
Object.defineProperties( global, {
|
||||||
|
innerWidth: {
|
||||||
|
value: 567,
|
||||||
|
configurable: true
|
||||||
|
},
|
||||||
|
innerHeight: {
|
||||||
|
value: 456,
|
||||||
|
configurable: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.dispatchEvent( event );
|
||||||
|
|
||||||
|
assert.htmlEqual( target.innerHTML, `
|
||||||
|
<div>567x456</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,3 @@
|
|||||||
|
<:Window on:resize='set({ width: this.innerWidth, height: this.innerHeight })'/>
|
||||||
|
|
||||||
|
<div>{{width}}x{{height}}</div>
|
Loading…
Reference in new issue