Fix backtick string literals not being recognized for the svg property

Failing test for #1284
Fixes #1284

src/generators/Generator.ts

@@ -9,6 +9,7 @@ import flattenReference from '../utils/flattenReference';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
 import { removeNode, removeObjectKey } from '../utils/removeNode';
+import nodeToString from '../utils/nodeToString';
 import wrapModule from './wrapModule';
 import annotateWithScopes, { Scope } from '../utils/annotateWithScopes';
 import getName from '../utils/getName';
@@ -599,7 +600,7 @@ export default class Generator {
 				}
 
 				if (templateProperties.namespace) {
-					const ns = templateProperties.namespace.value.value;
+					const ns = nodeToString(templateProperties.namespace);
 					this.namespace = namespaces[ns] || ns;
 				}
 

src/utils/nodeToString.ts

@@ -0,0 +1,11 @@
+import { Node } from '../interfaces';
+
+export default function nodeToString(prop: Node) {
+	if (prop.value.type === 'Literal' && typeof prop.value.value === 'string') {
+		return prop.value.value;
+	} else if (prop.value.type === 'TemplateLiteral'
+	      && prop.value.quasis.length === 1
+	      && prop.value.expressions.length === 0) {
+		return prop.value.quasis[0].value.raw;
+	}
+}

src/validate/js/index.ts

@@ -3,6 +3,7 @@ import fuzzymatch from '../utils/fuzzymatch';
 import checkForDupes from './utils/checkForDupes';
 import checkForComputedKeys from './utils/checkForComputedKeys';
 import namespaces from '../../utils/namespaces';
+import nodeToString from '../../utils/nodeToString';
 import getName from '../../utils/getName';
 import { Validator } from '../';
 import { Node } from '../../interfaces';
@@ -77,7 +78,7 @@ export default function validateJs(validator: Validator, js: Node) {
 			});
 
 			if (props.has('namespace')) {
-				const ns = props.get('namespace').value.value;
+				const ns = nodeToString(props.get('namespace'));
 				validator.namespace = namespaces[ns] || ns;
 			}
 

src/validate/js/propValidators/namespace.ts

@@ -1,4 +1,5 @@
 import * as namespaces from '../../../utils/namespaces';
+import nodeToString from '../../../utils/nodeToString'
 import fuzzymatch from '../../utils/fuzzymatch';
 import { Validator } from '../../';
 import { Node } from '../../../interfaces';
@@ -6,9 +7,9 @@ import { Node } from '../../../interfaces';
 const valid = new Set(namespaces.validNamespaces);
 
 export default function namespace(validator: Validator, prop: Node) {
-	const ns = prop.value.value;
+	const ns = nodeToString(prop);
 
-	if (prop.value.type !== 'Literal' || typeof ns !== 'string') {
+	if (typeof ns !== 'string') {
 		validator.error(
 			`The 'namespace' property must be a string literal representing a valid namespace`,
 			prop

test/runtime/samples/svg-child-component-declared-namespace-backtick-string/Rect.html

@@ -0,0 +1,7 @@
+<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+
+<script>
+	export default {
+		namespace: `svg`
+	};
+</script>

test/runtime/samples/svg-child-component-declared-namespace-backtick-string/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
+
+	test ( assert, component, target ) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.set({ width: 150, height: 50 });
+		assert.equal( target.innerHTML, `<svg><rect x="0" y="0" width="150" height="50"></rect></svg>` );
+	},
+};

test/runtime/samples/svg-child-component-declared-namespace-backtick-string/main.html

@@ -0,0 +1,11 @@
+<svg>
+	<Rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>
+
+<script>
+	import Rect from './Rect.html';
+
+	export default {
+		components: { Rect }
+	};
+</script>