Tranform decorator to HOC component

Author: Cédric Delpoux

.babelrc

@@ -1,8 +1,11 @@
 {
-  "stage": 0,
-  "loose": ["es6.modules", "es6.classes"],
-  "blacklist": [
-    "es6.tailCall",
-    "spec.functionName"
-  ]
+  "presets": [
+    ["latest", {
+      "es2015": {
+        "loose": true,
+        "modules": false
+      }
+    }],
+    "react"
+  ],
 }

.eslintrc

@@ -26,28 +26,26 @@
     "consistent-this": [2, "self"],
     "curly": 0,
     "indent": [1, 2],
-    "quotes": [1, "single", "avoid-escape"],
     "no-multiple-empty-lines": [1, {"max": 1}],
     "no-self-compare": 2,
     "no-underscore-dangle": 0,
     "no-unused-vars": [2, {"vars": "all", "args": "none"}],
     "no-use-before-define": 0,
     "no-var": 2,
     "semi": [2, "never"],
-    "space-after-keywords": [1, "always"],
     "space-before-blocks": [1, "always"],
-    "space-before-function-parentheses": [1, "never"],
+    "space-before-function-paren": [1, "never"],
     "space-in-parens": [1, "never"],
-    "spaced-line-comment": [1, "always"],
+    "spaced-comment": [1, "always"],
     "strict": [2, "never"],
     "react/jsx-boolean-value": [1, "never"],
-    "react/jsx-quotes": [1, "double", "avoid-escape"],
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
+    "react/jsx-wrap-multilines": 1,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
     "react/react-in-jsx-scope": 2,
     "react/self-closing-comp": 1,
-    "react/wrap-multilines": 1
+    "quotes": [1, "double", "avoid-escape"]
   }
 }

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.0.0 - 2016-10-24
+
+* Add : `little-loader` lib to fetch Google Map API
+* Add : `query-string` lib to transform params to query string
+* Update : `package.json` : description, author, dependencies
+* Update : `.babelrc`
+* Update : `.eslintrc`
+* Update : `src/index.js`
+
 ## 1.0.1 - 2015-09-11
 
 * Add : libraryTarget into Webpack config

README.md

@@ -1,4 +1,4 @@
-# react-google-maps-loader ![npm](https://img.shields.io/npm/v/react-google-maps-loader.svg) ![license](https://img.shields.io/npm/l/react-google-maps-loader.svg) ![github-issues](https://img.shields.io/github/issues/cedricdelpoux/react-google-maps-loader.svg)
+# react-google-maps-loader ![npm](https://img.shields.io/npm/v/react-google-maps-loader.svg) ![license](https://img.shields.io/npm/l/react-google-maps-loader.svg) ![github-issues](https://img.shields.io/github/issues/xuopled/react-google-maps-loader.svg)
 
 React decorator to use google maps services into your react applications
 
@@ -26,25 +26,34 @@ CONST = GOOGLE_MAPS_API_KEY = 'myapikey' // Change your api key
 
 @googleMapsLoader({ key: GOOGLE_MAPS_API_KEY, libraries: ['places','geometry'] })
 export default class MyComponent extends Component {
-  state = {
-    map: null,
-  }
-
-  componentDidMount() {
-    const { googleMaps } = this.props
-    const map = new googleMaps.Map(React.findDOMNode(this.refs.map))
-
-    this.setState({ map })
-  }
-
-  method() {
-    const { googleMaps } = this.props
-
-    return (
-      <div ref="map"></div>
-    )
-  }
+    constructor() {
+        super()
+        this.state = {
+            map: null,
+            markers: new Map(),
+        }
+    }
+
+    componentDidMount() {
+        const {googleMaps} = this.props
+        const map = new googleMaps.Map(this.ref_map)
+
+        this.setState({map})
+    }
+
+    method() {
+        const {googleMaps} = this.props
+
+        return (
+          <div ref={ref => this.ref_map = ref} />
+        )
+    }
 }
