Update macro to wrap defaults in brackets when necessary (#1472)

* Update macro to wrap defaults in curly brackets * Fixup, add test
i18next · Mar 25, 2022 · a7af333 · a7af333
1 parent 8e1e852
commit a7af333
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/icu.macro.js b/icu.macro.js
@@ -262,9 +262,20 @@ function buildTransElement(
 
   // add generated Trans attributes
   if (!attributeExistsAlready('defaults', finalAttributes))
-    finalAttributes.push(
-      t.jSXAttribute(t.jSXIdentifier('defaults'), t.StringLiteral(extracted.defaults)),
-    );
+    if (extracted.defaults.includes(`"`)) {
+      // wrap defaults that contain double quotes in brackets
+      finalAttributes.push(
+        t.jSXAttribute(
+          t.jSXIdentifier('defaults'),
+          t.jSXExpressionContainer(t.StringLiteral(extracted.defaults)),
+        ),
+      );
+    } else {
+      finalAttributes.push(
+        t.jSXAttribute(t.jSXIdentifier('defaults'), t.StringLiteral(extracted.defaults)),
+      );
+    }
+
   if (!attributeExistsAlready('components', finalAttributes))
     finalAttributes.push(
       t.jSXAttribute(t.jSXIdentifier('components'), t.jSXExpressionContainer(extracted.components)),

diff --git a/test/__snapshots__/icu.macro.spec.js.snap b/test/__snapshots__/icu.macro.spec.js.snap
@@ -572,3 +572,18 @@ const x = <Trans i18nKey=\\"key\\" defaults=\\"<0>exciting!</0>{count, plural, =
 }} />;
 "
 `;
+
+exports[`macros 22. macros: 22. macros 1`] = `
+"
+import { Trans } from \\"../icu.macro\\";
+
+const x = <Trans>Welcome, &quot;{ name }&quot;!</Trans>
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { Trans } from \\"react-i18next\\";
+const x = <Trans defaults={\\"Welcome, \\\\\\"{name}\\\\\\"!\\"} components={[]} values={{
+  name
+}} />;
+"
+`;
diff --git a/test/icu.macro.spec.js b/test/icu.macro.spec.js
@@ -301,6 +301,11 @@ pluginTester({
         </Trans>
       );
     `,
+    `
+      import { Trans } from "../icu.macro";
+
+      const x = <Trans>Welcome, &quot;{ name }&quot;!</Trans>
+    `,
     {
       code: `
         import React from "react"