Format html using only the plugin itself (withastro#107)

antonyfaris · web-flow · commit e28d1cf18bc0 · 2022-01-12T15:35:03.000-05:00
diff --git a/.changeset/tasty-vans-travel.md b/.changeset/tasty-vans-travel.md
@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Format html using only the plugin itself
diff --git a/src/printer.ts b/src/printer.ts
@@ -142,17 +142,6 @@ function print(path: AstPath, opts: ParserOptions, print: printFn): Doc {
 
       if (!isNodeWithChildren(node) || node.children.every(isEmptyTextNode)) return '';
 
-      // If we don't see any JSX expressions, this is just embedded HTML
-      // and we can skip a bunch of work. Hooray!
-      const hasInlineComponent = node.children.filter((x) => x.type === 'InlineComponent').length > 0;
-      if (text.indexOf('{') === -1 && !hasInlineComponent) {
-        // TODO:CHECK 'node.__isRawHTML'
-        node.__isRawHTML = true;
-        node.content = text;
-        return path.call(print);
-        // return path.map(print, 'children');
-      }
-
       if (!isPreTagContent(path)) {
         trimChildren(node.children);
         const output = trim(
@@ -547,14 +536,6 @@ function embed(path: AstPath, print: printFn, textToDoc: (text: string, options:
     return [openingTag, indent(group([hardline, formatttedMarkdown])), hardline, `</${node.name}>`];
   }
 
-  // TODO: ADD TYPES OR FIND ANOTHER WAY TO ACHIVE THIS
-  // @ts-ignore
-  if (node.__isRawHTML) {
-    // TODO: ADD TYPES OR FIND ANOTHER WAY TO ACHIVE THIS
-    // @ts-ignore
-    return textToDoc(node.content, { ...opts, parser: 'html' });
-  }
-
   return null;
 }
 
diff --git a/test/fixtures/embedded-in-markdown/output.md b/test/fixtures/embedded-in-markdown/output.md
@@ -59,9 +59,7 @@ For best results, you should only have one `<style>` tag per-Astro component. Th
       ...;
     </style>
   </head>
-  <body>
-    ...
-  </body>
+  <body> ... </body>
 </html>
 ```
 
@@ -261,9 +259,9 @@ An Astro component template can render as many top-level elements as you'd like.
 
 ```astro
 <!-- An Astro component can contain multiple top-level HTML elements: -->
-<div id="a" />
-<div id="b" />
-<div id="c" />
+<div id="a"></div>
+<div id="b"></div>
+<div id="c"></div>
 ```
 
 When working inside a JSX expression, however, you must wrap multiple elements inside of a **Fragment**. Fragments let you render a set of elements without adding extra nodes to the DOM. This is required in JSX expressions because of a limitation of JavaScript: You can never `return` more than one thing in a JavaScript function or expression. Using a Fragment solves this problem.
diff --git a/test/fixtures/option-html-whitespace-sensitivity-ignore/input.astro b/test/fixtures/option-html-whitespace-sensitivity-ignore/input.astro
@@ -5,5 +5,4 @@
 <div class="voluptatem architecto at 1">Architecto rerum architecto incidunt sint.</div>
 <div class="voluptatem architecto at 2">  Architecto rerum architecto incidunt sint.</div>
 <div class="voluptatem architecto at 3">Architecto rerum architecto incidunt sint.  </div>
- <div class="voluptatem architecto at 4">  Architecto rerum architecto incidunt sint.  </div>
- <p>lorem</p><p>lorem</p><span>lorem</span><span>lorem</span>
+ <div class="voluptatem architecto at 4">  Architecto rerum architecto incidunt sint.  </div>
diff --git a/test/fixtures/option-html-whitespace-sensitivity-ignore/output.astro b/test/fixtures/option-html-whitespace-sensitivity-ignore/output.astro
@@ -29,7 +29,3 @@
 <div class="voluptatem architecto at 4">
   Architecto rerum architecto incidunt sint.
 </div>
-<p>lorem</p>
-<p>lorem</p>
-<span>lorem</span>
-<span>lorem</span>
diff --git a/test/fixtures/option-html-whitespace-sensitivity-strict/input.astro b/test/fixtures/option-html-whitespace-sensitivity-strict/input.astro
@@ -5,5 +5,4 @@
 <div class="voluptatem architecto at 1">Architecto rerum architecto incidunt sint.</div>
 <div class="voluptatem architecto at 2">  Architecto rerum architecto incidunt sint.</div>
 <div class="voluptatem architecto at 3">Architecto rerum architecto incidunt sint.  </div>
- <div class="voluptatem architecto at 4">  Architecto rerum architecto incidunt sint.  </div>
- <p>lorem</p><p>lorem</p><span>lorem</span><span>lorem</span>
+ <div class="voluptatem architecto at 4">  Architecto rerum architecto incidunt sint.  </div>
diff --git a/test/fixtures/option-html-whitespace-sensitivity-strict/output.astro b/test/fixtures/option-html-whitespace-sensitivity-strict/output.astro
@@ -29,4 +29,3 @@
 <div class="voluptatem architecto at 4">
   Architecto rerum architecto incidunt sint.
 </div>
-<p>lorem</p><p>lorem</p><span>lorem</span><span>lorem</span>
diff --git a/test/fixtures/preserve-tag-case/input.astro b/test/fixtures/preserve-tag-case/input.astro
@@ -3,6 +3,8 @@ import Footer from "./Footer.astro";
 import  {Body}  from "lib";
 ---
 
+  <div>
   <Footer>this is a footer component</Footer>
   <footer>this is a regular footer element</footer>
-  <Body></Body>
+  <Body></Body>
+  </div>
diff --git a/test/fixtures/preserve-tag-case/output.astro b/test/fixtures/preserve-tag-case/output.astro
@@ -3,6 +3,8 @@ import Footer from "./Footer.astro";
 import { Body } from "lib";
 ---
 
-<Footer>this is a footer component</Footer>
-<footer>this is a regular footer element</footer>
-<Body />
+<div>
+  <Footer>this is a footer component</Footer>
+  <footer>this is a regular footer element</footer>
+  <Body />
+</div>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'prettier-plugin-astro': patch
 +---
++
 +Format html using only the plugin itself