+
+export default placesLoader(MyComponent, {
+  libraries: ["places", "geometry"],
+  key: GOOGLE_MAPS_API_KEY,
+})
 ```
 
 ## Development

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-google-maps-loader",
-  "version": "1.0.1",
-  "description": "React decorator to use google maps services into your react applications",
+  "version": "2.0.0",
+  "description": "React HOC to use google maps services into your react applications",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/xuopled/react-google-maps-loader.git"
@@ -14,7 +14,7 @@
     "loader",
     "decorator"
   ],
-  "author": "Cédric Delpoux <cedric.delpoux@gmail.com>",
+  "author": "Cédric Delpoux <xuopled@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/xuopled/react-google-maps-loader/issues"
@@ -25,19 +25,22 @@
     "lib"
   ],
   "dependencies": {
-    "react": "^0.13.1",
-    "scriptjs": "^2.5.7"
+    "little-loader": "~0.1.0"
+  },
+  "peerDependencies": {
+    "react": "~15.3.0"
   },
   "devDependencies": {
-    "babel": "~5.6.14",
-    "babel-core": "~5.6.15",
-    "babel-eslint": "~3.1.20",
-    "babel-loader": "~5.1.4",
-    "eslint": "~0.21.2",
-    "eslint-loader": "~0.14.0",
-    "eslint-plugin-react": "~2.6.4",
+    "babel-core": "~6.14.0",
+    "babel-eslint": "~6.1.0",
+    "babel-loader": "~6.2.4",
+    "babel-preset-latest": "~6.14.0",
+    "babel-preset-react": "^6.16.0",
+    "eslint": "~3.5.0",
+    "eslint-loader": "~1.5.0",
+    "eslint-plugin-react": "~6.2.0",
     "node-libs-browser": "~0.5.2",
-    "webpack": "~1.10.1"
+    "webpack": "~1.13.1"
   },
   "scripts": {
     "clean": "rm -rf lib",

src/index.js

@@ -1,46 +1,64 @@
-/* global google */
+import React, {Component} from "react"
+import load from "little-loader"
+import qs from "query-string"
 
-import React, { Component } from 'react'
-import scriptjs from 'scriptjs'
+const GOOGLE_MAP_PLACES_API = "https://maps.googleapis.com/maps/api/js"
+const NOT_LOADED = 0
+const LOADING = 1
+const LOADED = 2
 
-export default (options = {}) => (TargetComponent) => (
-  class extends Component {
-    state = {
-      googleMaps: null,
-    }
+const queue = []
+let state = NOT_LOADED
+let sdk
+
+function useGoogleMapSdk(params, callback) {
+  if (state === LOADED) {
+    callback(sdk)
+  } else if (state === LOADING) {
+    queue.push(callback)
+  } else if (window.google != null && window.google.maps != null) {
+    state = LOADED
+    sdk = window.google.maps
+    callback(sdk)
+  } else {
+    state = LOADING
+    queue.push(callback)
+
+    load(`${GOOGLE_MAP_PLACES_API}?${qs.stringify(params)}`, (err) => {
+      if (err) {
+        throw new Error("Unable to load Google Map SDK")
+      }
+
+      state = LOADED
+      sdk = window.google.maps
 
-    componentDidMount() {
-      if (typeof window.google === 'undefined') {
-        window.googleMapsLoaded = () => {
-          scriptjs.done('google-maps-places')
-        }
-
-        options.callback = 'googleMapsLoaded'
-
-        const queryString = Object.keys(options).reduce((result, key) => (
-          options[key] !== null && options[key] !== undefined
-            ? (result += key + '=' + options[key] + '&')
-            : result
-        ), '?').slice(0, -1)
-
-        scriptjs('https://maps.googleapis.com/maps/api/js' + queryString)
-        scriptjs.ready('google-maps-places', () => {
-          this.handleLoaded(google.maps)
-        })
-      } else {
-        this.handleLoaded(google.maps)
+      while (queue.length > 0) {
+        queue.pop()(sdk)
+      }
+    })
+  }
+}
+
+const GoogleMapsLoader = (TargetComponent, params) => (
+  class extends Component {
+    constructor() {
+      super()
+      this.state = {
+        googleMaps: null,
       }
     }
 
-    handleLoaded(googleMaps) {
-      this.setState({ googleMaps })
+    componentWillMount() {
+      useGoogleMapSdk(params, googleMaps => this.setState({googleMaps}))
     }
 
     render() {
-      const { googleMaps } = this.state
+      const {googleMaps} = this.state
       return googleMaps
         ? <TargetComponent googleMaps={googleMaps} {...this.props} />
         : null
     }
   }
 )
+
+export default GoogleMapsLoader

webpack.config.js

@@ -18,10 +18,24 @@ module.exports = {
   },
   module: {
     preLoaders: [
-      { test: /\.js?$/, include: sources, loader: 'eslint' },
+      {
+        test: /\.js?$/,
+        include: sources,
+        loader: 'eslint',
+        query: {
+          presets: ['latest']
+        },
+      },
     ],
     loaders: [
-      { test: /\.js$/, include: sources, loader: 'babel' },
+      {
+        test: /\.js$/,
+        include: sources,
+        loader: 'babel',
+        query: {
+          presets: ['latest']
+        },
+      },
     ],
   },
  externals: {