feat(Performance): Remove Lodash (#67)

gja · Jeevan-Kishore · commit 240b444217cc · 2019-03-19T14:18:50.000+05:30
* feat(Performance): Remove Lodash

- Upgraded redux and react-redux
- Switched to @quintype/lodash for get
- Removed omit (using babel)
- Fixing warnings from rollup

* chore(release): 1.54.0-remove-lodash.0

* fix(access-type): Replace lodash get

* fix(package): Bump to beta post merge

* chore(release): 1.54.0-remove-lodash.1

* fix(react-redux): Revert to 5.0.7 as 6 is breaking change

* chore(release): 1.54.0-remove-lodash.2

* fix(papaparse): Remove paparse, refactor table element

* chore(release): 1.54.0-remove-lodash.3

* fix(lodash): Replace quintype get with lodash get

* chore(release): 1.54.0-remove-lodash.4
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,39 +22,37 @@
   },
   "homepage": "https://github.com/quintype/quintype-node-components#readme",
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
+    "@babel/runtime": "^7.3.4",
     "atob": "^2.1.2",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "empty-web-gif": "^1.0.0",
-    "get-youtube-id": "^1.0.0",
-    "lodash": "^4.17.11",
-    "papaparse": "^4.3.6",
-    "prop-types": "^15.6.0",
+    "get-youtube-id": "^1.0.1",
+    "prop-types": "^15.7.2",
     "quintype-js": "^1.1.0",
-    "react": "^16.2.0",
-    "react-dfp": "^0.6.0",
-    "react-redux": "^5.0.6",
-    "react-youtube": "^7.5.0",
-    "redux": "^3.7.2",
-    "wretch": "^1.1.1"
+    "react": "^16.8.4",
+    "react-dfp": "^0.10.3",
+    "react-redux": "^5.0.7",
+    "react-youtube": "^7.9.0",
+    "redux": "^4.0.1",
+    "wretch": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "babel-plugin-annotate-pure-calls": "^0.3.0",
-    "babel-plugin-quintype-assets": "^1.0.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
+    "babel-plugin-annotate-pure-calls": "^0.4.0",
+    "babel-plugin-quintype-assets": "^1.1.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "onchange": "^4.1.0",
-    "react-dom": "^16.2.0",
-    "rimraf": "^2.6.2",
-    "rollup": "^0.65.2",
-    "rollup-plugin-babel": "^4.0.3",
-    "standard-version": "^4.4.0"
+    "react-dom": "^16.8.4",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.4.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "standard-version": "^5.0.1"
   },
   "scripts": {
     "build:cjs": "npx rollup -c",
diff --git a/rollup.config.js b/rollup.config.js
@@ -13,5 +13,5 @@ export default {
       runtimeHelpers: true
     })
   ],
-  external: Object.keys(dependencies).concat(["lodash/get", "lodash/omit"])
+  external: file => Object.keys(dependencies).includes(file) || file.startsWith("@babel/runtime")
 };
