From 66d48c4830ce436e3651542255de7c5dd7c3b7a3 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Mon, 3 Apr 2017 19:07:06 -0400
Subject: [PATCH] dont generate intermediate data objects for components
 unnecessarily (#442)

---
 src/generators/dom/visitors/Component.js | 40 ++++++++++++++----------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js
index b584dbc145..d7849e9438 100644
--- a/src/generators/dom/visitors/Component.js
+++ b/src/generators/dom/visitors/Component.js
@@ -6,6 +6,18 @@ function capDown ( name ) {
 	return `${name[0].toLowerCase()}${name.slice( 1 )}`;
 }
 
+function stringifyProps ( props ) {
+	if ( !props.length ) return '{}';
+
+	const joined = props.join( ', ' );
+	if ( joined.length > 40 ) {
+		// make larger data objects readable
+		return `{\n\t${props.join( ',\n\t' )}\n}`;
+	}
+
+	return `{ ${joined} }`;
+}
+
 export default {
 	enter ( generator, node ) {
 		const hasChildren = node.children.length > 0;
@@ -88,32 +100,28 @@ export default {
 			const initialProps = local.staticAttributes
 				.concat( local.dynamicAttributes )
 				.map( attribute => `${attribute.name}: ${attribute.value}` );
-			const initialData = current.getUniqueName( `${name}_initialData` );
-
-			if ( initialProps.length ) {
-				statements.push( deindent`
-					var ${name}_initialData = {
-						${initialProps.join( ',\n' )}
-					};
-				` );
-			} else {
-				statements.push( `var ${initialData} = {};` );
-			}
+
+			const initialPropString = stringifyProps( initialProps );
 
 			if ( local.bindings.length ) {
-				const bindings = local.bindings.map( binding => {
-					return `if ( ${binding.prop} in ${binding.obj} ) ${initialData}.${binding.name} = ${binding.value};`;
+				const initialData = current.getUniqueName( `${name}_initialData` );
+
+				statements.push( `var ${name}_initialData = ${initialPropString};` );
+
+				local.bindings.forEach( binding => {
+					statements.push( `if ( ${binding.prop} in ${binding.obj} ) ${initialData}.${binding.name} = ${binding.value};` );
 				});
 
-				statements.push( bindings.join( '\n' ) );
+				componentInitProperties.push( `data: ${initialData}` );
+			} else if ( initialProps.length ) {
+				componentInitProperties.push( `data: ${initialPropString}` );
 			}
-			componentInitProperties.push(`data: ${initialData}`);
 		}
 
 		const expression = node.name === ':Self' ? generator.name : generator.importedComponents.get( node.name ) || `${generator.alias( 'template' )}.components.${node.name}`;
 
 		local.init.addBlockAtStart( deindent`
-			${statements.join( '\n\n' )}
+			${statements.join( '\n' )}
 			var ${name} = new ${expression}({
 				${componentInitProperties.join(',\n')}
 			});