From ece59b4d1183de02133a3eac40e51e93531f76d6 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 8 Apr 2022 11:49:40 +0900
Subject: [PATCH] Fix for `<textarea>`

---
 src/compiler/compile/nodes/Element.ts         |  8 +++-
 .../render_dom/wrappers/Element/index.ts      | 32 +++++++++++++++
 .../compile/render_ssr/handlers/Element.ts    |  7 +++-
 .../samples/textarea-children/_config.js      |  4 +-
 .../samples/textarea-content/.editorconfig    |  2 +
 .../samples/textarea-content/_config.js       | 34 ++++++++++++++++
 .../samples/textarea-content/main.svelte      | 40 +++++++++++++++++++
 .../samples/textarea-content/.editorconfig    |  2 +
 .../samples/textarea-content/_config.js       |  3 ++
 .../samples/textarea-content/_expected.html   | 35 ++++++++++++++++
 .../samples/textarea-content/main.svelte      | 40 +++++++++++++++++++
 11 files changed, 203 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/textarea-content/.editorconfig
 create mode 100644 test/runtime/samples/textarea-content/_config.js
 create mode 100644 test/runtime/samples/textarea-content/main.svelte
 create mode 100644 test/server-side-rendering/samples/textarea-content/.editorconfig
 create mode 100644 test/server-side-rendering/samples/textarea-content/_config.js
 create mode 100644 test/server-side-rendering/samples/textarea-content/_expected.html
 create mode 100644 test/server-side-rendering/samples/textarea-content/main.svelte

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 92a87dd6f8..4ca28ca736 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -11,7 +11,7 @@ import StyleDirective from './StyleDirective';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
-import { dimensions } from '../../utils/patterns';
+import { dimensions, start_newline } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
 import Let from './Let';
