Add React 16 support

bumps 6.0.0

package.json

@@ -1,34 +1,35 @@
 {
   "name": "react-translate",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "react utilities for simple i18n",
   "main": "./lib/index.js",
-  "files": [
-    "README.md",
-    "LICENSE",
-    "lib"
-  ],
+  "files": ["README.md", "LICENSE", "lib"],
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-jest": "^15.0.0",
     "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
-    "jest": "^15.1.1",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0"
+    "jest": "^21.2.1",
+    "raf": "^3.4.0",
+    "react": ">=15.0.0 || >=16.0.0",
+    "react-dom": ">=15.0.0 || >=16.0.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0"
+    "react": ">=15.0.0 || >=16.0.0"
   },
   "scripts": {
     "start": "babel src --out-dir lib --ignore='__tests__'",
     "test": "jest"
   },
+  "jest": {
+    "setupFiles": ["./scripts/jest/setup.js"],
+    "roots": ["src"]
+  },
   "author": "bloodyowl",
   "license": "MIT",
   "dependencies": {
-    "invariant": "^2.1.2"
+    "invariant": "^2.1.2",
+    "prop-types": "^15.6.0"
   }
 }

scripts/jest/setup.js

@@ -0,0 +1 @@
+require("raf/polyfill");

src/TranslatorProvider.js

@@ -1,30 +1,28 @@
-import React, { Component, PropTypes, Children } from "react"
-import createTranslator from "./createTranslator"
+import React, { Component, Children } from "react";
+import PropTypes from "prop-types";
+import createTranslator from "./createTranslator";
 
 class TranslatorProvider extends Component {
-
   getChildContext() {
-    const { translations } = this.props
+    const { translations } = this.props;
     return {
       translator: createTranslator(translations),
-      locale: translations.locale,
-    }
+      locale: translations.locale
+    };
   }
 
   render() {
-    return Children.only(this.props.children)
+    return Children.only(this.props.children);
   }
 }
 
-
 TranslatorProvider.propTypes = {
-  translations: PropTypes.object.isRequired,
-}
+  translations: PropTypes.object.isRequired
+};
 
 TranslatorProvider.childContextTypes = {
   translator: PropTypes.func.isRequired,
-  locale: PropTypes.string.isRequired,
-}
-
+  locale: PropTypes.string.isRequired
+};
 
-export default TranslatorProvider
+export default TranslatorProvider;

src/__tests__/TranslatorProvider-test.js

@@ -1,26 +1,27 @@
-const TranslatorProvider = require("../TranslatorProvider").default
-const React = require("react")
-const { renderIntoDocument } = require("react-addons-test-utils")
+const TranslatorProvider = require("../TranslatorProvider").default;
+const React = require("react");
+const { renderIntoDocument } = require("react-dom/test-utils");
+const PropTypes = require("prop-types");
 
-const { Component, PropTypes } = React
+const { Component } = React;
 
 it("TranslatorProvider", () => {
   class Dummy extends Component {
     render() {
-      expect(typeof this.context.translator).toBe("function")
-      expect(typeof this.context.locale).toBe("string")
-      return null
+      expect(typeof this.context.translator).toBe("function");
+      expect(typeof this.context.locale).toBe("string");
+      return null;
     }
   }
 
   Dummy.contextTypes = {
     locale: PropTypes.string,
-    translator: PropTypes.func,
-  }
+    translator: PropTypes.func
+  };
 
   renderIntoDocument(
     <TranslatorProvider translations={{ locale: "en" }}>
       <Dummy />
     </TranslatorProvider>
-  )
-})
+  );
+});

src/__tests__/getPluralType-test.js

@@ -1,23 +1,23 @@
-const getPluralType = require("../getPluralType").default
+const getPluralType = require("../getPluralType").default;
 
 it("getPluralType", () => {
-  expect(typeof getPluralType("fr")).toBe("function")
-  expect(getPluralType("fr")(0)).toBe(0)
-  expect(getPluralType("fr")(1)).toBe(0)
-  expect(getPluralType("fr")(2)).toBe(1)
-  expect(getPluralType("en")(0)).toBe(1)
-  expect(getPluralType("en")(1)).toBe(0)
-  expect(getPluralType("en")(2)).toBe(1)
-})
+  expect(typeof getPluralType("fr")).toBe("function");
+  expect(getPluralType("fr")(0)).toBe(0);
+  expect(getPluralType("fr")(1)).toBe(0);
+  expect(getPluralType("fr")(2)).toBe(1);
+  expect(getPluralType("en")(0)).toBe(1);
+  expect(getPluralType("en")(1)).toBe(0);
+  expect(getPluralType("en")(2)).toBe(1);
+});
 
 it("getPluralType throws if locale is undefined", () => {
   expect(() => {
-    getPluralType()
-  }).toThrow()
-})
+    getPluralType();
+  }).toThrow();
+});
 
 it("getPluralType throws if locale is unrecognized", () => {
   expect(() => {
-    getPluralType("??")
-  }).toThrow()
-})
+    getPluralType("??");
+  }).toThrow();
+});

src/__tests__/render-test.js

