Add templateExportDefault option

Author: gitKrystan

README.md

@@ -50,9 +50,10 @@ With that said, I did have to make some decisions about when and where to includ
 
 These configuration options are available in addition to [Prettier's standard config for JavaScript and Handlebars files](https://prettier.io/docs/en/options.html).
 
-| Name                  | Default | Description                                                                                             |
-| --------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
-| `templateSingleQuote` | `false` | [Same as in Prettier](https://prettier.io/docs/en/options.html#quotes) but affecting only template tags |
+| Name                    | Default   | Description                                                                                                                                                                                     |
+| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `templateExportDefault` | `false`   | If `true`, default export template tags will be prepended with `export default`.                                                                                                                |
+| `templateSingleQuote`   | undefined | [Same as in Prettier](https://prettier.io/docs/en/options.html#quotes) but affecting only template tags. If `undefined`, will fall back to whatever is set for the global `singleQuote` config. |
 
 <!-- TODO: | `templatePrintWidth`  | `80`    | [Same as in Prettier](https://prettier.io/docs/en/options.html#print-width) but affecting only template tags | -->
 

src/options.ts

@@ -7,9 +7,18 @@ import type {
 import type { BaseNode } from './types/ast';
 
 export interface Options extends ParserOptions<BaseNode> {
+  templateExportDefault?: boolean;
   templateSingleQuote?: boolean;
 }
 
+const templateExportDefault: BooleanSupportOption = {
+  since: '0.1.0',
+  category: 'Format',
+  type: 'boolean',
+  default: false,
+  description: 'Prepend default export template tags with "export default".',
+};
+
 /**
  * Extracts a valid `templateSingleQuote` option out of the provided options. If
  * `templateSingleQuote` is defined, it will be used, otherwise the value for
@@ -31,5 +40,6 @@ const templateSingleQuote: BooleanSupportOption = {
 };
 
 export const options: SupportOptions = {
+  templateExportDefault,
   templateSingleQuote,
 };

src/parse.ts

@@ -1,11 +1,16 @@
 import { traverse } from '@babel/core';
 import type { Node } from '@babel/types';
+import {
+  isBinaryExpression,
+  isMemberExpression,
+  isTaggedTemplateExpression,
+} from '@babel/types';
 // @ts-expect-error FIXME: TS7016 Is this a hack? IDK!
 import { defineAliasedType } from '@babel/types/lib/definitions/utils';
+import { getTemplateLocals } from '@glimmer/syntax';
 import { preprocessEmbeddedTemplates } from 'ember-template-imports/lib/preprocess-embedded-templates';
 import type { Parser } from 'prettier';
 import { parsers as babelParsers } from 'prettier/parser-babel';
-import { getTemplateLocals } from '@glimmer/syntax';
 
 import {
   GLIMMER_EXPRESSION_TYPE,
@@ -18,6 +23,7 @@ import { definePrinter } from './print/index';
 import type { BaseNode } from './types/ast';
 import { extractGlimmerExpression } from './types/glimmer';
 import {
+  hasGlimmerArrayExpression,
   isRawGlimmerArrayExpression,
   isRawGlimmerCallExpression,
   isRawGlimmerClassProperty,
@@ -35,7 +41,7 @@ const preprocess: Required<Parser<BaseNode>>['preprocess'] = (
   text,
   options
 ) => {
-  return preprocessEmbeddedTemplates(text, {
+  const preprocessed = preprocessEmbeddedTemplates(text, {
     getTemplateLocals,
 
     templateTag: TEMPLATE_TAG_NAME,
@@ -46,6 +52,25 @@ const preprocess: Required<Parser<BaseNode>>['preprocess'] = (
 
     relativePath: options.filepath,
   }).output;
+
+  const placeholderOpen = `[${TEMPLATE_TAG_PLACEHOLDER}`; // intentionally missing ]
+  const sugaredDefaultExport = new RegExp(`^\\s*\\(?\\s*\\${placeholderOpen}`);
+  const desugaredDefaultExport = `export default ${placeholderOpen}`;
+  return preprocessed
+    .split(/\r?\n/)
+    .map((line, index, array) => {
+      const previousLine = findPreviousLine(index, array);
+      if (
+        previousLine &&
+        (previousLine.includes('prettier-ignore') ||
+          previousLine.trim().endsWith('{'))
+      ) {
+        return line;
+      } else {
+        return line.replace(sugaredDefaultExport, desugaredDefaultExport);
+      }
+    })
+    .join('\r\n');
 };
 
 export const parser: Parser<BaseNode> = {
@@ -72,6 +97,42 @@ export const parser: Parser<BaseNode> = {
       aliases: ['Expression'],
     });
     traverse(ast as Node, {
+      enter(path) {
+        const node = path.node;
+        const parentNode = path.parentPath?.node;
+
+        if (
+          parentNode &&
+          'property' in parentNode &&
+          isRawGlimmerCallExpression(parentNode.property)
+        ) {
+          throw new SyntaxError(
+            'Ember <template> tag used as an object property.'
+          );
+        } else if (
+          isBinaryExpression(node) &&
+          (hasGlimmerArrayExpression(node.left) ||
+            hasGlimmerArrayExpression(node.right))
+        ) {
+          throw new SyntaxError(
+            'Ember <template> tag used in binary expression.'
+          );
+        } else if (
+          isTaggedTemplateExpression(node) &&
+          hasGlimmerArrayExpression(node.tag)
+        ) {
+          throw new SyntaxError(
+            'Ember <template> tag used as tagged template expression.'
+          );
+        } else if (
+          isMemberExpression(node) &&
+          hasGlimmerArrayExpression(node.object)
+        ) {
+          throw new SyntaxError(
+            'Ember <template> tag used as member expression.'
+          );
+        }
+      },
       ArrayExpression(path) {
         const node = path.node;
         if (isRawGlimmerArrayExpression(node)) {
@@ -102,3 +163,16 @@ export const parser: Parser<BaseNode> = {
     return ast;
   },
 };
+
+function findPreviousLine(index: number, array: string[]): string | undefined {
+  const previousIndex = index - 1;
+  const previousLine = array[previousIndex];
+
+  if (previousLine === undefined) {
+    return undefined;
+  } else if (previousLine.length) {
+    return previousLine;
+  } else {
+    return findPreviousLine(previousIndex, array);
+  }
+}

src/print/index.ts

@@ -1,4 +1,4 @@
-import type { AstPath, Plugin, Printer } from 'prettier';
+import type { AstPath, doc, Plugin, Printer } from 'prettier';
 
 import {
   TEMPLATE_TAG_CLOSE,
@@ -25,16 +25,13 @@ import { printTemplateTag } from './template';
 // @ts-expect-error FIXME: HACK because estree printer isn't exported. See below.
 export const printer: Printer<BaseNode> = {};
 
-let originalOptions: Options;
-
 /**
  * FIXME: HACK because estree printer isn't exported.
  *
  * @see https://github.com/prettier/prettier/issues/10259
  * @see https://github.com/prettier/prettier/issues/4424
  */
 export function definePrinter(options: Options): void {
-  originalOptions = { ...options };
   const estreePlugin = assertExists(options.plugins.find(isEstreePlugin));
   const estreePrinter = estreePlugin.printers.estree;
 
@@ -51,7 +48,12 @@ export function definePrinter(options: Options): void {
     Object.create(estreePrinter) as Printer<BaseNode>
   );
 
-  printer.print = (path, options, print, args) => {
+  printer.print = (
+    path: AstPath<BaseNode>,
+    options: Options,
+    print: (path: AstPath<BaseNode>) => doc.builders.Doc,
+    args: unknown
+  ) => {
     const hasPrettierIgnore = checkPrettierIgnore(
       path,
       defaultHasPrettierIgnore
@@ -66,38 +68,41 @@ export function definePrinter(options: Options): void {
       if (hasPrettierIgnore) {
         return printRawText(path, options);
       } else {
-        options.semi = false;
         const printed = defaultPrint(path, options, print, args);
         const glimmerExpression = getGlimmerExpression(path);
 
-        if (Array.isArray(printed)) {
-          const { semi } = options;
-          const { forceSemi } = glimmerExpression.extra;
-          const hasSemi = printed[printed.length - 1] === ';';
-          // I think prettier is mutating the options somewhere, making the semi
-          // check necessary
-          /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-          if (semi && forceSemi && !hasSemi) {
-            // We only need to push the semi-colon in semi: true mode because
-            // in semi: false mode, the ambiguous statement will get a prefixing
-            // semicolon
-            printed.push(';');
-          } else if ((!semi || !forceSemi) && hasSemi) {
-            // HACK: Prettier hardcodes a semicolon for GlimmerExportDefaultDeclarationTSPath
-            printed.pop();
+        assert(
+          'Expected GlimmerExpression doc to be an array',
+          Array.isArray(printed)
+        );
+
+        // Remove the semicolons that Prettier added so we can manage them
+        let adjusted = printed.filter(
+          (doc) => typeof doc !== 'string' || doc !== ';'
+        );
+
+        // FIXME: Make configurable
+        if (
+          !options.templateExportDefault &&
+          docMatchesString(adjusted[0], 'export') &&
+          docMatchesString(adjusted[1], 'default')
+        ) {
+          adjusted = adjusted.slice(2);
+          if (docMatchesString(adjusted[0], '')) {
+            adjusted = adjusted.slice(1);
           }
-          /* eslint-enable @typescript-eslint/no-unnecessary-condition */
-        } else {
-          // FIXME: Should we throw in DEBUG mode?
-          console.error(
-            'Expected GlimmerExpression to be printed within an array',
-            path.getValue()
-          );
         }
-        return printed;
+
+        if (options.semi && glimmerExpression.extra.forceSemi) {
+          // We only need to push the semi-colon in semi: true mode because
+          // in semi: false mode, the ambiguous statement will get a prefixing
+          // semicolon
+          adjusted.push(';');
+        }
+
+        return adjusted;
       }
     } else {
-      options.semi = originalOptions.semi;
       if (hasPrettierIgnore) {
         return printRawText(path, options);
       } else {
@@ -187,3 +192,10 @@ function checkPrettierIgnore(
       ))
   );
 }
+
+function docMatchesString(
+  doc: doc.builders.Doc | undefined,
+  string: string
+): doc is string {
+  return typeof doc === 'string' && doc.trim() === string;
+}

src/types/raw.ts

@@ -3,13 +3,15 @@ import type {
   CallExpression,
   ClassProperty,
   Identifier,
+  Node,
   TemplateLiteral,
 } from '@babel/types';
 import {
   isArrayExpression,
   isCallExpression,
   isClassProperty,
   isIdentifier,
+  isNode,
   isTemplateLiteral,
 } from '@babel/types';
 import type { AstPath } from 'prettier';
@@ -39,7 +41,7 @@ export function isRawGlimmerArrayExpressionPath(
 
 /** Type predicate */
 export function isRawGlimmerArrayExpression(
-  value: BaseNode | null | undefined
+  value: Node | BaseNode | null | undefined
 ): value is RawGlimmerArrayExpression {
   return (
     isArrayExpression(value) && isRawGlimmerCallExpression(value.elements[0])
@@ -139,3 +141,13 @@ export function isRawGlimmerCallExpression(
 export interface RawGlimmerIdentifier extends Identifier {
   name: typeof TEMPLATE_TAG_PLACEHOLDER; // This is just `string` so not SUPER useful, just documentation
 }
+
+/** Recursively checks if the node has a Glimmer Array Expression. */
+export function hasGlimmerArrayExpression(node: Node): boolean {
+  return (
+    isRawGlimmerArrayExpression(node) ||
+    ('expression' in node &&
+      isNode(node.expression) &&
+      hasGlimmerArrayExpression(node.expression))
+  );
+}

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

@@ -33,7 +33,7 @@ class MyComponent extends Component {
 `;
 
 exports[`format > config > default > it formats ../cases/gjs/default-export.gjs 1`] = `
-"export default <template>
+"<template>
   Explicit default export module top level component. Explicit default export
   module top level component. Explicit default export module top level
   component. Explicit default export module top level component. Explicit
@@ -242,7 +242,7 @@ export interface Signature {
   Yields: [];
 }
 
-export default <template>
+<template>
   Explicit default export module top level component. Explicit default export
   module top level component. Explicit default export module top level
   component. Explicit default export module top level component. Explicit