make addEventListener, removeEventListener, setAttribute shared

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 );

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} );
 				` );
 			}
 		}

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} );
 		` );
 	}
 

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 );
+}