From 91d57909bf1de15f8f41e89d71a21da823cca0ab Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Sun, 11 Oct 2015 16:33:16 +0800
Subject: [PATCH] feat(src): move instance creation in componentWillMount

* saves extra render step compared with componentDidMount
* use ExecutionEnvironment to check canUseDOM
* depends on fbjs@^0.3.1
---
 package.json              | 1 +
 src/Circle.js             | 9 ++++++++-
 src/DirectionsRenderer.js | 9 ++++++++-
 src/DrawingManager.js     | 9 ++++++++-
 src/InfoWindow.js         | 9 ++++++++-
 src/Marker.js             | 9 ++++++++-
 src/OverlayView.js        | 9 ++++++++-
 src/Polygon.js            | 9 ++++++++-
 src/Polyline.js           | 9 ++++++++-
 src/Rectangle.js          | 9 ++++++++-
 src/SearchBox.js          | 9 ++++++++-
 src/_Skeleton.js          | 9 ++++++++-
 src/addons/InfoBox.js     | 9 ++++++++-
 13 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 395f4e5b..a2a048c6 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "tomchentw-npm-dev": "^3.1.0"
   },
   "dependencies": {
+    "fbjs": "^0.3.1",
     "google-maps-infobox": "^1.1.13",
     "invariant": "^2.1.1"
   },
diff --git a/src/Circle.js b/src/Circle.js
index 08941242..d58b8cc3 100644
--- a/src/Circle.js
+++ b/src/Circle.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as CircleCreator,
   circleDefaultPropTypes,
@@ -45,7 +49,10 @@ export default class Circle extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...circleProps} = this.props;
     const circle = CircleCreator._createCircle(mapHolderRef, circleProps);
 
diff --git a/src/DirectionsRenderer.js b/src/DirectionsRenderer.js
index cb3f0007..29866402 100644
--- a/src/DirectionsRenderer.js
+++ b/src/DirectionsRenderer.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as DirectionsRendererCreator,
   directionsRendererDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class DirectionsRenderer extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...directionsRendererProps} = this.props;
     const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(mapHolderRef, directionsRendererProps);
 
diff --git a/src/DrawingManager.js b/src/DrawingManager.js
index 6545edfe..620f7a9f 100644
--- a/src/DrawingManager.js
+++ b/src/DrawingManager.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as DrawingManagerCreator,
   drawingManagerDefaultPropTypes,
@@ -37,7 +41,10 @@ export default class DrawingManager extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...drawingManagerProps} = this.props;
     const drawingManager = DrawingManagerCreator._createDrawingManager(mapHolderRef, drawingManagerProps);
 
diff --git a/src/InfoWindow.js b/src/InfoWindow.js
index a5c4006d..d1fb3ed3 100644
--- a/src/InfoWindow.js
+++ b/src/InfoWindow.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as InfoWindowCreator,
   infoWindowDefaultPropTypes,
@@ -37,7 +41,10 @@ export default class InfoWindow extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, anchorHolderRef, ...infoWindowProps} = this.props;
     const infoWindow = InfoWindowCreator._createInfoWindow(mapHolderRef, infoWindowProps, anchorHolderRef);
 
diff --git a/src/Marker.js b/src/Marker.js
index 3481f524..5b7148bc 100644
--- a/src/Marker.js
+++ b/src/Marker.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as MarkerCreator,
   markerDefaultPropTypes,
@@ -59,7 +63,10 @@ export default class Marker extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...markerProps} = this.props;
     const marker = MarkerCreator._createMarker(mapHolderRef, markerProps);
 
diff --git a/src/OverlayView.js b/src/OverlayView.js
index 29939fd8..4e6c9320 100644
--- a/src/OverlayView.js
+++ b/src/OverlayView.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as OverlayViewCreator,
   overlayViewDefaultPropTypes,
@@ -47,7 +51,10 @@ export default class OverlayView extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...overlayViewProps} = this.props;
     const overlayView = OverlayViewCreator._createOverlayView(mapHolderRef, overlayViewProps);
 
diff --git a/src/Polygon.js b/src/Polygon.js
index d7521a34..4fba4361 100644
--- a/src/Polygon.js
+++ b/src/Polygon.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as PolygonCreator,
   polygonDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class Polygon extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...polygonProps} = this.props;
     const polygon = PolygonCreator._createPolygon(mapHolderRef, polygonProps);
 
diff --git a/src/Polyline.js b/src/Polyline.js
index 7900ab91..3e3a5ff5 100644
--- a/src/Polyline.js
+++ b/src/Polyline.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as PolylineCreator,
   polylineDefaultPropTypes,
@@ -39,7 +43,10 @@ export default class Polyline extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...polylineProps} = this.props;
     const polyline = PolylineCreator._createPolyline(mapHolderRef, polylineProps);
 
diff --git a/src/Rectangle.js b/src/Rectangle.js
index 8a1c2bba..3193dfbe 100644
--- a/src/Rectangle.js
+++ b/src/Rectangle.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as RectangleCreator,
   rectangleDefaultPropTypes,
@@ -43,7 +47,10 @@ export default class Rectangle extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...rectangleProps} = this.props;
     const rectangle = RectangleCreator._createRectangle(mapHolderRef, rectangleProps);
 
diff --git a/src/SearchBox.js b/src/SearchBox.js
index 96343d9d..bf34ce96 100644
--- a/src/SearchBox.js
+++ b/src/SearchBox.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as SearchBoxCreator,
   searchBoxDefaultPropTypes,
@@ -38,7 +42,10 @@ export default class SearchBox extends Component {
 
   state = {}
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, classes, style, ...searchBoxProps} = this.props;
 
     // Cannot create input via component - Google Maps will mess with React's internal state by detaching/attaching.
diff --git a/src/_Skeleton.js b/src/_Skeleton.js
index 33b3c4f0..eb9a6ac9 100644
--- a/src/_Skeleton.js
+++ b/src/_Skeleton.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as SkeletonCreator,
   skeletonDefaultPropTypes,
@@ -33,7 +37,10 @@ export default class Skeleton extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...skeletonProps} = this.props;
     const skeleton = SkeletonCreator._createSkeleton(mapHolderRef, skeletonProps);
 
diff --git a/src/addons/InfoBox.js b/src/addons/InfoBox.js
index d045a8da..c7ac34ff 100644
--- a/src/addons/InfoBox.js
+++ b/src/addons/InfoBox.js
@@ -3,6 +3,10 @@ import {
   Component,
 } from "react";
 
+import {
+  canUseDOM,
+} from "fbjs/lib/ExecutionEnvironment";
+
 import {
   default as InfoBoxCreator,
   infoBoxDefaultPropTypes,
@@ -41,7 +45,10 @@ export default class InfoBox extends Component {
   state = {
   }
 
-  componentDidMount () {
+  componentWillMount () {
+    if (!canUseDOM) {
+      return;
+    }
     const {mapHolderRef, ...infoBoxProps} = this.props;
     const infoBox = InfoBoxCreator._createInfoBox(mapHolderRef, infoBoxProps);