improve whitespace handling

src/compiler/compile/nodes/Text.ts

@@ -18,6 +18,7 @@ const elements_without_text = new Set([
 ]);
 
 const regex_ends_with_svg = /svg$/;
+const regex_non_whitespace_characters = /[\S\u00A0]/;
 
 export default class Text extends Node {
 	type: 'Text';
@@ -63,4 +64,11 @@ export default class Text extends Node {
 
 		return false;
 	}
+
+	use_space(): boolean {
+		if (this.component.compile_options.preserveWhitespace) return false;
+		if (regex_non_whitespace_characters.test(this.data)) return false;
+
+		return !this.within_pre();
+	}
 }

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -1218,7 +1218,11 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 			// Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
 			// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
 
-			if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' ';
+			if (wrapper.use_space()) {
+				// use space instead of the text content
+				state.quasi.value.raw += ' ';
+				return;
+			}
 
 			const parent = wrapper.node.parent as Element;
 

src/compiler/compile/render_dom/wrappers/Text.ts

@@ -5,11 +5,9 @@ import Wrapper from './shared/Wrapper';
 import { x } from 'code-red';
 import { Identifier } from 'estree';
 
-const regex_non_whitespace_characters = /[\S\u00A0]/;
-
 export default class TextWrapper extends Wrapper {
 	node: Text;
-	data: string;
+	_data: string;
 	skip: boolean;
 	var: Identifier;
 
@@ -23,15 +21,22 @@ export default class TextWrapper extends Wrapper {
 		super(renderer, block, parent, node);
 
 		this.skip = this.node.should_skip();
-		this.data = data;
+		this._data = data;
 		this.var = (this.skip ? null : x`t`) as unknown as Identifier;
 	}
 
 	use_space() {
-		if (this.renderer.component.component_options.preserveWhitespace) return false;
+		return this.node.use_space();
-		if (regex_non_whitespace_characters.test(this.data)) return false;
+	}
 
-		return !this.node.within_pre();
+	set data(value: string) {
+		// when updating `this.data` during optimisation
+		// propagate the changes over to the underlying node
+		// so that the node.use_space reflects on the latest `data` value
+		this.node.data = this._data = value;
+	}
+	get data() {
+		return this._data;
 	}
 
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {

src/compiler/compile/render_ssr/handlers/Text.ts

@@ -5,7 +5,9 @@ import Element from '../../nodes/Element';
 
 export default function(node: Text, renderer: Renderer, _options: RenderOptions) {
 	let text = node.data;
-	if (
+	if (node.use_space()) {
+		text = ' ';
+	} else if (
 		!node.parent ||
 		node.parent.type !== 'Element' ||
 		((node.parent as Element).name !== 'script' && (node.parent as Element).name !== 'style')

test/helpers.ts

@@ -4,7 +4,7 @@ import glob from 'tiny-glob/sync';
 import * as path from 'path';
 import * as fs from 'fs';
 import * as colors from 'kleur';
-export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual, expected, message?) => void, htmlEqualWithComments: (actual, expected, message?) => void };
+export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual, expected, message?) => void, htmlEqualWithOptions: (actual, expected, options, message?) => void };
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
@@ -140,7 +140,7 @@ function cleanChildren(node) {
 	}
 }
 
