diff --git a/src/generators/server-side-rendering/visitors/Element.ts b/src/generators/server-side-rendering/visitors/Element.ts index bfa615227a..05267f6bd0 100644 --- a/src/generators/server-side-rendering/visitors/Element.ts +++ b/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( `` ); diff --git a/test/server-side-rendering/samples/textarea-children/_expected.html b/test/server-side-rendering/samples/textarea-children/_expected.html new file mode 100644 index 0000000000..792567e4ca --- /dev/null +++ b/test/server-side-rendering/samples/textarea-children/_expected.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/test/server-side-rendering/samples/textarea-children/main.html b/test/server-side-rendering/samples/textarea-children/main.html new file mode 100644 index 0000000000..7209683448 --- /dev/null +++ b/test/server-side-rendering/samples/textarea-children/main.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/test/server-side-rendering/samples/textarea-value/_expected.html b/test/server-side-rendering/samples/textarea-value/_expected.html new file mode 100644 index 0000000000..cd39aabde5 --- /dev/null +++ b/test/server-side-rendering/samples/textarea-value/_expected.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/server-side-rendering/samples/textarea-value/main.html b/test/server-side-rendering/samples/textarea-value/main.html new file mode 100644 index 0000000000..33375b5785 --- /dev/null +++ b/test/server-side-rendering/samples/textarea-value/main.html @@ -0,0 +1,9 @@ +