Add spread for attributes (elements only atm)

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}` );
 		}

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}`;

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 {

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 );
 }

test/generator/attribute-spread/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<input type="text" value="Hello World"/>',
+};

test/generator/attribute-spread/main.html

@@ -0,0 +1,12 @@
+<input {{options}}/>
+
+<script>
+	export default {
+		data: () => ({
+			options: {
+			    type: 'text',
+					value: 'Hello World'
+			}
+		})
+	};
+</script>

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();
+	}
+};

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>