From 98e93322216ab0fc87b8b545fbdd9263b4b6b76b Mon Sep 17 00:00:00 2001
From: Kenneth Skovhus <skovhus@users.noreply.github.com>
Date: Wed, 22 Jun 2022 15:23:46 +0200
Subject: [PATCH] fix: JSX attribute parsing issue when using html entities
 (#1234)

* Handle html entities in macro

* Update test expectations
---
 packages/macro/src/macroJsx.ts                | 11 +---
 .../jsx-plural-select-nested.expected.js      |  2 +-
 packages/macro/test/jsx-plural.ts             | 17 ++++--
 packages/macro/test/jsx-select.ts             |  4 +-
 packages/macro/test/jsx-selectOrdinal.ts      | 10 +++-
 packages/macro/test/jsx-trans.ts              | 59 ++++++++++++-------
 6 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/packages/macro/src/macroJsx.ts b/packages/macro/src/macroJsx.ts
index bddd6547f..4d60d95af 100644
--- a/packages/macro/src/macroJsx.ts
+++ b/packages/macro/src/macroJsx.ts
@@ -52,17 +52,10 @@ export default class MacroJSX {
   }
 
   safeJsxAttribute = (name: string, value: string) => {
-    // Quoted JSX attributes use XML-style escapes instead of JavaScript-style escapes.
-    // This means that <Trans id="Say \"hi\"!" /> is invalid, but <Trans id={"Say \"hi\"!"} /> is valid.
-
-    // We could consider removing this condition and always wrap in a jsxExpressionContainer.
-    const attributeValue = value.includes('"')
-      ? this.types.jsxExpressionContainer(this.types.stringLiteral(value))
-      : this.types.stringLiteral(value)
-
+    // This handles quoted JSX attributes and html entities.
     return this.types.jsxAttribute(
       this.types.jsxIdentifier(name),
-      attributeValue
+      this.types.jsxExpressionContainer(this.types.stringLiteral(value))
     )
   }
 
diff --git a/packages/macro/test/fixtures/jsx-plural-select-nested.expected.js b/packages/macro/test/fixtures/jsx-plural-select-nested.expected.js
index b884f6d35..fd19a6c2e 100644
--- a/packages/macro/test/fixtures/jsx-plural-select-nested.expected.js
+++ b/packages/macro/test/fixtures/jsx-plural-select-nested.expected.js
@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/react";
-<Trans id="{genderOfHost, select, female {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to her party.} =2 {{host} invites {guest} and one other person to her party.} other {{host} invites {guest} and # other people to her party.}}} male {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to his party.} =2 {{host} invites {guest} and one other person to his party.} other {{host} invites {guest} and # other people to his party.}}} other {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to their party.} =2 {{host} invites {guest} and one other person to their party.} other {{host} invites {guest} and # other people to their party.}}}}" values={{
+<Trans id={"{genderOfHost, select, female {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to her party.} =2 {{host} invites {guest} and one other person to her party.} other {{host} invites {guest} and # other people to her party.}}} male {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to his party.} =2 {{host} invites {guest} and one other person to his party.} other {{host} invites {guest} and # other people to his party.}}} other {{numGuests, plural, offset:1 =0 {{host} does not give a party.} =1 {{host} invites {guest} to their party.} =2 {{host} invites {guest} and one other person to their party.} other {{host} invites {guest} and # other people to their party.}}}}"} values={{
   genderOfHost: genderOfHost,
   numGuests: numGuests,
   host: host,
diff --git a/packages/macro/test/jsx-plural.ts b/packages/macro/test/jsx-plural.ts
index 739ad0c43..714a0dbf9 100644
--- a/packages/macro/test/jsx-plural.ts
+++ b/packages/macro/test/jsx-plural.ts
@@ -12,7 +12,10 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="{count, plural, offset:1 =0 {Zero items} few {{count} items} other {<0>A lot of them</0>}}" values={{
+        <Trans id={
+          "{count, plural, offset:1 =0 {Zero items} few {{count} items} other {<0>A lot of them</0>}}"
+         }
+         values={{
           count: count
         }} components={{
           0: <a href="/more" />
@@ -38,7 +41,10 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="{count, plural, one {<0>#</0> slot added} other {<1>#</1> slots added}}" values={{
+        <Trans id={
+          "{count, plural, one {<0>#</0> slot added} other {<1>#</1> slots added}}"
+        }
+        values={{
           count: count
         }} components={{
           0: <strong />,
@@ -61,7 +67,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans render="strong" id="msg.plural" message="{count, plural, offset:1 =0 {Zero items} few {{count} items} other {<0>A lot of them</0>}}" values={{
+        <Trans render="strong" id="msg.plural" message={"{count, plural, offset:1 =0 {Zero items} few {{count} items} other {<0>A lot of them</0>}}"} values={{
           count: count
         }} components={{
           0: <a href="/more" />
@@ -84,7 +90,10 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="inner-id-removed" message="Looking for {0, plural, offset:1 =0 {zero items} few {{1} items {2}} other {<0>a lot of them</0>}}" values={{
+        <Trans id="inner-id-removed" message={
+            "Looking for {0, plural, offset:1 =0 {zero items} few {{1} items {2}} other {<0>a lot of them</0>}}"
+         }
+         values={{
           0: items.length,
           1: items.length,
           2: 42
diff --git a/packages/macro/test/jsx-select.ts b/packages/macro/test/jsx-select.ts
index 0ef906ff9..07f114c9a 100644
--- a/packages/macro/test/jsx-select.ts
+++ b/packages/macro/test/jsx-select.ts
@@ -11,7 +11,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="{count, select, male {He} female {She} other {<0>Other</0>}}" values={{
+        <Trans id={"{count, select, male {He} female {She} other {<0>Other</0>}}"} values={{
           count: count
         }} components={{
           0: <strong />
@@ -32,7 +32,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans render="strong" id="msg.select" message="{0, select, male {He} female {She} other {<0>Other</0>}}" values={{
+        <Trans render="strong" id="msg.select" message={"{0, select, male {He} female {She} other {<0>Other</0>}}"} values={{
           0: user.gender
         }} components={{
           0: <strong />
diff --git a/packages/macro/test/jsx-selectOrdinal.ts b/packages/macro/test/jsx-selectOrdinal.ts
index a89f21c48..e3f846069 100644
--- a/packages/macro/test/jsx-selectOrdinal.ts
+++ b/packages/macro/test/jsx-selectOrdinal.ts
@@ -13,7 +13,10 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="This is my {count, selectordinal, one {#st} two {#nd} other {<0>#rd</0>}} cat." values={{
+        <Trans id={
+          "This is my {count, selectordinal, one {#st} two {#nd} other {<0>#rd</0>}} cat."
+         }
+         values={{
           count: count
         }} components={{
           0: <strong />
@@ -34,7 +37,10 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="This is my {0, selectordinal, one {#st} two {#nd} other {<0>#rd</0>}} cat." values={{
+        <Trans id={
+          "This is my {0, selectordinal, one {#st} two {#nd} other {<0>#rd</0>}} cat."
+         }
+         values={{
           0: user.numCats
         }} components={{
           0: <strong />
diff --git a/packages/macro/test/jsx-trans.ts b/packages/macro/test/jsx-trans.ts
index 950f9fc4f..97e70493a 100644
--- a/packages/macro/test/jsx-trans.ts
+++ b/packages/macro/test/jsx-trans.ts
@@ -7,7 +7,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Hello World" />;
+        <Trans id={"Hello World"} />;
       `,
   },
   {
@@ -18,7 +18,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Hello World" />;
+        <Trans id={"Hello World"} />;
       `,
   },
   {
@@ -29,7 +29,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="msg.hello" message="Hello World" />;
+        <Trans id="msg.hello" message={"Hello World"} />;
       `,
   },
   {
@@ -40,7 +40,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="msg.hello" message="Hello World" />;
+        <Trans id="msg.hello" message={"Hello World"} />;
       `,
   },
   {
@@ -51,7 +51,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="msg.hello" message="Hello World" />;
+        <Trans id="msg.hello" message={"Hello World"} />;
       `,
   },
   {
@@ -73,7 +73,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Hi {yourName}, my name is {myName}" values={{
+        <Trans id={"Hi {yourName}, my name is {myName}"} values={{
           yourName: yourName,
           myName: myName,
         }} />;
@@ -87,7 +87,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="{duplicate} variable {duplicate}" values={{
+        <Trans id={"{duplicate} variable {duplicate}"} values={{
           duplicate: duplicate
         }} />;
       `,
@@ -105,6 +105,23 @@ export default [
         <Trans id="custom-id" message={'Speak "friend"!'} />;
       `,
   },
+  {
+    name: "HTML attributes are handled",
+    input: `
+        import { Trans } from '@lingui/macro';
+        <Trans>
+          <Text>This should work &nbsp;</Text>
+        </Trans>;
+      `,
+    expected: `
+        import { Trans } from "@lingui/react";
+        <Trans id={"<0>This should work \\xA0</0>"}
+           components={{
+             0: <Text />,
+           }}
+        />;
+      `,
+  },
   {
     name: "Template literals as children",
     input: `
@@ -113,7 +130,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="How much is {expression}? {count}" values={{
+        <Trans id={"How much is {expression}? {count}"} values={{
           expression: expression,
           count: count
         }} />;
@@ -127,7 +144,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="hello {count, plural, one {world} other {worlds}}" />;
+        <Trans id={"hello {count, plural, one {world} other {worlds}}"} />;
       `,
   },
   {
@@ -145,7 +162,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Property {0}, function {1}, array {2}, constant {3}, object {4}, everything {5}" values={{
+        <Trans id={"Property {0}, function {1}, array {2}, constant {3}, object {4}, everything {5}"} values={{
           0: props.name,
           1: random(),
           2: array[index],
@@ -169,7 +186,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Hello <0>World!</0><1/><2>My name is <3> <4>{name}</4></3></2>" values={{
+        <Trans id={"Hello <0>World!</0><1/><2>My name is <3> <4>{name}</4></3></2>"} values={{
           name: name
         }} components={{
           0: <strong />,
@@ -188,7 +205,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="<0>Component inside expression container</0>" components={{
+        <Trans id={"<0>Component inside expression container</0>"} components={{
           0: <span />
         }} />;
       `,
@@ -201,7 +218,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="<0/>" components={{
+        <Trans id={"<0/>"} components={{
           0: <br />
         }} />;
       `,
@@ -222,7 +239,7 @@ export default [
     production: true,
     input: `
         import { Trans } from '@lingui/macro';
-        <Trans id="msg.hello" comment="Hello World">Hello World</Trans> 
+        <Trans id="msg.hello" comment="Hello World">Hello World</Trans>
       `,
     expected: `
         import { Trans } from "@lingui/react";
@@ -255,7 +272,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Strip whitespace around arguments: '{name}'" values={{
+        <Trans id={"Strip whitespace around arguments: '{name}'"} values={{
           name: name
         }} />;
       `,
@@ -272,7 +289,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Strip whitespace around tags, but keep <0>forced spaces</0>!" components={{
+        <Trans id={"Strip whitespace around tags, but keep <0>forced spaces</0>!"} components={{
           0: <strong />
         }} />;
       `,
@@ -288,7 +305,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Keep forced\\n newlines!" />;
+        <Trans id={"Keep forced\\n newlines!"} />;
       `,
   },
   {
@@ -303,7 +320,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Keep multiple\\n forced\\n newlines!" />;
+        <Trans id={"Keep multiple\\n forced\\n newlines!"} />;
       `,
   },
   {
@@ -314,7 +331,7 @@ export default [
     expected: `
         import { Trans } from "@lingui/react";
         import { i18n } from "@lingui/core";
-        <Trans id="Read <0>more</0>" components={{
+        <Trans id={"Read <0>more</0>"} components={{
           0: <a href="/more" title={
             /*i18n*/
             i18n._("Full content of {articleName}", {
@@ -350,7 +367,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="Hello  World" />;
+        <Trans id={"Hello  World"} />;
       `,
   },
   {
@@ -361,7 +378,7 @@ export default [
       `,
     expected: `
         import { Trans } from "@lingui/react";
-        <Trans id="&" />;
+        <Trans id={"&"} />;
       `,
   },
 ]