Add new line after comments (#178)

* Add new line after comments * chore: add changeset
withastro · Apr 12, 2022 · da0fe36 · da0fe36
1 parent 08ec9f1
commit da0fe36
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 7 deletions.
diff --git a/.changeset/violet-books-try.md b/.changeset/violet-books-try.md
@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Add new line after comments
diff --git a/src/nodes.ts b/src/nodes.ts
@@ -308,4 +308,5 @@ export type {
   DoctypeNode,
   CommentNode,
   FragmentNode,
+  TagLikeNode,
 } from '@astrojs/compiler/types';
diff --git a/src/printer.ts b/src/printer.ts
@@ -75,6 +75,8 @@ import {
   trimTextNodeLeft,
   trimTextNodeRight,
   removeDuplicates,
+  getNextNode,
+  isTagLikeNode,
 } from './utils';
 
 // function printTopLevelParts(node: RootNode, path: AstPath, opts: ParserOptions, print: printFn): Doc {
@@ -448,7 +450,12 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
     //     '}',
     //   ];
     case 'comment':
-      return ['<!--', getUnencodedText(node), '-->'];
+      const nextNode = getNextNode(path);
+      let trailingLine: _doc.builders.Concat | string = '';
+      if (nextNode && isTagLikeNode(nextNode)) {
+        trailingLine = hardline;
+      }
+      return ['<!--', getUnencodedText(node), '-->', trailingLine];
     // case 'CodeSpan':
     //   return getUnencodedText(node);
     // case 'CodeFence': {

diff --git a/src/utils.ts b/src/utils.ts
@@ -26,6 +26,7 @@ import {
   InlineElementNode,
   // MustacheTagNode,
   NodeWithChildren,
+  TagLikeNode,
   // NodeWithText,
   // TextNode,
 } from './nodes';
@@ -725,7 +726,7 @@ export function getMarkdownName(script: string): Set<string> {
 
 // TODO: USE THE COMPILER
 /** True if the node is of type text */
-export function isTextNode(node: Node): node is TextNode {
+export function isTextNode(node: anyNode): node is TextNode {
   return node.type === 'text';
 }
 
@@ -769,3 +770,44 @@ export function removeDuplicates(root: RootNode) {
     );
   });
 }
+
+/** True if the node is TagLikeNode:
+ *
+ * ElementNode | ComponentNode | CustomElementNode | FragmentNode */
+export function isTagLikeNode(node: anyNode): node is TagLikeNode {
+  return (
+    node.type === 'element' ||
+    node.type === 'component' ||
+    node.type === 'custom-element' ||
+    node.type === 'fragment'
+  );
+}
+
+/**
+ * Returns siblings, that is, the children of the parent.
+ */
+export function getSiblings(path: AstPath): anyNode[] {
+  const parent = path.getParentNode();
+  if (!parent) return [];
+
+  return getChildren(parent);
+}
+
+export function getNextNode(path: AstPath): anyNode | null {
+  const node = path.getNode();
+  if (node) {
+    const siblings = getSiblings(path);
+    if (node.position?.start === siblings[siblings.length - 1].position?.start)
+      return null;
+    for (let i = 0; i < siblings.length; i++) {
+      const sibling = siblings[i];
+      if (
+        sibling.position?.start === node.position?.start &&
+        i !== siblings.length - 1
+      ) {
+        return siblings[i + 1];
+      }
+    }
+  }
+  return null;
+}
diff --git a/test/fixtures/other/html-comment/input.astro → test/fixtures/basic/html-comment/input.astro b/test/fixtures/other/html-comment/input.astro → test/fixtures/basic/html-comment/input.astro
@@ -2,4 +2,4 @@
     hello world this is a comment
     <html> 
     {1 + 3  }
--->
+--><div>lorem</div>
diff --git a/.../fixtures/other/html-comment/output.astro → .../fixtures/basic/html-comment/output.astro b/.../fixtures/other/html-comment/output.astro → .../fixtures/basic/html-comment/output.astro
@@ -3,3 +3,4 @@
     <html> 
     {1 + 3  }
 -->
+<div>lorem</div>
diff --git a/test/tests/basic.test.ts b/test/tests/basic.test.ts
@@ -13,3 +13,5 @@ test(
 );
 
 test('Can format a basic astro only text', files, 'basic/simple-text');
+
+test('Can format html comments', files, 'basic/html-comment');
diff --git a/test/tests/other.test.ts b/test/tests/other.test.ts
@@ -29,10 +29,6 @@ test(
   'other/attribute-with-embedded-expr'
 );
 
-test('does not alter html comments', files, 'other/html-comment', {
-  mode: 'unaltered',
-});
-
 test(
   'Can format an Astro file with a JSX expression and an HTML Comment',
   files,
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ @@
         <html>
         {1 + 3  }
     -->
+    <div>lorem</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,5 @@ test(
		);

		test('Can format a basic astro only text', files, 'basic/simple-text');

		test('Can format html comments', files, 'basic/html-comment');