From 390bc7892d33f84620636fc7e5ff50651781d176 Mon Sep 17 00:00:00 2001
From: Paul Sauve <paul@burngames.net>
Date: Sun, 5 Feb 2017 21:36:33 -0600
Subject: [PATCH] Add spread for attributes (elements only atm)

---
 .../attributes/addElementAttributes.js        | 12 +++++++++++-
 .../server-side-rendering/visitors/Element.js |  4 ++++
 src/parse/state/tag.js                        |  9 +++++++++
 src/shared/dom.js                             | 14 ++++++++++++++
 test/generator/attribute-spread/_config.js    |  3 +++
 test/generator/attribute-spread/main.html     | 12 ++++++++++++
 test/generator/svg-xlink-spread/_config.js    | 19 +++++++++++++++++++
 test/generator/svg-xlink-spread/main.html     | 19 +++++++++++++++++++
 8 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 test/generator/attribute-spread/_config.js
 create mode 100644 test/generator/attribute-spread/main.html
 create mode 100644 test/generator/svg-xlink-spread/_config.js
 create mode 100644 test/generator/svg-xlink-spread/main.html

diff --git a/src/generators/dom/visitors/attributes/addElementAttributes.js b/src/generators/dom/visitors/attributes/addElementAttributes.js
index c91d369b6d..36869a202f 100644
--- a/src/generators/dom/visitors/attributes/addElementAttributes.js
+++ b/src/generators/dom/visitors/attributes/addElementAttributes.js
@@ -22,7 +22,6 @@ export default function addElementAttributes ( generator, node, local ) {
 			// namespaced attributes but I'm not sure that's applicable in
 			// HTML5?
 			const helper = isXlink ? 'setXlinkAttribute' : 'setAttribute';
-
 			if ( attribute.value === true ) {
 				// attributes without values, e.g. <textarea readonly>
 				if ( propertyName ) {
@@ -214,6 +213,17 @@ export default function addElementAttributes ( generator, node, local ) {
 			` );
 		}
 
+		else if ( attribute.type === 'Spread' ) {
+			// spread, turns <input {{obj}}/> where obj = {type: text, value: hello world} -> <input type="text" value="hello world"/>
+			generator.uses.spreadAttributes = true;
+			generator.uses.setXlinkAttribute = true;
+			generator.uses.setAttribute = true;
+			// we have to include setXLinkAttibute and setAttribute because the data is dynamic
+			// we have no idea at compile time what is being used
+
+			local.init.addLine( `spreadAttributes( ${local.name}, root.${name} );` );
+		}
+
 		else {
 			throw new Error( `Not implemented: ${attribute.type}` );
 		}
diff --git a/src/generators/server-side-rendering/visitors/Element.js b/src/generators/server-side-rendering/visitors/Element.js
index 863abf27db..e9adec7e4e 100644
--- a/src/generators/server-side-rendering/visitors/Element.js
+++ b/src/generators/server-side-rendering/visitors/Element.js
@@ -11,6 +11,10 @@ export default {
 		let openingTag = `<${node.name}`;
 
 		node.attributes.forEach( attribute => {
+			if ( attribute.type === 'Spread' ) {
+				openingTag += ` \${Object.keys( root.${attribute.name} ).map( prop => \`\${prop}="\${root.${attribute.name}[prop]}"\` ).join( ' ' )}`;
+				return;
+			}
 			if ( attribute.type !== 'Attribute' ) return;
 
 			let str = ` ${attribute.name}`;
diff --git a/src/parse/state/tag.js b/src/parse/state/tag.js
index 72f73f0651..a884cb623c 100644
--- a/src/parse/state/tag.js
+++ b/src/parse/state/tag.js
@@ -169,6 +169,15 @@ function readAttribute ( parser, uniqueNames ) {
 		};
 	}
 
+	if ( name.indexOf( '{{' ) === 0 && name.indexOf( '}}' ) === name.length - 2 ) {
+		return {
+			start,
+			end: parser.index,
+			type: 'Spread',
+			name: name.slice( 2, -2 )
+		}
+	}
+
 	const value = parser.eat( '=' ) ? readAttributeValue( parser ) : true;
 
 	return {
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 574b672ce5..fe9dd5326b 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -22,6 +22,20 @@ export function teardownEach ( iterations, detach, start ) {
 	}
 }
 
+export function spreadAttributes ( node, obj ) {
+	if (obj !== null && typeof obj === 'object') {
+		for ( var property in obj ) {
+			if ( obj.hasOwnProperty( property ) ) {
+				if ( property.slice( 0, 6 ) === 'xlink:' ) {
+					setXlinkAttribute( node, property, obj[property] );
+				} else {
+					setAttribute( node, property, obj[property] );
+				}
+			}
+		}
+	}
+}
+
 export function createElement ( name ) {
 	return document.createElement( name );
 }
diff --git a/test/generator/attribute-spread/_config.js b/test/generator/attribute-spread/_config.js
new file mode 100644
index 0000000000..c9c42a1e3a
--- /dev/null
+++ b/test/generator/attribute-spread/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<input type="text" value="Hello World"/>',
+};
diff --git a/test/generator/attribute-spread/main.html b/test/generator/attribute-spread/main.html
new file mode 100644
index 0000000000..eabb52e0a8
--- /dev/null
+++ b/test/generator/attribute-spread/main.html
@@ -0,0 +1,12 @@
+<input {{options}}/>
+
+<script>
+	export default {
+		data: () => ({
+			options: {
+			    type: 'text',
+					value: 'Hello World'
+			}
+		})
+	};
+</script>
diff --git a/test/generator/svg-xlink-spread/_config.js b/test/generator/svg-xlink-spread/_config.js
new file mode 100644
index 0000000000..eb49f3a72a
--- /dev/null
+++ b/test/generator/svg-xlink-spread/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<svg>
+			<defs>
+				<circle id='stamp' r='10' fill='blue'/>
+			</defs>
+
+			<use xlink:href='#stamp' x='20' y='20'/>
+		</svg>
+	`,
+	test ( assert, component, target ) {
+		const use = target.querySelector( 'use' );
+		const href = use.attributes[ 'xlink:href' ];
+
+		assert.equal( href.namespaceURI, 'http://www.w3.org/1999/xlink' );
+
+		component.teardown();
+	}
+};
diff --git a/test/generator/svg-xlink-spread/main.html b/test/generator/svg-xlink-spread/main.html
new file mode 100644
index 0000000000..2eb9cbb9df
--- /dev/null
+++ b/test/generator/svg-xlink-spread/main.html
@@ -0,0 +1,19 @@
+<svg>
+	<defs>
+		<circle id='stamp' r='10' fill='blue'/>
+	</defs>
+
+	<use {{options}}/>
+</svg>
+
+<script>
+	export default {
+		data: () => ({
+			options: {
+				'xlink:href': '#stamp',
+				x: '20',
+				y: '20'
+			}
+		})
+	};
+</script>