diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js index 92bfec050017..6a0a19498cdf 100644 --- a/src/generators/dom/visitors/Element.js +++ b/src/generators/dom/visitors/Element.js @@ -72,7 +72,8 @@ export default { } if ( generator.cssId && !generator.elementDepth ) { - render += `\n${name}.setAttribute( '${generator.cssId}', '' );`; + generator.uses.setAttribute = true; + render += `\nsetAttribute( ${name}, '${generator.cssId}', '' );`; } local.init.addLineAtStart( render ); diff --git a/src/generators/dom/visitors/attributes/addElementAttributes.js b/src/generators/dom/visitors/attributes/addElementAttributes.js index 71adfa3c08c7..96bcd74998ec 100644 --- a/src/generators/dom/visitors/attributes/addElementAttributes.js +++ b/src/generators/dom/visitors/attributes/addElementAttributes.js @@ -21,8 +21,9 @@ export default function addElementAttributes ( generator, node, local ) { `${local.name}.${propertyName} = true;` ); } else { + generator.uses.setAttribute = true; local.init.addLine( - `${local.name}.setAttribute( '${attribute.name}', true );` + `setAttribute( ${local.name}, '${attribute.name}', true );` ); } @@ -38,8 +39,9 @@ export default function addElementAttributes ( generator, node, local ) { `${local.name}.${propertyName} = '';` ); } else { + generator.uses.setAttribute = true; local.init.addLine( - `${local.name}.setAttribute( '${attribute.name}', '' );` + `setAttribute( ${local.name}, '${attribute.name}', '' );` ); } } @@ -62,8 +64,9 @@ export default function addElementAttributes ( generator, node, local ) { `${local.name}.${propertyName} = ${result};` ); } else { + generator.uses.setAttribute = true; local.init.addLine( - `${local.name}.setAttribute( '${attribute.name}', ${result} );` + `setAttribute( ${local.name}, '${attribute.name}', ${result} );` ); } } @@ -74,9 +77,13 @@ export default function addElementAttributes ( generator, node, local ) { // dynamic – but potentially non-string – attributes const { snippet } = generator.contextualise( value.expression ); - const updater = propertyName ? - `${local.name}.${propertyName} = ${snippet};` : - `${local.name}.setAttribute( '${attribute.name}', ${snippet} );`; // TODO use snippet both times – see note below + let updater; + if (propertyName) { + updater = `${local.name}.${propertyName} = ${snippet};`; + } else { + generator.uses.setAttribute = true; + updater = `setAttribute( ${local.name}, '${attribute.name}', ${snippet} );`; // TODO use snippet both times – see note below + } local.init.addLine( updater ); local.update.addLine( updater ); @@ -99,9 +106,13 @@ export default function addElementAttributes ( generator, node, local ) { }).join( ' + ' ) ); - const updater = propertyName ? - `${local.name}.${propertyName} = ${value};` : - `${local.name}.setAttribute( '${attribute.name}', ${value} );`; + let updater; + if (propertyName) { + updater = `${local.name}.${propertyName} = ${value};`; + } else { + generator.uses.setAttribute = true; + updater = `setAttribute( ${local.name}, '${attribute.name}', ${value} );`; + } local.init.addLine( updater ); local.update.addLine( updater ); @@ -156,16 +167,18 @@ export default function addElementAttributes ( generator, node, local ) { ${handlerName}.teardown(); ` ); } else { + generator.uses.addEventListener = true; + generator.uses.removeEventListener = true; local.init.addBlock( deindent` function ${handlerName} ( event ) { ${handlerBody} } - ${local.name}.addEventListener( '${attribute.name}', ${handlerName}, false ); + addEventListener( ${local.name}, '${attribute.name}', ${handlerName} ); ` ); generator.current.builders.teardown.addLine( deindent` - ${local.name}.removeEventListener( '${attribute.name}', ${handlerName}, false ); + removeEventListener( ${local.name}, '${attribute.name}', ${handlerName} ); ` ); } } diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js index b21c561d37bf..a546d2fa970a 100644 --- a/src/generators/dom/visitors/attributes/binding/index.js +++ b/src/generators/dom/visitors/attributes/binding/index.js @@ -104,6 +104,8 @@ export default function createBinding ( generator, node, attribute, current, loc } else { const updateElement = `${local.name}.${attribute.name} = ${contextual ? attribute.value : `root.${attribute.value}`}`; + generator.uses.addEventListener = true; + generator.uses.removeEventListener = true; local.init.addBlock( deindent` var ${local.name}_updating = false; @@ -113,7 +115,7 @@ export default function createBinding ( generator, node, attribute, current, loc ${local.name}_updating = false; } - ${local.name}.addEventListener( '${eventName}', ${handler}, false ); + addEventListener( ${local.name}, '${eventName}', ${handler} ); ${updateElement}; ` ); @@ -122,7 +124,7 @@ export default function createBinding ( generator, node, attribute, current, loc ); generator.current.builders.teardown.addLine( deindent` - ${local.name}.removeEventListener( '${eventName}', ${handler}, false ); + removeEventListener( ${local.name}, '${eventName}', ${handler} ); ` ); } diff --git a/src/shared/dom.js b/src/shared/dom.js index 9db9b0338675..239f2d51e2ef 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -25,3 +25,15 @@ export function createText ( data ) { export function createComment ( data ) { return document.createComment( data ); } + +export function addEventListener ( node, event, handler ) { + node.addEventListener ( event, handler, false ); +} + +export function removeEventListener ( node, event, handler ) { + node.removeEventListener ( event, handler, false ); +} + +export function setAttribute ( node, attribute, value ) { + node.setAttribute ( attribute, value ); +}