feat: support TemplateExpression (#325)

Author: fisker

src/transform-node.ts

@@ -34,6 +34,11 @@ function isImplicitThis(node: angular.AST, text: string): boolean {
   return start >= end || /^\s+$/.test(text.slice(start, end));
 }
 
+type NodeTransformOptions = {
+  isInParentParens?: boolean;
+  parent?: angular.AST;
+};
+
 class Transformer extends Source {
   #node;
   #text;
@@ -105,12 +110,19 @@ class Transformer extends Source {
     );
   }
 
-  #transform<T extends NGNode>(node: angular.AST, isInParentParens = false) {
-    return this.#transformNode(node, isInParentParens) as T &
-      LocationInformation;
+  #transform<T extends NGNode>(
+    node: angular.AST,
+    options?: NodeTransformOptions,
+  ) {
+    return this.#transformNode(node, options) as T & LocationInformation;
   }
 
-  #transformNode(node: angular.AST, isInParentParens = false): NGNode {
+  #transformNode(node: angular.AST, options?: NodeTransformOptions): NGNode {
+    const { isInParentParens } = {
+      isInParentParens: false,
+      ...options,
+    };
+
     if (node instanceof angular.Interpolation) {
       const { expressions } = node;
 
@@ -374,7 +386,11 @@ class Transformer extends Source {
       const { receiver, args } = node;
       const tArgs =
         args.length === 1
-          ? [this.#transform<babel.Expression>(args[0], true)]
+          ? [
+              this.#transform<babel.Expression>(args[0], {
+                isInParentParens: true,
+              }),
+            ]
           : (args as angular.AST[]).map<babel.Expression>((node) =>
               this.#transform(node),
             );
@@ -392,7 +408,7 @@ class Transformer extends Source {
           optional:
             nodeType === 'OptionalCallExpression' ? isOptionalType : undefined,
           start: getOuterStart(tReceiver),
-          end: node.sourceSpan.end, // )
+          end: node.sourceSpan.end, // `)`
         },
         { hasParentParens: isInParentParens },
       );
@@ -405,7 +421,7 @@ class Transformer extends Source {
           type: 'TSNonNullExpression',
           expression: expression,
           start: getOuterStart(expression),
-          end: node.sourceSpan.end, // !
+          end: node.sourceSpan.end, // `!`
         },
         { hasParentParens: isInParentParens },
       );
@@ -523,35 +539,88 @@ class Transformer extends Source {
       );
     }
 
+    if (node instanceof angular.TemplateLiteral) {
+      const { elements, expressions } = node;
+
+      return this.#create<babel.TemplateLiteral>({
+        type: 'TemplateLiteral',
+        quasis: elements.map((element) =>
+          this.#transform(element, { parent: node }),
+        ),
+        expressions: expressions.map((expression) =>
+          this.#transform(expression),
+        ),
+        ...node.sourceSpan,
+      });
+    }
+
+    if (node instanceof angular.TemplateLiteralElement) {
+      const templateLiteral = options!.parent! as angular.TemplateLiteral;
+      const elementIndex = templateLiteral.elements.indexOf(node);
+      const isFirst = elementIndex === 0;
+      const isLast = elementIndex === templateLiteral.elements.length - 1;
+
+      // The `TemplateLiteralElement` don't have correct location information
+      const start = isFirst
+        ? templateLiteral.sourceSpan.start + 1
+        : node.sourceSpan.start;
+      let end;
+      if (isLast) {
+        end = templateLiteral.sourceSpan.end - 1;
+      } else {
+        const nextExpression = templateLiteral.expressions[elementIndex];
+        // TODO: Support search multiple characters in `getCharacterLastIndex()`
+        // FIXME: Search `${` instead
+        end = this.getCharacterLastIndex('$', nextExpression.sourceSpan.start);
+      }
+      const raw = this.text.slice(start, end);
+
+      return this.#create<babel.TemplateElement>(
+        {
+          type: 'TemplateElement',
+          value: {
+            cooked: node.text,
+            raw,
+          },
+          start: start,
+          end: end,
+          tail: isLast,
+        },
+        { stripSpaces: false },
+      );
+    }
+
     // istanbul ignore next
-    throw Object.assign(new Error('Unexpected node'), { node });
+    throw new Error(`Unexpected node type '${node.constructor.name}'`);
   }
 }
 
 // See `convertAst` in `@angular/compiler`
-// ASTWithSource (Not handled)
-// PropertyRead
-// PropertyWrite
-// KeyedWrite
-// Call
-// LiteralPrimitive
-// Unary
-// Binary
-// ThisReceiver (Not handled)
-// KeyedRead
-// Chain
-// LiteralMap
-// LiteralArray
-// Conditional
-// NonNullAssert
-// BindingPipe
-// SafeKeyedRead
-// SafePropertyRead
-// SafeCall
-// EmptyExpr
-// PrefixNot
-// TypeofExpression
-function transform(node: angular.AST, text: string): NGNode {
+type SupportedNodes =
+  | angular.ASTWithSource // Not handled
+  | angular.PropertyRead
+  | angular.PropertyWrite
+  | angular.KeyedWrite
+  | angular.Call
+  | angular.LiteralPrimitive
+  | angular.Unary
+  | angular.Binary
+  | angular.ThisReceiver // Not handled
+  | angular.KeyedRead
+  | angular.Chain
+  | angular.LiteralMap
+  | angular.LiteralArray
+  | angular.Conditional
+  | angular.NonNullAssert
+  | angular.BindingPipe
+  | angular.SafeKeyedRead
+  | angular.SafePropertyRead
+  | angular.SafeCall
+  | angular.EmptyExpr
+  | angular.PrefixNot
+  | angular.TypeofExpression
+  | angular.TemplateLiteral; // Including `TemplateLiteralElement`
+function transform(node: SupportedNodes, text: string): NGNode {
   return new Transformer(node, text).node;
 }
 

tests/transform.test.ts

@@ -94,6 +94,8 @@ describe.each`
   ${'TypeofExpression'} | ${'UnaryExpression'}          | ${' typeof {} '}                    | ${true}     | ${true}      | ${true}            | ${true}
   ${'Binary'}           | ${'BinaryExpression'}         | ${' typeof {} === "object" '}       | ${true}     | ${true}      | ${true}            | ${true}
   ${'PrefixNot'}        | ${'UnaryExpression'}          | ${' ! ( typeof {} === "number" ) '} | ${true}     | ${true}      | ${true}            | ${true}
+  ${'TemplateLiteral'}  | ${'TemplateLiteral'}          | ${' ` a ${ b } \u0063 ` '}          | ${true}     | ${true}      | ${true}            | ${true}
+  ${'TemplateLiteral'}  | ${'TemplateLiteral'}          | ${' ( ` a ${ b } \u0063 ` ) '}      | ${true}     | ${true}      | ${true}            | ${true}
 `('($expectedAngularType -> $expectedEstreeType)', (fields) => {
   for (const method of PARSE_METHODS) {
     testSection(method, fields);