Merge pull request #143 from sveltejs/gh-142

don't render whitespace text nodes inside SVG elements

compiler/generate/visitors/Text.js

@@ -1,5 +1,9 @@
 export default {
 	enter ( generator, node ) {
+		if ( generator.current.namespace && !/\S/.test( node.data ) ) {
+			return;
+		}
+
 		const name = generator.current.getUniqueName( `text` );
 		generator.addElement( name, `document.createTextNode( ${JSON.stringify( node.data )} )` );
 	}

compiler/generate/visitors/attributes/addElementAttributes.js

@@ -52,7 +52,11 @@ export default function addElementAttributes ( generator, node, local ) {
 					// static attributes
 					result = JSON.stringify( value.data );
 
-					if ( propertyName ) {
+					if ( attribute.name === 'xmlns' ) {
+						// special case
+						// TODO this attribute must be static – enforce at compile time
+						local.namespace = value.data;
+					} else if ( propertyName ) {
 						local.init.push( deindent`
 							${local.name}.${propertyName} = ${result};
 						` );
@@ -61,12 +65,6 @@ export default function addElementAttributes ( generator, node, local ) {
 							${local.name}.setAttribute( '${attribute.name}', ${result} );
 						` );
 					}
-
-					// special case
-					// TODO this attribute must be static – enforce at compile time
-					if ( attribute.name === 'xmlns' ) {
-						local.namespace = value;
-					}
 				}
 
 				else {

compiler/parse/state/tag.js

@@ -88,7 +88,7 @@ export default function tag ( parser ) {
 	if ( name in specials ) {
 		const special = specials[ name ];
 
-		if ( parser[ special.id ] ) {
+		if ( parser[ special.property ] ) {
 			parser.index = start;
 			parser.error( `You can only have one <${name}> tag per component` );
 		}

test/compiler/svg-no-whitespace/_config.js

@@ -0,0 +1,9 @@
+export default {
+	test ( assert, component, target ) {
+		const svg = target.querySelector( 'svg' );
+
+		assert.equal( svg.childNodes.length, 2 );
+		assert.equal( svg.childNodes[0].nodeName, 'rect' );
+		assert.equal( svg.childNodes[1].nodeName, 'rect' );
+	}
+};

test/compiler/svg-no-whitespace/main.html

@@ -0,0 +1,5 @@
+<svg>
+	<rect/>
+
+	<rect/>
+</svg>

test/compiler/svg-xmlns/_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/compiler/svg-xmlns/main.html

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+	<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>

test/parser/error-multiple-styles/error.json

@@ -0,0 +1,8 @@
+{
+	"message": "You can only have one <style> tag per component",
+	"loc": {
+		"line": 9,
+		"column": 0
+	},
+	"pos": 58
+}

test/parser/error-multiple-styles/input.html

@@ -0,0 +1,13 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
+
+<style>
+	div {
+		color: blue;
+	}
+</style>