Fix recompose (google-map-react#547)

* Create our own createHelper, its not in recompose anymore

* Use our withStateSelector

* Proper apiKey usage

* Replace apiKey with bootstrapUrlKeys

* No need of true value in html

* Use lodash.omit instead in dev

* Remove unused file

* Remove unnecessary extra folder utils

* Upgrade recompose again

* Oops! Move lodash.omit to devDependencies

* Fix webpack files styles

* Make examples bigger in width

Author: itsmichaeldiego

develop/GMap.js

@@ -33,16 +33,18 @@ export const gMap = (
   }
 ) => (
   <GoogleMapReact
-    draggable={draggable}
+    bootstrapURLKeys={{
+      key: 'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps',
+    }}
     style={style}
     options={options}
+    draggable={draggable}
     hoverDistance={hoverDistance}
-    center={center}
     zoom={zoom}
+    center={center}
     onChange={onChange}
     onChildMouseEnter={onChildMouseEnter}
     onChildMouseLeave={onChildMouseLeave}
-    heatmapLibrary
   >
     {markers}
   </GoogleMapReact>

develop/GMapHeatmap.js

@@ -33,17 +33,20 @@ export const gMapHeatmap = (
   }
 ) => (
   <GoogleMapReact
-    draggable={draggable}
+    bootstrapURLKeys={{
+      key: 'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps',
+    }}
     style={style}
     options={options}
+    draggable={draggable}
     hoverDistance={hoverDistance}
-    center={center}
     zoom={zoom}
+    center={center}
     onChange={onChange}
     onChildMouseEnter={onChildMouseEnter}
     onChildMouseLeave={onChildMouseLeave}
-    heatmapLibrary
     heatmap={heatmapData}
+    heatmapLibrary
   >
     {markers}
   </GoogleMapReact>

develop/GMapLayers.js

@@ -33,21 +33,23 @@ export const gMap = (
   }
 ) => (
   <GoogleMapReact
-    draggable={draggable}
+    bootstrapURLKeys={{
+      key: 'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps',
+    }}
     style={style}
     options={options}
+    draggable={draggable}
     hoverDistance={hoverDistance}
-    center={center}
     zoom={zoom}
+    center={center}
+    onChange={onChange}
+    onChildMouseEnter={onChildMouseEnter}
+    onChildMouseLeave={onChildMouseLeave}
     layerTypes={
       zoom > 12
         ? []
         : zoom > 10 ? ['TrafficLayer'] : ['TrafficLayer', 'TransitLayer']
     }
-    onChange={onChange}
-    onChildMouseEnter={onChildMouseEnter}
-    onChildMouseLeave={onChildMouseLeave}
-    heatmapLibrary
   >
     {markers}
   </GoogleMapReact>

develop/GMapOptim.js

@@ -39,17 +39,19 @@ export const gMap = (
   }
 ) => (
   <GoogleMapReact
+    bootstrapURLKeys={{
+      key: 'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps',
+    }}
     style={style}
     options={options}
+    draggable={draggable}
     hoverDistance={hoverDistance}
-    center={center}
     zoom={zoom}
+    center={center}
     onChange={onChange}
     onChildMouseEnter={onChildMouseEnter}
     onChildMouseLeave={onChildMouseLeave}
-    draggable={draggable}
     experimental
-    heatmapLibrary
   >
     {markers}
   </GoogleMapReact>

develop/GMapResizable.js

@@ -18,6 +18,7 @@ import GoogleMapReact from '../src';
 import SimpleMarker from './markers/SimpleMarker';
 
 import ptInBounds from './utils/ptInBounds';
+import withStateSelector from './utils/withStateSelector';
 
 export const gMapResizable = (
   {
@@ -33,18 +34,19 @@ export const gMapResizable = (
   }
 ) => (
   <GoogleMapReact
-    draggable={draggable}
+    bootstrapURLKeys={{
+      key: 'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps',
+    }}
     style={style}
     options={options}
+    draggable={draggable}
     hoverDistance={hoverDistance}
-    center={center}
     zoom={zoom}
+    center={center}
     onChange={onChange}
     onChildMouseEnter={onChildMouseEnter}
     onChildMouseLeave={onChildMouseLeave}
-    resetBoundsOnResize={true}
-    apiKey={'AIzaSyC-BebC7ChnHPzxQm7DAHYFMCqR5H3Jlps'}
-    heatmapLibrary={true}
+    resetBoundsOnResize
   >
     {markers}
   </GoogleMapReact>

develop/Layout.sass

@@ -3,7 +3,7 @@
   min-height: 90vh
   flex-direction: column
   margin: 0 1px 0 1px
-  width: 100vh
+  width: 100vw
 .header
   height: 2em
   background-color: #004336

develop/utils/utils/createEagerElementUtil.js develop/utils/createEagerElementUtil.js

@@ -1,4 +1,4 @@
-import createEagerElementUtil from './utils/createEagerElementUtil';
+import createEagerElementUtil from './createEagerElementUtil';
 import isReferentiallyTransparentFunctionComponent
   from './isReferentiallyTransparentFunctionComponent';
 

develop/utils/createEagerFactory.js

@@ -0,0 +1,29 @@
+import { wrapDisplayName } from 'recompose';
+
+const createHelper = (
+  func,
+  helperName,
+  setDisplayName = true,
+  noArgs = false
+) => {
+  if (process.env.NODE_ENV !== 'production' && setDisplayName) {
+    if (noArgs) {
+      return BaseComponent => {
+        const Component = func(BaseComponent);
+        Component.displayName = wrapDisplayName(BaseComponent, helperName);
+        return Component;
+      };
+    }
+
+    return (...args) =>
+      BaseComponent => {
+        const Component = func(...args)(BaseComponent);
+        Component.displayName = wrapDisplayName(BaseComponent, helperName);
+        return Component;
+      };
+  }
+
+  return func;
+};
+
+export default createHelper;

develop/utils/createHelper.js

@@ -1,9 +1,11 @@
 import { Component } from 'react';
-import createHelper from 'recompose/createHelper';
+import omit from 'lodash.omit';
+
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/distinctUntilChanged';
+
+import createHelper from './createHelper';
 import createEagerFactory from './createEagerFactory';
-import omit from './omit';
 
 const prop2Stream = (propName, comparator = (a, b) => a === b) =>
   BaseComponent => {

develop/utils/omit.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import createHelper from 'recompose/createHelper';
+import createHelper from './createHelper';
 import createEagerFactory from './createEagerFactory';
 
 // if stream prop will change this will fail,

develop/utils/pick.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import createHelper from 'recompose/createHelper';
+import createHelper from './createHelper';
 import createEagerFactory from './createEagerFactory';
 
 const withStateSelector = (stateName, stateUpdaterName, selectorFactory) =>

develop/utils/props2Stream.js

@@ -78,6 +78,7 @@
     "jsdom": "^6.5.1",
     "kotatsu": "^0.14.0",
     "lint-staged": "^3.4.0",
+    "lodash.omit": "^4.5.0",
     "mocha": "^2.3.3",
     "node-sass": "^3.7.0",
     "normalize.css": "^4.1.1",

develop/utils/stream2Props.js

@@ -1,31 +1,27 @@
-var webpack = require('webpack');
-
-var reactExternal = {
+const reactExternal = {
   root: 'React',
   commonjs2: 'react',
   commonjs: 'react',
-  amd: 'react'
+  amd: 'react',
 };
 
-var reactDomExternal = {
+const reactDomExternal = {
   root: 'ReactDOM',
   commonjs2: 'react-dom',
   commonjs: 'react-dom',
-  amd: 'react-dom'
+  amd: 'react-dom',
 };
 
 module.exports = {
   output: {
     library: 'GoogleMapReact',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
   },
   externals: {
-    'react': reactExternal,
+    react: reactExternal,
     'react-dom': reactDomExternal,
   },
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
-    ]
+    loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' }],
   },
 };

develop/utils/withStateSelector.js

@@ -1,12 +1,12 @@
-var webpack = require('webpack');
-var baseConfig = require('./webpack.config.base');
+const webpack = require('webpack');
+const baseConfig = require('./webpack.config.base');
 
-var config = Object.create(baseConfig);
+const config = Object.create(baseConfig);
 config.plugins = [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('development')
-  })
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  }),
 ];
 
 module.exports = config;

package.json

@@ -1,19 +1,18 @@
-/* eslint-disable */
-var webpack = require('webpack');
-var baseConfig = require('./webpack.config.base');
+const webpack = require('webpack');
+const baseConfig = require('./webpack.config.base');
 
-var config = Object.create(baseConfig);
+const config = Object.create(baseConfig);
 config.plugins = [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('production')
+    'process.env.NODE_ENV': JSON.stringify('production'),
   }),
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       screw_ie8: true,
-      warnings: false
-    }
-  })
+      warnings: false,
+    },
+  }),
 ];
 
 module.exports = config;

webpack.config.base.js

@@ -3431,6 +3431,10 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+
 lodash.pickby@^4.0.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
@@ -5375,8 +5379,8 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
 ua-parser-js@^0.7.9:
-  version "0.7.14"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
+  version "0.7.17"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
 uglify-js@~2.7.3:
   version "2.7.5"