update spread attributes

src/generators/dom/visitors/Component.js

@@ -49,7 +49,7 @@ export default {
 
 		const statements = [];
 
-		if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
+		if ( local.staticAttributes.length || local.dynamicAttributes.length || local.spreadAttributes.length || local.bindings.length ) {
 			const initialProps = local.staticAttributes
 				.concat( local.dynamicAttributes )
 				.map( attribute => `${attribute.name}: ${attribute.value}` );
@@ -73,7 +73,14 @@ export default {
 
 				statements.push( bindings.join( '\n' ) );
 			}
-			componentInitProperties.push(`data: ${name}_initialData`);
+
+			if ( local.spreadAttributes.length ) {
+				local.spreadAttributes.forEach( name => {
+					statements.push( `Object.assign( ${local.name}_initialData, root.${name} );` );
+				});
+			}
+
+			componentInitProperties.push( `data: ${name}_initialData` );
 		}
 
 		local.init.addBlockAtStart( deindent`

src/generators/dom/visitors/attributes/addComponentAttributes.js

@@ -4,6 +4,7 @@ import deindent from '../../../../utils/deindent.js';
 export default function addComponentAttributes ( generator, node, local ) {
 	local.staticAttributes = [];
 	local.dynamicAttributes = [];
+	local.spreadAttributes = [];
 	local.bindings = [];
 
 	node.attributes.forEach( attribute => {
@@ -127,6 +128,11 @@ export default function addComponentAttributes ( generator, node, local ) {
 			` );
 		}
 
+		else if ( attribute.type === 'Spread' ) {
+			local.spreadAttributes.push( attribute.name );
+			local.update.addLine( `${local.name}.set( root.${attribute.name} );` );
+		}
+
 		else {
 			throw new Error( `Not implemented: ${attribute.type}` );
 		}

src/generators/dom/visitors/attributes/addElementAttributes.js

@@ -221,7 +221,10 @@ export default function addElementAttributes ( generator, node, local ) {
 			// 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} );` );
+			const statement = `spreadAttributes( ${local.name}, root.${name} );`;
+
+			local.init.addLine( statement );
+			local.update.addLine( statement );
 		}
 
 		else {

src/generators/server-side-rendering/visitors/Element.js

@@ -15,6 +15,7 @@ export default {
 				openingTag += ` \${Object.keys( root.${attribute.name} ).map( prop => \`\${prop}="\${root.${attribute.name}[prop]}"\` ).join( ' ' )}`;
 				return;
 			}
+
 			if ( attribute.type !== 'Attribute' ) return;
 
 			let str = ` ${attribute.name}`;

test/generator/attribute-spread/_config.js

@@ -1,3 +1,15 @@
 export default {
 	html: '<input type="text" value="Hello World"/>',
+
+	test ( assert, component, target ) {
+		component.set({
+			options: {
+				type: 'text',
+				value: 'changed'
+			}
+		});
+
+		assert.htmlEqual( target.innerHTML, `<input type="text" value="changed"/>` );
+		component.teardown();
+	}
 };

test/generator/attribute-spread/main.html

@@ -4,8 +4,8 @@
 	export default {
 		data: () => ({
 			options: {
-			    type: 'text',
-					value: 'Hello World'
+				type: 'text',
+				value: 'Hello World'
 			}
 		})
 	};

test/generator/component-attribute-spread/Widget.html

@@ -1 +1,2 @@
-<input {{options}}/>
+<p>foo: {{foo}}</p>
+<p>bar: {{bar}}</p>

test/generator/component-attribute-spread/_config.js

@@ -1,3 +1,22 @@
 export default {
-	html: '<input type="text" value="Hello World"/>',
+	html: `
+		<p>foo: 1</p>
+		<p>bar: 2</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({
+			options: {
+				foo: 3,
+				bar: 4
+			}
+		});
+
+		assert.equal( component.refs.widget.get( 'foo' ), 3 );
+		assert.htmlEqual( target.innerHTML, `
+			<p>foo: 3</p>
+			<p>bar: 4</p>
+		` );
+		component.teardown();
+	}
 };

test/generator/component-attribute-spread/main.html

@@ -1,4 +1,4 @@
-<Widget options="{{options}}"/>
+<Widget ref:widget {{options}}/>
 
 <script>
 	import Widget from './Widget.html';
@@ -6,12 +6,13 @@
 	export default {
 		data: () => ({
 			options: {
-			    type: 'text',
-					value: 'Hello World'
+				foo: 1,
+				bar: 2
 			}
 		}),
+
 		components: {
-		    Widget
+			Widget
 		}
 	};
 </script>