@@ -208,6 +208,12 @@ export default class Element extends Node {
 
 					// this is an egregious hack, but it's the easiest way to get <textarea>
 					// children treated the same way as a value attribute
+					const first = info.children[0];
+					if (first && first.type === 'Text') {
+						// The leading newline character should be stripped.
+						// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+						first.data = first.data.replace(start_newline, '');
+					}
 					info.attributes.push({
 						type: 'Attribute',
 						name: 'value',
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 49797314fe..454e50606e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -992,7 +992,13 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 			// element
 			state.quasi.value.raw += `<${wrapper.node.name}`;
 
+			const is_empty_textarea = wrapper.node.name === 'textarea' && wrapper.fragment.nodes.length === 0;
+
 			(wrapper as ElementWrapper).attributes.forEach((attr: AttributeWrapper) => {
+				if (is_empty_textarea && attr.node.name === 'value') {
+					// The value attribute of <textarea> renders as content.
+					return;
+				}
 				state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
 
 				attr.node.chunks.forEach(chunk => {
@@ -1024,6 +1030,32 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 					}
 				}
 
+				if (is_empty_textarea) {
+					// The <textarea> renders the value attribute as content because the content is stored in the value attribute.
+					const value_attribute = wrapper.attributes.find(attr => attr.node.name === 'value');
+					if (value_attribute) {
+						// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
+						// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+						const first = value_attribute.node.chunks[0];
+						if (first && first.type === 'Text' && start_newline.test(first.data)) {
+							state.quasi.value.raw += '\n';
+						}
+						value_attribute.node.chunks.forEach(chunk => {
+							if (chunk.type === 'Text') {
+								state.quasi.value.raw += escape_html(chunk.data);
+							} else {
+								literal.quasis.push(state.quasi);
+								literal.expressions.push(chunk.manipulate(block));
+
+								state.quasi = {
+									type: 'TemplateElement',
+									value: { raw: '' }
+								};
+							}
+						});
+					}
+				}
+
 				to_html(wrapper.fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
 
 				state.quasi.value.raw += `</${wrapper.node.name}>`;
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index dd096ae79b..fc05cbb74a 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -40,7 +40,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		const { name, expression: { node: expression } } = style_directive;
 		return p`"${name}": ${expression}`;
 	});
-	
+
 	const style_expression =
 		style_expression_list.length > 0 &&
 		x`{ ${style_expression_list} }`;
@@ -164,6 +164,11 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 
 			renderer.add_expression(x`($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`);
 		} else {
+			if (node.name === 'textarea') {
+				// Restore the leading newline immediately after `<textarea>`.
+				// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+				renderer.add_string('\n');
+			}
 			renderer.add_expression(node_contents);
 		}
 
diff --git a/test/runtime/samples/textarea-children/_config.js b/test/runtime/samples/textarea-children/_config.js
index f80b66df1f..5aeba13493 100644
--- a/test/runtime/samples/textarea-children/_config.js
+++ b/test/runtime/samples/textarea-children/_config.js
@@ -9,9 +9,9 @@ export default {
 
 	test({ assert, component, target }) {
 		const textarea = target.querySelector( 'textarea' );
-		assert.strictEqual( textarea.value, '\n\t<p>not actually an element. 42</p>\n' );
+		assert.strictEqual( textarea.value, '\t<p>not actually an element. 42</p>\n' );
 
 		component.foo = 43;
-		assert.strictEqual( textarea.value, '\n\t<p>not actually an element. 43</p>\n' );
+		assert.strictEqual( textarea.value, '\t<p>not actually an element. 43</p>\n' );
 	}
 };
diff --git a/test/runtime/samples/textarea-content/.editorconfig b/test/runtime/samples/textarea-content/.editorconfig
new file mode 100644
index 0000000000..fa948941d5
--- /dev/null
+++ b/test/runtime/samples/textarea-content/.editorconfig
@@ -0,0 +1,2 @@
+[main.svelte]
+trim_trailing_whitespace = unset
diff --git a/test/runtime/samples/textarea-content/_config.js b/test/runtime/samples/textarea-content/_config.js
new file mode 100644
index 0000000000..336c03fada
--- /dev/null
+++ b/test/runtime/samples/textarea-content/_config.js
@@ -0,0 +1,34 @@
+export default {
+	test({ assert, target }) {
+		// Test for <textarea> tag
+		const elementTextarea = target.querySelector('#textarea');
+		// Test for <textarea> tag in non <textarea> tag
+		const elementDivWithTextarea = target.querySelector('#div-with-textarea');
+		// Test for <textarea> tag with leading newline
+		const elementTextareaWithLeadingNewline = target.querySelector('#textarea-with-leading-newline');
+		const elementTextareaWithoutLeadingNewline = target.querySelector('#textarea-without-leading-newline');
+		const elementTextareaWithMultipleLeadingNewline = target.querySelector('#textarea-with-multiple-leading-newlines');
+		const elementDivWithTextareaWithMultipleLeadingNewline = target.querySelector('#div-with-textarea-with-multiple-leading-newlines');
+
+		assert.equal(
+			elementTextarea.value,
+			`  A
+  B
+`
+		);
+		assert.equal(
+			elementDivWithTextarea.children[0].value,
+			`    A
+    B
+  `
+		);
+		assert.equal(elementTextareaWithLeadingNewline.children[0].value, 'leading newline');
+		assert.equal(elementTextareaWithLeadingNewline.children[1].value, '  leading newline and spaces');
+		assert.equal(elementTextareaWithLeadingNewline.children[2].value, '\nleading newlines');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[0].value, 'without spaces');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[1].value, '  with spaces  ');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[2].value, ' \nnewline after leading space');
+		assert.equal(elementTextareaWithMultipleLeadingNewline.value, '\n\nmultiple leading newlines');
+		assert.equal(elementDivWithTextareaWithMultipleLeadingNewline.children[0].value, '\n\nmultiple leading newlines');
+	}
+};
diff --git a/test/runtime/samples/textarea-content/main.svelte b/test/runtime/samples/textarea-content/main.svelte
new file mode 100644
index 0000000000..e2e052ca7a
--- /dev/null
+++ b/test/runtime/samples/textarea-content/main.svelte
@@ -0,0 +1,40 @@
+<textarea id="textarea">
+  A
+  B
+</textarea>
+
+<div id="div-with-textarea">
+  <textarea>
+    A
+    B
+  </textarea>
+</div>
+
+<div id="textarea-with-leading-newline">
+  <textarea>
+leading newline</textarea>
+  <textarea>
+  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea>
+</div>
+
+<div id="textarea-without-leading-newline">
+  <textarea>without spaces</textarea>
+  <textarea>  with spaces  </textarea>
+  <textarea> 
+newline after leading space</textarea>
+</div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines">
+  <textarea>
+
+
+multiple leading newlines</textarea>
+</div>
diff --git a/test/server-side-rendering/samples/textarea-content/.editorconfig b/test/server-side-rendering/samples/textarea-content/.editorconfig
new file mode 100644
index 0000000000..d53d6a3faf
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/.editorconfig
@@ -0,0 +1,2 @@
+[{main.svelte,_expected.html}]
+trim_trailing_whitespace = unset
diff --git a/test/server-side-rendering/samples/textarea-content/_config.js b/test/server-side-rendering/samples/textarea-content/_config.js
new file mode 100644
index 0000000000..39b31839f5
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/_config.js
@@ -0,0 +1,3 @@
+export default {
+	withoutNormalizeHtml: true
+};
diff --git a/test/server-side-rendering/samples/textarea-content/_expected.html b/test/server-side-rendering/samples/textarea-content/_expected.html
new file mode 100644
index 0000000000..7be30b0037
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/_expected.html
@@ -0,0 +1,35 @@
+<textarea id="textarea">
+  A
+  B
+</textarea>
+
+<div id="div-with-textarea"><textarea>
+    A
+    B
+  </textarea></div>
+
+<div id="textarea-with-leading-newline"><textarea>
+leading newline</textarea>
+  <textarea>
+  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea></div>
+
+<div id="textarea-without-leading-newline"><textarea>
+without spaces</textarea>
+  <textarea>
+  with spaces  </textarea>
+  <textarea>
+ 
+newline after leading space</textarea></div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines"><textarea>
+
+
+multiple leading newlines</textarea></div>
diff --git a/test/server-side-rendering/samples/textarea-content/main.svelte b/test/server-side-rendering/samples/textarea-content/main.svelte
new file mode 100644
index 0000000000..e2e052ca7a
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/main.svelte
@@ -0,0 +1,40 @@
+<textarea id="textarea">
+  A
+  B
+</textarea>
+
+<div id="div-with-textarea">
+  <textarea>
+    A
+    B
+  </textarea>
+</div>
+
+<div id="textarea-with-leading-newline">
+  <textarea>
+leading newline</textarea>
+  <textarea>
+  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea>
+</div>
+
+<div id="textarea-without-leading-newline">
+  <textarea>without spaces</textarea>
+  <textarea>  with spaces  </textarea>
+  <textarea> 
+newline after leading space</textarea>
+</div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines">
+  <textarea>
+
+
+multiple leading newlines</textarea>
+</div>