feat(eslint-plugin-formatjs): support tagged template expression like dedent (#5016)

longlho · web-flow · commit be979961e54e · 2025-06-15T10:58:00.000-04:00
# feat(@formatjs/ts-transformer): support tagged template expression like dedent This PR adds support for tagged template expressions (like `dedent`) in message descriptors for both the ESLint plugin and TS transformer. Now you can use tagged template literals like `dedent` to format your messages while maintaining proper extraction and validation. The implementation handles tagged templates in: - JSX expressions - Object properties - Template literals fixes #5015
diff --git a/packages/eslint-plugin-formatjs/tests/enforce-default-message.test.ts b/packages/eslint-plugin-formatjs/tests/enforce-default-message.test.ts
@@ -23,9 +23,17 @@ defineMessage({
   literal
 \`,
   description: 'asd'
+})`,
+    `intl.formatMessage({
+  defaultMessage: dedent\`a template
+  literal
+\`,
+  description: 'asd'
 })`,
     `import {FormattedMessage} from 'react-intl'
 const a = <FormattedMessage defaultMessage={'asf' + 'bar'}/>`,
+    `import {FormattedMessage} from 'react-intl'
+const a = <FormattedMessage defaultMessage={dedent\`asf\`}/>`,
     dynamicMessage,
     noMatch,
     spreadJsx,
diff --git a/packages/eslint-plugin-formatjs/util.ts b/packages/eslint-plugin-formatjs/util.ts
@@ -121,9 +121,21 @@ export function extractMessageDescriptor(
     let value: string | undefined = undefined
     if (isStringLiteral(valueNode)) {
       value = valueNode.value
-    } else if (isTemplateLiteralWithoutVar(valueNode)) {
+    }
+    // like "`asd`"
+    else if (isTemplateLiteralWithoutVar(valueNode)) {
       value = valueNode.quasis[0].value.cooked
-    } else if (valueNode.type === 'BinaryExpression') {
+    }
+    // like "dedent`asd`"
+    else if (valueNode.type === 'TaggedTemplateExpression') {
+      const {quasi} = valueNode
+      if (!isTemplateLiteralWithoutVar(quasi)) {
+        throw new Error('Tagged template expression must be no substitution')
+      }
+      value = quasi.quasis[0].value.cooked
+    }
+    // like "`asd` + `asd`"
+    else if (valueNode.type === 'BinaryExpression') {
       const [result, isStatic] = staticallyEvaluateStringConcat(valueNode)
       if (isStatic) {
         value = result
@@ -189,9 +201,21 @@ function extractMessageDescriptorFromJSXElement(
           if (isStatic) {
             value = result
           }
-        } else if (isTemplateLiteralWithoutVar(expression)) {
+        }
+        // like "`asd`"
+        else if (isTemplateLiteralWithoutVar(expression)) {
           value = expression.quasis[0].value.cooked
         }
+        // like "dedent`asd`"
+        else if (expression.type === 'TaggedTemplateExpression') {
+          const {quasi} = expression
+          if (!isTemplateLiteralWithoutVar(quasi)) {
+            throw new Error(
+              'Tagged template expression must be no substitution'
+            )
+          }
+          value = quasi.quasis[0].value.cooked
+        }
       }
     }
 
diff --git a/packages/ts-transformer/src/transform.ts b/packages/ts-transformer/src/transform.ts
@@ -307,6 +307,25 @@ function extractMessageDescriptor(
             msg.description = initializer.text
             break
         }
+      }
+      // {id: dedent`id`}
+      else if (ts.isTaggedTemplateExpression(initializer)) {
+        const {template} = initializer
+        if (!ts.isNoSubstitutionTemplateLiteral(template)) {
+          throw new Error('Tagged template expression must be no substitution')
+        }
+
+        switch (name.text) {
+          case 'id':
+            msg.id = template.text
+            break
+          case 'defaultMessage':
+            msg.defaultMessage = template.text
+            break
+          case 'description':
+            msg.description = template.text
+            break
+        }
       } else if (ts.isJsxExpression(initializer) && initializer.expression) {
         // <FormattedMessage foo={'barbaz'} />
         if (ts.isStringLiteral(initializer.expression)) {
@@ -347,6 +366,28 @@ function extractMessageDescriptor(
               break
           }
         }
+        // <FormattedMessage foo={dedent`dedent Hello World!`} />
+        else if (ts.isTaggedTemplateExpression(initializer.expression)) {
+          const {
+            expression: {template},
+          } = initializer
+          if (!ts.isNoSubstitutionTemplateLiteral(template)) {
+            throw new Error(
+              'Tagged template expression must be no substitution'
+            )
+          }
+          switch (name.text) {
+            case 'id':
+              msg.id = template.text
+              break
+            case 'defaultMessage':
+              msg.defaultMessage = template.text
+              break
+            case 'description':
+              msg.description = template.text
+              break
+          }
+        }
         // <FormattedMessage foo={'bar' + 'baz'} />
         else if (ts.isBinaryExpression(initializer.expression)) {
           const {expression} = initializer
diff --git a/packages/ts-transformer/tests/fixtures/templateLiteral.tsx b/packages/ts-transformer/tests/fixtures/templateLiteral.tsx
@@ -8,14 +8,27 @@ defineMessage({
     extra spaces`,
 })
 
+defineMessage({
+  id: `template dedent`,
+  defaultMessage: dedent`dedent Hello World!`,
+})
+
 export default class Foo extends Component {
   render() {
     return (
-      <FormattedMessage
-        id="foo.bar.baz"
-        defaultMessage={`Hello World!`}
-        description="The default message."
-      />
+      <>
+        <FormattedMessage
+          id="foo.bar.baz"
+          defaultMessage={`Hello World!`}
+          description="The default message."
+        />
+        <FormattedMessage
+          id="dedent foo.bar.baz"
+          defaultMessage={dedent`dedent 
+            Hello World!`}
+          description="The default message."
+        />
+      </>
     )
   }
 }
diff --git a/packages/ts-transformer/tests/index.test.ts b/packages/ts-transformer/tests/index.test.ts
@@ -491,9 +491,13 @@ export default class Foo extends Component {
     expect(output.code).toBe(`import React, { Component } from 'react';
 import { FormattedMessage, defineMessage } from 'react-intl';
 defineMessage({ id: "template", defaultMessage: "should remove newline and extra spaces" });
+defineMessage({ id: "template dedent", defaultMessage: "dedent Hello World!" });
 export default class Foo extends Component {
     render() {
-        return (<FormattedMessage id="foo.bar.baz" defaultMessage="Hello World!"/>);
+        return (<>
+        <FormattedMessage id="foo.bar.baz" defaultMessage="Hello World!"/>
+        <FormattedMessage id="dedent foo.bar.baz" defaultMessage="dedent Hello World!"/>
+      </>);
     }
 }
 `)
@@ -503,11 +507,20 @@ export default class Foo extends Component {
         defaultMessage: 'should remove newline and extra spaces',
         id: 'template',
       },
+      {
+        defaultMessage: 'dedent Hello World!',
+        id: 'template dedent',
+      },
       {
         defaultMessage: 'Hello World!',
         description: 'The default message.',
         id: 'foo.bar.baz',
       },
+      {
+        defaultMessage: 'dedent Hello World!',
+        description: 'The default message.',
+        id: 'dedent foo.bar.baz',
+      },
     ])
   })
 
