support SVG

compiler/generate/index.js

@@ -80,6 +80,7 @@ export default function generate ( parsed, template ) {
 	let current = {
 		useAnchor: false,
 		name: 'renderMainFragment',
+		namespace: null,
 		target: 'target',
 
 		initStatements: [],
@@ -109,10 +110,9 @@ export default function generate ( parsed, template ) {
 			Element: {
 				enter ( node ) {
 					const name = current.counter( node.name );
+					let namespace = name === 'svg' ? 'http://www.w3.org/2000/svg' : current.namespace;
 
-					const initStatements = [
-						`var ${name} = document.createElement( '${node.name}' );`
-					];
+					const initStatements = [];
 
 					const updateStatements = [];
 					const teardownStatements = [];
@@ -160,6 +160,12 @@ export default function generate ( parsed, template ) {
 											${name}.setAttribute( '${attribute.name}', ${result} );
 										` );
 									}
+
+									// special case
+									// TODO this attribute must be static – enforce at compile time
+									if ( attribute.name === 'xmlns' ) {
+										namespace = value;
+									}
 								}
 
 								else {
@@ -298,6 +304,12 @@ export default function generate ( parsed, template ) {
 						updateStatements.push( declarations );
 					}
 
+					initStatements.unshift(
+						namespace ?
+							`var ${name} = document.createElementNS( '${namespace}', '${node.name}' );` :
+							`var ${name} = document.createElement( '${node.name}' );`
+					);
+
 					teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
 
 					current.initStatements.push( initStatements.join( '\n' ) );
@@ -305,6 +317,7 @@ export default function generate ( parsed, template ) {
 					current.teardownStatements.push( teardownStatements.join( '\n' ) );
 
 					current = Object.assign( {}, current, {
+						namespace,
 						target: name,
 						parent: current
 					});

test/compiler/svg/_config.js

@@ -0,0 +1,21 @@
+import * as assert from 'assert';
+
+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 ( 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/main.svelte

@@ -0,0 +1,3 @@
+<svg>
+	<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>