component spread SSR

src/generators/server-side-rendering/visitors/Component.ts

@@ -27,51 +27,65 @@ export default function visitComponent(
 	const attributes: Node[] = [];
 	const bindings: Node[] = [];
 
+	let usesSpread;
+
 	node.attributes.forEach((attribute: Node) => {
-		if (attribute.type === 'Attribute') {
+		if (attribute.type === 'Attribute' || attribute.type === 'Spread') {
+			if (attribute.type === 'Spread') usesSpread = true;
 			attributes.push(attribute);
 		} else if (attribute.type === 'Binding') {
 			bindings.push(attribute);
 		}
 	});
 
-	const props = attributes
+	const bindingProps = bindings.map(binding => {
-		.map(attribute => {
+		const { name } = getObject(binding.value);
-			let value;
+		const tail = binding.value.type === 'MemberExpression'
-
+			? getTailSnippet(binding.value)
-			if (attribute.value === true) {
+			: '';
-				value = `true`;
+
-			} else if (attribute.value.length === 0) {
+		const keypath = block.contexts.has(name)
-				value = `''`;
+			? `${name}${tail}`
-			} else if (attribute.value.length === 1) {
+			: `state.${name}${tail}`;
-				const chunk = attribute.value[0];
+		return `${binding.name}: ${keypath}`;
-				if (chunk.type === 'Text') {
+	});
-					value = isNaN(chunk.data) ? stringify(chunk.data) : chunk.data;
+
-				} else {
+	function getAttributeValue(attribute) {
-					block.contextualise(chunk.expression);
+		if (attribute.value === true) return `true`;
-					const { snippet } = chunk.metadata;
+		if (attribute.value.length === 0) return `''`;
-					value = snippet;
+
-				}
+		if (attribute.value.length === 1) {
-			} else {
+			const chunk = attribute.value[0];
-				value = '`' + attribute.value.map(stringifyAttribute).join('') + '`';
+			if (chunk.type === 'Text') {
+				return isNaN(chunk.data) ? stringify(chunk.data) : chunk.data;
 			}
 
-			return `${attribute.name}: ${value}`;
+			block.contextualise(chunk.expression);
-		})
+			const { snippet } = chunk.metadata;
-		.concat(
+			return snippet;
-			bindings.map(binding => {
+		}
-				const { name } = getObject(binding.value);
+
-				const tail = binding.value.type === 'MemberExpression'
+		return '`' + attribute.value.map(stringifyAttribute).join('') + '`';
-					? getTailSnippet(binding.value)
+	}
-					: '';
+
-
+	const props = usesSpread
-				const keypath = block.contexts.has(name)
+		? `Object.assign(${
-					? `${name}${tail}`
+			attributes
-					: `state.${name}${tail}`;
+				.map(attribute => {
-				return `${binding.name}: ${keypath}`;
+					if (attribute.type === 'Spread') {
-			})
+						block.contextualise(attribute.expression);
-		)
+						return attribute.metadata.snippet;
-		.join(', ');
+					} else {
+						return `{ ${attribute.name}: ${getAttributeValue(attribute)} }`;
+					}
+				})
+				.concat(bindingProps.map(p => `{ ${p} }`))
+				.join(', ')
+		})`
+		: `{ ${attributes
+			.map(attribute => `${attribute.name}: ${getAttributeValue(attribute)}`)
+			.concat(bindingProps)
+			.join(', ')} }`;
 
 	const isDynamicComponent = node.name === ':Component';
 	if (isDynamicComponent) block.contextualise(node.expression);
@@ -86,7 +100,7 @@ export default function visitComponent(
 		block.addBinding(binding, expression);
 	});
 
-	let open = `\${${expression}._render(__result, {${props}}`;
+	let open = `\${${expression}._render(__result, ${props}`;
 
 	const options = [];
 	if (generator.options.store) {