Merge pull request #2258 from sveltejs/collapse-whitespace

collapse consecutive whitespace characters

src/compile/Component.ts

@@ -25,6 +25,7 @@ type ComponentOptions = {
 	tag?: string;
 	immutable?: boolean;
 	accessors?: boolean;
+	preserveWhitespace?: boolean;
 };
 
 // We need to tell estree-walker that it should always
@@ -1196,7 +1197,8 @@ function process_component_options(component: Component, nodes) {
 		immutable: component.compile_options.immutable || false,
 		accessors: 'accessors' in component.compile_options
 			? component.compile_options.accessors
-			: !!component.compile_options.customElement
+			: !!component.compile_options.customElement,
+		preserveWhitespace: !!component.compile_options.preserveWhitespace
 	};
 
 	const node = nodes.find(node => node.name === 'svelte:options');
@@ -1272,6 +1274,7 @@ function process_component_options(component: Component, nodes) {
 
 					case 'accessors':
 					case 'immutable':
+					case 'preserveWhitespace':
 						const code = `invalid-${name}-value`;
 						const message = `${name} attribute must be true or false`
 						const value = get_value(attribute, code, message);
@@ -1292,7 +1295,7 @@ function process_component_options(component: Component, nodes) {
 			else {
 				component.error(attribute, {
 					code: `invalid-options-attribute`,
-					message: `<svelte:options> can only have static 'tag', 'namespace', 'accessors' and 'immutable' attributes`
+					message: `<svelte:options> can only have static 'tag', 'namespace', 'accessors', 'immutable' and 'preserveWhitespace' attributes`
 				});
 			}
 		});

src/compile/index.ts

