fix: incorrect index for placeholders in useLingui macro (#2204)

Author: timofei-iatsenko

packages/babel-plugin-lingui-macro/src/macroJs.ts

@@ -256,16 +256,22 @@ export class MacroJs {
         // parent would be an Expression with this identifier which we are interesting in
         const currentPath = refPath.parentPath
 
+        const _ctx = createMacroJsContext(
+          ctx.isLinguiIdentifier,
+          ctx.stripNonEssentialProps,
+          ctx.stripMessageProp
+        )
+
         // { t } = useLingui()
         // t`Hello!`
         if (currentPath.isTaggedTemplateExpression()) {
-          const tokens = tokenizeTemplateLiteral(currentPath.node, ctx)
+          const tokens = tokenizeTemplateLiteral(currentPath.node, _ctx)
 
           const descriptor = createMessageDescriptorFromTokens(
             tokens,
             currentPath.node.loc,
-            ctx.stripNonEssentialProps,
-            ctx.stripMessageProp
+            _ctx.stripNonEssentialProps,
+            _ctx.stripMessageProp
           )
 
           const callExpr = t.callExpression(
@@ -285,7 +291,7 @@ export class MacroJs {
           const descriptor = processDescriptor(
             (currentPath.get("arguments")[0] as NodePath<ObjectExpression>)
               .node,
-            ctx
+            _ctx
           )
           const callExpr = t.callExpression(
             t.identifier(uniqTIdentifier.name),

packages/babel-plugin-lingui-macro/test/__snapshots__/js-useLingui.test.ts.snap

@@ -1,5 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`correctly process indexed placeholders in few t calls 1`] = `
+import { useLingui } from "@lingui/react/macro";
+function Home() {
+  const { t } = useLingui();
+  const user = { name: "John " };
+  return (
+    <main>
+      <button onClick={() => console.log(t\`Hello \${user.name}\`)}>Hello</button>
+
+      <button onClick={() => console.log(t\`Bye \${user.name}\`)}>Bye</button>
+    </main>
+  );
+}
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+import { useLingui as _useLingui } from "@lingui/react";
+function Home() {
+  const { _: _t } = _useLingui();
+  const user = {
+    name: "John ",
+  };
+  return (
+    <main>
+      <button
+        onClick={() =>
+          console.log(
+            _t(
+              /*i18n*/
+              {
+                id: "Y7riaK",
+                message: "Hello {0}",
+                values: {
+                  0: user.name,
+                },
+              }
+            )
+          )
+        }
+      >
+        Hello
+      </button>
+
+      <button
+        onClick={() =>
+          console.log(
+            _t(
+              /*i18n*/
+              {
+                id: "vqOLZ6",
+                message: "Bye {0}",
+                values: {
+                  0: user.name,
+                },
+              }
+            )
+          )
+        }
+      >
+        Bye
+      </button>
+    </main>
+  );
+}
+
+`;
+
 exports[`does not crash when no params 1`] = `
 import { useLingui } from "@lingui/react/macro";
 function MyComponent() {

packages/babel-plugin-lingui-macro/test/js-useLingui.test.ts

@@ -201,6 +201,32 @@ function MyComponent2() {
   const { t } = useLingui();
   const b = t\`Text\`;
 }`,
+    },
+    {
+      name: "correctly process indexed placeholders in few t calls",
+      code: `
+import { useLingui } from '@lingui/react/macro';
+
+function Home() {
+  const {t} = useLingui();
+  const user = {name: 'John '}
+  return (
+    <main>
+      <button onClick={() =>
+        console.log(t\`Hello \${user.name}\`)
+      }>
+        Hello
+      </button>
+
+      <button onClick={() =>
+        console.log(t\`Bye \${user.name}\`)
+      }>
+        Bye
+      </button>
+    </main>
+  );
+}
+`,
     },
     {
       name: "support configuring runtime module import using LinguiConfig.runtimeConfigModule",