merge text a like together

Author: tanhauhau

src/compiler/compile/index.ts

@@ -7,6 +7,7 @@ import { CompileOptions, Warning } from '../interfaces';
 import Component from './Component';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_name_from_filename from './utils/get_name_from_filename';
+import optimise from '../parse/optimise/index';
 
 const valid_options = [
 	'format',
@@ -25,7 +26,7 @@ const valid_options = [
 	'tag',
 	'css',
 	'preserveComments',
-	'preserveWhitespace'
+	'preserveWhitespace',
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
@@ -68,6 +69,10 @@ export default function compile(source: string, options: CompileOptions = {}) {
 	const ast = parse(source, options);
 	stats.stop('parse');
 
+	stats.start('optimise-ast');
+	optimise(ast);
+	stats.stop('optimise-ast');
+
 	stats.start('create component');
 	const component = new Component(
 		ast,
@@ -79,9 +84,10 @@ export default function compile(source: string, options: CompileOptions = {}) {
 	);
 	stats.stop('create component');
 
-	const js = options.generate === false
-		? null
-		: options.generate === 'ssr'
+	const js =
+		options.generate === false
+			? null
+			: options.generate === 'ssr'
 			? render_ssr(component, options)
 			: render_dom(component, options);
 

src/compiler/parse/optimise/index.ts

@@ -0,0 +1,56 @@
+import { walk } from 'estree-walker';
+import { Text, MustacheTag } from '../../interfaces';
+
+const node_type_can_merge = new Set(['MustacheTag', 'Text']);
+
+export default function optimise(ast) {
+	walk(ast, {
+		enter(node: any) {
+			if (node.type === 'Element') {
+				let i = 0;
+				while (i + 1 < node.children.length) {
+					let prev = node.children[i];
+					let next = node.children[i + 1];
+					if (
+						node_type_can_merge.has(prev.type) &&
+						node_type_can_merge.has(next.type)
+					) {
+						// merge `i` and `i+1`
+						const newNode = {
+							start: prev.start,
+							end: next.end,
+							type: 'MustacheTag',
+							expression: {
+								type: 'BinaryExpression',
+								start: prev.start,
+								end: next.end,
+								left: to_expression(prev),
+								operator: '+',
+								right: to_expression(next),
+								loc: {},
+							},
+						};
+						node.children.splice(i, 2, newNode);
+					} else {
+						i++;
+					}
+				}
+			}
+		},
+	});
+}
+
+function to_expression(node: Text | MustacheTag) {
+	switch (node.type) {
+		case 'MustacheTag':
+			return node.expression;
+		case 'Text':
+			return {
+				type: 'Literal',
+				start: node.start,
+				end: node.end,
+				value: node.data,
+				raw: JSON.stringify(node.data),
+			};
+	}
+}

test/js/samples/optimise-ast/expected.js

@@ -0,0 +1,60 @@
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let t_value = "\n\tClicked " + ctx.count + " " + (ctx.count === 1 ? "time" : "times") + "\n" + "";
+	let t;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			t = text(t_value);
+			dispose = listen(button, "click", ctx.increment);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			append(button, t);
+		},
+		p(changed, ctx) {
+			if (changed.count && t_value !== (t_value = "\n\tClicked " + ctx.count + " " + (ctx.count === 1 ? "time" : "times") + "\n" + "")) set_data(t, t_value);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let count = 0;
+
+	function increment() {
+		$$invalidate("count", count = count + 1);
+	}
+
+	return { count, increment };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/optimise-ast/input.svelte

@@ -0,0 +1,9 @@
+<script>
+	let count = 0;
+	function increment() {
+		count = count + 1;
+	}
+</script>
+<button on:click={increment}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>

test/runtime/samples/optimise-ast/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `<button>Clicked 0 times</button>`,
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `<button>Clicked 1 time</button>`);
+
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `<button>Clicked 2 times</button>`);
+	},
+};

test/runtime/samples/optimise-ast/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let count = 0;
+	function increment() {
+		count = count + 1;
+	}
+</script>
+<button on:click={increment}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>