From 24c87821650b202882c06097ef8fc05d21bca598 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Wed, 12 Apr 2017 08:27:52 -0400
Subject: [PATCH] replace all invalid characters in attribute names when
 creating variables (fixes #470)

---
 src/generators/dom/visitors/Element/Attribute.js   |  2 +-
 .../samples/attribute-namespaced/_config.js        | 14 ++++++++++++++
 .../runtime/samples/attribute-namespaced/main.html |  3 +++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/attribute-namespaced/_config.js
 create mode 100644 test/runtime/samples/attribute-namespaced/main.html

diff --git a/src/generators/dom/visitors/Element/Attribute.js b/src/generators/dom/visitors/Element/Attribute.js
index d838860276..b4ecf58d7f 100644
--- a/src/generators/dom/visitors/Element/Attribute.js
+++ b/src/generators/dom/visitors/Element/Attribute.js
@@ -43,7 +43,7 @@ export default function visitAttribute ( generator, block, state, node, attribut
 			);
 		}
 
-		const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
+		const last = `last_${state.parentNode}_${name.replace( /[^a-zA-Z_$]/g, '_')}`;
 		block.builders.create.addLine( `var ${last} = ${value};` );
 
 		const isSelectValueAttribute = name === 'value' && state.parentNodeName === 'select';
diff --git a/test/runtime/samples/attribute-namespaced/_config.js b/test/runtime/samples/attribute-namespaced/_config.js
new file mode 100644
index 0000000000..1c5b99369e
--- /dev/null
+++ b/test/runtime/samples/attribute-namespaced/_config.js
@@ -0,0 +1,14 @@
+export default {
+	data: { foo: 'bar' },
+
+	html: `
+		<svg>
+			<use xlink:href="#bar"/>
+		</svg>
+	`,
+
+	test ( assert, component, target ) {
+		const use = target.querySelector( 'use' );
+		assert.equal( use.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ), '#bar' );
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-namespaced/main.html b/test/runtime/samples/attribute-namespaced/main.html
new file mode 100644
index 0000000000..a5fb9912f8
--- /dev/null
+++ b/test/runtime/samples/attribute-namespaced/main.html
@@ -0,0 +1,3 @@
+<svg>
+	<use xlink:href="#{{foo}}"/>
+</svg>
\ No newline at end of file