Repository: lingui/js-lingui
Pull request #1027 (2021-04-04 21:21:03)

fix: extract works with template string id's
This PR closes issue #957 macro `t` with template string id.

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/lingui-js/js-lingui/8QPFLroEC1i9or5UmqpxjT7LLhGi](https://vercel.com/lingui-js/js-lingui/8QPFLroEC1i9or5UmqpxjT7LLhGi)  
✅ Preview: *In Progress*


codecov[bot]: # [Codecov](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=h1) Report
> Merging [#1027](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=desc) (d94c363) into [main](https://codecov.io/gh/lingui/js-lingui/commit/1069b15f510a40924f3d23430c20837a109eb693?el=desc) (1069b15) will **decrease** coverage by `0.06%`.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/lingui/js-lingui/pull/1027/graphs/tree.svg?width=650&height=150&src=pr&token=CuJ1VD5BY5)](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##             main    #1027      +/-   ##
==========================================
- Coverage   83.35%   83.29%   -0.07%     
==========================================
  Files          53       53              
  Lines        1622     1622              
  Branches      436      437       +1     
==========================================
- Hits         1352     1351       -1     
  Misses        157      157              
- Partials      113      114       +1     
```


| [Impacted Files](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [...ackages/babel-plugin-extract-messages/src/index.ts](https://codecov.io/gh/lingui/js-lingui/pull/1027/diff?src=pr&el=tree#diff-cGFja2FnZXMvYmFiZWwtcGx1Z2luLWV4dHJhY3QtbWVzc2FnZXMvc3JjL2luZGV4LnRz) | `81.45% <100.00%> (-0.81%)` | :arrow_down: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=footer). Last update [c567ea4...d94c363](https://codecov.io/gh/lingui/js-lingui/pull/1027?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

semoal: Looks good mate, but could you me explain what does it mean?
`value?.quasis[0]?.value?.cooked`, just for giving context to the pull request
sultan99: @semoal `?` - It is an [optional chaining operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), so with `?` we don't get ReferenceError error if any value in the object will be undefined. I did it to cover all cases for the test coverage 😅.
semoal: > @semoal `?` - It is an [optional chaining operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), so with `?` we don't get ReferenceError error if any value in the object will be undefined. I did it to cover all cases for the test coverage 😅.
> 
> If you are asking about this object `value.quasis[0].value.cooked`, so the value in the template string is stored in that path and I had to get it in order to make it all work.

Yes, i was asking about the object quasis and the cooked value.  Also, another question, shouldn't be like this?:

```js
props[key.name] = (isIdLiteral && value?.quasis[0]?.value?.cooked) || value.value || undefined
```
When is a template literal always value.value it's undefined?
Just being sure that we don't break anything ^^
sultan99: Well, there is no big difference, but anyway I have optimized it.
Please check it & let's publish it! 🤘

Patch:
diff --git a/packages/babel-plugin-extract-messages/src/index.ts b/packages/babel-plugin-extract-messages/src/index.ts
index 8eaf1bca..5dd3c912 100644
--- a/packages/babel-plugin-extract-messages/src/index.ts
+++ b/packages/babel-plugin-extract-messages/src/index.ts
@@ -237,8 +237,8 @@ export default function ({ types: t }) {
                 .get(`properties.${i}.value`)
                 .buildCodeFrameError("Only strings are supported as comments.")
             }
-
-            props[key.name] = value.value
+            const isIdLiteral = !value.value && key.name === "id" && t.isTemplateLiteral(value)
+            props[key.name] = isIdLiteral ? value?.quasis[0]?.value?.cooked : value.value
           })
 
         collectMessage(path, file, props)


Test patch:
diff --git a/packages/babel-plugin-extract-messages/test/__snapshots__/index.ts.snap b/packages/babel-plugin-extract-messages/test/__snapshots__/index.ts.snap
index 5571ff1c..b795a8c4 100644
--- a/packages/babel-plugin-extract-messages/test/__snapshots__/index.ts.snap
+++ b/packages/babel-plugin-extract-messages/test/__snapshots__/index.ts.snap
@@ -16,6 +16,15 @@ Object {
 
 exports[`@lingui/babel-plugin-extract-messages should extract all messages from JS files (macros) 1`] = `
 Object {
+  Backtick: Object {
+    extractedComments: Array [],
+    origin: Array [
+      Array [
+        js-with-macros.js,
+        24,
+      ],
+    ],
+  },
   Description: Object {
     extractedComments: Array [
       description,
diff --git a/packages/babel-plugin-extract-messages/test/fixtures/js-with-macros.js b/packages/babel-plugin-extract-messages/test/fixtures/js-with-macros.js
index 607eb9c0..169188a3 100644
--- a/packages/babel-plugin-extract-messages/test/fixtures/js-with-macros.js
+++ b/packages/babel-plugin-extract-messages/test/fixtures/js-with-macros.js
@@ -21,6 +21,10 @@ const withTId = t({
   message: "Message with id some"
 })
 
+const withTIdBacktick = t({
+  id: `Backtick`
+})
+
 const id = 'message id'
 
 const withUnknownId = t({
diff --git a/packages/macro/test/js-t.ts b/packages/macro/test/js-t.ts
index a87ca748..da0b7ee2 100644
--- a/packages/macro/test/js-t.ts
+++ b/packages/macro/test/js-t.ts
@@ -162,6 +162,20 @@ export default [
         });
       `,
   },
+  {
+    name: "Support id in template literal",
+    input: `
+        import { t } from '@lingui/macro'
+        const msg = t({ id: \`msgId\` })
+      `,
+    expected: `import { i18n } from "@lingui/core";
+    const msg =
+      i18n._(/*i18n*/
+        {
+          id: \`msgId\`
+        });
+      `,
+  },
   {
     name: "Newlines after continuation character are removed",
     filename: "js-t-continuation-character.js",