Code review feedback - fixed style + added test

src/compiler/compile/render_ssr/Renderer.ts

@@ -16,6 +16,7 @@ import Title from './handlers/Title';
 import { AppendTarget, CompileOptions } from '../../interfaces';
 import { INode } from '../nodes/interfaces';
 import { Expression, TemplateLiteral, Identifier } from 'estree';
+import { collapse_template_literal } from '../utils/collapse_template_literal';
 import { escape_template } from '../utils/stringify';
 
 type Handler = (node: any, renderer: Renderer, options: CompileOptions) => void;
@@ -107,7 +108,7 @@ export default class Renderer {
 		}
 
 		// Optimize the TemplateLiteral to remove unnecessary nodes
-		collapse_literal(popped.literal);
+		collapse_template_literal(popped.literal);
 
 		return popped.literal;
 	}
@@ -125,37 +126,3 @@ export default class Renderer {
 	}
 }
 
-// Collapse string literals together
-function collapse_literal(literal: TemplateLiteral) {
-	if (literal.quasis.length) {
-		// flatMap() to produce an array containing [quasi, expr, quasi, expr, ..., quasi]
-		const zip = literal.quasis.reduce((acc, cur, index) => {
-			const expr = literal.expressions[index];
-			acc.push(cur);
-			if (expr) {
-				acc.push(expr);
-			}
-			return acc;
-		}, []);
-
-		// If an expression is a simple string literal, combine it with its preceeding
-		// and following quasi
-		let curQuasi = zip[0];
-		const newZip = [curQuasi];
-		for (let i = 1; i < zip.length; i += 2) {
-			const expr = zip[i];
-			const nextQuasi = zip[i + 1];
-			if (expr.type === 'Literal' && typeof expr.value === 'string') {
-				curQuasi.value.raw += escape_template(expr.value) + nextQuasi.value.raw;
-			} else {
-				newZip.push(expr);
-				newZip.push(nextQuasi);
-				curQuasi = nextQuasi;
-			}
-		}
-
-		// Reconstitute the quasi and expressions arrays
-		literal.quasis = newZip.filter((_, index) => index % 2 === 0);
-		literal.expressions = newZip.filter((_, index) => index % 2 === 1);
-	}
-}

src/compiler/compile/utils/collapse_template_literal.ts

@@ -0,0 +1,37 @@
+import { TemplateLiteral } from 'estree';
+import { escape_template } from './stringify';
+
+// Collapse string literals together
+export function collapse_template_literal(literal: TemplateLiteral) {
+	if (literal.quasis.length) {
+		// flatMap() to produce an array containing [quasi, expr, quasi, expr, ..., quasi]
+		const zip = literal.quasis.reduce((acc, cur, index) => {
+			const expr = literal.expressions[index];
+			acc.push(cur);
+			if (expr) {
+				acc.push(expr);
+			}
+			return acc;
+		}, []);
+
+		// If an expression is a simple string literal, combine it with its preceding
+		// and following quasi
+		let cur_quasi = zip[0];
+		const new_zip = [cur_quasi];
+		for (let i = 1; i < zip.length; i += 2) {
+			const expr = zip[i];
+			const next_quasi = zip[i + 1];
+			if (expr.type === 'Literal' && typeof expr.value === 'string') {
+				cur_quasi.value.raw += escape_template(expr.value) + next_quasi.value.raw;
+			} else {
+				new_zip.push(expr);
+				new_zip.push(next_quasi);
+				cur_quasi = next_quasi;
+			}
+		}
+
+		// Reconstitute the quasi and expressions arrays
+		literal.quasis = new_zip.filter((_, index) => index % 2 === 0);
+		literal.expressions = new_zip.filter((_, index) => index % 2 === 1);
+	}
+}

test/js/samples/collapse-literal-ssr/_config.js

@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		dev: true
+	}
+};

test/js/samples/collapse-literal-ssr/expected.js

@@ -0,0 +1,28 @@
+/* generated by Svelte vX.Y.Z */
+import { add_attribute, create_ssr_component, escape } from "svelte/internal";
+
+const const1 = 1;
+const const2 = 'const2';
+
+function foo() {
+	return '';
+}
+
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+	return `
+<div class="class1 class2" style="color:red;">-</div>
+
+
+<div${add_attribute("class", const1, 0)}>-</div>
+<div${add_attribute("class", const1, 0)}>-</div>
+<div${add_attribute("class", const1, 0)}>-</div>
+<div${add_attribute("class", const1, 0)}>-</div>
+<div${add_attribute("class", const2, 0)}>-</div>
+
+
+<div class="${"class1 " + escape('class2', true)}">-</div>
+<div class="${"class1 " + escape(const2, true)}">-</div>
+<div class="${"class1 " + escape(const2, true)}"${add_attribute("style", foo(), 0)}>-</div>`;
+});
+
+export default Component;

test/js/samples/collapse-literal-ssr/input.svelte

@@ -0,0 +1,23 @@
+<script>
+	const const1 = 1;
+	const const2 = 'const2';
+
+	function foo() {
+		return '';
+	}
+</script>
+
+<!-- canonical case - only markup -->
+<div class="class1 class2" style="color:red;">-</div>
+
+<!-- various forms of variable syntax -->
+<div class="{const1}">-</div>
+<div class={const1}>-</div>
+<div class="{const1}">-</div>
+<div class={const1}>-</div>
+<div class={const2}>-</div>
+
+<!-- mixed static string + expressions -->
+<div class="class1 {'class2'}">-</div>
+<div class="class1 {const2}">-</div>
+<div class="class1 {const2}" style={foo()}>-</div>