(WIP) Upgrade for React 16

examples/react-router/basic/app.js

@@ -28,14 +28,20 @@ class App extends Component {
  return (
  <div>
  <ul>
- <li><IndexLink to="/">Home</IndexLink></li>
- <li><Link to="/async">Async Page View Track</Link></li>
+ <li>
+ <IndexLink to="/">Home</IndexLink>
+ </li>
+ <li>
+ <Link to="/async">Async Page View Track</Link>
+ </li>
  <li>
  <Link to={{pathname: "/async", query: {param: "abc"}}}>
  Async Page View Track with query param
  </Link>
  </li>
- <li><Link to="/manual">Manual Page View Track</Link></li>
+ <li>
+ <Link to="/manual">Manual Page View Track</Link>
+ </li>
  <li>
  <Link to="/user/123">Page View Track with params</Link>
  </li>

examples/react-router/basic/manual-page-view.js

@@ -1,10 +1,11 @@
 import React from "react";
-import exposeMetrics from "react-metrics"; // eslint-disable-line import/no-unresolved
+import {exposeMetrics, PropTypes as MetricsPropTypes} from "react-metrics"; // eslint-disable-line import/no-unresolved
 import PropTypes from "prop-types";
 
-@exposeMetrics class ManualPageView extends React.Component {
+@exposeMetrics
+class ManualPageView extends React.Component {
  static contextTypes = {
- metrics: PropTypes.metrics
+ metrics: MetricsPropTypes.metrics
  };
 
  static propTypes = {

package.json

@@ -66,7 +66,7 @@
  "eslint-plugin-react": "^7.1.0",
  "estraverse": "4.2.0",
  "estraverse-fb": "1.3.1",
- "history": "^2.0.0",
+ "history": "3.2.0",
  "isparta-loader": "^2.0.0",
  "json-loader": "^0.5.3",
  "karma": "^0.13.10",
@@ -86,17 +86,21 @@
  "path-to-regexp": "^1.2.1",
  "prettier": "^1.3.1",
  "prop-types": "^15.5.10",
- "react": "^15.0.1",
- "react-addons-test-utils": "^15.0.1",
- "react-dom": "^15.0.1",
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0",
  "react-redux": "^4.4.5",
- "react-router": "^2.0.0",
+ "react-router": "3.2.0",
  "redux": "^3.3.1",
  "sinon": "^1.17.3",
  "sinon-chai": "^2.8.0",
  "webpack": "^1.12.14",
  "webpack-dev-server": "^1.12.0"
  },
+ "peerDependencies": {
+ "prop-types": "^15.5.10",
+ "react": "^15.0.1 || ^16.2.0",
+ "react-dom": "^15.0.1 || ^16.2.0"
+ },
  "scripts": {
  "commit": "git-cz",
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",

src/react/metrics.js

@@ -23,6 +23,7 @@ export default function metrics(metricsOrConfig, options = {}) {
  const getNewRouteState = options.getRouteState || getRouteState;
  const findNewRouteComponent =
  options.findRouteComponent || findRouteComponent;
+
  const metricsInstance = isMetrics(metricsOrConfig)
  ? metricsOrConfig
  : createMetrics(metricsOrConfig);
@@ -147,6 +148,7 @@ export default function metrics(metricsOrConfig, options = {}) {
  autoTrackPageView &&
  !shouldSuppress
  ) {
+
  invariant(
  typeof metricsInst.api.pageView === "function",
  "react-metrics: 'pageView' api needs to be defined for automatic page view tracking."

test/ReactMetrics/exposeMetrics.spec.js

@@ -1,8 +1,7 @@
 /* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks */
 import React from "react";
 import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
 import metrics from "../../src/react/metrics";
 import exposeMetrics, {
  getMountedInstances
@@ -77,7 +76,8 @@ describe("exposeMetrics", () => {
  }
  }
 
- @exposeMetrics class Page extends React.Component {
+ @exposeMetrics
+ class Page extends React.Component {
  static displayName = "Page";
 
  static willTrackPageView() {
@@ -88,17 +88,21 @@ describe("exposeMetrics", () => {
  render() {
  return <h1>Page</h1>;
  }
- }
+ };
+
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
 
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/">
  <Route component={Page} path="/page/:id" />
  </Route>
  </Router>,
  node,
  function() {
- this.history.pushState(null, "/page/1");
+ history.push("/page/1");
  }
  );
  });
@@ -123,21 +127,26 @@ describe("exposeMetrics", () => {
  }
  }
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/">
  <Route component={Page} path="/page/:id" />
  </Route>
  </Router>,
  node,
  function() {
- this.history.pushState(null, "/page/1");
+ history.push("/page/1");
  }
  );
  });
 
  it("should register itself to a registry when mounting, unregister itself from a registry when unmounting", done => {
- @exposeMetrics class Application extends React.Component {
+ @exposeMetrics
+ class Application extends React.Component {
  render() {
  return <div>Application</div>;
  }
@@ -146,9 +155,13 @@ describe("exposeMetrics", () => {
  ReactDOM.render(<Application />, node, () => {
  const registry = getMountedInstances();
  expect(registry).to.have.length(1);
- ReactDOM.unmountComponentAtNode(node);
- expect(registry).to.have.length(0);
- done();
+ const didReturn = ReactDOM.unmountComponentAtNode(node);
+ expect(didReturn).to.equal(true);
+ setTimeout(() => {
+ expect(registry).to.have.length(0);
+ done();
+ }, 1);
+
  });
  });
 });

test/ReactMetrics/metrics.spec.js

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks, jsx-a11y/href-no-hash */
 import React from "react";
 import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import ReactTestUtils from "react-dom/test-utils";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
 import execSteps from "../execSteps";
-import ReactTestUtils from "react-addons-test-utils";
 import metrics from "../../src/react/metrics";
 import createMetrics, {isMetrics, Metrics} from "../../src/core/createMetrics";
 import exposeMetrics, {
@@ -149,19 +148,26 @@ describe("metrics", () => {
  return metricsMock;
  });
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  const steps = [
- function() {
+ () => {
  expect(pageView.calledOnce).to.be.false;
- this.history.pushState(null, "/page");
+ history.push("/page");
  },
- function() {
- expect(pageView.calledOnce).to.be.true;
- stub.restore();
- pageView.restore();
- done();
+ () => {
+ setTimeout(() => {
+ expect(pageView.calledOnce).to.be.true;
+ stub.restore();
+ pageView.restore();
+ done();
+ }, 1000);
  }
  ];
 
+
  class Page extends React.Component {
  static displayName = "Page";
 
@@ -184,7 +190,7 @@ describe("metrics", () => {
  const execNextStep = execSteps(steps, done);
 
  ReactDOM.render(
- <Router history={createHistory("/")} onUpdate={execNextStep}>
+ <Router history={history} onUpdate={execNextStep}>
  <Route component={Application} path="/">
  <Route component={Page} path="/page" />
  </Route>
@@ -212,9 +218,13 @@ describe("metrics", () => {
  };
  });
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  expect(() => {
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/" />
  </Router>,
  node,
@@ -273,11 +283,15 @@ describe("metrics", () => {
  render() {
  return <div><h2>Appication</h2></div>;
  }
- }
+ };
+
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
 
  expect(() => {
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/" />
  </Router>,
  node

test/ReactMetrics/willTrackPageView.spec.js

@@ -1,13 +1,14 @@
 /* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, padded-blocks */
 import React from "react";
 import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
+import execSteps from "../execSteps";
 import metrics from "../../src/react/metrics";
 import exposeMetrics from "../../src/react/exposeMetrics";
 import MetricsConfig from "../metrics.config";
 import metricsMock from "../metricsMock";
 
+
 describe("willTrackPageView", () => {
  let node;
 
@@ -79,17 +80,19 @@ describe("willTrackPageView", () => {
  }
  }
 
+ const history = useRouterHistory(createMemoryHistory);
+
  ReactDOM.render(
- <Router history={createHistory("/page/content")}>
+ <Router history={history}>
  <Route component={Application} path="/">
  <Route component={Page} path="page">
  <Route component={Content} path=":content" />
  </Route>
  </Route>
  </Router>,
  node,
- function() {
- this.history.pushState(null, "/page/content2");
+ () => {
+ history.push("/page/content2");
  }
  );
  });
@@ -119,8 +122,12 @@ describe("willTrackPageView", () => {
  );
  mock.expects("pageView").never();
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/" />
  </Router>,
  node,
@@ -167,8 +174,12 @@ describe("willTrackPageView", () => {
  }
  );
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/" />
  </Router>,
  node
@@ -191,7 +202,7 @@ describe("willTrackPageView", () => {
  static displayName = "Page";
 
  static willTrackPageView(routeState) {
- expect(routeState.pathname).to.equal("/page/123");
+ expect(routeState.pathname).to.equal("page/123");
  expect(routeState.search).to.equal("?param1=value1");
  expect(routeState.hash).to.equal("");
  expect(JSON.stringify(routeState.state)).to.equal(
@@ -209,15 +220,23 @@ describe("willTrackPageView", () => {
  }
  }
 
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
  ReactDOM.render(
- <Router history={createHistory("/")}>
+ <Router history={history}>
  <Route component={Application} path="/">
  <Route component={Page} path="/page/:id" />
  </Route>
  </Router>,
  node,
- function() {
- this.history.pushState(state, "/page/123?param1=value1");
+ () => {
+ history.push({
+ pathname: "/page/123",
+ search: "?param1=value1",
+ state
+ });
  }
  );
  });