Fix unescape logic, expression props, and ICU format for Trans component

src/lexers/jsx-lexer.js

@@ -125,9 +125,15 @@ export default class JsxLexer extends JavascriptLexer {
             ) {
               entry[property.name.text] = false
             } else {
-              entry[
-                property.name.text
-              ] = `{${property.initializer.expression.text}}`
+              entry[property.name.text] = `{${
+                property.initializer.expression.text ||
+                this.cleanMultiLineCode(
+                  sourceText.slice(
+                    property.initializer.expression.pos,
+                    property.initializer.expression.end
+                  )
+                )
+              }}`
             }
           } else {
             entry[property.name.text] = property.initializer.text
@@ -138,15 +144,20 @@ export default class JsxLexer extends JavascriptLexer {
       const nodeAsString = this.nodeToString.call(this, node, sourceText)
       const defaultsProp = getPropValue(tagNode, 'defaults')
       let defaultValue = defaultsProp || nodeAsString
-      if (entry.shouldUnescape === true) {
+
+      // If `shouldUnescape` is not true, it means the value cannot contain HTML entities,
+      // so we need to unescape these entities now so that they can be properly rendered later
+      if (entry.shouldUnescape !== true) {
         defaultValue = unescape(defaultValue)
       }
 
       if (defaultValue !== '') {
         entry.defaultValue = defaultValue
 
         if (!entry.key) {
-          entry.key = nodeAsString
+          // If there's no key, default to the stringified unescaped node, then to the default value:
+          // https://github.com/i18next/react-i18next/blob/95f9c6a7b602a7b1fd33c1ded6dcfc23a52b853b/src/TransWithoutContext.js#L337
+          entry.key = unescape(nodeAsString) || entry.defaultValue
         }
       }
 
@@ -192,15 +203,19 @@ export default class JsxLexer extends JavascriptLexer {
     return elemsToString(children)
   }
 
+  cleanMultiLineCode(text) {
+    return text
+      .replace(/(^(\n|\r)\s*)|((\n|\r)\s*$)/g, '')
+      .replace(/(\n|\r)\s*/g, ' ')
+  }
+
   parseChildren(children = [], sourceText) {
     return children
       .map((child) => {
         if (child.kind === ts.SyntaxKind.JsxText) {
           return {
             type: 'text',
-            content: child.text
-              .replace(/(^(\n|\r)\s*)|((\n|\r)\s*$)/g, '')
-              .replace(/(\n|\r)\s*/g, ' '),
+            content: this.cleanMultiLineCode(child.text),
           }
         } else if (
           child.kind === ts.SyntaxKind.JsxElement ||

test/lexers/jsx-lexer.test.js

@@ -132,6 +132,29 @@ describe('JsxLexer', () => {
       done()
     })
 
+    it('extracts keys from Trans elements without an i18nKey, with defaults, and without children', (done) => {
+      const Lexer = new JsxLexer()
+      // Based on https://react.i18next.com/latest/trans-component#alternative-usage-components-array
+      const content = `
+<Trans
+  defaults="hello <0>{{what}}</0>"
+  values={{
+    what: "world"
+  }}
+  components={[<strong />]}
+/>
+`.trim()
+      assert.deepEqual(Lexer.extract(content), [
+        {
+          key: 'hello <0>{{what}}</0>',
+          defaultValue: 'hello <0>{{what}}</0>',
+          components: '{[<strong />]}',
+          values: '{{ what: "world" }}',
+        },
+      ])
+      done()
+    })
+
     it('extracts keys from Trans elements and ignores values of expressions and spaces', (done) => {
       const Lexer = new JsxLexer()
       const content = '<Trans count={count}>{{ key: property }}</Trans>'
@@ -452,12 +475,28 @@ describe('JsxLexer', () => {
         done()
       })
 
+      it('does not unescape i18nKey', (done) => {
+        const Lexer = new JsxLexer()
+        const content =
+          '<Trans i18nKey="I&apos;m testing">I&apos;m Cielquan</Trans>'
+        assert.equal(Lexer.extract(content)[0].key, 'I&apos;m testing')
+        done()
+      })
+
+      it('unescapes key when i18nKey is not provided', (done) => {
+        const Lexer = new JsxLexer()
+        const content = '<Trans>I&apos;m Cielquan</Trans>'
+        assert.equal(Lexer.extract(content)[0].key, "I'm Cielquan")
+        done()
+      })
+
       it('supports the shouldUnescape options', (done) => {
         const Lexer = new JsxLexer()
-        const content = '<Trans shouldUnescape>I&apros;m Cielquan</Trans>'
+        const content = '<Trans shouldUnescape>I&apos;m Cielquan</Trans>'
+        assert.equal(Lexer.extract(content)[0].key, "I'm Cielquan")
         assert.equal(
           Lexer.extract(content)[0].defaultValue,
-          'I&apros;m Cielquan'
+          'I&apos;m Cielquan'
         )
         done()
       })