Use lodash submodules to reduce bundle size (#5734)

Import lodash sub modules

e2e/ApplicationLifecycleTest.test.js

@@ -1,10 +1,10 @@
 const Utils = require('./Utils');
 const Android = require('./AndroidUtils');
 const TestIDs = require('../playground/src/testIDs');
-const _ = require('lodash');
+const includes = require('lodash/includes');
 
 const { elementByLabel, elementById, sleep } = Utils;
-const IS_RELEASE = _.includes(process.argv, '--release');
+const IS_RELEASE = includes(process.argv, '--release');
 const KEY_CODE_R = 46;
 
 describe('application lifecycle test', () => {

integration/env.test.js

@@ -1,4 +1,5 @@
-const _ = require('lodash');
+const eq = require('lodash/eq');
+const isEqual = require('lodash/isEqual');
 
 describe('testing that the environment is working properly', () => {
   it('object spread', () => {
@@ -14,16 +15,16 @@ describe('testing that the environment is working properly', () => {
   });
 
   it('equality tests', () => {
-    expect(_.eq('hello', 'hello')).toBe(true);
-    expect(_.isEqual('hello', 'hello')).toBe(true);
+    expect(eq('hello', 'hello')).toBe(true);
+    expect(isEqual('hello', 'hello')).toBe(true);
 
-    expect(_.eq('hello', Object('hello'))).toBe(false);
-    expect(_.isEqual('hello', Object('hello'))).toBe(true);
+    expect(eq('hello', Object('hello'))).toBe(false);
+    expect(isEqual('hello', Object('hello'))).toBe(true);
 
     const a = {};
     const b = {};
 
-    expect(_.eq(a, b)).toBe(false);
-    expect(_.isEqual(a, b)).toBe(true);
+    expect(eq(a, b)).toBe(false);
+    expect(isEqual(a, b)).toBe(true);
   });
 });

integration/redux/MyStore.js

@@ -1,5 +1,6 @@
 const redux = require('redux');
-const _ = require('lodash');
+const merge = require('lodash/merge');
+const get = require('lodash/get');
 
 const initialState = {
   person: {
@@ -10,10 +11,10 @@ const initialState = {
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case 'redux.MyStore.setName': {
-      return _.merge({}, state, { person: { name: action.name } });
+      return merge({}, state, { person: { name: action.name } });
     }
     case 'redux.MyStore.setAge': {
-      return _.merge({}, state, { person: { age: action.age } });
+      return merge({}, state, { person: { age: action.age } });
     }
     default: {
       return state;
@@ -23,7 +24,7 @@ const reducer = (state = initialState, action) => {
 
 const selectors = {
   getName(state) {
-    return _.get(state, 'person.name');
+    return get(state, 'person.name');
   },
 
   getAge(state) {

lib/src/Navigation.ts

@@ -1,4 +1,4 @@
-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 import { NativeCommandsSender } from './adapters/NativeCommandsSender';
 import { NativeEventsReceiver } from './adapters/NativeEventsReceiver';
 import { UniqueIdProvider } from './adapters/UniqueIdProvider';

lib/src/adapters/UniqueIdProvider.ts

@@ -1,7 +1,7 @@
-import * as _ from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 export class UniqueIdProvider {
   generate(prefix?: string): string {
-    return _.uniqueId(prefix);
+    return uniqueId(prefix);
   }
 }

lib/src/commands/Commands.test.ts

@@ -1,4 +1,6 @@
-import * as _ from 'lodash';
+import forEach from 'lodash/forEach'
+import filter from 'lodash/filter'
+import invoke from 'lodash/invoke'
 import { mock, verify, instance, deepEqual, when, anything, anyString } from 'ts-mockito';
 
 import { LayoutTreeParser } from './LayoutTreeParser';
@@ -398,7 +400,7 @@ describe('Commands', () => {
 
     function getAllMethodsOfUut() {
       const uutFns = Object.getOwnPropertyNames(Commands.prototype);
-      const methods = _.filter(uutFns, (fn) => fn !== 'constructor');
+      const methods = filter(uutFns, (fn) => fn !== 'constructor');
       expect(methods.length).toBeGreaterThan(1);
       return methods;
     }
@@ -445,11 +447,11 @@ describe('Commands', () => {
         dismissOverlay: { commandId: 'dismissOverlay+UNIQUE_ID', componentId: 'id' },
         getLaunchArgs: { commandId: 'getLaunchArgs+UNIQUE_ID' }
       };
-      _.forEach(getAllMethodsOfUut(), (m) => {
+      forEach(getAllMethodsOfUut(), (m) => {
         it(`for ${m}`, () => {
           expect(argsForMethodName).toHaveProperty(m);
           expect(paramsForMethodName).toHaveProperty(m);
-          _.invoke(uut, m, ...argsForMethodName[m]);
+          invoke(uut, m, ...argsForMethodName[m]);
           expect(cb).toHaveBeenCalledTimes(1);
           expect(cb).toHaveBeenCalledWith(m, paramsForMethodName[m]);
         });

lib/src/commands/Commands.ts

@@ -1,4 +1,5 @@
-import * as _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep'
+import map from 'lodash/map'
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
@@ -21,14 +22,14 @@ export class Commands {
   ) {}
 
   public setRoot(simpleApi: LayoutRoot) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const root = this.layoutTreeParser.parse(input.root);
 
-    const modals = _.map(input.modals, (modal) => {
+    const modals = map(input.modals, (modal) => {
       return this.layoutTreeParser.parse(modal);
     });
 
-    const overlays = _.map(input.overlays, (overlay) => {
+    const overlays = map(input.overlays, (overlay) => {
       return this.layoutTreeParser.parse(overlay);
     });
 
@@ -48,29 +49,29 @@ export class Commands {
   }
 
   public setDefaultOptions(options: Options) {
-    const input = _.cloneDeep(options);
+    const input = cloneDeep(options);
     this.optionsProcessor.processOptions(input);
 
     this.nativeCommandsSender.setDefaultOptions(input);
     this.commandsObserver.notify('setDefaultOptions', { options });
   }
 
   public mergeOptions(componentId: string, options: Options) {
-    const input = _.cloneDeep(options);
+    const input = cloneDeep(options);
     this.optionsProcessor.processOptions(input);
 
     this.nativeCommandsSender.mergeOptions(componentId, input);
     this.commandsObserver.notify('mergeOptions', { componentId, options });
   }
 
   public updateProps(componentId: string, props: object) {
-    const input = _.cloneDeep(props);
+    const input = cloneDeep(props);
     this.store.updateProps(componentId, input);
     this.commandsObserver.notify('updateProps', { componentId, props });
   }
 
   public showModal(layout: Layout) {
-    const layoutCloned = _.cloneDeep(layout);
+    const layoutCloned = cloneDeep(layout);
     const layoutNode = this.layoutTreeParser.parse(layoutCloned);
 
     const commandId = this.uniqueIdProvider.generate('showModal');
@@ -96,7 +97,7 @@ export class Commands {
   }
 
   public push(componentId: string, simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
 
     const commandId = this.uniqueIdProvider.generate('push');
@@ -129,7 +130,7 @@ export class Commands {
   }
 
   public setStackRoot(componentId: string, children: Layout[]) {
-    const input = _.map(_.cloneDeep(children), (simpleApi) => {
+    const input = map(cloneDeep(children), (simpleApi) => {
       const layout = this.layoutTreeParser.parse(simpleApi);
       return layout;
     });
@@ -145,7 +146,7 @@ export class Commands {
   }
 
   public showOverlay(simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
 
     const commandId = this.uniqueIdProvider.generate('showOverlay');

lib/src/commands/LayoutTreeCrawler.ts

@@ -1,4 +1,5 @@
-import * as _ from 'lodash';
+import merge from 'lodash/merge'
+import isFunction from 'lodash/isFunction'
 import { LayoutType } from './LayoutType';
 import { OptionsProcessor } from './OptionsProcessor';
 import { Store } from '../components/Store';
@@ -47,14 +48,14 @@ export class LayoutTreeCrawler {
   }
 
   private applyStaticOptions(node: LayoutNode) {
-    node.data.options = _.merge({}, this.staticOptionsIfPossible(node), node.data.options);
+    node.data.options = merge({}, this.staticOptionsIfPossible(node), node.data.options);
   }
 
   private staticOptionsIfPossible(node: LayoutNode) {
     const foundReactGenerator = this.store.getComponentClassForName(node.data.name!);
     const reactComponent = foundReactGenerator ? foundReactGenerator() : undefined;
     if (reactComponent && this.isComponentWithOptions(reactComponent)) {
-      return _.isFunction(reactComponent.options) ? reactComponent.options(node.data.passProps || {}) : reactComponent.options;
+      return isFunction(reactComponent.options) ? reactComponent.options(node.data.passProps || {}) : reactComponent.options;
     }
     return {};
   }

lib/src/commands/LayoutTreeParser.test.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import keys from 'lodash/keys';
 import { LayoutTreeParser } from './LayoutTreeParser';
 import { LayoutType } from './LayoutType';
 import { Options } from '../interfaces/Options';
@@ -89,7 +89,7 @@ describe('LayoutTreeParser', () => {
 
     it('bottom tabs', () => {
       const result = uut.parse(LayoutExamples.bottomTabs);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.BottomTabs);
       expect(result.data).toEqual({});
@@ -101,7 +101,7 @@ describe('LayoutTreeParser', () => {
 
     it('side menus', () => {
       const result = uut.parse(LayoutExamples.sideMenu);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.SideMenuRoot);
       expect(result.data).toEqual({});
@@ -119,7 +119,7 @@ describe('LayoutTreeParser', () => {
 
     it('top tabs', () => {
       const result = uut.parse(LayoutExamples.topTabs);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.TopTabs);
       expect(result.data).toEqual({ options: LayoutExamples.options });

lib/src/commands/OptionsProcessor.ts

@@ -1,4 +1,8 @@
-import * as _ from 'lodash';
+import isEqual from 'lodash/isEqual'
+import isObject from 'lodash/isObject'
+import isArray from 'lodash/isArray'
+import endsWith from 'lodash/endsWith'
+import forEach from 'lodash/forEach'
 
 import { Store } from '../components/Store';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
@@ -19,7 +23,7 @@ export class OptionsProcessor {
   }
 
   private processObject(objectToProcess: object) {
-    _.forEach(objectToProcess, (value, key) => {
+    forEach(objectToProcess, (value, key) => {
       this.processColor(key, value, objectToProcess);
 
       if (!value) {
@@ -30,32 +34,32 @@ export class OptionsProcessor {
       this.processImage(key, value, objectToProcess);
       this.processButtonsPassProps(key, value);
 
-      if (!_.isEqual(key, 'passProps') && (_.isObject(value) || _.isArray(value))) {
+      if (!isEqual(key, 'passProps') && (isObject(value) || isArray(value))) {
         this.processObject(value);
       }
     });
   }
 
   private processColor(key: string, value: any, options: Record<string, any>) {
-    if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
+    if (isEqual(key, 'color') || endsWith(key, 'Color')) {
       options[key] = value === null ? 'NoColor' : this.colorService.toNativeColor(value);
     }
   }
 
   private processImage(key: string, value: any, options: Record<string, any>) {
     if (
-      _.isEqual(key, 'icon') ||
-      _.isEqual(key, 'image') ||
-      _.endsWith(key, 'Icon') ||
-      _.endsWith(key, 'Image')
+      isEqual(key, 'icon') ||
+      isEqual(key, 'image') ||
+      endsWith(key, 'Icon') ||
+      endsWith(key, 'Image')
     ) {
       options[key] = this.assetService.resolveFromRequire(value);
     }
   }
 
   private processButtonsPassProps(key: string, value: any) {
-    if (_.endsWith(key, 'Buttons')) {
-      _.forEach(value, (button) => {
+    if (endsWith(key, 'Buttons')) {
+      forEach(value, (button) => {
         if (button.passProps && button.id) {
           this.store.updateProps(button.id, button.passProps);
           button.passProps = undefined;
@@ -65,7 +69,7 @@ export class OptionsProcessor {
   }
 
   private processComponent(key: string, value: any, options: Record<string, any>) {
-    if (_.isEqual(key, 'component')) {
+    if (isEqual(key, 'component')) {
       value.componentId = value.id ? value.id : this.uniqueIdProvider.generate('CustomComponent');
       if (value.passProps) {
         this.store.updateProps(value.componentId, value.passProps);

lib/src/components/ComponentWrapper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentProvider } from 'react-native';
-import * as  _ from 'lodash';
+import merge from 'lodash/merge'
 import { polyfill } from 'react-lifecycles-compat';
 import hoistNonReactStatics = require('hoist-non-react-statics');
 
@@ -28,7 +28,7 @@ export class ComponentWrapper {
     class WrappedComponent extends React.Component<HocProps, HocState> {
       static getDerivedStateFromProps(nextProps: any, prevState: HocState) {
         return {
-          allProps: _.merge({}, nextProps, store.getPropsForId(prevState.componentId))
+          allProps: merge({}, nextProps, store.getPropsForId(prevState.componentId))
         };
       }
 
@@ -43,7 +43,7 @@ export class ComponentWrapper {
       }
 
       public setProps(newProps: any) {
-        this.setState({allProps: newProps});
+        this.setState({ allProps: newProps });
       }
 
       componentWillUnmount() {