Fix vue print error with self-closing tags (#3705)

duailibe · web-flow · commit 46baad09cd6f · 2018-01-10T17:41:11.000-02:00
diff --git a/src/language-vue/parser-vue.js b/src/language-vue/parser-vue.js
@@ -388,12 +388,16 @@ function parse(text /*, parsers, opts*/) {
         attrs,
         unary,
         start,
-        contentStart: end,
         children: []
       };
       obj.children.push(newObj);
-      objStack.push(newObj);
-      obj = newObj;
+      if (unary) {
+        newObj.end = end;
+      } else {
+        newObj.contentStart = end;
+        objStack.push(newObj);
+        obj = newObj;
+      }
     },
     end: function(tag, start, end) {
       objStack.pop();
diff --git a/src/language-vue/printer-vue.js b/src/language-vue/printer-vue.js
@@ -9,22 +9,18 @@ function genericPrint(path, options, print) {
   const n = path.getValue();
   const res = [];
   let index = n.start;
-  let printParent = typeof n.end === "number";
 
   path.each(childPath => {
     const child = childPath.getValue();
     res.push(options.originalText.slice(index, child.start));
     res.push(childPath.call(print));
-    if (typeof child.end === "number") {
-      index = child.end;
-    } else {
-      printParent = false;
-    }
+    index = child.end;
   }, "children");
 
-  if (printParent) {
-    res.push(options.originalText.slice(index, n.end));
-  }
+  // If there are no children, we just print the node from start to end.
+  // Otherwise, index should point to the end of the last child, and we
+  // need to print the closing tag.
+  res.push(options.originalText.slice(index, n.end));
 
   // Only force a trailing newline if there were any contents.
   if (n.tag === "root" && n.children.length) {
diff --git a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
@@ -302,6 +302,44 @@ export default {
 
 `;
 
+exports[`self_closing.vue 1`] = `
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <div />
+</template>
+
+<script>
+foo();
+</script>
+
+`;
+
+exports[`self_closing.vue 2`] = `
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <div />
+</template>
+
+<script>
+foo();
+</script>
+
+`;
+
 exports[`test.vue 1`] = `
 <script>
 </script>
diff --git a/tests/vue_examples/self_closing.vue b/tests/vue_examples/self_closing.vue
@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
