fix: move dependencies out of footer

config/webpack.dev.config.js

@@ -1,9 +1,9 @@
 // This is the dev Webpack config. All settings here should prefer a fast build
 // time at the expense of creating larger, unoptimized bundles.
-const Merge = require('webpack-merge');
+const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
+const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
 
 const commonConfig = require('./webpack.common.config.js');
 

config/webpack.prod.config.js

@@ -1,9 +1,9 @@
 // This is the prod Webpack config. All settings here should prefer smaller,
 // optimized bundles at the expense of a longer build time.
-const Merge = require('webpack-merge');
+const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
 const commonConfig = require('./webpack.common.config.js');
 const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
 
 module.exports = Merge.smart(commonConfig, {
   mode: 'production',
@@ -35,6 +35,18 @@ module.exports = Merge.smart(commonConfig, {
       amd: 'ReactDOM',
       root: 'ReactDOM',
     },
+    'react-intl': {
+      commonjs: 'react-intl',
+      commonjs2: 'react-intl',
+      amd: 'ReactIntl',
+      root: 'ReactIntl',
+    },
+    '@edx/paragon': {
+      commonjs: '@edx/paragon',
+      commonjs2: '@edx/paragon',
+      amd: 'Paragon',
+      root: 'Paragon',
+    },
   },
   plugins: [
     // Cleans the dist directory before each build

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
+    "build:stats": "NODE_ENV=production BABEL_ENV=production webpack --config=config/webpack.prod.config.js --profile --progress --json > stats.json",
     "gc": "commit",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
@@ -38,7 +39,11 @@
     "@commitlint/config-angular": "^6.0.2",
     "@commitlint/prompt": "^6.0.2",
     "@commitlint/prompt-cli": "^6.0.2",
-    "@edx/paragon": "^3.8.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
@@ -62,11 +67,7 @@
     "image-webpack-loader": "^4.2.0",
     "jest": "23.6.0",
     "node-sass": "^4.7.2",
-    "prop-types": "^15.5.10",
-    "react": "^16.4.2",
     "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
-    "react-intl": "^2.8.0",
     "react-test-renderer": "^16.6.0",
     "reactifex": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -80,16 +81,12 @@
     "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.2.1"
   },
-  "peerDependencies": {
+  "dependencies": {
     "@edx/paragon": "^3.8.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "html-webpack-plugin": "^3.2.0",
     "prop-types": "^15.5.10",
     "react": "^16.4.2",
     "react-dom": "^16.2.0",
-    "react-intl": "2.x",
-    "webpack": "^4.19.1",
-    "webpack-merge": "^4.2.1"
+    "react-intl": "2.x"
   },
   "jest": {
     "setupFiles": [
@@ -106,12 +103,5 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
     }
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-brands-svg-icons": "^5.8.1",
-    "@fortawesome/free-regular-svg-icons": "^5.8.1",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/react-fontawesome": "^0.1.4"
   }
 }

src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl';
 
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   faFacebookSquare,
   faTwitterSquare,
@@ -10,7 +11,9 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/* eslint-enable import/no-extraneous-dependencies */
 
 import SiteFooter from './lib';
 import './index.scss';
@@ -85,6 +88,7 @@ const App = () => (
         activeLanguage: 'en',
         screenReaderLabel: 'Choose Language',
         submitLabel: 'Apply',
+        icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
         onLanguageSelected: () => {},
       }}
     />

src/lib/components/SiteFooter/SiteFooter.test.jsx

@@ -11,6 +11,7 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import FooterLogo from '../../../edx-footer.png';
@@ -70,6 +71,7 @@ const languageForm = {
   activeLanguage: 'en',
   screenReaderLabel: 'Choose Language',
   submitLabel: 'Apply',
+  icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
   onLanguageSelected: () => {},
 };
 

src/lib/components/SiteFooter/index.jsx

@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Hyperlink } from '@edx/paragon';
 
-import { faLanguage } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
 import messages from './SiteFooter.messages';
 
 const EVENT_NAMES = {
@@ -134,7 +131,7 @@ class SiteFooter extends React.Component {
                 >
                   {/* eslint-disable-next-line jsx-a11y/label-has-for */}
                   <label htmlFor="site-footer-language-select">
-                    <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />
+                    {languageForm.icon}
                     <div className="sr-only">{languageForm.screenReaderLabel}</div>
                   </label>
                   <select
@@ -382,6 +379,7 @@ SiteFooter.propTypes = {
     screenReaderLabel: PropTypes.string.isRequired,
     submitLabel: PropTypes.string.isRequired,
     onLanguageSelected: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
     activeLanguage: PropTypes.string,
   }),
   handleAllTrackEvents: PropTypes.func.isRequired,