@@ -23,7 +23,8 @@ const valid_options = [
 	'customElement',
 	'tag',
 	'css',
-	'preserveComments'
+	'preserveComments',
+	'preserveWhitespace'
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {

src/compile/nodes/Text.ts

@@ -1,11 +1,26 @@
 import Node from './shared/Node';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
 
 export default class Text extends Node {
 	type: 'Text';
 	data: string;
+	use_space = false;
 
-	constructor(component, parent, scope, info) {
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: any) {
 		super(component, parent, scope, info);
 		this.data = info.data;
+
+		if (!component.component_options.preserveWhitespace && !/\S/.test(info.data)) {
+			let node = parent;
+			while (node) {
+				if (node.type === 'Element' && node.name === 'pre') {
+					return;
+				}
+				node = node.parent;
+			}
+
+			this.use_space = true;
+		}
 	}
 }

src/compile/render-dom/wrappers/Text.ts

@@ -54,7 +54,7 @@ export default class TextWrapper extends Wrapper {
 
 		block.add_element(
 			this.var,
-			`@text(${stringify(this.data)})`,
+			this.node.use_space ? `@space()` : `@text(${stringify(this.data)})`,
 			parent_nodes && `@claim_text(${parent_nodes}, ${stringify(this.data)})`,
 			parent_node
 		);

src/interfaces.ts

@@ -57,7 +57,8 @@ export interface CompileOptions {
 	tag?: string;
 	css?: boolean;
 
-	preserveComments?: boolean | false;
+	preserveComments?: boolean;
+	preserveWhitespace?: boolean;
 }
 
 export interface Visitor {

src/internal/dom.js

@@ -46,6 +46,10 @@ export function text(data) {
 	return document.createTextNode(data);
 }
 
+export function space() {
+	return text(' ');
+}
+
 export function comment() {
 	return document.createComment('');
 }

test/helpers.js

@@ -85,11 +85,11 @@ function cleanChildren(node) {
 				node.removeChild(child);
 			}
 
-			child.data = child.data.replace(/\s{2,}/g, '\n');
+			child.data = child.data.replace(/\s+/g, '\n');
 
 			if (previous && previous.nodeType === 3) {
 				previous.data += child.data;
-				previous.data = previous.data.replace(/\s{2,}/g, '\n');
+				previous.data = previous.data.replace(/\s+/g, '\n');
 
 				node.removeChild(child);
 				child = previous;

test/js/samples/debug-empty/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -24,7 +25,7 @@ function create_fragment(ctx) {
 			t0 = text("Hello ");
 			t1 = text(ctx.name);
 			t2 = text("!");
-			t3 = text("\n");
+			t3 = space();
 			debugger;
 			add_location(h1, file, 4, 0, 38);
 		},

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -11,6 +11,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -30,7 +31,7 @@ function create_each_block(ctx) {
 		c: function create() {
 			span = element("span");
 			t0 = text(t0_value);
-			t1 = text("\n\t");
+			t1 = space();
 
 			{
 				const { foo, bar, baz, thing } = ctx;
@@ -84,7 +85,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			t0 = text("\n\n");
+			t0 = space();
 			p = element("p");
 			t1 = text("foo: ");
 			t2 = text(ctx.foo);

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

@@ -11,6 +11,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -30,7 +31,7 @@ function create_each_block(ctx) {
 		c: function create() {
 			span = element("span");
 			t0 = text(t0_value);
-			t1 = text("\n\t");
+			t1 = space();
 
 			{
 				const { foo } = ctx;
@@ -84,7 +85,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			t0 = text("\n\n");
+			t0 = space();
 			p = element("p");
 			t1 = text("foo: ");
 			t2 = text(ctx.foo);

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -22,7 +23,7 @@ function create_fragment(ctx) {
 		c: function create() {
 			p = element("p");
 			t0 = text(t0_value);
-			t1 = text("\n\t");
+			t1 = space();
 			t2 = text(ctx.bar);
 			add_location(p, file, 7, 0, 67);
 		},

test/js/samples/do-use-dataset/expected.js

@@ -7,7 +7,7 @@ import {
 	insert,
 	noop,
 	safe_not_equal,
-	text
+	space
 } from "svelte/internal";
 
 function create_fragment(ctx) {
@@ -16,7 +16,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			div0 = element("div");
-			t = text("\n");
+			t = space();
 			div1 = element("div");
 			div0.dataset.foo = "bar";
 			div1.dataset.foo = ctx.bar;

test/js/samples/dont-use-dataset-in-legacy/expected.js

@@ -8,7 +8,7 @@ import {
 	insert,
 	noop,
 	safe_not_equal,
-	text
+	space
 } from "svelte/internal";
 
 function create_fragment(ctx) {
@@ -17,7 +17,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			div0 = element("div");
-			t = text("\n");
+			t = space();
 			div1 = element("div");
 			attr(div0, "data-foo", "bar");
 			attr(div1, "data-foo", ctx.bar);

test/js/samples/each-block-changed-check/expected.js

@@ -11,6 +11,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -30,13 +31,13 @@ function create_each_block(ctx) {
 			div = element("div");
 			strong = element("strong");
 			t0 = text(ctx.i);
-			t1 = text("\n\n\t\t");
+			t1 = space();
 			span = element("span");
 			t2 = text(t2_value);
 			t3 = text(" wrote ");
 			t4 = text(t4_value);
 			t5 = text(" ago:");
-			t6 = text("\n\n\t\t");
+			t6 = space();
 			raw_before = element('noscript');
 			span.className = "meta";
 			div.className = "comment";
@@ -97,7 +98,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			t0 = text("\n\n");
+			t0 = space();
 			p = element("p");
 			t1 = text(ctx.foo);
 		},

test/js/samples/event-modifiers/expected.js

@@ -11,8 +11,8 @@ import {
 	prevent_default,
 	run_all,
 	safe_not_equal,
-	stop_propagation,
+	space,
-	text
+	stop_propagation
 } from "svelte/internal";
 
 function create_fragment(ctx) {
@@ -23,10 +23,10 @@ function create_fragment(ctx) {
 			div = element("div");
 			button0 = element("button");
 			button0.textContent = "click me";
-			t1 = text("\n\t");
+			t1 = space();
 			button1 = element("button");
 			button1.textContent = "or me";
-			t3 = text("\n\t");
+			t3 = space();
 			button2 = element("button");
 			button2.textContent = "or me!";
 			dispose = [

test/js/samples/inline-style-unoptimized/expected.js

@@ -7,7 +7,7 @@ import {
 	insert,
 	noop,
 	safe_not_equal,
-	text
+	space
 } from "svelte/internal";
 
 function create_fragment(ctx) {
@@ -16,7 +16,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			div0 = element("div");
-			t = text("\n");
+			t = space();
 			div1 = element("div");
 			div0.style.cssText = ctx.style;
 			div1.style.cssText = div1_style_value = "" + ctx.key + ": " + ctx.value;

test/js/samples/instrumentation-script-if-no-block/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -20,7 +21,7 @@ function create_fragment(ctx) {
 		c() {
 			button = element("button");
 			button.textContent = "foo";
-			t1 = text("\n\n");
+			t1 = space();
 			p = element("p");
 			t2 = text("x: ");
 			t3 = text(ctx.x);

test/js/samples/instrumentation-script-x-equals-x/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -20,7 +21,7 @@ function create_fragment(ctx) {
 		c() {
 			button = element("button");
 			button.textContent = "foo";
-			t1 = text("\n\n");
+			t1 = space();
 			p = element("p");
 			t2 = text("number of things: ");
 			t3 = text(t3_value);

test/js/samples/instrumentation-template-if-no-block/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -20,7 +21,7 @@ function create_fragment(ctx) {
 		c() {
 			button = element("button");
 			button.textContent = "foo";
-			t1 = text("\n\n");
+			t1 = space();
 			p = element("p");
 			t2 = text("x: ");
 			t3 = text(ctx.x);

test/js/samples/instrumentation-template-x-equals-x/expected.js

@@ -10,6 +10,7 @@ import {
 	noop,
 	safe_not_equal,
 	set_data,
+	space,
 	text
 } from "svelte/internal";
 
@@ -20,7 +21,7 @@ function create_fragment(ctx) {
 		c() {
 			button = element("button");
 			button.textContent = "foo";
-			t1 = text("\n\n");
+			t1 = space();
 			p = element("p");
 			t2 = text("number of things: ");
 			t3 = text(t3_value);

test/js/samples/non-imported-component/expected.js

@@ -7,7 +7,7 @@ import {
 	mount_component,
 	noop,
 	safe_not_equal,
-	text
+	space
 } from "svelte/internal";
 import Imported from "Imported.svelte";
 
@@ -21,7 +21,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			imported.$$.fragment.c();
-			t = text("\n");
+			t = space();
 			nonimported.$$.fragment.c();
 		},
 

test/js/samples/use-elements-as-anchors/expected.js

@@ -9,7 +9,7 @@ import {
 	insert,
 	noop,
 	safe_not_equal,
-	text
+	space
 } from "svelte/internal";
 
 // (10:1) {#if a}
@@ -139,19 +139,19 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			if (if_block0) if_block0.c();
-			t0 = text("\n\n\t");
+			t0 = space();
 			p0 = element("p");
 			p0.textContent = "this can be used as an anchor";
-			t2 = text("\n\n\t");
+			t2 = space();
 			if (if_block1) if_block1.c();
-			t3 = text("\n\n\t");
+			t3 = space();
 			if (if_block2) if_block2.c();
-			t4 = text("\n\n\t");
+			t4 = space();
 			p1 = element("p");
 			p1.textContent = "so can this";
-			t6 = text("\n\n\t");
+			t6 = space();
 			if (if_block3) if_block3.c();
-			t7 = text("\n\n");
+			t7 = space();
 			if (if_block4) if_block4.c();
 			if_block4_anchor = comment();
 		},

test/runtime/samples/binding-input-checkbox/_config.js

@@ -22,10 +22,16 @@ export default {
 		input.checked = false;
 		await input.dispatchEvent(event);
 
-		assert.equal(target.innerHTML, `<input type="checkbox">\n<p>false</p>`);
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>false</p>
+		`);
 
 		component.foo = true;
 		assert.equal(input.checked, true);
-		assert.equal(target.innerHTML, `<input type="checkbox">\n<p>true</p>`);
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>true</p>
+		`);
 	}
 };

test/runtime/samples/component-data-dynamic/_config.js

@@ -5,13 +5,25 @@ export default {
 		compound: 'piece of',
 		go: { deeper: 'core' }
 	},
-	html: `<div><p>foo: lol</p>\n<p>baz: 42 (number)</p>\n<p>qux: this is a piece of string</p>\n<p>quux: core</p></div>`,
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42 (number)</p>
+		<p>qux: this is a piece of string</p>
+		<p>quux: core</p></div>
+	`,
+
 	test({ assert, component, target }) {
 		component.bar = 'wut';
 		component.x = 3;
 		component.compound = 'rather boring';
 		component.go = { deeper: 'heart' };
 
-		assert.equal( target.innerHTML, `<div><p>foo: wut</p>\n<p>baz: 43 (number)</p>\n<p>qux: this is a rather boring string</p>\n<p>quux: heart</p></div>` );
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: wut</p>
+			<p>baz: 43 (number)</p>
+			<p>qux: this is a rather boring string</p>
+			<p>quux: heart</p></div>
+		`);
 	}
 };

test/runtime/samples/custom-method/_config.js

@@ -1,5 +1,8 @@
 export default {
-	html: '<button>+1</button>\n\n<p>0</p>',
+	html: `
+		<button>+1</button>
+		<p>0</p>
+	`,
 
 	async test({ assert, component, target, window }) {
 		const button = target.querySelector('button');
@@ -7,11 +10,17 @@ export default {
 
 		await button.dispatchEvent(event);
 		assert.equal(component.counter, 1);
-		assert.equal(target.innerHTML, '<button>+1</button>\n\n<p>1</p>');
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>1</p>
+		`);
 
 		await button.dispatchEvent(event);
 		assert.equal(component.counter, 2);
-		assert.equal(target.innerHTML, '<button>+1</button>\n\n<p>2</p>');
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>2</p>
+		`);
 
 		assert.equal(component.foo(), 42);
 	}