replace all invalid characters in attribute names when creating varia…

…bles (fixes #470)
sveltejs · Apr 12, 2017 · a47a679 · a47a679
1 parent c54bebb
commit a47a679
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -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' );
+	}
+};
diff --git a/test/runtime/samples/attribute-namespaced/main.html b/test/runtime/samples/attribute-namespaced/main.html
@@ -0,0 +1,3 @@
+<svg>
+	<use xlink:href="#{{foo}}"/>
+</svg>