feat: merge neighboring text and expressions into 1 text node

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,8 @@ const valid_options = [
 	'tag',
 	'css',
 	'preserveComments',
-	'preserveWhitespace'
+	'preserveWhitespace',
+	'optimiseAst',
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
@@ -57,7 +59,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = assign({ generate: 'dom', dev: false }, options);
+	options = assign({ generate: 'dom', dev: false, optimiseAst: true }, options);
 
 	const stats = new Stats();
 	const warnings = [];
@@ -68,6 +70,12 @@ export default function compile(source: string, options: CompileOptions = {}) {
 	const ast = parse(source, options);
 	stats.stop('parse');
 
+	if (options.optimiseAst) {
+		stats.start('optimise-ast');
+		optimise(ast);
+		stats.stop('optimise-ast');
+	}
+
 	stats.start('create component');
 	const component = new Component(
 		ast,
@@ -79,9 +87,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/compile/render_dom/wrappers/Element/index.ts

@@ -297,6 +297,13 @@ export default class ElementWrapper extends Wrapper {
 					 // @ts-ignore todo: should it be this.fragment.nodes[0].node.data instead?
 					b`${node}.textContent = ${string_literal(this.fragment.nodes[0].data)};`
 				);
+			} else if (
+				this.fragment.nodes.length === 1 && 
+				this.fragment.nodes[0].node.type === 'MustacheTag' && 
+				this.fragment.nodes[0].node.expression.node.type === 'TemplateLiteral') {
+					block.chunks.create.push(
+						b`${node}.textContent = ${this.fragment.nodes[0].node.expression.manipulate(block)};`
+					);
 			} else {
 				const state = {
 					quasi: {

src/compiler/compile/render_dom/wrappers/shared/Tag.ts

@@ -4,6 +4,7 @@ import Renderer from '../../Renderer';
 import Block from '../../Block';
 import MustacheTag from '../../../nodes/MustacheTag';
 import RawMustacheTag from '../../../nodes/RawMustacheTag';
+import { is_string } from './is_string';
 import { Node } from 'estree';
 
 export default class Tag extends Wrapper {
@@ -29,14 +30,20 @@ export default class Tag extends Wrapper {
 		update: ((value: Node) => (Node | Node[]))
 	) {
 		const dependencies = this.node.expression.dynamic_dependencies();
+		const should_extract = this.node.should_cache && dependencies.length > 0;
 		let snippet = this.node.expression.manipulate(block);
+		snippet = is_string(snippet) ? snippet : x`${snippet} + ""`;
+		
+		if (should_extract) {
+			const fn_name = block.get_unique_name(`${this.var.name}_fn`);
+			block.add_variable(fn_name, x`(#ctx) => ${snippet}`);
+			snippet = x`${fn_name}(#ctx)`;
+		}
 
 		const value = this.node.should_cache && block.get_unique_name(`${this.var.name}_value`);
 		const content = this.node.should_cache ? value : snippet;
 
-		snippet = x`${snippet} + ""`;
-
-		if (this.node.should_cache) block.add_variable(value, snippet); // TODO may need to coerce snippet to string
+		if (this.node.should_cache) block.add_variable(value, snippet);
 
 		if (dependencies.length > 0) {
 			let condition = x`#changed.${dependencies[0]}`;

src/compiler/compile/render_dom/wrappers/shared/is_string.ts

@@ -0,0 +1,3 @@
+export function is_string(node) {
+  return node.type === 'TemplateLiteral' || (node.type === 'Literal' && typeof node.value === 'string');
+}

src/compiler/interfaces.ts

@@ -124,6 +124,7 @@ export interface CompileOptions {
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;
+	optimiseAst?: boolean;
 }
 
 export interface ParserOptions {

src/compiler/parse/optimise/index.ts

@@ -0,0 +1,85 @@
+import { walk } from 'estree-walker';
+import { Text, MustacheTag } from '../../interfaces';
+
+export default function optimise(ast) {
+	walk(ast, {
+		enter(node: any) {
+			if (node.type === 'Element') {
+				optimise_text_content(node.children);
+			}
+		},
+	});
+}
+
+const text_like_node_type = new Set(['MustacheTag', 'Text']);
+
+function optimise_text_content(children) {
+	let start = 0;
+	let end = 0;
+
+	do {
+		while (
+			start < children.length &&
+			!text_like_node_type.has(children[start].type)
+		)
+			start++;
+
+		end = start;
+
+		while (end < children.length && text_like_node_type.has(children[end].type))
+			end++;
+
+		if (end > start) {
+			const merged = merge_text_siblings(children.slice(start, end));
+			children.splice(start, end - start, ...merged);
+			start = end;
+		}
+	} while (start < children.length);
+}
+
+function merge_text_siblings(children: Array<Text | MustacheTag>) {
+	if (children.length < 3) {
+		return children;
+	}
+
+	const literal = {
+		type: 'TemplateLiteral',
+		expressions: [],
+		quasis: [],
+	};
+	const state = {
+		quasi: {
+			type: 'TemplateElement',
+			value: { raw: '' },
+			start: children[0].start,
+			end: children[0].start
+		},
+	};
+
+	for (const child of children) {
+		if (child.type === 'MustacheTag') {
+			literal.quasis.push(state.quasi);
+			literal.expressions.push(child.expression);
+			state.quasi = {
+				type: 'TemplateElement',
+				value: { raw: '' },
+				// @ts-ignore
+				start: child.expression.end + 1,
+				// @ts-ignore
+				end: child.expression.end + 1
+			};
+		} else if (child.type === 'Text') {
+			state.quasi.value.raw += child.data;
+			state.quasi.end = child.end;
+		}
+	}
+
+	literal.quasis.push(state.quasi);
+
+	return [{
+		type: 'MustacheTag',
+		expression: literal,
+		start: children[0].start,
+		end: children[children.length - 1].end,
+	}];
+}

test/js/index.js

@@ -36,6 +36,10 @@ describe("js", () => {
 
 			const expected = fs.readFileSync(`${dir}/expected.js`, "utf-8");
 
+			if (process.env.UPDATE_EXPECTED) {
+				fs.writeFileSync(`${dir}/expected.js`, actual);
+			}
+
 			assert.equal(
 				actual.trim().replace(/^[ \t]+$/gm, ""),
 				expected.trim().replace(/^[ \t]+$/gm, "")

test/js/samples/capture-inject-dev-only/expected.js

@@ -24,7 +24,7 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			p = element("p");
-			t0 = text(ctx.foo);
+			t0 = text(ctx.foo + "");
 			t1 = space();
 			input = element("input");
 			dispose = listen(input, "input", ctx.input_input_handler);
@@ -37,7 +37,7 @@ function create_fragment(ctx) {
 			set_input_value(input, ctx.foo);
 		},
 		p(changed, ctx) {
-			if (changed.foo) set_data(t0, ctx.foo);
+			if (changed.foo) set_data(t0, ctx.foo + "");
 
 			if (changed.foo && input.value !== ctx.foo) {
 				set_input_value(input, ctx.foo);

test/js/samples/collapses-text-around-comments/expected.js

@@ -26,15 +26,15 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			p = element("p");
-			t = text(ctx.foo);
+			t = text(ctx.foo + "");
 			attr(p, "class", "svelte-1a7i8ec");
 		},
 		m(target, anchor) {
 			insert(target, p, anchor);
 			append(p, t);
 		},
 		p(changed, ctx) {
-			if (changed.foo) set_data(t, ctx.foo);
+			if (changed.foo) set_data(t, ctx.foo + "");
 		},
 		i: noop,
 		o: noop,

test/js/samples/component-store-access-invalidate/expected.js

@@ -21,14 +21,14 @@ function create_fragment(ctx) {
 	return {
 		c() {
 			h1 = element("h1");
-			t = text(ctx.$foo);
+			t = text(ctx.$foo + "");
 		},
 		m(target, anchor) {
 			insert(target, h1, anchor);
 			append(h1, t);
 		},
 		p(changed, ctx) {
-			if (changed.$foo) set_data(t, ctx.$foo);
+			if (changed.$foo) set_data(t, ctx.$foo + "");
 		},
 		i: noop,
 		o: noop,