diff --git a/src/components/access-type.js b/src/components/access-type.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import get from 'lodash/get';
+import get from "lodash/get";
 import {
     ACCESS_BEING_LOADED,
     ACCESS_UPDATED,
diff --git a/src/components/breaking-news.js b/src/components/breaking-news.js
@@ -2,7 +2,7 @@ import React from "react";
 import {connect} from "react-redux";
 import {BREAKING_NEWS_UPDATED} from '../store/actions';
 import {Link} from "./link";
-import get from 'lodash/get';
+import get from "lodash/get";
 import {getRequest} from './api-client';
 
 class BreakingNewsBase extends React.Component {
diff --git a/src/components/infinite-story-base.js b/src/components/infinite-story-base.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from 'lodash/get';
+import get from "lodash/get";
 import { InfiniteScroll } from "./infinite-scroll.js";
 import { removeDuplicateStories } from '../utils';
 
diff --git a/src/components/link.js b/src/components/link.js
@@ -1,9 +1,10 @@
 import React from "react";
 import {connect} from "react-redux";
-import omit from "lodash/omit";
 
 function LinkBase(props) {
-  return React.createElement("a", Object.assign(omit(props, "navigateTo"), {
+  const {navigateTo, externalLink, callback, ...otherProps} = props;
+
+  return React.createElement("a", Object.assign(otherProps, {
     onClick(e) {
       if(global.disableAjaxLinks)
         return;
@@ -14,14 +15,14 @@ function LinkBase(props) {
       e.preventDefault();
       e.stopPropagation();
 
-      if(props.externalLink) {
-        global.open(props.externalLink, "_blank");
+      if(externalLink) {
+        global.open(externalLink, "_blank");
       }
       else {
-        props.navigateTo(props.href);
+        navigateTo(props.href);
       }
 
-      typeof props.callback === 'function' && props.callback(e);
+      typeof callback === 'function' && callback(e);
     }
   }));
 }
diff --git a/src/components/load-more-stories-base.js b/src/components/load-more-stories-base.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import get from 'lodash/get';
+import get from "lodash/get";
 import { removeDuplicateStories } from '../utils';
 import { getRequest } from './api-client';
 
@@ -55,7 +55,7 @@ export class LoadMoreStoriesBase extends React.Component {
       fields: this.props.fields
     })).json(response => response.stories || get(response, ['results', 'stories'], []));
   }
-  
+
   render() {
     return React.createElement(LoadMoreStoriesManager, Object.assign({}, this.props.data, {
       template: this.props.template,
diff --git a/src/components/responsive-image.js b/src/components/responsive-image.js
@@ -2,8 +2,8 @@ import React from "react";
 import {connect} from "react-redux";
 import {FocusedImage} from "quintype-js";
 import {func} from 'prop-types';
-import omit from 'lodash/omit';
 import emptyWebGif from 'empty-web-gif';
+import omit from '@babel/runtime/helpers/objectWithoutProperties';
 
 const USED_PARAMS = ["imageCDN","defaultWidth","widths","imgParams","slug","metadata","aspectRatio", "reactTag", "eager"];
 
diff --git a/src/components/search-page-base.js b/src/components/search-page-base.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import get from 'lodash/get';
+import get from "lodash/get";
 import { getRequest } from './api-client';
 
 import { LoadMoreStoriesManager } from './load-more-stories-base'
diff --git a/src/components/story-elements/table.js b/src/components/story-elements/table.js
@@ -1,78 +1,79 @@
 import React from "react";
+import get from "lodash/get";
 
-function TableHeader(columns) {
-  return <thead>
-    <tr>
-      {columns.map(col => <th>{col.Header}</th>)}
-    </tr>
-  </thead>;
+
+function renderTableBody(hasHeader, { headerFields, headerData }){
+  let headerRow = [];
+  if(hasHeader) {
+    headerRow = [<thead><tr>{headerFields.map(headerField => <th>{headerField}</th>)}</tr></thead>];
+  }
+  else {
+    headerRow = [<tr>{headerFields.map(headerField => <td>{headerField}</td>)}</tr>];
+  }
+  return headerRow.concat(headerData.map(data => <tr>{headerFields.map(headerField => <td>{data[headerField]}</td>)}</tr>));
 }
 
-export function TableView({data, columns, className, hasHeader}) {
-  return <table className={className}>
-    {hasHeader && TableHeader(columns)}
-    <tbody>
-      {data.map(row => <tr>
-        {columns.map(col => <td>
-          {row[col.Header]}
-        </td>)}
-      </tr>)}
-    </tbody>
-  </table>;
+export function TableView({className, hasHeader, tableModData = {}}) {
+  return <table className={className}>{renderTableBody(hasHeader, tableModData)}</table>;
 }
 
 export class Table extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      tableData: []
+      tableModData: {
+        headerFields : [],
+        headerData: []
+      },
     };
   }
 
-  parseCSVToJson(content) {
-    import(/* webpackChunkName: "qtc-parsecsv" */ "papaparse").then(({parse}) => {
-      parse(content, {
-        header: this.props.hasHeader,
-        complete: results => this._isMounted && this.setState({ tableData: results.data })
-      });
-    })
-  }
+  formatData(content) {
+    const dataArray = content.split(/\n/);
+    const headerRowData = get(dataArray, [0], '');
+    const headerFields = headerRowData.split(',').map(headerValue => headerValue.trim());
+    const dataFields = dataArray.slice(1, dataArray.length - 1);
+    const headerData = dataFields.map(dataField => dataField.split(',')
+      .reduce((acc, currEle, index) => {
+        acc[get(headerFields, [index], '').trim()] = currEle.trim();
+        return acc;
+      }, {}));
 
-  componentDidMount() {
-    this._isMounted = true;
-    this.parseCSVToJson(this.props.data.content);
+    this.setState({tableModData: { headerFields, headerData }});
+
+    return {
+      headerFields,
+      headerData
+    }
   }
 
-  componentWillUnmount() {
-    this._isMounted = false;
+  componentDidMount() {
+    const content = get(this.props, ['data','content']);
+    this.formatData(content);
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data.content !== nextProps.data.content) {
-      this.parseCSVToJson(nextProps.data.content);
+    const prevContent = get(this.props, ['data','content']);
+    const nextContent = get(nextProps, ['data','content']);
+    if (prevContent !== nextContent) {
+      this.formatData(nextContent);
     }
   }
 
   render() {
-    if (!this.state.tableData.length > 0) {
+    const tableModData = this.state;
+    if (!get(tableModData, ['headerFields'], []).length > 0) {
       return null;
     }
 
-    const columns = Object.keys(this.state.tableData[0]).map(header => ({
-      Header: header,
-      accessor: header,
-      headerStyle: !this.props.hasHeader ? { display: "none" } : {}
-    }));
-
     const className = `story-element-table-${this.props.id}`;
 
     return React.createElement(this.props.tableComponent || TableView, {
       hasHeader: this.props.hasHeader,
-      data: this.state.tableData,
-      columns: columns,
+      tableModData,
       showPageSizeOptions: false,
       showPageJump: false,
       className: className,
     });
   }
-}
+}
diff --git a/src/components/wrap-collection-layout.js b/src/components/wrap-collection-layout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
-import get from 'lodash/get';
+import get from "lodash/get";
 
 import { LoadMoreCollectionStories } from './load-more-stories-base';
 import { LazyLoadImages } from './lazy-load-images';
@@ -80,4 +80,4 @@ function replaceWithAlternates(story) {
     "hero-image-caption"     : alternates["hero-image"] ? alternates["hero-image"]["hero-image-caption"] : story["hero-image-caption"],
     "hero-image-attribution" : alternates["hero-image"] ? alternates["hero-image"]["hero-image-attribution"] : story["hero-image-attribution"],
   })
-}
+}