@@ -1,39 +1,37 @@
-const React = require("react")
-const render = require("../render").default
+const React = require("react");
+const render = require("../render").default;
 
 it("render", () => {
-  expect(render("TEST_STRING")).toEqual("TEST_STRING")
-  expect(render("TEST_STRING {{value}}", { value: "BAR" })).toEqual("TEST_STRING BAR")
-})
+  expect(render("TEST_STRING")).toEqual("TEST_STRING");
+  expect(render("TEST_STRING {{value}}", { value: "BAR" })).toEqual(
+    "TEST_STRING BAR"
+  );
+});
 
 it("render can render react elements", () => {
   expect(
     render("TEST_STRING {{value}}", { value: React.createElement("div") })
-  ).toEqual(
-    ["TEST_STRING ", React.createElement("div", { key: "0" }) ,""]
-  )
-})
+  ).toEqual(["TEST_STRING ", React.createElement("div", { key: "0" }), ""]);
+});
 
 it("render preserves boolean values", () => {
-  expect(
-    render("TEST_STRING {{value}}", { value: true })
-  ).toEqual(
-    ["TEST_STRING ", true,""]
-  )
-})
+  expect(render("TEST_STRING {{value}}", { value: true })).toEqual([
+    "TEST_STRING ",
+    true,
+    ""
+  ]);
+});
 
 it("render preserves null values", () => {
-  expect(
-    render("TEST_STRING {{value}}", { value: null })
-  ).toEqual(
-    ["TEST_STRING ", null,""]
-  )
-})
+  expect(render("TEST_STRING {{value}}", { value: null })).toEqual([
+    "TEST_STRING ",
+    null,
+    ""
+  ]);
+});
 
 it("render preserves number values", () => {
-  expect(
-    render("TEST_STRING {{value}}", { value: 1 })
-  ).toEqual(
+  expect(render("TEST_STRING {{value}}", { value: 1 })).toEqual(
     "TEST_STRING 1"
-  )
-})
+  );
+});

src/__tests__/translate-test.js

@@ -1,67 +1,66 @@
-const translate = require("../translate").default
-const TranslatorProvider = require("../TranslatorProvider").default
-const React = require("react")
-const { renderIntoDocument } = require("react-addons-test-utils")
+const translate = require("../translate").default;
+const TranslatorProvider = require("../TranslatorProvider").default;
+const React = require("react");
+const { renderIntoDocument } = require("react-dom/test-utils");
 
 it("translate", () => {
-  expect(typeof translate).toBe("function")
-  expect(typeof translate("Foo")).toBe("function")
-})
-
+  expect(typeof translate).toBe("function");
+  expect(typeof translate("Foo")).toBe("function");
+});
 
 it("translate passes `t` function", () => {
   const Dummy = ({ t }) => {
-    expect(typeof t).toBe("function")
-    expect(t("foo")).toBe("bar")
-    return <div />
-  }
-  const WrappedDummy = translate("Dummy")(Dummy)
+    expect(typeof t).toBe("function");
+    expect(t("foo")).toBe("bar");
+    return <div />;
+  };
+  const WrappedDummy = translate("Dummy")(Dummy);
   renderIntoDocument(
     <TranslatorProvider
       translations={{
         locale: "en",
-        "Dummy": {"foo": "bar"},
+        Dummy: { foo: "bar" }
       }}
     >
       <WrappedDummy />
     </TranslatorProvider>
-  )
-})
+  );
+});
 
 it("`t` returns key if component is not specified", () => {
   const Dummy = ({ t }) => {
-    expect(typeof t).toBe("function")
-    expect(t("foo")).toBe("DummyError.foo")
-    return <div />
-  }
-  const WrappedDummy = translate("DummyError")(Dummy)
+    expect(typeof t).toBe("function");
+    expect(t("foo")).toBe("DummyError.foo");
+    return <div />;
+  };
+  const WrappedDummy = translate("DummyError")(Dummy);
   renderIntoDocument(
     <TranslatorProvider
       translations={{
         locale: "en",
-        "Dummy": {"foo": "bar"},
+        Dummy: { foo: "bar" }
       }}
     >
       <WrappedDummy />
     </TranslatorProvider>
-  )
-})
+  );
+});
 
 it("`t` returns key if not specified", () => {
   const Dummy = ({ t }) => {
-    expect(typeof t).toBe("function")
-    expect(t("foo")).toBe("Dummy.foo")
-    return <div />
-  }
-  const WrappedDummy = translate("Dummy")(Dummy)
+    expect(typeof t).toBe("function");
+    expect(t("foo")).toBe("Dummy.foo");
+    return <div />;
+  };
+  const WrappedDummy = translate("Dummy")(Dummy);
   renderIntoDocument(
     <TranslatorProvider
       translations={{
         locale: "en",
-        "Dummy": {},
+        Dummy: {}
       }}
     >
       <WrappedDummy />
     </TranslatorProvider>
-  )
-})
+  );
+});

src/createTranslator.js

@@ -1,30 +1,29 @@
-import render from "./render"
-import getPluralType from "./getPluralType"
+import render from "./render";
+import getPluralType from "./getPluralType";
 
-const createTranslator = (keys) => {
-  const pluralType = getPluralType(keys.locale)
-  return (componentName) => {
+const createTranslator = keys => {
+  const pluralType = getPluralType(keys.locale);
+  return componentName => {
     if (!keys.hasOwnProperty(componentName)) {
-      return (key) => `${componentName}.${key}`
+      return key => `${componentName}.${key}`;
     }
-    const componentKeys = keys[componentName]
+    const componentKeys = keys[componentName];
     return (key, params) => {
-      let translation = componentKeys[key]
+      let translation = componentKeys[key];
       if (translation === undefined) {
-        return `${componentName}.${key}`
+        return `${componentName}.${key}`;
       }
-      if(Array.isArray(translation)) {
+      if (Array.isArray(translation)) {
         // plural
         if (params != null && typeof params.n === "number") {
-          translation = translation[pluralType(params.n)]
-        }
-        else {
-          return render(translation.join("\n"), params)
+          translation = translation[pluralType(params.n)];
+        } else {
+          return render(translation.join("\n"), params);
         }
       }
-      return render(translation, params)
-    }
-  }
-}
+      return render(translation, params);
+    };
+  };
+};
 
-export default createTranslator
+export default createTranslator;