Prioritize named over spread attributes

Author: mrkishi

src/generators/nodes/Spread.ts

@@ -62,9 +62,16 @@ export default class Spread {
 
 		const changes = block.getUniqueName(`${node.var}_spread_changes`);
 
+		const namedAttributes = block.getUniqueName(`${node.var}_attributes`);
+		block.builders.init.addBlock(deindent`
+			var ${namedAttributes} = [${node.attributes.map(attr => `'${attr.name}'`).join(', ')}];
+		`)
+
 		block.builders.hydrate.addBlock(deindent`
 			var ${changes} = ${init};
 			for (var key in ${changes}) {
+				if (${namedAttributes}.indexOf(key) !== -1) continue;
+
 				@setAttribute(${node.var}, key, ${changes}[key]);
 				${activeKeys}[key] = true;
 			}
@@ -90,9 +97,12 @@ export default class Spread {
 
 				var ${changes} = ${shouldCache ? last : value};
 				for (var key in ${changes}) {
+					if (${namedAttributes}.indexOf(key) !== -1) continue;
+
+					@setAttribute(${node.var}, key, ${changes}[key]);
+
 					${activeKeys}[key] = true;
 					delete ${oldKeys}[key];
-					@setAttribute(${node.var}, key, ${changes}[key]);
 				}
 
 				for (var key in ${oldKeys}) {
@@ -135,6 +145,11 @@ export default class Spread {
 
 		const changes = block.getUniqueName(`${node.var}_spread_changes`);
 
+		const namedAttributes = block.getUniqueName(`${node.var}_attributes`);
+		block.builders.init.addBlock(deindent`
+			var ${namedAttributes} = [${node.attributes.map(attr => `'${attr.name}'`).join(', ')}];
+		`)
+
 		if (dependencies.length || hasChangeableIndex) {
 			const changedCheck = (
 				( block.hasOutroMethod ? `#outroing || ` : '' ) +
@@ -156,9 +171,12 @@ export default class Spread {
 
 					var ${changes} = ${shouldCache ? last : value};
 					for (var key in ${changes}) {
+						if (${namedAttributes}.indexOf(key) !== -1) continue;
+
+						${node.var}_changes[key] = ${changes}[key];
+
 						${activeKeys}[key] = true;
 						delete ${oldKeys}[key];
-						${node.var}_changes[key] = ${changes}[key];
 					}
 
 					for (var key in ${oldKeys}) {

test/runtime/samples/spread-component/_config.js

@@ -10,7 +10,7 @@ export default {
 		}
 	},
 
-	html: `<div><p>foo: lol</p>\n<p>baz: 42 (number)</p>\n<p>qux: this is a piece of string</p>\n<p>quux: core</p></div>`,
+	html: `<div><p>foo: lol</p>\n<p>baz: 42 (number)</p>\n<p>qux: named</p>\n<p>quux: core</p></div>`,
 
 	test ( assert, component, target ) {
 		component.set({
@@ -22,6 +22,6 @@ export default {
 			}
 		});
 
-		assert.equal( target.innerHTML, `<div><p>foo: wut</p>\n<p>baz: 43 (number)</p>\n<p>qux: this is a rather boring string</p>\n<p>quux: heart</p></div>` );
+		assert.equal( target.innerHTML, `<div><p>foo: wut</p>\n<p>baz: 43 (number)</p>\n<p>qux: named</p>\n<p>quux: heart</p></div>` );
 	}
 };

test/runtime/samples/spread-component/main.html

@@ -1,5 +1,5 @@
 <div>
-	<Widget {{...props}}/>
+	<Widget {{...props}} qux="named"/>
 </div>
 
 <script>

test/runtime/samples/spread-element/_config.js

@@ -1,19 +1,21 @@
 export default {
 	solo: true,
 
-	html: `<div data-foo="bar">red</div>`,
+	html: `<div data-named="value" data-foo="bar">red</div>`,
 
 	test ( assert, component, target ) {
 		const div = target.querySelector( 'div' );
 
 		assert.equal( div.dataset.foo, 'bar' );
+		assert.equal( div.dataset.named, 'value' );
 
-		component.set({ color: 'blue', props: { 'data-foo': 'baz' } });
-		assert.equal( target.innerHTML, `<div data-foo="baz">blue</div>` );
+		component.set({ color: 'blue', props: { 'data-foo': 'baz', 'data-named': 'qux' } });
+		assert.equal( target.innerHTML, `<div data-named="value" data-foo="baz">blue</div>` );
 		assert.equal( div.dataset.foo, 'baz' );
+		assert.equal( div.dataset.named, 'value' );
 
 		component.set({ color: 'blue', props: {} });
-		assert.equal( target.innerHTML, `<div>blue</div>` );
+		assert.equal( target.innerHTML, `<div data-named="value">blue</div>` );
 		assert.equal( div.dataset.foo, undefined );
 	}
 };

test/runtime/samples/spread-element/main.html

@@ -1,11 +1,12 @@
-<div {{...props}}>{{color}}</div>
+<div {{...props}} data-named="value">{{color}}</div>
 
 <script>
 	export default {
 		data: () => ({
 			color: 'red',
 			props: {
 				'data-foo': 'bar',
+				'data-named': 'qux'
 			}
 		})
 	};