From d8904f768ae5aad951197e736e62152e460101fd Mon Sep 17 00:00:00 2001
From: Dan Reeves <hey@danreev.es>
Date: Tue, 7 Jun 2022 16:28:17 +0100
Subject: [PATCH 1/4] Example of how types allow incorrect usage

---
 test/trans.render.object.spec.js | 29 +++++++++++++++++++++++++++++
 test/typescript/Trans.test.tsx   | 23 +++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/test/trans.render.object.spec.js b/test/trans.render.object.spec.js
index d0d8d207..5c437278 100644
--- a/test/trans.render.object.spec.js
+++ b/test/trans.render.object.spec.js
@@ -242,3 +242,32 @@ describe('trans using no children but components (object) - interpolated compone
     `);
   });
 });
+
+describe('trans using no children but components (object) - ReactNodes that error', () => {
+  const Button = ({ children }) => <button type="button">{children}</button>;
+  // Suppress console.errors in these tests
+  let consoleErrorFn;
+  beforeAll(() => {
+    consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+  });
+  afterAll(() => {
+    consoleErrorFn.restoreMocks();
+  });
+  it('should throw if you use some valid ReactNodes', () => {
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: Button }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: {} }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: null }} />),
+    ).toThrow();
+
+    expect(() =>
+      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: true }} />),
+    ).toThrow();
+  });
+});
diff --git a/test/typescript/Trans.test.tsx b/test/typescript/Trans.test.tsx
index da1ea1a2..0197b0c7 100644
--- a/test/typescript/Trans.test.tsx
+++ b/test/typescript/Trans.test.tsx
@@ -26,6 +26,29 @@ function objectComponents() {
   return <Trans components={{ Btn: <button /> }} defaults="Hello <Btn />" />;
 }
 
+function MyComponent(): React.ReactElement {
+  return <>world</>;
+}
+
+function objectCustomComponents() {
+  return <Trans components={{ Btn: <MyComponent /> }} defaults="Hello <Btn />" />;
+}
+
+function objectCustomComponentsShouldError() {
+  return (
+    <Trans
+      // Valid ReactNodes according to types
+      components={{
+        Btn: MyComponent,
+        Btn2: null,
+        Btn4: true,
+        Btn5: {},
+      }}
+      defaults="Hello <Btn /><Btn2 /><Btn3 /><Btn4 /><Btn5 />"
+    />
+  );
+}
+
 function constObjectComponents() {
   const constObject = {
     Btn: <button />,

From 563966bcab519ca6ac26fd9d930bda0275cc7519 Mon Sep 17 00:00:00 2001
From: Dan Reeves <hey@danreev.es>
Date: Tue, 7 Jun 2022 16:40:52 +0100
Subject: [PATCH 2/4] Add correct types and allow tslint to run on tsx files

---
 index.d.ts       | 2 +-
 package.json     | 6 +++---
 ts4.1/index.d.ts | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 310b48f3..01233083 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -34,7 +34,7 @@ export interface TransProps<E extends Element = HTMLDivElement>
   extends React.HTMLProps<E>,
     Partial<WithT> {
   children?: React.ReactNode;
-  components?: readonly React.ReactNode[] | { readonly [tagName: string]: React.ReactNode };
+  components?: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement };
   count?: number;
   context?: string;
   defaults?: string;
diff --git a/package.json b/package.json
index 2fa8512b..b9cd5103 100644
--- a/package.json
+++ b/package.json
@@ -117,9 +117,9 @@
     "test:watch": "cross-env BABEL_ENV=development jest --no-cache --watch",
     "test:coverage": "cross-env BABEL_ENV=development jest --no-cache --coverage",
     "test:lint": "eslint ./src ./test",
-    "test:typescript": "tslint --project tsconfig.json '**/*.ts'",
-    "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json '**/*.ts'",
-    "test:typescript:customtypes": "tslint --project ./test/typescript/custom-types/tsconfig.json '**/*.ts'",
+    "test:typescript": "tslint --project tsconfig.json '**/*.{ts,tsx}'",
+    "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json '**/*.{ts,tsx}'",
+    "test:typescript:customtypes": "tslint --project ./test/typescript/custom-types/tsconfig.json '**/*.{ts,tsx}'",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "prettier": "prettier --write \"{,**/}*.{ts,tsx,js,json,md}\""
diff --git a/ts4.1/index.d.ts b/ts4.1/index.d.ts
index 3f561805..29530ef4 100644
--- a/ts4.1/index.d.ts
+++ b/ts4.1/index.d.ts
@@ -264,7 +264,7 @@ export type TransProps<
   E = React.HTMLProps<HTMLDivElement>
 > = E & {
   children?: TransChild | TransChild[];
-  components?: readonly React.ReactNode[] | { readonly [tagName: string]: React.ReactNode };
+  components?: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement };
   count?: number;
   context?: string;
   defaults?: string;

From 516fbdc7ecbc6d1adfa653f902ec0b51b9dd3d7c Mon Sep 17 00:00:00 2001
From: Dan Reeves <hey@danreev.es>
Date: Tue, 7 Jun 2022 16:42:34 +0100
Subject: [PATCH 3/4] Remove invalid type example

---
 test/typescript/Trans.test.tsx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/test/typescript/Trans.test.tsx b/test/typescript/Trans.test.tsx
index 0197b0c7..038ab159 100644
--- a/test/typescript/Trans.test.tsx
+++ b/test/typescript/Trans.test.tsx
@@ -26,7 +26,7 @@ function objectComponents() {
   return <Trans components={{ Btn: <button /> }} defaults="Hello <Btn />" />;
 }
 
-function MyComponent(): React.ReactElement {
+function MyComponent() {
   return <>world</>;
 }
 
@@ -34,21 +34,6 @@ function objectCustomComponents() {
   return <Trans components={{ Btn: <MyComponent /> }} defaults="Hello <Btn />" />;
 }
 
-function objectCustomComponentsShouldError() {
-  return (
-    <Trans
-      // Valid ReactNodes according to types
-      components={{
-        Btn: MyComponent,
-        Btn2: null,
-        Btn4: true,
-        Btn5: {},
-      }}
-      defaults="Hello <Btn /><Btn2 /><Btn3 /><Btn4 /><Btn5 />"
-    />
-  );
-}
-
 function constObjectComponents() {
   const constObject = {
     Btn: <button />,

From 9509d54ab799bbca59356b8acf96627f23441e75 Mon Sep 17 00:00:00 2001
From: Dan Reeves <hey@danreev.es>
Date: Tue, 7 Jun 2022 16:43:00 +0100
Subject: [PATCH 4/4] Remove test for invalid behaviour

---
 test/trans.render.object.spec.js | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/test/trans.render.object.spec.js b/test/trans.render.object.spec.js
index 5c437278..d0d8d207 100644
--- a/test/trans.render.object.spec.js
+++ b/test/trans.render.object.spec.js
@@ -242,32 +242,3 @@ describe('trans using no children but components (object) - interpolated compone
     `);
   });
 });
-
-describe('trans using no children but components (object) - ReactNodes that error', () => {
-  const Button = ({ children }) => <button type="button">{children}</button>;
-  // Suppress console.errors in these tests
-  let consoleErrorFn;
-  beforeAll(() => {
-    consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
-  });
-  afterAll(() => {
-    consoleErrorFn.restoreMocks();
-  });
-  it('should throw if you use some valid ReactNodes', () => {
-    expect(() =>
-      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: Button }} />),
-    ).toThrow();
-
-    expect(() =>
-      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: {} }} />),
-    ).toThrow();
-
-    expect(() =>
-      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: null }} />),
-    ).toThrow();
-
-    expect(() =>
-      render(<Trans defaults="hello <ClickMe>Test</ClickMe>" components={{ ClickMe: true }} />),
-    ).toThrow();
-  });
-});