From 55f3ba1a302e89cfa943db4bdf8bc50702615a84 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 20 Nov 2016 16:25:23 -0500
Subject: [PATCH] support SVG

---
 compiler/generate/index.js    | 19 ++++++++++++++++---
 test/compiler/svg/_config.js  | 21 +++++++++++++++++++++
 test/compiler/svg/main.svelte |  3 +++
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 test/compiler/svg/_config.js
 create mode 100644 test/compiler/svg/main.svelte

diff --git a/compiler/generate/index.js b/compiler/generate/index.js
index 7d88b3264c..bcf1270494 100644
--- a/compiler/generate/index.js
+++ b/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
 					});
diff --git a/test/compiler/svg/_config.js b/test/compiler/svg/_config.js
new file mode 100644
index 0000000000..f9f1492631
--- /dev/null
+++ b/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>` );
+	}
+};
diff --git a/test/compiler/svg/main.svelte b/test/compiler/svg/main.svelte
new file mode 100644
index 0000000000..106d1c8805
--- /dev/null
+++ b/test/compiler/svg/main.svelte
@@ -0,0 +1,3 @@
+<svg>
+	<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>