refactor(react-grid): get rid of internal seamless-immutable support (#…

…556) BREAKING CHANGE: Some times ago, we created a [pool request](#179) that allows using our React Grid with the [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) library. The main change is that we switched from the `Array.prototype.slice()` function to the `Array.from()` one to copy arrays. It was not a good decision, because `Array.from()` is [slower](https://jsperf.com/array-from-vs-array-slice) than `Array.prototype.slice()`. Now we return back to `Array.prototype.slice()` for performance reasons. If you are using the seamless-immutable library, change your code as follows: ```js const state = { data: Immutable({ selection: [], }) }; <Grid> { /* ...*/ } <SelectionState // selection: this.state.data.selection -> before selection: this.state.data.selection.asMutable() // now /> </Grid> ``` The related [guide](https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/immutability/) is updated as well.
DevExpress · Dec 13, 2017 · 195ad79 · 195ad79
1 parent c870817
commit 195ad79
Show file tree

Hide file tree

Showing 23 changed files with 268 additions and 288 deletions.
diff --git a/packages/dx-grid-core/package.json b/packages/dx-grid-core/package.json
@@ -55,8 +55,7 @@
     "jest": "^21.2.1",
     "rollup": "0.50.0",
     "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-license": "^0.5.0",
-    "seamless-immutable": "^7.1.2"
+    "rollup-plugin-license": "^0.5.0"
   },
   "peerDependencies": {
     "@devexpress/dx-core": "1.0.0-beta.1"

diff --git a/packages/dx-grid-core/src/plugins/editing-state/reducers.js b/packages/dx-grid-core/src/plugins/editing-state/reducers.js
@@ -9,7 +9,7 @@ export const stopEditRows = (prevEditingRows, { rowIds }) => {
 export const addRow = (addedRows, { row }) => [...addedRows, row];
 
 export const changeAddedRow = (addedRows, { rowId, change }) => {
-  const result = Array.from(addedRows);
+  const result = addedRows.slice();
   result[rowId] = { ...result[rowId], ...change };
   return result;
 };

diff --git a/packages/dx-grid-core/src/plugins/editing-state/reducers.test.js b/packages/dx-grid-core/src/plugins/editing-state/reducers.test.js
@@ -1,5 +1,3 @@
-import Immutable from 'seamless-immutable';
-
 import {
   startEditRows,
   stopEditRows,
@@ -15,7 +13,7 @@ import {
 describe('EditingState reducers', () => {
   describe('#startEditRows', () => {
     it('should work', () => {
-      const editingRows = Immutable([1]);
+      const editingRows = [1];
       const payload = { rowIds: [2, 3] };
 
       const nextEditingRows = startEditRows(editingRows, payload);
@@ -24,7 +22,7 @@ describe('EditingState reducers', () => {
   });
   describe('#stopEditRows', () => {
     it('should work', () => {
-      const editingRows = Immutable([1, 2, 3]);
+      const editingRows = [1, 2, 3];
       const payload = { rowIds: [2] };
 
       const nextEditingRows = stopEditRows(editingRows, payload);
@@ -33,7 +31,7 @@ describe('EditingState reducers', () => {
   });
   describe('#addRow', () => {
     it('should work', () => {
-      const addedRows = Immutable([{ a: 1 }]);
+      const addedRows = [{ a: 1 }];
       const payload = { row: { a: 2 } };
 
       const nextAddedRows = addRow(addedRows, payload);
@@ -42,7 +40,7 @@ describe('EditingState reducers', () => {
   });
   describe('#changeAddedRow', () => {
     it('should work', () => {
-      const addedRows = Immutable([{ a: 1 }, { a: 2 }]);
+      const addedRows = [{ a: 1 }, { a: 2 }];
       const payload = { rowId: 0, change: { a: 3 } };
 
       const nextAddedRows = changeAddedRow(addedRows, payload);
@@ -51,7 +49,7 @@ describe('EditingState reducers', () => {
   });
   describe('#cancelAddedRows', () => {
     it('should work', () => {
-      const addedRows = Immutable([{ a: 1 }, { a: 2 }]);
+      const addedRows = [{ a: 1 }, { a: 2 }];
       const payload = { rowIds: [0] };
 
       const nextAddedRows = cancelAddedRows(addedRows, payload);
@@ -60,9 +58,9 @@ describe('EditingState reducers', () => {
   });
   describe('#changeRow', () => {
     it('should work on the first change', () => {
-      const changedRows = Immutable({
+      const changedRows = {
         o1: { a: 1 },
-      });
+      };
       const payload = { rowId: 'o2', change: { a: 2 } };
 
       const nextChangedRows = changeRow(changedRows, payload);
@@ -72,9 +70,9 @@ describe('EditingState reducers', () => {
       });
     });
     it('should work on the second change', () => {
-      const changedRows = Immutable({
+      const changedRows = {
         o1: { a: 1 },
-      });
+      };
       const payload = { rowId: 'o1', change: { a: 2 } };
 
       const nextChangedRows = changeRow(changedRows, payload);
@@ -85,10 +83,10 @@ describe('EditingState reducers', () => {
   });
   describe('#cancelChanges', () => {
     it('should work', () => {
-      const changedRows = Immutable({
+      const changedRows = {
         o1: { a: 1 },
         o2: { a: 2 },
-      });
+      };
       const payload = { rowIds: ['o2'] };
 
       const nextChangedRows = cancelChanges(changedRows, payload);
@@ -99,7 +97,7 @@ describe('EditingState reducers', () => {
   });
   describe('#deleteRows', () => {
     it('should work', () => {
-      const deletedRows = Immutable([1]);
+      const deletedRows = [1];
       const payload = { rowIds: [2] };
 
       const nextDeletedRows = deleteRows(deletedRows, payload);
@@ -108,7 +106,7 @@ describe('EditingState reducers', () => {
   });
   describe('#cancelDeletedRows', () => {
     it('should work', () => {
-      const deletedRows = Immutable([1, 2]);
+      const deletedRows = [1, 2];
       const payload = { rowIds: [2] };
 
       const nextDeletedRows = cancelDeletedRows(deletedRows, payload);

diff --git a/packages/dx-grid-core/src/plugins/filtering-state/reducers.js b/packages/dx-grid-core/src/plugins/filtering-state/reducers.js
@@ -1,6 +1,6 @@
 export const setColumnFilter = (filters, { columnName, config }) => {
   const filterIndex = filters.findIndex(f => f.columnName === columnName);
-  const nextState = Array.from(filters);
+  const nextState = filters.slice();
 
   if (config) {
     const filter = { columnName, ...config };

diff --git a/packages/dx-grid-core/src/plugins/filtering-state/reducers.test.js b/packages/dx-grid-core/src/plugins/filtering-state/reducers.test.js
@@ -1,5 +1,3 @@
-import Immutable from 'seamless-immutable';
-
 import {
   setColumnFilter,
 } from './reducers';
@@ -40,12 +38,5 @@ describe('SortingState reducers', () => {
       const nextFilters = setColumnFilter(filters, payload);
       expect(nextFilters).toEqual([]);
     });
-
-    it('should work with immutable filter', () => {
-      const filters = Immutable([]);
-
-      const nextFilters = setColumnFilter(filters, { columnName: 'column', config: { value: 'value' } });
-      expect(nextFilters).toEqual([{ columnName: 'column', value: 'value' }]);
-    });
   });
 });
diff --git a/packages/dx-grid-core/src/plugins/grouping-state/computeds.js b/packages/dx-grid-core/src/plugins/grouping-state/computeds.js
@@ -4,7 +4,7 @@ export const draftGrouping = (grouping, groupingChange) => {
   if (!groupingChange) return grouping;
 
   const { columnName, groupIndex } = groupingChange;
-  let result = Array.from(grouping);
+  let result = grouping.slice();
 
   if (groupIndex !== -1) {
     result = result.filter(g => g.columnName !== columnName);

diff --git a/packages/dx-grid-core/src/plugins/grouping-state/reducers.js b/packages/dx-grid-core/src/plugins/grouping-state/reducers.js
@@ -1,7 +1,7 @@
 import { GROUP_KEY_SEPARATOR } from './constants';
 
 export const groupByColumn = (state, { columnName, groupIndex }) => {
-  const grouping = Array.from(state.grouping);
+  const grouping = state.grouping.slice();
   const groupingIndex = grouping.findIndex(g => g.columnName === columnName);
   let targetIndex = groupIndex;
 
@@ -41,7 +41,7 @@ export const groupByColumn = (state, { columnName, groupIndex }) => {
 };
 
 export const toggleExpandedGroups = (state, { groupKey }) => {
-  const expandedGroups = Array.from(state.expandedGroups);
+  const expandedGroups = state.expandedGroups.slice();
   const groupKeyIndex = expandedGroups.indexOf(groupKey);
 
   if (groupKeyIndex > -1) {

diff --git a/packages/dx-grid-core/src/plugins/grouping-state/reducers.test.js b/packages/dx-grid-core/src/plugins/grouping-state/reducers.test.js
@@ -1,5 +1,3 @@
-import Immutable from 'seamless-immutable';
-
 import {
   groupByColumn,
   draftGroupingChange,
@@ -66,20 +64,6 @@ describe('GroupingState reducers', () => {
           expandedGroups: [],
         });
     });
-
-    it('should work with immutable grouping', () => {
-      const state = {
-        grouping: Immutable([]),
-      };
-      const payload = { columnName: 'test' };
-
-      expect(groupByColumn(state, payload))
-        .toEqual({
-          grouping: [
-            { columnName: 'test' },
-          ],
-        });
-    });
   });
 
   describe('#toggleExpandedGroups', () => {
@@ -106,18 +90,6 @@ describe('GroupingState reducers', () => {
           expandedGroups: ['a', 'b'],
         });
     });
-
-    it('should work with immutable groups', () => {
-      const state = {
-        expandedGroups: Immutable(['a']),
-      };
-      const payload = { groupKey: 'b' };
-
-      expect(toggleExpandedGroups(state, payload))
-        .toEqual({
-          expandedGroups: ['a', 'b'],
-        });
-    });
   });
 
   describe('#draftGroupingChange', () => {

diff --git a/packages/dx-grid-core/src/plugins/local-sorting/computeds.js b/packages/dx-grid-core/src/plugins/local-sorting/computeds.js
@@ -8,7 +8,7 @@ const defaultCompare = (a, b) => {
 };
 
 const createCompare = (sorting, getColumnCompare, getComparableValue) =>
-  Array.from(sorting)
+  sorting.slice()
     .reverse()
     .reduce(
       (prevCompare, columnSorting) => {
@@ -65,7 +65,7 @@ export const sortedRows = (
 
   if (!getRowLevelKey) {
     const compare = createCompare(sorting, getColumnCompare, getCellValue);
-    return mergeSort(Array.from(rows), compare);
+    return mergeSort(rows.slice(), compare);
   }
 
   const compare = createCompare(sorting, getColumnCompare, (row, columnName) => {

diff --git a/packages/dx-grid-core/src/plugins/local-sorting/computeds.test.js b/packages/dx-grid-core/src/plugins/local-sorting/computeds.test.js
@@ -1,5 +1,3 @@
-import Immutable from 'seamless-immutable';
-
 import {
   sortedRows,
 } from './computeds';
@@ -71,31 +69,6 @@ describe('LocalSorting computeds', () => {
         ]);
       });
 
-      it('should work with immutable data', () => {
-        const immutableRows = Immutable(rows);
-        const immutableSorting = Immutable([{ columnName: 'a', direction: 'desc' }]);
-
-        const sorted = sortedRows(immutableRows, immutableSorting, getCellValue);
-        expect(sorted).toEqual([
-          { a: 2, b: 2 },
-          { a: 2, b: 1 },
-          { a: 1, b: 1 },
-          { a: 1, b: 2 },
-        ]);
-      });
-
-      it('should work with immutable data', () => {
-        const immutableSorting = Immutable([{ columnName: 'a', direction: 'desc' }]);
-
-        const sorted = sortedRows(rows, immutableSorting, getCellValue);
-        expect(sorted).toEqual([
-          { a: 2, b: 2 },
-          { a: 2, b: 1 },
-          { a: 1, b: 1 },
-          { a: 1, b: 2 },
-        ]);
-      });
-
       it('can sort using custom compare', () => {
         const getColumnCompare = jest.fn();
 

diff --git a/packages/dx-grid-core/src/plugins/selection-state/reducers.js b/packages/dx-grid-core/src/plugins/selection-state/reducers.js
@@ -1,5 +1,5 @@
 const setRowSelection = (selection, { rowId, selected }) => {
-  const selectedRows = Array.from(selection);
+  const selectedRows = selection.slice();
   const selectedIndex = selectedRows.indexOf(rowId);
 
   let isRowSelected = selected;

diff --git a/packages/dx-grid-core/src/plugins/selection-state/reducers.test.js b/packages/dx-grid-core/src/plugins/selection-state/reducers.test.js
@@ -1,4 +1,3 @@
-import Immutable from 'seamless-immutable';
 import {
   setRowsSelection,
 } from './reducers';
@@ -90,12 +89,5 @@ describe('SelectionState reducers', () => {
       nextSelection = setRowsSelection(selection, payload);
       expect(nextSelection).toEqual([]);
     });
-
-    it('should work with immutable selection', () => {
-      const selection = Immutable([]);
-
-      const nextSelection = setRowsSelection(selection, { rowIds: [1] });
-      expect(nextSelection).toEqual([1]);
-    });
   });
 });
diff --git a/packages/dx-grid-core/src/plugins/sorting-state/reducers.js b/packages/dx-grid-core/src/plugins/sorting-state/reducers.js
@@ -5,10 +5,10 @@ export const setColumnSorting = (state, {
 
   let nextSorting = [];
   if (keepOther === true) {
-    nextSorting = Array.from(sorting).slice();
+    nextSorting = sorting.slice();
   }
   if (Array.isArray(keepOther)) {
-    nextSorting = Array.from(sorting)
+    nextSorting = sorting.slice()
       .filter(columnSorting => keepOther.indexOf(columnSorting.columnName) > -1);
   }
 

diff --git a/packages/dx-grid-core/src/plugins/sorting-state/reducers.test.js b/packages/dx-grid-core/src/plugins/sorting-state/reducers.test.js
@@ -1,4 +1,3 @@
-import Immutable from 'seamless-immutable';
 import {
   setColumnSorting,
 } from './reducers';
@@ -65,18 +64,6 @@ describe('SortingState reducers', () => {
         });
     });
 
-    it('can initiate multi-column sorting by keepOther option with immutable data', () => {
-      const state = {
-        sorting: Immutable([{ columnName: 'test', direction: 'asc' }]),
-      };
-      const payload = { columnName: 'test2', keepOther: true };
-
-      expect(setColumnSorting(state, payload))
-        .toEqual({
-          sorting: [{ columnName: 'test', direction: 'asc' }, { columnName: 'test2', direction: 'asc' }],
-        });
-    });
-
     it('can initiate multi-column sorting by keepOther option with array', () => {
       const state = {
         sorting: [{ columnName: 'test', direction: 'asc' }, { columnName: 'test1', direction: 'asc' }],
@@ -89,18 +76,6 @@ describe('SortingState reducers', () => {
         });
     });
 
-    it('can initiate multi-column sorting by keepOther option with array with immutable data', () => {
-      const state = {
-        sorting: Immutable([{ columnName: 'test', direction: 'asc' }, { columnName: 'test1', direction: 'asc' }]),
-      };
-      const payload = { columnName: 'test2', keepOther: ['test'] };
-
-      expect(setColumnSorting(state, payload))
-        .toEqual({
-          sorting: [{ columnName: 'test', direction: 'asc' }, { columnName: 'test2', direction: 'asc' }],
-        });
-    });
-
     it('can toggle multi-column sorting', () => {
       const state = {
         sorting: [{ columnName: 'test', direction: 'asc' }, { columnName: 'test2', direction: 'asc' }],

diff --git a/packages/dx-grid-core/src/plugins/table-column-reordering/computeds.js b/packages/dx-grid-core/src/plugins/table-column-reordering/computeds.js
@@ -2,7 +2,7 @@ import { TABLE_DATA_TYPE } from '../table/constants';
 import { TABLE_REORDERING_TYPE } from './constants';
 
 export const orderedColumns = (tableColumns, order) => {
-  const result = Array.from(tableColumns);
+  const result = tableColumns.slice();
 
   result.sort((a, b) => {
     if (a.type !== TABLE_DATA_TYPE || b.type !== TABLE_DATA_TYPE) return 0;

diff --git a/packages/dx-grid-core/src/plugins/table-column-reordering/computeds.test.js b/packages/dx-grid-core/src/plugins/table-column-reordering/computeds.test.js
@@ -1,4 +1,3 @@
-import Immutable from 'seamless-immutable';
 import { TABLE_DATA_TYPE } from '../table/constants';
 import { TABLE_REORDERING_TYPE } from './constants';
 import {
@@ -28,19 +27,6 @@ describe('TableColumnReordering computeds', () => {
         .toBeFalsy();
     });
 
-    it('should work with immutable columns', () => {
-      const tableColumns = Immutable([
-        { type: TABLE_DATA_TYPE, column: { name: 'a' } },
-        { type: TABLE_DATA_TYPE, column: { name: 'b' } },
-      ]);
-
-      expect(orderedColumns(tableColumns, ['b', 'a']))
-        .toEqual([
-          { type: TABLE_DATA_TYPE, column: { name: 'b' } },
-          { type: TABLE_DATA_TYPE, column: { name: 'a' } },
-        ]);
-    });
-
     it('should work correctly with non-data columns', () => {
       const tableColumns = [
         { type: 'test', column: { name: 'a' } },