Merge pull request #93 from headwirecom/feature/optimize-bundle

Optimize bundle size and npm package size

Author: mburri

packages/spectrum/.npmignore

@@ -0,0 +1,11 @@
+.nycrc
+.vscode
+Styles.md
+dist
+docs
+example
+test
+webpack
+lib/*
+!lib/src/*
+stats.json

packages/spectrum/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headwire/jsonforms-react-spectrum-renderers",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.1",
   "description": "React Spectrum Renderer Set for JSONForms",
   "repository": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers",
   "bugs": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers/issues",

packages/spectrum/src/additional/SpectrumListWithDetailRenderer.tsx

@@ -43,8 +43,6 @@ import {
   ResolvedJsonFormsDispatch,
   withJsonFormsArrayLayoutProps,
 } from '@jsonforms/react';
-import map from 'lodash/map';
-import range from 'lodash/range';
 import React, { useCallback, useState } from 'react';
 import ListWithDetailMasterItem from './ListWithDetailMasterItem';
 import merge from 'lodash/merge';
@@ -119,7 +117,7 @@ export const SpectrumListWithDetailRenderer = ({
       <Flex direction='row'>
         <Flex direction='column' marginY='size-200' marginEnd='size-200'>
           {data > 0 ? (
-            map(range(data), (index) => (
+            Array.from(Array(data)).map((_, index) => (
               <ListWithDetailMasterItem
                 index={index}
                 path={path}

packages/spectrum/src/cells/SpectrumBooleanCell.tsx

@@ -35,7 +35,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { FunctionComponent } from 'react';
 import { Checkbox } from '@adobe/react-spectrum';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { DimensionValue } from '@react-types/shared';
 
 export const SpectrumBooleanCell: FunctionComponent<CellProps> = (

packages/spectrum/src/complex/CombinatorProperties.tsx

@@ -26,7 +26,6 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { omit } from 'lodash';
 import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
 import { ResolvedJsonFormsDispatch } from '@jsonforms/react';
 
@@ -46,10 +45,7 @@ export class CombinatorProperties extends React.Component<
   render() {
     const { schema, combinatorKeyword, path } = this.props;
 
-    const otherProps: JsonSchema = omit(
-      schema,
-      combinatorKeyword
-    ) as JsonSchema;
+    const { [combinatorKeyword]: _, ...otherProps } = schema
     const foundUISchema: UISchemaElement = Generate.uiSchema(
       otherProps,
       'VerticalLayout'

packages/spectrum/src/complex/SpectrumObjectRenderer.tsx

@@ -25,7 +25,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '../util/isEmpty';
 import startCase from 'lodash/startCase';
 import {
   findUISchema,

packages/spectrum/src/complex/SpectrumOneOfRenderer.tsx

@@ -26,7 +26,7 @@
   THE SOFTWARE.
 */
 import React, { Key, useCallback, useState } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '../util/isEmpty';
 
 import {
   CombinatorProps,

packages/spectrum/src/complex/SpectrumTableArrayControl.tsx

@@ -26,11 +26,7 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import fpfilter from 'lodash/fp/filter';
-import fpmap from 'lodash/fp/map';
-import fpflow from 'lodash/fp/flow';
-import fpkeys from 'lodash/fp/keys';
-import fpstartCase from 'lodash/fp/startCase';
+import startCase from 'lodash/startCase';
 import {
   ArrayControlProps,
   ControlElement,
@@ -137,11 +133,9 @@ class SpectrumTableArrayControl extends React.Component<
     };
 
     const headerColumns: JSX.Element[] = schema.properties
-      ? fpflow(
-          fpkeys,
-          fpfilter((prop) => schema.properties[prop].type !== 'array'),
-          fpmap((prop) => <Column key={prop}>{fpstartCase(prop)}</Column>)
-        )(schema.properties)
+      ? Object.keys(schema.properties)
+        .filter((prop) => schema.properties[prop].type !== 'array')
+        .map((prop) => <Column key={prop}>{startCase(prop)}</Column>)
       : [<Column key='items'>Items</Column>];
 
     const uioptions: UIOptions = {
@@ -205,44 +199,40 @@ class SpectrumTableArrayControl extends React.Component<
                 const childPath = Paths.compose(path, `${index}`);
 
                 const rowCells: JSX.Element[] = schema.properties
-                  ? fpflow(
-                      fpkeys,
-                      fpfilter(
-                        (prop) => schema.properties[prop].type !== 'array'
-                      ),
-                      fpmap((prop) => {
-                        const childPropPath = Paths.compose(
-                          childPath,
-                          prop.toString()
-                        );
+                  ? Object.keys(schema.properties)
+                    .filter(prop => schema.properties[prop].type !== 'array')
+                    .map(prop => {
+                      const childPropPath = Paths.compose(
+                        childPath,
+                        prop.toString()
+                      );
 
-                        return (
-                          <Cell key={childPropPath}>
-                            <Flex direction='column' width='100%'>
-                              <DispatchCell
-                                schema={Resolve.schema(
-                                  schema,
-                                  `#/properties/${prop}`,
-                                  rootSchema
-                                )}
-                                uischema={createControlElement(prop)}
-                                path={childPath + '.' + prop}
-                              />
-                              <View
-                                UNSAFE_style={UNSAFE_error}
-                                isHidden={
-                                  getChildErrorMessage(childPropPath) === ''
-                                }
-                              >
-                                <Text>
-                                  {getChildErrorMessage(childPropPath)}
-                                </Text>
-                              </View>
-                            </Flex>
-                          </Cell>
-                        );
-                      })
-                    )(schema.properties)
+                      return (
+                        <Cell key={childPropPath}>
+                          <Flex direction='column' width='100%'>
+                            <DispatchCell
+                              schema={Resolve.schema(
+                                schema,
+                                `#/properties/${prop}`,
+                                rootSchema
+                              )}
+                              uischema={createControlElement(prop)}
+                              path={childPath + '.' + prop}
+                            />
+                            <View
+                              UNSAFE_style={UNSAFE_error}
+                              isHidden={
+                                getChildErrorMessage(childPropPath) === ''
+                              }
+                            >
+                              <Text>
+                                {getChildErrorMessage(childPropPath)}
+                              </Text>
+                            </View>
+                          </Flex>
+                        </Cell>
+                      );
+                    })
                   : [
                       <Cell key={Paths.compose(childPath, index.toString())}>
                         <Flex direction='column' width='100%'>

packages/spectrum/src/complex/array/SpectrumArrayControl.tsx

@@ -25,7 +25,6 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import range from 'lodash/range';
 import React, { useCallback, useState } from 'react';
 import { ArrayControlProps, createDefaultValue } from '@jsonforms/core';
 import { Button, Flex, Heading, Text, View } from '@adobe/react-spectrum';
@@ -70,7 +69,7 @@ export const SpectrumArrayControl = ({
       </Flex>
       <Flex direction='column' gap='size-100'>
         {data && data.length ? (
-          range(0, data.length).map((index) => {
+          Array.from(Array(data.length)).map((_, index) => {
             return (
               <SpectrumArrayItem
                 index={index}

packages/spectrum/src/complex/array/SpectrumArrayItem.tsx

@@ -58,7 +58,6 @@ import {
 import Delete from '@spectrum-icons/workflow/Delete';
 import ChevronDown from '@spectrum-icons/workflow/ChevronDown';
 import ChevronUp from '@spectrum-icons/workflow/ChevronUp';
-import { find, omit } from 'lodash';
 
 import './SpectrumArrayItem.css';
 
@@ -182,7 +181,7 @@ export const mapStateToSpectrumArrayItemProps = (
 ): StatePropsOfSpectrumArrayItem => {
   const { schema, path, index, uischema } = ownProps;
   const firstPrimitiveProp = schema.properties
-    ? find(Object.keys(schema.properties), (propName: any) => {
+    ? Object.keys(schema.properties).find((propName) => {
         const prop = schema.properties[propName];
         return (
           prop.type === 'string' ||
@@ -230,11 +229,11 @@ export const withJsonFormsSpectrumArrayItemProps = (
         (
           prevProps: StatePropsOfSpectrumArrayItem,
           nextProps: StatePropsOfSpectrumArrayItem
-        ) =>
-          areEqual(
-            omit(prevProps, ['handleExpand', 'removeItem']),
-            omit(nextProps, ['handleExpand', 'removeItem'])
-          )
+        ) => {
+          const { handleExpand: prevHandleExpand, removeItem: prevRemoveItem, ...restPrevProps } = prevProps
+          const { handleExpand: nextHandleExpand, removeItem: nextRemoveItem, ...restNextProps } = nextProps
+          return areEqual(restPrevProps, restNextProps)
+        }
       )
     )
   );

packages/spectrum/src/controls/SpectrumBooleanControl.tsx

@@ -32,7 +32,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '../util/isEmpty';
 import React from 'react';
 import { SpectrumBooleanCell } from '../cells/CustomizableCells';
 

packages/spectrum/src/layouts/SpectrumGroupLayout.tsx

@@ -25,7 +25,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '../util/isEmpty';
 import React, { FunctionComponent } from 'react';
 import {
   GroupLayout,

packages/spectrum/src/layouts/util.tsx

@@ -25,7 +25,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from '../util/isEmpty';
 import React from 'react';
 import { JsonSchema, Layout } from '@jsonforms/core';
 import { ResolvedJsonFormsDispatch, useJsonForms } from '@jsonforms/react';

packages/spectrum/src/spectrum-control/InputDate.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, computeLabel } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';
 import { Flex } from '@adobe/react-spectrum';

packages/spectrum/src/spectrum-control/InputDateTime.tsx

@@ -25,7 +25,7 @@
 import React from 'react';
 import { DimensionValue } from '@react-types/shared';
 import { CellProps, computeLabel } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { SpectrumInputProps } from './index';
 import { Flex } from '@adobe/react-spectrum';
 import { DatePicker, DatePickerLabel } from '../additional/DatePicker';

packages/spectrum/src/spectrum-control/InputEnum.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { EnumCellProps, JsonSchema } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';
 import { Item, Picker } from '@adobe/react-spectrum';

packages/spectrum/src/spectrum-control/InputInteger.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { TextField } from '@adobe/react-spectrum';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';

packages/spectrum/src/spectrum-control/InputNumber.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { TextField } from '@adobe/react-spectrum';
 import { DimensionValue } from '@react-types/shared';
 import { SpectrumInputProps } from './index';

packages/spectrum/src/spectrum-control/InputNumberFormatted.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, Formatted } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { TextField } from '@adobe/react-spectrum';
 import { DimensionValue } from '@react-types/shared';
 import { SpectrumInputProps } from './index';

packages/spectrum/src/spectrum-control/InputSlider.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { DimensionValue } from '@react-types/shared';
 import { SpectrumInputProps } from './index';
 import { Slider } from '@adobe/react-spectrum';

packages/spectrum/src/spectrum-control/InputText.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { TextField } from '@adobe/react-spectrum';
 import { DimensionValue } from '@react-types/shared';
 import { SpectrumInputProps } from './index';

packages/spectrum/src/spectrum-control/InputTextArea.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { TextArea } from '@adobe/react-spectrum';
 import { DimensionValue } from '@react-types/shared';
 import { SpectrumInputProps } from './index';

packages/spectrum/src/spectrum-control/InputTime.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, computeLabel } from '@jsonforms/core';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { SpectrumInputProps } from './index';
 import { DimensionValue } from '@react-types/shared';
 import { Flex } from '@adobe/react-spectrum';

packages/spectrum/src/util/isEmpty.ts

@@ -0,0 +1,4 @@
+// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isempty
+export function isEmpty(obj: any) {
+  return [Object, Array].includes((obj || {}).constructor) && !Object.keys((obj || {})).length;
+}