feat(ReactAsyncScriptGoogleMap): add "react-async-script" support

* Ref #92

package.json

@@ -81,7 +81,9 @@
   "dependencies": {
     "can-use-dom": "^0.1.0",
     "google-maps-infobox": "^1.1.13",
-    "invariant": "^2.1.1"
+    "invariant": "^2.1.1",
+    "react-async-script": "^0.4.0",
+    "warning": "^2.1.0"
   },
   "peerDependencies": {
     "react": "^0.14.0",

src/async/ReactAsyncScriptGoogleMap.js

@@ -0,0 +1,75 @@
+import {
+  default as React,
+  Component,
+  PropTypes,
+} from "react";
+
+import {
+  default as warning,
+} from "warning";
+
+import {
+  default as makeAsyncScript,
+} from "react-async-script";
+
+import {
+  GoogleMap,
+} from "../index";
+
+import {
+  default as makeUrl,
+} from "../utils/makeUrl";
+
+function createWrapperComponent (props) {
+  const {callbackName, globalName, ...urlObj} = props;
+
+  return makeAsyncScript(React.createClass({
+    render () {
+      if ("undefined" === typeof google || "undefined" === typeof google.maps || "undefined" === typeof google.maps.Map) {
+        return null;
+      } else {
+        return (
+          <GoogleMap {...this.props} />
+        );
+      }
+    }
+  }), makeUrl(urlObj), {
+    callbackName,
+    globalName,
+  });
+}
+
+export default class ReactAsyncScriptGoogleMap extends Component {
+  static propTypes = {
+    // PropTypes for URL generation
+    // https://nodejs.org/api/url.html#url_url_format_urlobj
+    protocol: PropTypes.string,
+    hostname: PropTypes.string.isRequired,
+    port: PropTypes.number,
+    pathname: PropTypes.string.isRequired,
+    query: PropTypes.object.isRequired,
+    // PropTypes pass to "react-async-script"
+    callbackName: PropTypes.string,
+    globalName: PropTypes.string,
+  }
+
+  state = {
+    wrapperComponent: createWrapperComponent(this.props)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const changedKeys = Object.keys(ReactAsyncScriptGoogleMap.propTypes)
+      .filter(key => this.props[key] !== nextProps[key]);
+
+    warning(0 === changedKeys.length, `ReactAsyncScriptGoogleMap doesn't support mutating props after initial render. Changed props: %s`, `[${ changedKeys.join(", ") }]`);
+  }
+
+  render () {
+    const {protocol, hostname, port, pathname, query, callbackName, globalName, ...restProps} = this.props;
+    const {wrapperComponent: WrapperComponent} = this.state;
+
+    return (
+      <WrapperComponent {...restProps} />
+    );
+  }
+}

src/utils/makeUrl.js

@@ -0,0 +1,13 @@
+import {
+  format as formatUrlObj,
+} from "url";
+
+export default function makeUrl (urlObj) {
+  return formatUrlObj({
+    protocol: urlObj.protocol,
+    hostname: urlObj.hostname,
+    port: urlObj.port,
+    pathname: urlObj.pathname,
+    query: urlObj.query,
+  });
+}