Merge pull request #35 from gitKrystan/hardline-defaults

Print template tags on separate lines for "default" templates

Author: gitKrystan

README.md

@@ -42,9 +42,63 @@ A [Prettier](https://prettier.io/) plugin for formatting [Ember template tags](h
 
 ## Opinions
 
-This plugin works by weaving together Prettier's standard [babel-ts](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLWcBOAzAhmOAAgFkBPASQx3yOAB0pDDsIIAKASiUIGcZN0AcwA0DJgCNcmbgEFMmXKQA8UAK4BbcVgB8oqAF8GDOAA8ADhEwxCucXwVhrYADa4ePQgDFWhVOrPOcOoIMB5klPDUBIT0jMysnDFiTCmpTAD06YQAKgDyACK53JhwMKqYjLiVjqq4zoQAbnWqRAAWWHDJaYQlZRWEAOTtzs4QA10phnGCpYSSmImxqb3ljADaTACMehNMAEzChADMeqkAuslTUwwwpGZEAEpwAI4tfNl3RAC8gwDiAKLZAaEAA+gwAEv8ZPlgWCBgAFXIAZSBoMG8IAqqi4bl4dlyLkAHJI2GDADCRMJ-zJ2MG+X+ABlAf9SQNsg8ZGSWSBhCAIGYYKhoDxkKApJgIAB3eFSBAilB1SWKEW88QOADWpSRuGCDPQcGQeGcPDgqo1WrM+CEyH4LV5QS0ABNHXBHQyqoJajNvJh1LgYIKoIJkCBcKoYBAeSBWjB1M4AOqtVDwHiWghIuXJ1ANZOkENgdxR9AmqzwhSCP2Guom3kAKx4JiRQkCAEVVBB4FXjaaQJbMCWQ5ItM4ALShKNmASweOoR0wVrIAAcAAZeZOICb4wozCHJ3ASw0DbzXh24GX+fLQzwR1A4K7XVGSq9UCUy7gK7guzWQCb1KgbZgdo-s2cBtqeX49jAtgznOC5IAcID8LgqDOEIZIQOolYoPuACsUaqCa2S2PKRrfg0LSUC6sBImAAgCjIUCOkityBBB+j6EAA) and [glimmer](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEACVAeAJgSwG7qFgA2AhgM7kC8AOiAjAE4CedhqAfDVOhgBYBGDsGDoYOGMTjsAvjIwB6QVx6ZcBdCQrU6AIwhZWIFe1OERhfYbOE53Reo6YFjkABoQEAA7jo5ZKCkjIwQAO4ACkEI-iikxKGkzP4euoykYADWcDAAyqQAtnAAMjhQcMgAZnHkcClpmdk5XumlAObITACutfT5unBYWANFpFCtnaStcABiEIz5pDDiY8ggpJ0wEO4gfDD5xADqfBJw5M1gcDnREvgSzKtglNulNYww4WmtC5XVPQBW5AAHjk2lIAIqdCDwH7EGoeZqMV6rVrEHD5QqMbZeRilGAHHBYGB8ZAADgADPCQjUDmkvKtsac4Iw8OUPABHSHwD7eGJrcgAWjKAwG20YcA5ODFH0m3yQVVhPRq+RwHUY3Q85FBcAhUPKct+HhgpF0+MJxKQACZDWkcKixgBhCDo0irU4AVm2nRqABVjTF5XCQHhugBJKBDWA5MA4nwAQXDORgzCkMJqciAA) parsers, so it doesn't have many opinions of its own.
+This plugin works by weaving together Prettier's standard [babel-ts](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLWcBOAzAhmOAAgFkBPASQx3yOAB0pDDsIIAKASiUIGcZN0AcwA0DJgCNcmbgEFMmXKQA8UAK4BbcVgB8oqAF8GDOAA8ADhEwxCucXwVhrYADa4ePQgDFWhVOrPOcOoIMB5klPDUBIT0jMysnDFiTCmpTAD06YQAKgDyACK53JhwMKqYjLiVjqq4zoQAbnWqRAAWWHDJaYQlZRWEAOTtzs4QA10phnGCpYSSmImxqb3ljADaTACMehNMAEzChADMeqkAuslTUwwwpGZEAEpwAI4tfNl3RAC8gwDiAKLZAaEAA+gwAEv8ZPlgWCBgAFXIAZSBoMG8IAqqi4bl4dlyLkAHJI2GDADCRMJ-zJ2MG+X+ABlAf9SQNsg8ZGSWSBhCAIGYYKhoDxkKApJgIAB3eFSBAilB1SWKEW88QOADWpSRuGCDPQcGQeGcPDgqo1WrM+CEyH4LV5QS0ABNHXBHQyqoJajNvJh1LgYIKoIJkCBcKoYBAeSBWjB1M4AOqtVDwHiWghIuXJ1ANZOkENgdxR9AmqzwhSCP2Guom3kAKx4JiRQkCAEVVBB4FXjaaQJbMCWQ5ItM4ALShKNmASweOoR0wVrIAAcAAZeZOICb4wozCHJ3ASw0DbzXh24GX+fLQzwR1A4K7XVGSq9UCUy7gK7guzWQCb1KgbZgdo-s2cBtqeX49jAtgznOC5IAcID8LgqDOEIZIQOolYoPuACsUaqCa2S2PKRrfg0LSUC6sBImAAgCjIUCOkityBBB+j6EAA) and [glimmer](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEACVAeAJgSwG7qFgA2AhgM7kC8AOiAjAE4CedhqAfDVOhgBYBGDsGDoYOGMTjsAvjIwB6QVx6ZcBdCQrU6AIwhZWIFe1OERhfYbOE53Reo6YFjkABoQEAA7jo5ZKCkjIwQAO4ACkEI-iikxKGkzP4euoykYADWcDAAyqQAtnAAMjhQcMgAZnHkcClpmdk5XumlAObITACutfT5unBYWANFpFCtnaStcABiEIz5pDDiY8ggpJ0wEO4gfDD5xADqfBJw5M1gcDnREvgSzKtglNulNYww4WmtC5XVPQBW5AAHjk2lIAIqdCDwH7EGoeZqMV6rVrEHD5QqMbZeRilGAHHBYGB8ZAADgADPCQjUDmkvKtsac4Iw8OUPABHSHwD7eGJrcgAWjKAwG20YcA5ODFH0m3yQVVhPRq+RwHUY3Q85FBcAhUPKct+HhgpF0+MJxKQACZDWkcKixgBhCDo0irU4AVm2nRqABVjTF5XCQHhugBJKBDWA5MA4nwAQXDORgzCkMJqciAA) parsers, so it doesn't have many opinions of its own. With that said, I did have to make some opinionated decisions regarding how templates are printed within the JavaScript. In general, my strategy has been to ask "What would a function do?" since functions can be used in the same positions as the `<template>` tag.
 
-With that said, I did have to make some decisions about when and where to include or omit semicolons. You can read more about and comment on my decision process [on this RFC](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/1).
+### Semicolons
+
+Semicolons will be included or omitted as follows:
+
+```js
+export default class MyComponent extends Component {
+  <template>Hello</template> // omit
+}
+
+<template>Hello</template> // omit
+
+export default <template>Hello</template> // omit
+
+export const MyComponent = <template>Hello</template>; // include by default, omit in no-semi mode
+```
+
+You can read more about and comment on my semicolon decision process [on this RFC](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/1).
+
+### New Lines
+
+Template tags will always be printed on their own line for templates that are default exports or top-level class templates. Templates used as expressions will be allowed to collapse onto a single line if they fit:
+
+```js
+import Component from '@glimmer/component';
+
+const what = <template>Used as an expression</template>;
+
+export const who = <template>Used as an expression</template>;
+
+<template>
+  The default export
+</template>
+
+class MyComponent extends Component {
+  <template>
+    Top-level class template
+  </template>
+}
+```
+
+### `export default`
+
+The following `<template>` invocations both desugar to default exports:
+
+```js
+// template-only-component.js
+
+<template>Hello</template>;
+
+// or
+
+export default <template>Hello</template>;
+```
+
+By default, this plugin will remove `export default` to print the more concise "sugared" default export template. If you would prefer to always include `export default`, you can enable the `templateExportDefault` option described below.
 
 ## Configuration
 

src/parse.ts

@@ -23,6 +23,12 @@ import type {
   GlimmerExpressionExtra,
   GlimmerTemplateExtra,
 } from './types/glimmer';
+import {
+  getGlimmerExpression,
+  isGlimmerClassProperty,
+  isGlimmerExportDefaultDeclaration,
+  isGlimmerExportDefaultDeclarationTS,
+} from './types/glimmer';
 import type {
   RawGlimmerArrayExpression,
   RawGlimmerClassProperty,
@@ -84,6 +90,7 @@ export const parser: Parser<BaseNode | undefined> = {
     const ast = typescript.parse(text, parsers, options);
     traverse(ast as Node, {
       enter: makeEnter(options),
+      exit: makeExit(),
     });
     assert('expected ast', ast);
     return ast;
@@ -131,12 +138,24 @@ function makeEnter(options: Options): (path: NodePath) => void {
   };
 }
 
+function makeExit(): (path: NodePath) => void {
+  return ({ node }: NodePath) => {
+    if (
+      isGlimmerExportDefaultDeclaration(node) ||
+      isGlimmerExportDefaultDeclarationTS(node) ||
+      isGlimmerClassProperty(node)
+    ) {
+      getGlimmerExpression(node).extra.isDefaultTemplate = true;
+    }
+  };
+}
+
 function tagGlimmerExpression(
   node: RawGlimmerArrayExpression | RawGlimmerClassProperty,
   forceSemi: boolean
 ): void {
   const extra: GlimmerExpressionExtra = {
-    hasGlimmerExpression: true,
+    isGlimmerTemplate: true,
     forceSemi,
   };
   node.extra =

src/print/index.ts

@@ -1,5 +1,4 @@
-import type { AstPath, Plugin, Printer } from 'prettier';
-import { doc } from 'prettier';
+import type { AstPath, doc, Plugin, Printer } from 'prettier';
 
 import {
   TEMPLATE_TAG_CLOSE,
@@ -19,15 +18,15 @@ import {
   isGlimmerTemplateLiteral,
 } from '../types/glimmer';
 import { assert, assertExists } from '../utils/index';
-import { printTemplateTag } from './template';
+import {
+  printTemplateContent,
+  printTemplateLiteral,
+  printTemplateTag,
+} from './template';
 
 // @ts-expect-error FIXME: HACK because estree printer isn't exported. See below.
 export const printer: Printer<BaseNode | undefined> = {};
 
-const {
-  builders: { group, indent, softline },
-} = doc;
-
 /**
  * FIXME: HACK because estree printer isn't exported.
  *
@@ -130,32 +129,23 @@ export function definePrinter(options: Options): void {
     if (hasPrettierIgnore) {
       return printRawText(path, embedOptions);
     } else if (wasPreprocessed && isGlimmerTemplateLiteral(node)) {
-      const contents = printTemplateTag(node, textToDoc, embedOptions);
-      return group(['`', contents, '`']);
+      return printTemplateLiteral(
+        printTemplateContent(node, textToDoc, embedOptions)
+      );
     } else if (!wasPreprocessed && isGlimmerClassProperty(node)) {
-      const contents = printTemplateTag(
-        node.key.arguments[0],
-        textToDoc,
-        embedOptions
+      return printTemplateTag(
+        printTemplateContent(node.key.arguments[0], textToDoc, embedOptions),
+        node.extra.isDefaultTemplate ?? false
       );
-      return group([
-        TEMPLATE_TAG_OPEN,
-        indent([softline, group(contents)]),
-        softline,
-        TEMPLATE_TAG_CLOSE,
-      ]);
     } else if (!wasPreprocessed && isGlimmerArrayExpression(node)) {
-      const contents = printTemplateTag(
-        node.elements[0].arguments[0],
-        textToDoc,
-        embedOptions
+      return printTemplateTag(
+        printTemplateContent(
+          node.elements[0].arguments[0],
+          textToDoc,
+          embedOptions
+        ),
+        node.extra.isDefaultTemplate ?? false
       );
-      return group([
-        TEMPLATE_TAG_OPEN,
-        indent([softline, group(contents)]),
-        softline,
-        TEMPLATE_TAG_CLOSE,
-      ]);
     } else {
       // Nothing to embed, so move on to the regular printer.
       return null;

src/print/template.ts

@@ -1,15 +1,23 @@
 import type { TemplateLiteral } from '@babel/types';
-import type { doc, ParserOptions } from 'prettier';
+import type { ParserOptions } from 'prettier';
+import { doc } from 'prettier';
+import { TEMPLATE_TAG_CLOSE, TEMPLATE_TAG_OPEN } from '../config';
 
 import type { Options } from '../options';
 import { getTemplateSingleQuote } from '../options';
 import type { BaseNode } from '../types/ast';
 
+const {
+  builders: { group, hardline, indent, softline },
+} = doc;
+
 /**
- * Returns a Prettier `Doc` for the given `TemplateLiteral` that is formatted
+ * Returns a Prettier `Doc` for the given `TemplateLiteral` contents formatted
  * using Prettier's built-in glimmer parser.
+ *
+ * NOTE: The contents are not surrounded with "`"
  */
-export function printTemplateTag(
+export function printTemplateContent(
   node: TemplateLiteral,
   textToDoc: (
     text: string,
@@ -27,3 +35,32 @@ export function printTemplateTag(
     singleQuote: getTemplateSingleQuote(options),
   });
 }
+
+/**
+ * Prints the given template content as a template tag.
+ *
+ * If `useHardline` is `true`, will use Prettier's hardline builder to force
+ * each tag to print on a new line.
+ *
+ * If `useHardline` is `false`, will use Prettier's softline builder to allow
+ * the tags to print on the same line if they fit.
+ */
+export function printTemplateTag(
+  content: doc.builders.Doc,
+  useHardline: boolean
+): doc.builders.Doc {
+  const line = useHardline ? hardline : softline;
+  return group([
+    TEMPLATE_TAG_OPEN,
+    indent([line, group(content)]),
+    line,
+    TEMPLATE_TAG_CLOSE,
+  ]);
+}
+
+/** Prints the given template content as a template literal. */
+export function printTemplateLiteral(
+  content: doc.builders.Doc
+): doc.builders.Doc {
+  return group(['`', content, '`']);
+}

src/types/glimmer.ts

@@ -38,7 +38,8 @@ export function isGlimmerTemplateLiteral(
 
 export interface GlimmerExpressionExtra {
   forceSemi: boolean;
-  hasGlimmerExpression: true;
+  isGlimmerTemplate: true;
+  isDefaultTemplate?: boolean;
   [key: string]: unknown;
 }
 
@@ -48,7 +49,7 @@ export type GlimmerExpression = GlimmerArrayExpression | GlimmerClassProperty;
 export function isGlimmerExpression(
   node: BaseNode | null | undefined
 ): node is GlimmerExpression {
-  return node?.extra?.['hasGlimmerExpression'] === true;
+  return node?.extra?.['isGlimmerTemplate'] === true;
 }
 
 export interface GlimmerArrayExpression extends RawGlimmerArrayExpression {

tests/unit-tests/__snapshots__/format.test.ts.snap

@@ -246,7 +246,9 @@ exports[`format > config > default > it formats ../cases/gjs/prettier-ignore/sim
 `;
 
 exports[`format > config > default > it formats ../cases/gjs/simple.gjs 1`] = `
-"<template>what</template>
+"<template>
+  what
+</template>
 "
 `;
 
@@ -724,6 +726,8 @@ export interface Signature {
   Yields: [];
 }
 
-<template>what</template> as TemplateOnlyComponent<Signature>
+<template>
+  what
+</template> as TemplateOnlyComponent<Signature>
 "
 `;