I'm sharing: Context API and Cleanup, really not ready

package.json

@@ -67,27 +67,29 @@
     "intl-format-cache": "^2.0.5",
     "intl-messageformat": "^2.1.0",
     "intl-relativeformat": "^2.1.0",
-    "invariant": "^2.1.1"
+    "invariant": "^2.1.1",
+    "react-addons-test-utils": "^0.14.8"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.0.0 || ^16.0.0",
+    "react": ">= 16.3.1",
     "prop-types": "^15.5.4"
   },
   "devDependencies": {
     "babel-cli": "^6.2.0",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^19.0.0",
-    "babel-plugin-external-helpers": "^6.18.0",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-react-intl": "^2.0.0",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
     "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-es3-member-expression-literals": "^6.3.13",
     "babel-plugin-transform-es3-property-literals": "^6.3.13",
     "babel-plugin-transform-object-rest-spread": "^6.1.18",
     "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-preset-react": "^6.24.1",
     "babelify": "^7.2.0",
     "benchmark": "^2.1.0",
     "browserify": "^14.0.0",
@@ -105,19 +107,19 @@
     "jest": "^19.0.0",
     "mkdirp": "^0.5.1",
     "prettier": "^1.6.1",
-    "prop-types": "^15.5.4",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "react-test-renderer": "^16.3.0",
     "rimraf": "^2.4.2",
-    "rollup": "^0.50.0",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.1",
+    "rollup": "^0.50.1",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^8.4.1",
     "rollup-plugin-memory": "^2.0.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.0",
-    "serialize-javascript": "^1.1.1",
+    "serialize-javascript": "^1.5.0",
     "superagent": "^3.0.0",
     "watchify": "^3.7.0"
   },
@@ -133,10 +135,11 @@
     "react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}",
     "react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14",
     "react:15": "npm run react:clean && npm i react@^15 react-dom@^15",
+    "react:16": "npm run react:clean && npm i [email protected] [email protected]",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "jest --coverage --verbose",
-    "test:react": "npm run react:14 && jest && npm run react:15 && jest",
+    "test:react": "jest",
     "test:all": "npm run lint && npm run test && npm run test:react",
     "test:watch": "jest --watch",
     "test:perf": "cross-env NODE_ENV=production babel-node test/perf",

src/components/context.js

@@ -0,0 +1,98 @@
+// @flow
+/*
+ * Copyright 2018, Pavel Lang <[email protected]>
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+import { hasTranslator } from '../get-translator';
+import type Translator from '../translator';
+
+function getDefaultContext(): Translator | null {
+  let locale: LocaleCode = 'en-US';
+  if (
+    __CLIENT__ &&
+    document &&
+    document.documentElement &&
+    document.documentElement.lang
+  ) {
+    locale = ((document.documentElement.lang: any): LocaleCode);
+  }
+  return hasTranslator(locale);
+}
+
+export const { Consumer: IntlConsumer, Provider } = React.createContext(
+  getDefaultContext(),
+);
+
+type IntlProviderProps =
+  | {| translator: Translator, children: React.Node |}
+  | {| locale: LocaleCode, children: React.Node |};
+
+type IntlProviderState = {
+  locale: LocaleCode,
+  translator: ?Translator,
+  nextLocale?: ?LocaleCode,
+};
+
+export class IntlProvider extends React.Component<
+  IntlProviderProps,
+  IntlProviderState,
+> {
+  constructor(props: IntlProviderProps) {
+    super(props);
+    if (props.translator) {
+      this.state = {
+        locale: props.translator.locale,
+        translator: props.translator,
+      };
+    } else if (props.locale) {
+      this.state = {
+        locale: props.locale,
+        translator: hasTranslator(props.locale),
+      };
+    }
+  }
+
+  static getDerivedStateFromProps(
+    nextProps: IntlProviderProps,
+    prevState: IntlProviderState,
+  ) {
+    if (
+      nextProps.translator &&
+      (!prevState || nextProps.translator !== prevState.translator)
+    ) {
+      return {
+        locale: nextProps.translator.locale,
+        translator: nextProps.translator,
+        nextLocale: null,
+      };
+    }
+
+    if (
+      nextProps.locale &&
+      (!prevState || nextProps.locale !== prevState.locale)
+    ) {
+      const translator = hasTranslator(nextProps.locale);
+      if (translator) {
+        return {
+          locale: nextProps.locale,
+          translator,
+        };
+      }
+      // signal that state is not in sync with props
+      // and new locale should be used when available
+      return {
+        nextLocale: nextProps.locale,
+      };
+    }
+
+    return null;
+  }
+
+  render() {
+    const { translator } = this.state;
+    return <Provider value={translator}>{this.props.children}</Provider>;
+  }
+}

src/components/date.js

@@ -1,47 +1,34 @@
-/*
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License.
- * See the accompanying LICENSE file for terms.
- */
-
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {intlShape, dateTimeFormatPropTypes} from '../types';
-import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
-
-export default class FormattedDate extends Component {
-  static displayName = 'FormattedDate';
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  static propTypes = {
-    ...dateTimeFormatPropTypes,
-    value: PropTypes.any.isRequired,
-    format: PropTypes.string,
-    children: PropTypes.func,
-  };
-
-  constructor(props, context) {
-    super(props, context);
-    invariantIntlContext(context);
-  }
-
-  shouldComponentUpdate(...next) {
-    return shouldIntlComponentUpdate(this, ...next);
-  }
-
-  render() {
-    const {formatDate, textComponent: Text} = this.context.intl;
-    const {value, children} = this.props;
-
-    let formattedDate = formatDate(value, this.props);
-
-    if (typeof children === 'function') {
-      return children(formattedDate);
-    }
-
-    return <Text>{formattedDate}</Text>;
-  }
-}
+// // @flow
+// /*
+//  * Copyright 2018, Pavel Lang <[email protected]>
+//  * Copyright 2015, Yahoo Inc.
+//  * Copyrights licensed under the New BSD License.
+//  * See the accompanying LICENSE file for terms.
+//  */
+//
+// import * as React from 'react';
+// import { IntlConsumer } from './context';
+// import type { DateTimeFormatPropTypes } from '../types';
+//
+// export default class FormattedDate extends React.Component<
+//   DateTimeFormatPropTypes,
+// > {
+//   render() {
+//     const { value, children } = this.props;
+//     return (
+//       <IntlConsumer>
+//         {intl => {
+//           const { formatDate, textComponent: Text } = intl;
+//
+//           const formattedDate = formatDate(value, this.props);
+//
+//           if (typeof children === 'function') {
+//             return children(formattedDate);
+//           }
+//
+//           return <Text>{formattedDate}</Text>;
+//         }}
+//       </IntlConsumer>
+//     );
+//   }
+// }