Reduce production built size

src/components/App.js

@@ -1,6 +1,10 @@
 // @flow
 import React from "react";
-import _ from "lodash";
+import map from "lodash/map";
+import mapValues from "lodash/mapValues";
+import filter from "lodash/filter";
+import keys from "lodash/keys";
+import merge from "lodash/merge";
 
 import type { Config, Control, Topics } from "config/types";
 
@@ -37,7 +41,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
     this.state = {
       selectedControl: null,
       drawerOpened: false,
-      mqttState: _.mapValues(this.topics, (topic) => ({
+      mqttState: mapValues(this.topics, (topic) => ({
         actual: topic.defaultValue,
         internal: keyOf(topic.values, topic.defaultValue)
       })),
@@ -46,7 +50,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
         onConnect: () => this.setState({ mqttConnected: true }),
         onReconnect: () => this.setState({ mqttConnected: false }),
         onDisconnect: () => this.setState({ mqttConnected: false }),
-        subscribe: _.map(this.topics, (x) => x.state)
+        subscribe: map(this.topics, (x) => x.state)
       }),
       mqttConnected: false
     };
@@ -74,8 +78,8 @@ class App extends React.Component<AppProps & Classes, AppState> {
   }
 
   receiveMessage(rawTopic: string, message: Object) {
-    const topics = _.filter(
-      _.keys(this.topics),
+    const topics = filter(
+      keys(this.topics),
       (k) => this.topics[k].state === rawTopic
     );
     if (topics.length === 0) {
@@ -85,7 +89,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
       const topic = topics[i];
       const parseValue = this.topics[topic].parseState;
       const val = parseValue == null ? message.toString() : parseValue(message);
-      this.setState({mqttState: _.merge(this.state.mqttState,
+      this.setState({mqttState: merge(this.state.mqttState,
         { [topic]: {
           actual: val,
           internal: keyOf(this.topics[topic].values, val) || val

src/components/ControlMap.js

@@ -1,8 +1,9 @@
 // @flow
 import React from "react";
 import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
-import Leaflet from "leaflet";
-import _ from "lodash";
+import { CRS, point, divIcon } from "leaflet";
+import map from "lodash/map";
+import mapValues from "lodash/mapValues";
 import parseIconName, { controlGetIcon } from "utils/parseIconName";
 
 import type { Controls, Control } from "config/types";
@@ -37,7 +38,7 @@ export default class ControlMap extends React.Component<ControlMapProps> {
     return (
       <Map center={this.center}
         zoom={this.props.zoom}
-        crs={Leaflet.CRS.Simple}>
+        crs={CRS.Simple}>
         {this.renderMarkers()}
         {this.renderLayers()}
       </Map>
@@ -45,23 +46,23 @@ export default class ControlMap extends React.Component<ControlMapProps> {
   }
 
   renderMarkers() {
-    return _.map(this.props.controls, this.renderMarker.bind(this));
+    return map(this.props.controls, this.renderMarker.bind(this));
   }
 
   createLeafletIcon(control: Control) {
     const icon = controlGetIcon(control, this.props.state);
     const iconClass = parseIconName(`${icon} 36px`);
-    return Leaflet.divIcon({
-      iconSize: Leaflet.point(36, 36),
-      iconAnchor: Leaflet.point(18, 18),
+    return divIcon({
+      iconSize: point(36, 36),
+      iconAnchor: point(18, 18),
       html: `<i class="${iconClass}"
           style="line-height: 1; color: ${this.iconColor(control)}"></i>`
     });
   }
 
   iconColor(control: Control): string {
-    const ints = _.mapValues(this.props.state, (x) => x.internal || x.actual);
-    const acts = _.mapValues(this.props.state, (x) => x.actual);
+    const ints = mapValues(this.props.state, (x) => x.internal || x.actual);
+    const acts = mapValues(this.props.state, (x) => x.actual);
     if (control.iconColor != null) {
       return control.iconColor(ints, acts, this.props.state);
     }

src/components/UiItemList/UiItem.js

@@ -1,6 +1,7 @@
 // @flow
 import React from "react";
-import _ from "lodash";
+import keys from "lodash/keys";
+import map from "lodash/map";
 import {
   ListItemSecondaryAction,
   ListItemText,
@@ -142,11 +143,11 @@ export class DropDown extends UiControl<UIDropDown> {
   runPrimaryAction = (next?: Actual) => {
     if (this.isEnabled()) {
       const control = this.props.item;
-      const keys = _.keys(control.options);
+      const optionKeys = keys(control.options);
       const value = this.getValue();
-      const valueIndex = keyOf(keys, value);
+      const valueIndex = keyOf(optionKeys, value);
       if (next == null) {
-        this.changeState(keys[(valueIndex + 1) % keys.length]);
+        this.changeState(optionKeys[(valueIndex + 1) % optionKeys.length]);
       } else {
         this.changeState(next);
       }
@@ -171,7 +172,7 @@ export class DropDown extends UiControl<UIDropDown> {
           disabled={!this.isEnabled()}
           input={<Input id={id} />}
         >
-          {_.map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>)}
+          {map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>)}
         </Select>
       </FormControl>
     );

src/components/UiItemList/index.js

@@ -1,6 +1,5 @@
 // @flow
 import React from "react";
-import _ from "lodash";
 import {
   ListItem,
   ListItemIcon,