From 741c519392cb9f37f7d1515c40c2f1708ce2f618 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Nov 2016 16:32:20 -0600 Subject: [PATCH 1/5] Add lint rule to forbid importing from root lodash package --- .eslintrc.js | 3 +++ package.json | 1 + 2 files changed, 4 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index f76b8d6..97cb9a4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -219,9 +219,12 @@ module.exports = { 'react/jsx-uses-react' : 'error', 'react/jsx-uses-vars' : 'error', 'react/jsx-wrap-multilines' : 'error', + // Custom rules + 'wpcalypso/no-lodash-import' : 'error', }, plugins : [ 'react', + 'eslint-plugin-wpcalypso', ], settings : { react : { diff --git a/package.json b/package.json index d9b0080..e3e009e 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "deep-freeze": "0.0.1", "eslint": "^3.9.1", "eslint-plugin-react": "^6.6.0", + "eslint-plugin-wpcalypso": "^2.0.0", "react-scripts": "0.6.1", "surge": "^0.18.0" }, From 8dcc1f65adeef4ae12fbc7222b194e71015fc143 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Nov 2016 16:44:55 -0600 Subject: [PATCH 2/5] Move away from lodash root imports (build: 513 kB -> 450 kB) --- src/api/tests/com.test.js | 2 +- src/components/endpoint-selector/index.js | 4 +++- src/components/lookup-container/index.js | 2 +- src/components/param-tooltip/index.js | 2 +- src/components/results/utils.js | 6 +++++- src/lib/redux/cache.js | 2 +- src/state/endpoints/selectors.js | 2 +- src/state/history/selectors.js | 2 +- src/state/request/selectors.js | 3 ++- src/state/results/selectors.js | 2 +- src/state/security/selectors.js | 2 +- 11 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/api/tests/com.test.js b/src/api/tests/com.test.js index 59aaf4b..d0d3d99 100644 --- a/src/api/tests/com.test.js +++ b/src/api/tests/com.test.js @@ -1,4 +1,4 @@ -import { clone } from 'lodash'; +import clone from 'lodash/clone'; import { api } from '../com'; diff --git a/src/components/endpoint-selector/index.js b/src/components/endpoint-selector/index.js index e8a1b39..6ea90e0 100644 --- a/src/components/endpoint-selector/index.js +++ b/src/components/endpoint-selector/index.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { groupBy, sortBy, noop } from 'lodash'; +import groupBy from 'lodash/groupBy'; +import sortBy from 'lodash/sortBy'; +import noop from 'lodash/noop'; import './style.css'; diff --git a/src/components/lookup-container/index.js b/src/components/lookup-container/index.js index 1637ccb..41ead64 100644 --- a/src/components/lookup-container/index.js +++ b/src/components/lookup-container/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { get } from 'lodash'; +import get from 'lodash/get'; import ClickOutside from 'react-click-outside'; import './style.css'; diff --git a/src/components/param-tooltip/index.js b/src/components/param-tooltip/index.js index bc136f6..fb636a4 100644 --- a/src/components/param-tooltip/index.js +++ b/src/components/param-tooltip/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactTooltip from 'react-tooltip'; -import { isPlainObject } from 'lodash'; +import isPlainObject from 'lodash/isPlainObject'; import './style.css'; diff --git a/src/components/results/utils.js b/src/components/results/utils.js index 667d8a5..1d8555f 100644 --- a/src/components/results/utils.js +++ b/src/components/results/utils.js @@ -1,4 +1,8 @@ -import { isArray, isPlainObject, isString, toPairs, toString } from 'lodash'; +import isArray from 'lodash/isArray'; +import isPlainObject from 'lodash/isPlainObject'; +import isString from 'lodash/isString'; +import toPairs from 'lodash/toPairs'; +import toString from 'lodash/toString'; const MAX_LENGTH = 60; diff --git a/src/lib/redux/cache.js b/src/lib/redux/cache.js index 2bce0d0..7d7e150 100644 --- a/src/lib/redux/cache.js +++ b/src/lib/redux/cache.js @@ -1,4 +1,4 @@ -import { throttle } from 'lodash'; +import throttle from 'lodash/throttle'; import { SERIALIZE, DESERIALIZE } from './action-types'; diff --git a/src/state/endpoints/selectors.js b/src/state/endpoints/selectors.js index 5f2cccc..e2cd5e3 100644 --- a/src/state/endpoints/selectors.js +++ b/src/state/endpoints/selectors.js @@ -1,4 +1,4 @@ -import { get } from 'lodash'; +import get from 'lodash/get'; export const getEndpoints = ( state, apiName, version ) => get( state.endpoints, [ apiName, version ], [] ) diff --git a/src/state/history/selectors.js b/src/state/history/selectors.js index 18f7c77..43379ec 100644 --- a/src/state/history/selectors.js +++ b/src/state/history/selectors.js @@ -1,4 +1,4 @@ -import { get } from 'lodash'; +import get from 'lodash/get'; export const getRecentEndpoints = ( state, apiName, version ) => get( state.history, [ apiName, version ], [] ) diff --git a/src/state/request/selectors.js b/src/state/request/selectors.js index 68a9a0c..d93c1a4 100644 --- a/src/state/request/selectors.js +++ b/src/state/request/selectors.js @@ -1,4 +1,5 @@ -import { compact, isArray } from 'lodash'; +import compact from 'lodash/compact'; +import isArray from 'lodash/isArray'; export const getSelectedEndpoint = state => state.request.endpoint; diff --git a/src/state/results/selectors.js b/src/state/results/selectors.js index e45f615..0034f8f 100644 --- a/src/state/results/selectors.js +++ b/src/state/results/selectors.js @@ -1,4 +1,4 @@ -import { values } from 'lodash'; +import values from 'lodash/values'; export const getResults = state => values( state.results ).sort( ( a, b ) => b.id - a.id ); diff --git a/src/state/security/selectors.js b/src/state/security/selectors.js index c765dc2..bffc6ba 100644 --- a/src/state/security/selectors.js +++ b/src/state/security/selectors.js @@ -1,4 +1,4 @@ -import { get } from 'lodash'; +import get from 'lodash/get'; export const isReady = ( state, apiName ) => get( state.security, [ apiName, 'ready' ], false ); From 57a32f7693faf3d7077b20d9c0ea75b9bb9bc462 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Nov 2016 17:06:57 -0600 Subject: [PATCH 3/5] Revert "Move away from lodash root imports (build: 513 kB -> 450 kB)" This reverts commit 8dcc1f65adeef4ae12fbc7222b194e71015fc143. --- src/api/tests/com.test.js | 2 +- src/components/endpoint-selector/index.js | 4 +--- src/components/lookup-container/index.js | 2 +- src/components/param-tooltip/index.js | 2 +- src/components/results/utils.js | 6 +----- src/lib/redux/cache.js | 2 +- src/state/endpoints/selectors.js | 2 +- src/state/history/selectors.js | 2 +- src/state/request/selectors.js | 3 +-- src/state/results/selectors.js | 2 +- src/state/security/selectors.js | 2 +- 11 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/api/tests/com.test.js b/src/api/tests/com.test.js index d0d3d99..59aaf4b 100644 --- a/src/api/tests/com.test.js +++ b/src/api/tests/com.test.js @@ -1,4 +1,4 @@ -import clone from 'lodash/clone'; +import { clone } from 'lodash'; import { api } from '../com'; diff --git a/src/components/endpoint-selector/index.js b/src/components/endpoint-selector/index.js index 6ea90e0..e8a1b39 100644 --- a/src/components/endpoint-selector/index.js +++ b/src/components/endpoint-selector/index.js @@ -1,8 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import groupBy from 'lodash/groupBy'; -import sortBy from 'lodash/sortBy'; -import noop from 'lodash/noop'; +import { groupBy, sortBy, noop } from 'lodash'; import './style.css'; diff --git a/src/components/lookup-container/index.js b/src/components/lookup-container/index.js index 41ead64..1637ccb 100644 --- a/src/components/lookup-container/index.js +++ b/src/components/lookup-container/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import get from 'lodash/get'; +import { get } from 'lodash'; import ClickOutside from 'react-click-outside'; import './style.css'; diff --git a/src/components/param-tooltip/index.js b/src/components/param-tooltip/index.js index fb636a4..bc136f6 100644 --- a/src/components/param-tooltip/index.js +++ b/src/components/param-tooltip/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactTooltip from 'react-tooltip'; -import isPlainObject from 'lodash/isPlainObject'; +import { isPlainObject } from 'lodash'; import './style.css'; diff --git a/src/components/results/utils.js b/src/components/results/utils.js index 1d8555f..667d8a5 100644 --- a/src/components/results/utils.js +++ b/src/components/results/utils.js @@ -1,8 +1,4 @@ -import isArray from 'lodash/isArray'; -import isPlainObject from 'lodash/isPlainObject'; -import isString from 'lodash/isString'; -import toPairs from 'lodash/toPairs'; -import toString from 'lodash/toString'; +import { isArray, isPlainObject, isString, toPairs, toString } from 'lodash'; const MAX_LENGTH = 60; diff --git a/src/lib/redux/cache.js b/src/lib/redux/cache.js index 7d7e150..2bce0d0 100644 --- a/src/lib/redux/cache.js +++ b/src/lib/redux/cache.js @@ -1,4 +1,4 @@ -import throttle from 'lodash/throttle'; +import { throttle } from 'lodash'; import { SERIALIZE, DESERIALIZE } from './action-types'; diff --git a/src/state/endpoints/selectors.js b/src/state/endpoints/selectors.js index e2cd5e3..5f2cccc 100644 --- a/src/state/endpoints/selectors.js +++ b/src/state/endpoints/selectors.js @@ -1,4 +1,4 @@ -import get from 'lodash/get'; +import { get } from 'lodash'; export const getEndpoints = ( state, apiName, version ) => get( state.endpoints, [ apiName, version ], [] ) diff --git a/src/state/history/selectors.js b/src/state/history/selectors.js index 43379ec..18f7c77 100644 --- a/src/state/history/selectors.js +++ b/src/state/history/selectors.js @@ -1,4 +1,4 @@ -import get from 'lodash/get'; +import { get } from 'lodash'; export const getRecentEndpoints = ( state, apiName, version ) => get( state.history, [ apiName, version ], [] ) diff --git a/src/state/request/selectors.js b/src/state/request/selectors.js index d93c1a4..68a9a0c 100644 --- a/src/state/request/selectors.js +++ b/src/state/request/selectors.js @@ -1,5 +1,4 @@ -import compact from 'lodash/compact'; -import isArray from 'lodash/isArray'; +import { compact, isArray } from 'lodash'; export const getSelectedEndpoint = state => state.request.endpoint; diff --git a/src/state/results/selectors.js b/src/state/results/selectors.js index 0034f8f..e45f615 100644 --- a/src/state/results/selectors.js +++ b/src/state/results/selectors.js @@ -1,4 +1,4 @@ -import values from 'lodash/values'; +import { values } from 'lodash'; export const getResults = state => values( state.results ).sort( ( a, b ) => b.id - a.id ); diff --git a/src/state/security/selectors.js b/src/state/security/selectors.js index bffc6ba..c765dc2 100644 --- a/src/state/security/selectors.js +++ b/src/state/security/selectors.js @@ -1,4 +1,4 @@ -import get from 'lodash/get'; +import { get } from 'lodash'; export const isReady = ( state, apiName ) => get( state.security, [ apiName, 'ready' ], false ); From a98847cf3149de6780bc70ac95a218cbe7ccc4fb Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Nov 2016 17:07:18 -0600 Subject: [PATCH 4/5] Revert "Add lint rule to forbid importing from root lodash package" This reverts commit 741c519392cb9f37f7d1515c40c2f1708ce2f618. --- .eslintrc.js | 3 --- package.json | 1 - 2 files changed, 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 97cb9a4..f76b8d6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -219,12 +219,9 @@ module.exports = { 'react/jsx-uses-react' : 'error', 'react/jsx-uses-vars' : 'error', 'react/jsx-wrap-multilines' : 'error', - // Custom rules - 'wpcalypso/no-lodash-import' : 'error', }, plugins : [ 'react', - 'eslint-plugin-wpcalypso', ], settings : { react : { diff --git a/package.json b/package.json index e3e009e..d9b0080 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "deep-freeze": "0.0.1", "eslint": "^3.9.1", "eslint-plugin-react": "^6.6.0", - "eslint-plugin-wpcalypso": "^2.0.0", "react-scripts": "0.6.1", "surge": "^0.18.0" }, From 6838226240143595146c91d96e6f654bb14b6192 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 15 Nov 2016 17:38:10 -0600 Subject: [PATCH 5/5] Transform Lodash imports via Babel plugin (build: 513 kB -> 450 kB) --- bin/build.js | 24 ++++++++++++++++++++++++ package.json | 5 +++-- 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100755 bin/build.js diff --git a/bin/build.js b/bin/build.js new file mode 100755 index 0000000..e9bc8fb --- /dev/null +++ b/bin/build.js @@ -0,0 +1,24 @@ +#!/usr/bin/env node + +// webpack.config.prod.js checks this. +process.env.NODE_ENV = 'production'; + +// Load the create-react-app config. +const webpackConfigProd = require( 'react-scripts/config/webpack.config.prod' ); + +// Modify the config according to our needs. + +const babelLoader = webpackConfigProd.module.loaders[ 0 ]; +if ( babelLoader.loader !== 'babel' ) { + console.error( webpackConfigProd.module.loaders ); + throw new Error( 'Couldn\'t find the babel loader config.' ); +} + +babelLoader.query.plugins = ( babelLoader.query.plugins || [] ) + .filter( pluginName => pluginName !== 'lodash' ) + .concat( 'lodash' ); + +console.log( 'Added lodash babel plugin to build' ); + +// Run the build. +require( 'react-scripts/scripts/build' ); diff --git a/package.json b/package.json index d9b0080..c2b7357 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "devDependencies": { "babel-eslint": "^7.1.0", + "babel-plugin-lodash": "^3.2.9", "deep-freeze": "0.0.1", "eslint": "^3.9.1", "eslint-plugin-react": "^6.6.0", @@ -33,10 +34,10 @@ }, "scripts": { "start": "react-scripts start", - "build": "npm run lint && react-scripts build", + "build": "npm run lint && node bin/build.js", "test": "npm run lint && react-scripts test --env=jsdom", "eject": "react-scripts eject", - "lint": "eslint --ext js,jsx .eslintrc.js src/", + "lint": "eslint --ext js,jsx .eslintrc.js src/ bin/", "deploy": "npm run build && surge -p ./build -d wpconsole.surge.sh" } }