align indentation of multiline expressions and statements

src/printer.ts

@@ -31,14 +31,35 @@ export const print: Printer<Node>["print"] = (path) => {
 };
 
 const printExpression = (node: Expression): builders.Doc => {
-	return builders.group(["{{", " ", node.content, " ", "}}"], {
+	const multiline = node.content.includes("\n");
-		shouldBreak: node.ownLine || node.content.includes("\n"),
+
-	});
+	return builders.group(
+		builders.join(" ", [
+			"{{",
+			multiline
+				? builders.indent([getMultilineGroup(node.content)])
+				: node.content,
+			multiline ? [builders.hardline, "}}"] : "}}",
+		]),
+		{
+			shouldBreak: node.ownLine,
+		}
+	);
 };
 
 const printStatement = (node: Statement): builders.Doc => {
+	const multiline = node.content.includes("\n");
+
 	const statemnt = builders.group(
-		["{%", node.delimiter, " ", node.content, " ", node.delimiter, "%}"],
+		builders.join(" ", [
+			["{%", node.delimiter],
+			multiline
+				? builders.indent(getMultilineGroup(node.content))
+				: node.content,
+			multiline
+				? [builders.hardline, node.delimiter, "%}"]
+				: [node.delimiter, "%}"],
+		]),
 		{ shouldBreak: node.ownLine }
 	);
 
@@ -147,6 +168,14 @@ export const embed: Printer<Node>["embed"] = (
 	return [...mapped, builders.hardline];
 };
 
+const getMultilineGroup = (content: String): builders.Group => {
+	return builders.group(
+		content.split("\n").map((line, i) => {
+			return [builders.hardline, line.trim()];
+		})
+	);
+};
+
 const splitAtElse = (node: Node): string[] => {
 	const elseNodes = Object.values(node.nodes).filter(
 		(n) =>

test/cases/expression_multiline/expected.html

@@ -1,7 +1,9 @@
 <div>
-  {{ {
+  {{
+    {
     'dict': 'of',
     'key': 'and',
     'value': 'pairs'
-  } }}
+    }
+  }}
 </div>

test/cases/expression_multiline/input.html

@@ -2,8 +2,8 @@
 {{
   {
     'dict': 'of',
-    'key': 'and',
+      'key': 'and',  
-    'value': 'pairs'
+'value': 'pairs'
   }
 }}
 </div>

test/cases/statement_long/expected.html

@@ -0,0 +1,10 @@
+<ul>
+  {%
+    for href, caption in [
+    ('index.html', 'Index'),
+    ('about.html', 'About'),
+    ('downloads.html', 'Downloads')]
+  %}
+    <li><a href="{{ href }}">{{ caption }}</a></li>
+  {% endfor %}
+</ul>

test/cases/statement_long/input.html

@@ -0,0 +1,9 @@
+<ul>
+{% for href, caption in [
+('index.html', 'Index'),
+    ('about.html', 'About'),  
+  ('downloads.html', 'Downloads')]
+%}
+<li><a href="{{ href }}">{{ caption }}</a></li>
+{% endfor %}
+</ul>