Repository: sveltejs/svelte (JavaScript)
Date: 2017-04-12 12:28:23+00:00
Task type: Bug Fix

Issue:
Error: Unexpected token with dynamic SVG xhlink:href properties
Just tried to update my svelte to latest and started getting compilation errors.

Looks like a regression introduced in version `1.13.7`.

**Works:**
https://svelte.technology/repl?version=1.13.6&gist=b2df7e04cdacd4e8cf78e4678a69133a

**Compilation error:**
https://svelte.technology/repl?version=1.13.7&gist=b2df7e04cdacd4e8cf78e4678a69133a

---

Also, it would be nice if the error message was a little nicer. The output I see is:

```
[02:07:51] Error: Unexpected token (194:19)
    at error (/Users/craig/Sites/project/node_modules/rollup/dist/rollup.js:170:12)
    at /Users/craig/Sites/project/node_modules/rollup/dist/rollup.js:8937:6
    at process._tickCallback (internal/process/next_tick.js:103:7)
```

So I had to start commenting out my code bit by bit to find what specifically it was breaking on. I am lucky it happened to be in the first file I commented out 😛 
Error: Unexpected token with dynamic SVG xhlink:href properties
Just tried to update my svelte to latest and started getting compilation errors.

Looks like a regression introduced in version `1.13.7`.

**Works:**
https://svelte.technology/repl?version=1.13.6&gist=b2df7e04cdacd4e8cf78e4678a69133a

**Compilation error:**
https://svelte.technology/repl?version=1.13.7&gist=b2df7e04cdacd4e8cf78e4678a69133a

---

Also, it would be nice if the error message was a little nicer. The output I see is:

```
[02:07:51] Error: Unexpected token (194:19)
    at error (/Users/craig/Sites/project/node_modules/rollup/dist/rollup.js:170:12)
    at /Users/craig/Sites/project/node_modules/rollup/dist/rollup.js:8937:6
    at process._tickCallback (internal/process/next_tick.js:103:7)
```

So I had to start commenting out my code bit by bit to find what specifically it was breaking on. I am lucky it happened to be in the first file I commented out 😛 


Issue discussion:
Ah, yep, this is the code that's being generated:

<img width="472" alt="screen shot 2017-04-12 at 8 06 11 am" src="https://cloud.githubusercontent.com/assets/1162160/24956732/fff3aba2-1f56-11e7-9777-fd4e1757b404.png">

Ah, yep, this is the code that's being generated:

<img width="472" alt="screen shot 2017-04-12 at 8 06 11 am" src="https://cloud.githubusercontent.com/assets/1162160/24956732/fff3aba2-1f56-11e7-9777-fd4e1757b404.png">


Solution patch:
diff --git a/src/generators/dom/visitors/Element/Attribute.js b/src/generators/dom/visitors/Element/Attribute.js
--- 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';


Test patch:
diff --git a/test/runtime/samples/attribute-namespaced/_config.js b/test/runtime/samples/attribute-namespaced/_config.js
new file mode 100644
--- /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
--- /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