-export function normalizeHtml(window, html, { removeDataSvelte = false, preserveComments = false }: { removeDataSvelte?: boolean, preserveComments?: boolean} = {}) {
+export function normalizeHtml(window, html, { removeDataSvelte = false, preserveComments = false }: { removeDataSvelte?: boolean, preserveComments?: boolean }) {
 	try {
 		const node = window.document.createElement('div');
 		node.innerHTML = html
@@ -155,7 +155,12 @@ export function normalizeHtml(window, html, { removeDataSvelte = false, preserve
 	}
 }
 
-export function setupHtmlEqual(options?: { removeDataSvelte?: boolean }) {
+export function normalizeNewline(html: string) {
+	// return html.trim().replace(/\r\n/g, '\n')
+	return html.replace(/\r\n/g, '\n');
+}
+
+export function setupHtmlEqual(options: { removeDataSvelte?: boolean } = {}) {
 	const window = env();
 
 	// eslint-disable-next-line no-import-assign
@@ -167,10 +172,14 @@ export function setupHtmlEqual(options?: { removeDataSvelte?: boolean }) {
 		);
 	};
 	// eslint-disable-next-line no-import-assign
-	assert.htmlEqualWithComments = (actual, expected, message) => {
+	assert.htmlEqualWithOptions = (actual, expected, { preserveComments, withoutNormalizeHtml }, message) => {
 		assert.deepEqual(
-			normalizeHtml(window, actual, { ...options, preserveComments: true }),
+			withoutNormalizeHtml
-			normalizeHtml(window, expected, { ...options, preserveComments: true }),
+				? normalizeNewline(actual).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, actual, { ...options, preserveComments }),
+			withoutNormalizeHtml
+				? normalizeNewline(expected).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, expected, { ...options, preserveComments }),
 			message
 		);
 	};

test/js/samples/debug-ssr-foo/expected.js

@@ -8,11 +8,8 @@ const Component = create_ssr_component(($$result, $$props, $$bindings, slots) =>
 	if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
 
 	return `${each(things, thing => {
-		return `<span>${escape(thing.name)}</span>
+		return `<span>${escape(thing.name)}</span> ${debug(null, 7, 2, { foo })}`;
-	${debug(null, 7, 2, { foo })}`;
+	})} <p>foo: ${escape(foo)}</p>`;
-	})}
-
-<p>foo: ${escape(foo)}</p>`;
 });
 
 export default Component;

test/js/samples/ssr-preserve-comments/expected.js

@@ -2,9 +2,7 @@
 import { create_ssr_component } from "svelte/internal";
 
 const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	return `<div>content</div>
+	return `<div>content</div> <!-- comment --> <div>more content</div>`;
-<!-- comment -->
-<div>more content</div>`;
 });
 
 export default Component;

test/runtime/index.ts

@@ -201,7 +201,9 @@ describe('runtime', () => {
 					}
 
 					if (config.html) {
-						assert.htmlEqual(target.innerHTML, config.html);
+						assert.htmlEqualWithOptions(target.innerHTML, config.html, {
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					}
 
 					if (config.test) {

test/runtime/samples/pre-tag/_config.js

@@ -1,19 +1,14 @@
 export default {
-	test({ assert, target }) {
+	withoutNormalizeHtml: true,
-		// Test for <pre> tag
+	html: get_html(false),
-		const elementPre = target.querySelector('#pre');
+	ssrHtml: get_html(true)
-		// Test for non <pre> tag
+};
-		const elementDiv = target.querySelector('#div');
-		// Test for <pre> tag in non <pre> tag
-		const elementDivWithPre = target.querySelector('#div-with-pre');
-		// Test for <pre> tag with leading newline
-		const elementPreWithLeadingNewline = target.querySelector('#pre-with-leading-newline');
-		const elementPreWithoutLeadingNewline = target.querySelector('#pre-without-leading-newline');
-		const elementPreWithMultipleLeadingNewline = target.querySelector('#pre-with-multiple-leading-newlines');
 
-		assert.equal(
+function get_html(ssr) {
-			elementPre.innerHTML,
+	// ssr rendered HTML has an extra newline prefixed within `<pre>` tag,
-			`  A
+	// if the <pre> tag starts with `\n`
+	// because when browser parses the SSR rendered HTML, it will ignore the 1st '\n' character
+	return `<pre id="pre">  A
   B
   <span>
     C
@@ -21,20 +16,12 @@ export default {
   </span>
   E
   F
-`
+</pre> <div id="div">A
-		);
-		assert.equal(
-			elementDiv.innerHTML,
-			`A
   B
   <span>C
     D</span>
   E
-  F`
+  F</div> <div id="div-with-pre"><pre>    A
-		);
-		assert.equal(
-			elementDivWithPre.innerHTML,
-			`<pre>    A
     B
     <span>
       C
@@ -42,14 +29,9 @@ export default {
     </span>
     E
     F
-  </pre>`
+  </pre></div> <div id="pre-with-leading-newline"><pre>leading newline</pre> <pre>  leading newline and spaces</pre> <pre>${ssr ? '\n' : ''}
-		);
+leading newlines</pre></div> <div id="pre-without-leading-newline"><pre>without spaces</pre> <pre>  with spaces  </pre> <pre> 
-		assert.equal(elementPreWithLeadingNewline.children[0].innerHTML, 'leading newline');
+newline after leading space</pre></div> <pre id="pre-with-multiple-leading-newlines">${ssr ? '\n' : ''}
-		assert.equal(elementPreWithLeadingNewline.children[1].innerHTML, '  leading newline and spaces');
+
-		assert.equal(elementPreWithLeadingNewline.children[2].innerHTML, '\nleading newlines');
+multiple leading newlines</pre>`;
-		assert.equal(elementPreWithoutLeadingNewline.children[0].innerHTML, 'without spaces');
-		assert.equal(elementPreWithoutLeadingNewline.children[1].innerHTML, '  with spaces  ');
-		assert.equal(elementPreWithoutLeadingNewline.children[2].innerHTML, ' \nnewline after leading space');
-		assert.equal(elementPreWithMultipleLeadingNewline.innerHTML, '\n\nmultiple leading newlines');
 }
-};

test/runtime/samples/preserve-whitespaces/_config.js

@@ -2,17 +2,8 @@ export default {
 	compileOptions: {
 		preserveWhitespace: true
   },
-	test({ assert, target }) {
-		// Test for <pre> tag
-		const elementPre = target.querySelector('#pre');
-		// Test for non <pre> tag
-		const elementDiv = target.querySelector('#div');
-		// Test for <pre> tag in non <pre> tag
-		const elementDivWithPre = target.querySelector('#div-with-pre');
 
-		assert.equal(
+  html: `<pre id="pre">  A
-			elementPre.innerHTML,
-			`  A
   B
   <span>
     C
@@ -20,11 +11,9 @@ export default {
   </span>
   E
   F
-`
+</pre>
-		);
+
-		assert.equal(
+<div id="div">
-			elementDiv.innerHTML,
-			`
   A
   B
   <span>
@@ -33,11 +22,9 @@ export default {
   </span>
   E
   F
-`
+</div>
-		);
+
-		assert.equal(
+<div id="div-with-pre">
-			elementDivWithPre.innerHTML,
-			`
   <pre>    A
     B
     <span>
@@ -47,7 +34,5 @@ export default {
     E
     F
   </pre>
-`
+</div>`
-		);
-	}
 };

test/runtime/samples/textarea-content/_config.js

@@ -1,4 +1,21 @@
 export default {
+	withoutNormalizeHtml: true,
+	// Unable to test `html` with `<textarea>` content
+	// as the textarea#value will not show within `innerHtml`
+	ssrHtml: `<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>`,
 	test({ assert, target }) {
 		// Test for <textarea> tag
 		const elementTextarea = target.querySelector('#textarea');

test/server-side-rendering/index.ts

@@ -83,13 +83,7 @@ describe('ssr', () => {
 				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
 
 				try {
-					if (config.withoutNormalizeHtml) {
+					assert.htmlEqualWithOptions(html, expectedHtml, { preserveComments: compileOptions.preserveComments, withoutNormalizeHtml: config.withoutNormalizeHtml });
-						assert.strictEqual(html.trim().replace(/\r\n/g, '\n'), expectedHtml.trim().replace(/\r\n/g, '\n'));
-					} else {
-						(compileOptions.preserveComments
-							? assert.htmlEqualWithComments
-							: assert.htmlEqual)(html, expectedHtml);
-					}
 				} catch (error) {
 					if (shouldUpdateExpected()) {
 						fs.writeFileSync(`${dir}/_expected.html`, html);
@@ -214,9 +208,15 @@ describe('ssr', () => {
 					});
 
 					if (config.ssrHtml) {
-						assert.htmlEqual(html, config.ssrHtml);
+						assert.htmlEqualWithOptions(html, config.ssrHtml, {
+							preserveComments: compileOptions.preserveComments, 
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					} else if (config.html) {
-						assert.htmlEqual(html, config.html);
+						assert.htmlEqualWithOptions(html, config.html, {
+							preserveComments: compileOptions.preserveComments, 
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					}
 
 					if (config.test_ssr) {

test/server-side-rendering/samples/pre-tag/.editorconfig

@@ -1,2 +0,0 @@
-[{main.svelte,_expected.html}]
-trim_trailing_whitespace = unset

test/server-side-rendering/samples/pre-tag/_config.js

@@ -1,3 +0,0 @@
-export default {
-	withoutNormalizeHtml: true
-};

test/server-side-rendering/samples/pre-tag/_expected.html

@@ -1,37 +0,0 @@
-<pre>  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>A
-  B
-  <span>C
-    D</span>
-  E
-  F</div>
-
-<div><pre>    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre></div>
-
-<div id="pre-with-leading-newline"><pre>leading newline</pre>
-  <pre>  leading newline and spaces</pre>
-  <pre>
-
-leading newlines</pre></div>
-
-<div id="pre-without-leading-newline"><pre>without spaces</pre>
-  <pre>  with spaces  </pre>
-  <pre> 
-newline after leading space</pre></div>

test/server-side-rendering/samples/pre-tag/main.svelte

@@ -1,51 +0,0 @@
-<pre>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>
-    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>
-
-<div id="pre-with-leading-newline">
-  <pre>
-leading newline</pre>
-  <pre>
-  leading newline and spaces</pre>
-  <pre>
-
-leading newlines</pre>
-</div>
-
-<div id="pre-without-leading-newline">
-  <pre>without spaces</pre>
-  <pre>  with spaces  </pre>
-  <pre> 
-newline after leading space</pre>
-</div>

test/server-side-rendering/samples/preserve-whitespaces/_config.js

@@ -1,6 +0,0 @@
-export default {
-	withoutNormalizeHtml: true,
-	compileOptions: {
-		preserveWhitespace: true
-	}
-};

test/server-side-rendering/samples/preserve-whitespaces/_expected.html

@@ -1,32 +0,0 @@
-<pre>  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>

test/server-side-rendering/samples/preserve-whitespaces/main.svelte

@@ -1,34 +0,0 @@
-<pre>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>
-    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>

test/server-side-rendering/samples/textarea-content/.editorconfig

@@ -1,2 +0,0 @@
-[{main.svelte,_expected.html}]
-trim_trailing_whitespace = unset

test/server-side-rendering/samples/textarea-content/_config.js

@@ -1,3 +0,0 @@
-export default {
-	withoutNormalizeHtml: true
-};

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

@@ -1,28 +0,0 @@
-<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>

test/server-side-rendering/samples/textarea-content/main.svelte

@@ -1,40 +0,0 @@
-<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>