Merge pull request #18 from gitKrystan/template-single-quote

Add templateSingleQuote option (See #16) + Simplify test suite further

Author: gitKrystan

README.md

@@ -48,16 +48,13 @@ With that said, I did have to make some decisions about when and where to includ
 
 ## Configuration
 
-The current version offers no configuration options but the plan is to allow the relevant [standard
-config options for JavaScript files](https://prettier.io/docs/en/configuration.html) to be separately configured for the `<template>` portion of the file.
+These configuration options are available in addition to [Prettier's standard config for JavaScript and Handlebars files](https://prettier.io/docs/en/options.html).
 
-<!-- TODO: These configuration options are available in addition to [Prettier's standard
-config for JavaScript files](https://prettier.io/docs/en/configuration.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                                                                                                  |
-| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
-| `templatePrintWidth`  | `80`    | [Same as in Prettier](https://prettier.io/docs/en/options.html#print-width) but affecting only template tags |
-| `templateSingleQuote` | `false` | Same as in Prettier](https://prettier.io/docs/en/options.html#print-width) but affecting only template tags  | -->
+<!-- TODO: | `templatePrintWidth`  | `80`    | [Same as in Prettier](https://prettier.io/docs/en/options.html#print-width) but affecting only template tags | -->
 
 <!-- TODO: ## Editor integration
 

src/main.ts

@@ -1,6 +1,7 @@
 import type { Parser, Plugin, Printer, SupportLanguage } from 'prettier';
 
 import { PARSER_NAME, PRINTER_NAME } from './config';
+import { options } from './options';
 import { parser } from './parse';
 import { printer } from './print/index';
 import type { BaseNode } from './types/ast';
@@ -25,6 +26,7 @@ const plugin: Plugin<BaseNode> = {
   languages,
   parsers,
   printers,
+  options,
 };
 
 export default plugin;

src/options.ts

@@ -0,0 +1,35 @@
+import type {
+  BooleanSupportOption,
+  ParserOptions,
+  SupportOptions,
+} from 'prettier';
+
+import type { BaseNode } from './types/ast';
+
+export interface Options extends ParserOptions<BaseNode> {
+  templateSingleQuote?: boolean;
+}
+
+/**
+ * Extracts a valid `templateSingleQuote` option out of the provided options. If
+ * `templateSingleQuote` is defined, it will be used, otherwise the value for
+ * `singleQuote` will be inherited.
+ */
+export function getTemplateSingleQuote(options: Options): boolean {
+  const { singleQuote, templateSingleQuote } = options;
+  return typeof templateSingleQuote === 'boolean'
+    ? templateSingleQuote
+    : singleQuote;
+}
+
+const templateSingleQuote: BooleanSupportOption = {
+  since: '0.0.3',
+  category: 'Format',
+  type: 'boolean',
+  description:
+    'Use single quotes instead of double quotes within template tags.',
+};
+
+export const options: SupportOptions = {
+  templateSingleQuote,
+};

src/parse.ts

@@ -3,7 +3,7 @@ import type { Node } from '@babel/types';
 // @ts-expect-error FIXME: TS7016 Is this a hack? IDK!
 import { defineAliasedType } from '@babel/types/lib/definitions/utils';
 import { preprocessEmbeddedTemplates } from 'ember-template-imports/lib/preprocess-embedded-templates';
-import type { Parser, ParserOptions } from 'prettier';
+import type { Parser } from 'prettier';
 import { parsers as babelParsers } from 'prettier/parser-babel';
 
 import {
@@ -12,6 +12,7 @@ import {
   TEMPLATE_TAG_NAME,
   TEMPLATE_TAG_PLACEHOLDER,
 } from './config';
+import type { Options } from './options';
 import { definePrinter } from './print/index';
 import type { BaseNode } from './types/ast';
 import { extractGlimmerExpression } from './types/glimmer';
@@ -54,7 +55,7 @@ export const parser: Parser<BaseNode> = {
   ...typescript,
   astFormat: PRINTER_NAME,
 
-  preprocess(text: string, options: ParserOptions<BaseNode>): string {
+  preprocess(text: string, options: Options): string {
     definePrinter(options);
     const js = preprocess(text, options);
     return typescript.preprocess?.(js, options) ?? js;
@@ -63,7 +64,7 @@ export const parser: Parser<BaseNode> = {
   parse(
     text: string,
     parsers: Record<string, Parser<unknown>>,
-    options: ParserOptions<BaseNode>
+    options: Options
   ): BaseNode {
     const ast = typescript.parse(text, parsers, options);
     // FIXME: This is necessary for babel to not freak out with the custom type.

src/print/index.ts

@@ -1,10 +1,11 @@
-import type { AstPath, ParserOptions, Plugin, Printer } from 'prettier';
+import type { AstPath, Plugin, Printer } from 'prettier';
 
 import {
   TEMPLATE_TAG_CLOSE,
   TEMPLATE_TAG_OPEN,
   TEMPLATE_TAG_PLACEHOLDER,
 } from '../config';
+import type { Options } from '../options';
 import type { BaseNode } from '../types/ast';
 import {
   getGlimmerExpression,
@@ -24,15 +25,15 @@ import { printTemplateTag } from './template';
 // @ts-expect-error FIXME: HACK because estree printer isn't exported. See below.
 export const printer: Printer<BaseNode> = {};
 
-let originalOptions: ParserOptions<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: ParserOptions<BaseNode>): void {
+export function definePrinter(options: Options): void {
   originalOptions = { ...options };
   const estreePlugin = assertExists(options.plugins.find(isEstreePlugin));
   const estreePrinter = estreePlugin.printers.estree;
@@ -163,10 +164,7 @@ function isEstreePlugin(
   );
 }
 
-function printRawText(
-  path: AstPath<BaseNode>,
-  options: ParserOptions<BaseNode>
-): string {
+function printRawText(path: AstPath<BaseNode>, options: Options): string {
   const node = path.getValue();
   assert('expected start', node.start);
   assert('expected end', node.end);

src/print/template.ts

@@ -3,6 +3,8 @@ 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';
 import type { GlimmerExpression } from '../types/glimmer';
 
@@ -18,9 +20,12 @@ export function printTemplateTag(
   node: TemplateLiteral | GlimmerExpression,
   textToDoc: (
     text: string,
+    // Don't use our `Options` here even though technically they are available
+    // because we don't want to accidentally pass them into `textToDoc`. We
+    // should normalize them into standard Prettier options at this point.
     options: ParserOptions<BaseNode>
   ) => doc.builders.Doc,
-  options: ParserOptions<BaseNode>,
+  options: Options,
   hasPrettierIgnore: boolean
 ): doc.builders.Doc {
   const text = node.quasis.map((quasi) => quasi.value.raw).join();
@@ -34,8 +39,7 @@ export function printTemplateTag(
     const contents = textToDoc(text.trim(), {
       ...options,
       parser: 'glimmer',
-      // TODO: Support templateSingleQuote option
-      // singleQuote: options.templateSingleQuote,
+      singleQuote: getTemplateSingleQuote(options),
     });
     return group([
       TEMPLATE_TAG_OPEN,

src/utils/ambiguity.ts

@@ -8,8 +8,8 @@ import {
   isRegExpLiteral,
   isUnaryExpression,
 } from '@babel/types';
-import type { ParserOptions } from 'prettier';
 
+import type { Options } from '../options';
 import type { BaseNode } from '../types/ast';
 import { isGlimmerExpression, isGlimmerTSAsExpression } from '../types/glimmer';
 
@@ -31,7 +31,7 @@ import { isGlimmerExpression, isGlimmerTSAsExpression } from '../types/glimmer';
  */
 export function hasAmbiguousNextLine(
   path: NodePath<BaseNode>,
-  options: ParserOptions<BaseNode>
+  options: Options
 ): boolean {
   // Note: getNextSibling().node will be undefined if there is no sibling
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -63,7 +63,7 @@ function getNextLine(path: NodePath): Node | null {
 
 function isAmbiguousExpression(
   expression: Expression,
-  options: ParserOptions<BaseNode>
+  options: Options
 ): boolean {
   return (
     isGlimmerExpression(expression) ||
@@ -80,7 +80,7 @@ function isAmbiguousExpression(
 
 function startsWithParenthesis(
   expression: Expression,
-  options: ParserOptions<BaseNode>
+  options: Options
 ): boolean {
   return (
     isParenthesizedExpression(expression) ||

tests/helpers/ambiguous.ts

@@ -1,9 +1,10 @@
-import type { Options } from 'prettier';
 import { describe, expect, test } from 'vitest';
 
+import type { Options } from '../../src/options';
 import type { TestCase } from '../helpers/cases';
+import { getAllCases } from '../helpers/cases';
 import { format } from '../helpers/format';
-import type { Config } from './config';
+import type { Config } from './make-suite';
 
 /**
  * Add this comment to any test case and it will be replaced by the
@@ -23,9 +24,18 @@ const AMBIGUOUS_EXPRESSIONS = [
 ];
 
 /**
- * `testCallback` for `describeConfig` that tests the provided `config` and
- * `testCase` against each ambiguous expression from `AMBIGUOUS_EXPRESSIONS`,
- * with and without user-provided semicolons.
+ * `caseFilter` for `describeConfig` that will return only cases that include
+ * the `AMBIGUOUS_PLACEHOLDER`.
+ */
+export async function getAmbiguousCases(): Promise<TestCase[]> {
+  return (await getAllCases()).filter((c) =>
+    c.code.includes(AMBIGUOUS_PLACEHOLDER)
+  );
+}
+
+/**
+ * Tests the provided `config` and `testCase` against each ambiguous expression
+ * from `AMBIGUOUS_EXPRESSIONS`, with and without user-provided semicolons.
  *
  * @see https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/1 for more details
  */
@@ -58,7 +68,7 @@ export function ambiguousExpressionTest(
 
 function behavesLikeFormattedAmbiguousCase(
   code: string,
-  formatOptions: Options = {}
+  formatOptions: Partial<Options> = {}
 ): void {
   try {
     const result = format(code, formatOptions);
@@ -73,15 +83,3 @@ function behavesLikeFormattedAmbiguousCase(
     expect(isSyntaxError, 'Expected SyntaxError').toBeTruthy();
   }
 }
-
-/**
- * `caseFilter` for `describeConfig` that will return only cases that include
- * the `AMBIGUOUS_PLACEHOLDER`.
- */
-export function ambiguousCases(
-  testCase: TestCase,
-  _index: number,
-  _cases: TestCase[]
-): boolean {
-  return testCase.code.includes(AMBIGUOUS_PLACEHOLDER);
-}

tests/helpers/cases.ts

@@ -34,3 +34,9 @@ export async function getCases(
 
   return ([] as TestCase[]).concat(...cases);
 }
+
+/** Gets all of the Test Cases in the `cases` directory. */
+export async function getAllCases(): Promise<TestCase[]> {
+  const caseDir = path.join(__dirname, '../cases');
+  return await getCases(__dirname, caseDir);
+}