fix: Don't call React.createElement on function as children (lingui#302)

Closes lingui#302
SectorLabs · Dec 9, 2019 · 2327615 · 2327615
1 parent b0ce89f
commit 2327615
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/packages/react/src/I18n.js b/packages/react/src/I18n.js
@@ -41,6 +41,18 @@ export default class I18n extends React.Component<*, *> {
       ...(withHash ? { i18nHash } : {})
     }
 
+    if (typeof children === "function") {
+      return children(props)
+    }
+
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "I18n accepts only function as a children. " +
+          "Other usecases are deprecated and will be removed in v3.0"
+      )
+    }
+
+    // Deprecate v3.0
     return React.isValidElement(children)
       ? React.cloneElement(children, props)
       : React.createElement(children, props)

diff --git a/packages/react/src/I18n.test.js b/packages/react/src/I18n.test.js
@@ -2,6 +2,7 @@ import * as React from "react"
 import { mount } from "enzyme"
 
 import { I18n } from "@lingui/react"
+import { mockConsole, mockEnv } from "./mocks"
 
 describe("I18n", function() {
   const getContext = () => ({
@@ -29,4 +30,45 @@ describe("I18n", function() {
       i18nHash: context.i18nHash
     })
   })
+
+  it("should show deprecation warning for using elements as a children", function() {
+    expect.assertions(3)
+
+    mockConsole(console => {
+      // Valid
+      mount(<I18n>{() => <div />}</I18n>)
+      expect(console.warn).not.toHaveBeenCalledWith(
+        expect.stringContaining("I18n accepts only function as a children.")
+      )
+    })
+
+    mockConsole(console => {
+      // Deprecated!
+      mount(
+        <I18n>
+          <div />
+        </I18n>
+      )
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringContaining("I18n accepts only function as a children.")
+      )
+    })
+
+    mockEnv("production", () => {
+      jest.resetModules()
+      const { I18n } = require("@lingui/react")
+
+      // Deprecated, but not warned in production
+      mockConsole(console => {
+        mount(
+          <I18n>
+            <div />
+          </I18n>
+        )
+        expect(console.warn).not.toHaveBeenCalledWith(
+          expect.stringContaining("I18n accepts only function as a children.")
+        )
+      })
+    })
+  })
 })
diff --git a/packages/react/src/withI18n.js b/packages/react/src/withI18n.js
@@ -60,7 +60,9 @@ const withI18n = (options: withI18nOptions = {}) =>
         }
         return (
           <I18n update={update} withHash={withHash}>
-            <WrappedComponent {...props} />
+            {({ i18n, i18nHash }) => (
+              <WrappedComponent {...props} i18n={i18n} i18nHash={i18nHash} />
+            )}
           </I18n>
         )
       }