Merge pull request #749 from casesandberg/lodash-lib-es

Use lodash-es in esm and lodash in commonjs

.babelrc

@@ -1,16 +1,6 @@
 {
-  "env": {
-    "test": {
-      "presets": ["es2015", "stage-0", "react"]
-    }
-  },
   "presets": [
-    [
-      "es2015",
-      {
-        "modules": false
-      }
-    ],
+    "es2015",
     "stage-0",
     "react"
   ]

.gitignore

@@ -5,3 +5,4 @@ package-lock.json
 
 lib
 es
+.babelrc_backup

package.json

@@ -17,8 +17,8 @@
     "test": "npm run jest && npm run eslint",
     "jest": "jest",
     "eslint": "eslint src/**/*.js",
-    "lib": "npm run clean-lib && babel --no-babelrc --presets=es2015,stage-0,react src -d lib",
-    "es": "npm run clean-es && babel src -d es",
+    "lib": "npm run clean-lib && babel src -d lib",
+    "es": "npm run clean-es && node scripts/use-module-babelrc.js && babel src -d es && node scripts/restore-original-babelrc.js",
     "clean-lib": "rm -rf lib && mkdir lib",
     "clean-es": "rm -rf es && mkdir es",
     "prepublish": "npm run lib && npm run es",
@@ -44,6 +44,7 @@
   ],
   "dependencies": {
     "@icons/material": "^0.2.4",
+    "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
     "material-colors": "^1.2.1",
     "prop-types": "^15.5.10",
@@ -63,6 +64,7 @@
     "babel-core": "^6.10.4",
     "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.1",
+    "babel-plugin-transform-rename-import": "^2.3.0",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
@@ -105,10 +107,7 @@
   ],
   "jest": {
     "rootDir": "src",
-    "testRegex": "spec.js$",
-    "transformIgnorePatterns": [
-      "/!node_modules\\/lodash-es/"
-    ]
+    "testRegex": "spec.js$"
   },
   "eslintConfig": {
     "extends": "@case",

scripts/restore-original-babelrc.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const path = require('path')
+
+const babelRCBackup = fs
+  .readFileSync(path.join(__dirname, '../.babelrc_backup'))
+  .toString()
+
+fs.writeFileSync(
+  path.join(__dirname, '../.babelrc'),
+  babelRCBackup
+)

scripts/use-module-babelrc.js

@@ -0,0 +1,27 @@
+const fs = require('fs')
+const path = require('path')
+
+const originalBabelRC = fs
+  .readFileSync(path.join(__dirname, '../.babelrc'))
+  .toString()
+
+fs.writeFileSync(path.join(__dirname, '../.babelrc_backup'), originalBabelRC)
+
+const esBabelRC = {
+  presets: [
+    ['es2015', { modules: false }],
+    'stage-0',
+    'react',
+  ],
+  plugins: [
+    [
+      'transform-rename-import',
+      {
+        'original': 'lodash',
+        'replacement': 'lodash-es',
+      },
+    ],
+  ],
+}
+
+fs.writeFileSync(path.join(__dirname, '../.babelrc'), JSON.stringify(esBabelRC))

src/components/block/Block.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 import color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Checkboard } from '../common'

src/components/block/BlockSwatches.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import { map } from 'lodash-es'
+import map from 'lodash/map'
 
 import { Swatch } from '../common'
 

src/components/chrome/Chrome.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common'
 import ChromeFields from './ChromeFields'

src/components/chrome/ChromeFields.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import reactCSS from 'reactcss'
 import color from '../../helpers/color'
-import { isUndefined } from 'lodash-es'
+import isUndefined from 'lodash/isUndefined'
 
 import { EditableInput } from '../common'
 import UnfoldMoreHorizontalIcon from '@icons/material/UnfoldMoreHorizontalIcon'

src/components/circle/Circle.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { map, merge } from 'lodash-es'
+import map from 'lodash/map'
+import merge from 'lodash/merge'
 import * as material from 'material-colors'
 
 import { ColorWrap } from '../common'

src/components/common/ColorWrap.js

@@ -1,5 +1,5 @@
 import React, { Component, PureComponent } from 'react'
-import { debounce } from 'lodash-es'
+import debounce from 'lodash/debounce'
 import color from '../../helpers/color'
 
 export const ColorWrap = (Picker) => {

src/components/common/Raised.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 export const Raised = ({ zDepth, radius, background, children,
   styles: passedStyles = {} }) => {

src/components/common/Saturation.js

@@ -1,6 +1,6 @@
 import React, { Component, PureComponent } from 'react'
 import reactCSS from 'reactcss'
-import { throttle } from 'lodash-es'
+import throttle from 'lodash/throttle'
 import * as saturation from '../../helpers/saturation'
 
 export class Saturation extends (PureComponent || Component) {

src/components/compact/Compact.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { map, merge } from 'lodash-es'
+import map from 'lodash/map'
+import merge from 'lodash/merge'
 import color from '../../helpers/color'
 
 import { ColorWrap, Raised } from '../common'

src/components/github/Github.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { map, merge } from 'lodash-es'
+import map from 'lodash/map'
+import merge from 'lodash/merge'
 
 import { ColorWrap } from '../common'
 import GithubSwatch from './GithubSwatch'

src/components/hue/Hue.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 import { ColorWrap, Hue } from '../common'
 import HuePointer from './HuePointer'

src/components/material/Material.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 import color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Raised } from '../common'

src/components/photoshop/Photoshop.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 import { ColorWrap, Saturation, Hue } from '../common'
 import PhotoshopFields from './PhotoshopFields'

src/components/sketch/Sketch.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common'
 import SketchFields from './SketchFields'

src/components/slider/Slider.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { merge } from 'lodash-es'
+import merge from 'lodash/merge'
 
 import { ColorWrap, Hue } from '../common'
 import SliderSwatches from './SliderSwatches'

src/components/swatches/Swatches.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { map, merge } from 'lodash-es'
+import map from 'lodash/map'
+import merge from 'lodash/merge'
 import * as material from 'material-colors'
 
 import { ColorWrap, Raised } from '../common'

src/components/swatches/SwatchesGroup.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import { map } from 'lodash-es'
+import map from 'lodash/map'
 
 import SwatchesColor from './SwatchesColor'
 

src/components/twitter/Twitter.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
-import { map, merge } from 'lodash-es'
+import map from 'lodash/map'
+import merge from 'lodash/merge'
 import color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Swatch } from '../common'

src/helpers/color.js

@@ -1,4 +1,4 @@
-import { each } from 'lodash-es'
+import each from 'lodash/each'
 import tinycolor from 'tinycolor2'
 
 export const simpleCheckForValidColor = (data) => {