update html-parse-stringify to fix uppercase elements in Trans compon…

…ent, fixes #1304

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 11.8.14
+
+- update html-parse-stringify to fix uppercase elements in Trans component [1304](https://github.com/i18next/react-i18next/issues/1304)
+
 ### 11.8.13
 
 - Replace html-parse-stringify2 with html-parse-stringify [1283](https://github.com/i18next/react-i18next/pull/1283) to prevent [CVE-2021-23346](https://github.com/i18next/react-i18next/issues/1275)

package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.6",
-    "html-parse-stringify": "^3.0.0"
+    "html-parse-stringify": "^3.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",

react-i18next.js

@@ -214,7 +214,7 @@
     },
         i = n.match(/<\/?([^\s]+?)[/\s>]/);
 
-    if (i && (r.name = i[1], (voidElements[i[1].toLowerCase()] || "/" === n.charAt(n.length - 2)) && (r.voidElement = !0), r.name.startsWith("!--"))) {
+    if (i && (r.name = i[1], (voidElements[i[1]] || "/" === n.charAt(n.length - 2)) && (r.voidElement = !0), r.name.startsWith("!--"))) {
       var s = n.indexOf("--\x3e");
       return {
         type: "comment",

test/trans.render.spec.js

@@ -475,3 +475,51 @@ describe('trans should work with misleading overloaded empty elements in compone
     `);
   });
 });
+
+describe('trans should work with lowercase elements in components', () => {
+  const TestComponent = () => (
+    <Trans
+      i18nKey="someKeyWithLowercaseComp"
+      defaults="click <whatever>here</whatever> for more"
+      components={{ whatever: <a href="/foo">dummy</a> }}
+    />
+  );
+  it('should render translated string', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        click 
+        <a
+          href="/foo"
+        >
+          here
+        </a>
+         for more
+      </div>
+    `);
+  });
+});
+
+describe('trans should work with uppercase elements in components', () => {
+  const TestComponent = () => (
+    <Trans
+      i18nKey="someKeyWithUppercaseComp"
+      defaults="click <Link>here</Link> for more"
+      components={{ Link: <a href="/foo">dummy</a> }}
+    />
+  );
+  it('should render translated string', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        click 
+        <a
+          href="/foo"
+        >
+          here
+        </a>
+         for more
+      </div>
+    `);
+  });
+});