fix server-side rendering of textareas with value/children

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

@@ -10,6 +10,17 @@ const meta = {
 	':Window': visitWindow
 };
 
+function stringifyAttributeValue ( block: Block, chunks: Node[] ) {
+	return chunks.map( ( chunk: Node ) => {
+		if ( chunk.type === 'Text' ) {
+			return chunk.data;
+		}
+
+		const { snippet } = block.contextualise( chunk.expression );
+		return '${' + snippet + '}';
+	}).join( '' )
+}
+
 export default function visitElement ( generator: SsrGenerator, block: Block, node: Node ) {
 	if ( node.name in meta ) {
 		return meta[ node.name ]( generator, block, node );
@@ -21,24 +32,22 @@ export default function visitElement ( generator: SsrGenerator, block: Block, no
 	}
 
 	let openingTag = `<${node.name}`;
+	let textareaContents; // awkward special case
 
 	node.attributes.forEach( ( attribute: Node ) => {
 		if ( attribute.type !== 'Attribute' ) return;
 
-		let str = ` ${attribute.name}`;
+		if ( attribute.name === 'value' && node.name === 'textarea' ) {
+			textareaContents = stringifyAttributeValue( block, attribute.value );
+		} else {
+			let str = ` ${attribute.name}`;
 
-		if ( attribute.value !== true ) {
-			str += `="` + attribute.value.map( ( chunk: Node ) => {
-				if ( chunk.type === 'Text' ) {
-					return chunk.data;
-				}
+			if ( attribute.value !== true ) {
+				str += `="${stringifyAttributeValue( block, attribute.value )}"`;
+			}
 
-				const { snippet } = block.contextualise( chunk.expression );
-				return '${' + snippet + '}';
-			}).join( '' ) + `"`;
+			openingTag += str;
 		}
-
-		openingTag += str;
 	});
 
 	if ( generator.cssId && !generator.elementDepth ) {
@@ -49,13 +58,17 @@ export default function visitElement ( generator: SsrGenerator, block: Block, no
 
 	generator.append( openingTag );
 
-	generator.elementDepth += 1;
+	if ( node.name === 'textarea' && textareaContents !== undefined ) {
+		generator.append( textareaContents );
+	} else {
+		generator.elementDepth += 1;
 
-	node.children.forEach( ( child: Node ) => {
-		visit( generator, block, child );
-	});
+		node.children.forEach( ( child: Node ) => {
+			visit( generator, block, child );
+		});
 
-	generator.elementDepth -= 1;
+		generator.elementDepth -= 1;
+	}
 
 	if ( !isVoidElementName( node.name ) ) {
 		generator.append( `</${node.name}>` );

test/server-side-rendering/samples/textarea-children/_expected.html

@@ -0,0 +1,3 @@
+<textarea>
+	<p>not actually an element. 42</p>
+</textarea>

test/server-side-rendering/samples/textarea-children/main.html

@@ -0,0 +1,11 @@
+<textarea>
+	<p>not actually an element. {{foo}}</p>
+</textarea>
+
+<script>
+	export default {
+		data () {
+			return { foo: 42 };
+		}
+	};
+</script>

test/server-side-rendering/samples/textarea-value/_expected.html

@@ -0,0 +1 @@
+<textarea>42</textarea>

test/server-side-rendering/samples/textarea-value/main.html

@@ -0,0 +1,9 @@
+<textarea value='{{foo}}'/>
+
+<script>
+	export default {
+		data () {
+			return { foo: 42 };
+		}
+	};
+</script>