simple elements

src/language-handlebars/printer-glimmer.js

@@ -17,30 +17,19 @@ function testGroup() {
     concat([
       "111",
       " ",
-      fill(
-        ["aaa", line, "bbb", line, "ccc", line, "ddd"]
-      ),
+      fill(["aaa", line, "bbb", line, "ccc", line, "ddd"]),
       " ",
-      fill(
-        ["aaa", line, "bbb", line, "ccc", line, "ddd"]
-      ),
+      fill(["aaa", line, "bbb", line, "ccc", line, "ddd"]),
       " ",
-      fill(
-        ["aaa", line, "bbb", line, "ccc", line, "ddd"]
-      ),
+      fill(["aaa", line, "bbb", line, "ccc", line, "ddd"]),
       " ",
-      fill(
-        ["aaa", line, "bbb", line, "ccc", line, "ddd"]
-      ),
+      fill(["aaa", line, "bbb", line, "ccc", line, "ddd"]),
       " ",
-      fill(
-        ["aaa", line, "bbb", line, "ccc", line, "ddd"]
-      ),
+      fill(["aaa", line, "bbb", line, "ccc", line, "ddd"]),
       " ",
       "222"
     ])
   );
-
 }
 
 function print(path, options, print) {
@@ -50,16 +39,22 @@ function print(path, options, print) {
     case "Block":
     case "Program":
     case "Template": {
-      return concat([
-        printChildren(path, options, print, "body"),
-        hardline
-      ]);
+      return concat([printChildren(path, options, print, "body"), hardline]);
     }
     case "ElementNode": {
-      return "[ELEMENT]"
+      return concat([
+        group(concat(["<", node.tag, ">"])),
+        group(
+          concat([
+            indent(concat([softline, printChildren(path, options, print)])),
+            softline,
+            concat(["</", node.tag, ">"])
+          ])
+        )
+      ]);
     }
     case "BlockStatement": {
-     return "[BlockStatement]";
+      return "[BlockStatement]";
     }
     case "ElementModifierStatement":
     case "MustacheStatement": {
@@ -69,7 +64,7 @@ function print(path, options, print) {
       return "[SubExpression]";
     }
     case "AttrNode": {
-      return "[AttrNode]"
+      return "[AttrNode]";
     }
     case "ConcatStatement": {
       return "[ConcatStatement]";
@@ -84,11 +79,7 @@ function print(path, options, print) {
       let parts = splitByWhitespaceAndTrim(node.chars);
       parts = injectLines(parts);
 
-      return group(
-        fill(
-          parts
-        )
-      );
+      return group(fill(parts));
     }
     case "MustacheCommentStatement": {
       return "[MustacheCommentStatement]";
@@ -133,12 +124,15 @@ function printChildren(path, options, print, key = "children") {
 }
 
 function splitByWhitespaceAndTrim(text) {
-  return text.replace(/^\s+/,"").replace(/\s+$/,"").split(/\s+/);
+  return text
+    .replace(/^\s+/, "")
+    .replace(/\s+$/, "")
+    .split(/\s+/);
 }
 
 function injectLines(items) {
   let newItems = [];
-  for(let i=0; i<items.length; i++) {
+  for (let i = 0; i < items.length; i++) {
     if (i !== 0) {
       newItems.push(line);
     }

tests/glimmer/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`simple-elements.hbs 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<p>this is short, so it's on a single line</p>
+
+<p>this is longer, so it breaks into multiple lines. this is longer, so it breaks into multiple lines.</p>
+=====================================output=====================================
+<p>this is short, so it's on a single line</p>
+
+<p>
+  this is longer, so it breaks into multiple lines. this is longer, so it breaks
+  into multiple lines.
+</p>
+
+================================================================================
+`;
+
 exports[`simple-srapping-text.hbs 1`] = `
 ====================================options=====================================
 parsers: ["glimmer"]

tests/glimmer/simple-elements.hbs

@@ -0,0 +1,3 @@
+<p>this is short, so it's on a single line</p>
+
+<p>this is longer, so it breaks into multiple lines. this is longer, so it breaks into multiple lines.</p>