Chore: React 16 compatibility

package.json

@@ -3,6 +3,7 @@
   "version": "0.4.0",
   "description": "React.js HERE Maps component",
   "main": "dist/main.js",
+  "typings": "dist/main.d.ts",
   "scripts": {
     "test:prod": "npm run karma && npm run coverage && npm run coverage:post",
     "test": "npm run karma && npm run coverage",
@@ -11,7 +12,8 @@
     "coverage:remap": "remap-istanbul -i coverage/coverage.json -o coverage/coverage.json -t json -e node_modules,test",
     "coverage:report": "istanbul report",
     "coverage:post": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "prepublishOnly": "npm run pretest && gulp",
+    "prepublishOnly": "npm run test && gulp",
+    "build": "gulp",
     "lint": "tslint --config tslint.json --project tsconfig.json --type-check"
   },
   "repository": {
@@ -54,6 +56,7 @@
     "@types/lodash": "^4.14.68",
     "@types/mocha": "^2.2.41",
     "@types/node": "^8.0.10",
+    "@types/prop-types": "^15.5.2",
     "@types/react": "^15.0.36",
     "@types/react-dom": "^15.5.1",
     "@types/react-scroll": "^1.5.1",
@@ -93,7 +96,10 @@
     "node-sass": "^4.5.3",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.12",
+    "prop-types": "^15.6.1",
+    "react": "^15.0.0",
     "react-addons-test-utils": "^15.3.1",
+    "react-dom": "^15.0.0",
     "react-scroll": "^1.3.0",
     "remap-istanbul": "^0.9.5",
     "sass-loader": "^6.0.6",
@@ -116,7 +122,8 @@
     "lodash": "^4.15.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "prop-types": "^15.6.1",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
   }
 }

src/Circle.tsx

@@ -1,3 +1,4 @@
+import * as PropTypes from "prop-types";
 import * as React from "react";
 
 // declare an interface containing the required and potential
@@ -17,8 +18,8 @@ export interface CircleContext {
 // export the Circle React component from this module
 export class Circle extends React.Component<CircleProps, object> {
   // define the context types that are passed down from a <HEREMap> instance
-  public static contextTypes = {
-    map: React.PropTypes.object,
+  public static contextTypes: React.ValidationMap<{ map: any }> = {
+    map: PropTypes.object,
   };
 
   public static defaultProps = {

src/HEREMap.tsx

@@ -1,6 +1,6 @@
 import { debounce, uniqueId } from "lodash";
+import * as PropTypes from "prop-types";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 
 import HMapMethods from "./mixins/h-map-methods";
 import cache, { onAllLoad } from "./utils/cache";
@@ -37,8 +37,8 @@ export interface HEREMapChildContext {
 export class HEREMap
   extends React.Component<HEREMapProps, HEREMapState>
   implements React.ChildContextProvider<HEREMapChildContext> {
-  public static childContextTypes = {
-    map: React.PropTypes.object,
+  public static childContextTypes: React.ValidationMap<{ map: any }> = {
+    map: PropTypes.object,
   };
 
   // add typedefs for the HMapMethods mixin
@@ -51,6 +51,7 @@ export class HEREMap
   public state: HEREMapState = {};
 
   private debouncedResizeMap: any;
+  private hereMapEl: HTMLElement = null;
 
   constructor(props: HEREMapProps, context: object) {
     super(props, context);
@@ -90,10 +91,8 @@ export class HEREMap
         ppi: hidpi ? 320 : 72,
       });
 
-      const hereMapEl = ReactDOM.findDOMNode(this);
-
       const map = new H.Map(
-        hereMapEl.querySelector(".map-container"),
+        this.hereMapEl.querySelector(".map-container"),
         defaultLayers.normal.map,
         {
           center,
@@ -144,7 +143,7 @@ export class HEREMap
     const { children } = this.props;
 
     return (
-      <div>
+      <div ref={(el) => this.hereMapEl = el}>
         <div
           className="map-container"
           id={`map-container-${uniqueId()}`}

src/Marker.tsx

@@ -2,6 +2,7 @@
 // large numbers of markers of this type can be added to the map
 // very quickly and efficiently
 
+import * as PropTypes from "prop-types";
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server";
 
@@ -22,8 +23,8 @@ export interface MarkerContext {
 // export the Marker React component from this module
 export class Marker extends React.Component<MarkerProps, object> {
   // define the context types that are passed down from a <HEREMap> instance
-  public static contextTypes = {
-    map: React.PropTypes.object,
+  public static contextTypes: React.ValidationMap<{ map: any }> = {
+    map: PropTypes.object,
   };
 
   public context: MarkerContext;

tslint.json

@@ -2,8 +2,9 @@
   "extends": ["tslint:latest", "tslint-react"],
   "rules": {
     "interface-name": [true, "never-prefix"],
-    "ordered-imports": [true, { "named-imports-order": "lowercase-first" }],
+    "jsx-no-multiline-js": false,
+    "no-submodule-imports": [true, "react-dom/server"],
     "no-unused-variable": [true, "react"],
-    "jsx-no-multiline-js": false
+    "ordered-imports": [true, { "named-imports-order": "lowercase-first" }]
   }
 }