Remove ReactDataGrid dependency from addons bundle #1272

malonecj · 2018-09-06T11:23:43Z

Description

ReactDataGrid code was being output in both main bundle and addons package. This was resulting in
redundant code and large bundle size.

Tasks

Move common code to common package

Previous bundle size

                                                   Asset     Size  Chunks             Chunk Names
                   react-data-grid-examples/dist/index.js  3.85 MB       0  [emitted]  react-data-grid-examples/dist/index
react-data-grid-addons/dist/react-data-grid-addons.min.js   518 kB       1  [emitted]  react-data-grid-addons/dist/react-data-grid-addons.min
    react-data-grid-addons/dist/react-data-grid-addons.js  1.24 MB       2  [emitted]  react-data-grid-addons/dist/react-data-grid-addons
              react-data-grid/dist/react-data-grid.min.js   225 kB       3  [emitted]  react-data-grid/dist/react-data-grid.min
                  react-data-grid/dist/react-data-grid.js   487 kB       4  [emitted]  react-data-grid/dist/react-data-grid

New bundle size

                                                    Asset     Size  Chunks             Chunk Names
                   react-data-grid-examples/dist/index.js  3.85 MB       0  [emitted]  react-data-grid-examples/dist/index
react-data-grid-addons/dist/react-data-grid-addons.min.js   373 kB       1  [emitted]  react-data-grid-addons/dist/react-data-grid-addons.min
    react-data-grid-addons/dist/react-data-grid-addons.js   949 kB       2  [emitted]  react-data-grid-addons/dist/react-data-grid-addons
              react-data-grid/dist/react-data-grid.min.js   226 kB       3  [emitted]  react-data-grid/dist/react-data-grid.min
                  react-data-grid/dist/react-data-grid.js   490 kB       4  [emitted]  react-data-grid/dist/react-data-grid

amanmahajan7

Looks good, a few cleanup comments.

How did we reduce the bundle size? addons size is reduced by 291 KB(unminified) but the grid package size is 490 KB, do we still have common code?

amanmahajan7 · 2018-09-06T15:57:47Z

packages/common/constants/zIndexes.js

+  EDITOR_CONTAINER: 10,
+  FROZEN_CELL_MASK: 15,
+  FROZEN_EDITOR_CONTAINER: 20
+};


We can use individual exports for better error checking, treeshaking
https://medium.com/@rauschma/note-that-default-exporting-objects-is-usually-an-anti-pattern-if-you-want-to-export-the-cf674423ac38

export const CELL_MASK = 5; ..

I would agree but it is a very small file, and I think it is clearer to reference zIndexes.CELL_MASK rather than just CELL_MASK

amanmahajan7 · 2018-09-06T15:58:30Z

packages/common/cells/headerCells/FilterableHeaderCell.js

@@ -1,5 +1,5 @@
 const React              = require('react');
-const ExcelColumn        = require('../../PropTypeShapes/ExcelColumn');
+const ExcelColumn        = require('common/prop-shapes/ExcelColumn');


Lets change the require statement to ES6 import

amanmahajan7 · 2018-09-06T16:00:44Z

packages/common/utils/RowComparer.js

+    currentProps.extraClasses !== nextProps.extraClasses;
+};
+
+export default shouldRowUpdate;


I usually prefer the following but I am fine with either

export default function shouldRowUpdate { }

amanmahajan7 · 2018-09-06T16:02:16Z

packages/common/utils/isEmptyObject.js

  return Object.keys(obj).length === 0 && obj.constructor === Object;
 }

-module.exports = isEmpty;
+


Should we just combine these functions in a single utils.js file or update the index file with ES6 re-exports?

amanmahajan7 · 2018-09-06T16:10:40Z

packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js

@@ -84,7 +83,8 @@ DraggableHeaderCell.propTypes = {
  connectDropTarget: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired,
  isOver: PropTypes.bool,
-  canDrop: PropTypes.bool
+  canDrop: PropTypes.bool,
+  renderHeaderCell: PropTypes.fund


typo PropTypes.func, also it seems like it is a required prop

Needs to be fixed

amanmahajan7 · 2018-09-06T16:13:38Z

packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js


 describe('<DraggableHeaderCell />', () => {
  it('should render grid HeaderCell wrapper with cursor: move ', () => {
    const wrapper = shallow(
      <DraggableContainer>
-        <DraggableHeaderCell />
+        <DraggableHeaderCell renderHeaderCell={() => HeaderCell}/>


Is this correct? Should it be () => <HeaderCell /> instead?

amanmahajan7 · 2018-09-06T16:15:53Z

packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js

  }
 }

 DraggableHeaderCell.propTypes = {
  connectDragSource: PropTypes.func.isRequired,
  connectDragPreview: PropTypes.func.isRequired,
-  isDragging: PropTypes.bool.isRequired
+  isDragging: PropTypes.bool.isRequired,
+  renderHeaderCell: PropTypes.func


Same here, should it be a required prop? Or we can add a defaultProp

amanmahajan7 · 2018-09-06T16:28:11Z

packages/common/constants/index.js

+};
+
+const CellExpand = {
+  DOWN_TRIANGLE: String.fromCharCode('9660'),


String.fromCharCode takes a number

DOWN_TRIANGLE: String.fromCharCode(9660),

amanmahajan7 · 2018-09-06T18:05:30Z

packages/react-data-grid/src/CellExpand.js

      </span>
    );
  }
 }

-export default CellExpand;
+export default CellExpander;


May be change the file name to CellExpander.js

malonecj · 2018-09-07T10:15:17Z

@amanmahajan7 Main goal was to make sure that the grid code was not output to the page twice if you include both react-data-grid and addons packages. The main package code has increased by 3kb unminified but that is ok. Next task is to remove Immutable JS from bundle

amanmahajan7

Looks good

amanmahajan7

A few additional comments I missed earlier

amanmahajan7 · 2018-09-10T15:02:27Z

packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js

+
+  render() {
+    return (
+      <div className="react-grid-HeaderCell" style={this.getStyle()}>


We can add a ref and remove ReactDOM.findDOMNode(this)

amanmahajan7 · 2018-09-10T15:02:55Z

packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js

@@ -84,7 +83,8 @@ DraggableHeaderCell.propTypes = {
  connectDropTarget: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired,
  isOver: PropTypes.bool,
-  canDrop: PropTypes.bool
+  canDrop: PropTypes.bool,
+  renderHeaderCell: PropTypes.fund


Needs to be fixed

amanmahajan7 · 2018-09-10T15:05:30Z

packages/react-data-grid/src/HeaderRow.js

@@ -3,8 +3,8 @@ const shallowEqual    = require('shallowequal');
 const BaseHeaderCell        = require('./HeaderCell');
 const getScrollbarSize  = require('./getScrollbarSize');
 const columnUtils  = require('./ColumnUtils');
-const SortableHeaderCell    = require('./cells/headerCells/SortableHeaderCell');
-const FilterableHeaderCell  = require('./cells/headerCells/FilterableHeaderCell');
+const SortableHeaderCell    = require('common/cells/headerCells/SortableHeaderCell');


Any reason we moved SortableHeaderCell and FilterableHeaderCell components to the common folder?

They are currently referenced in both addons and main package. I didnt want to make more changes in the code so moved them to common where they are still referenced by both packages

* Allow for optional SimpleCellFormatter.value prop (#948) * Improve Cell navigation Performance (#1123) * Move cell selection responsibilty to SelectionMask component * Selection Mask working at 60fps * Tests for InteractionMask navigation * Editor Container in interaction Layer * commit package-lock.json * Editing Working * smooth scrolling with keyboard navigation * Adjust visible start/end calculations after scroll * Vertical cell Scrolling with keyboard working * generic move command * Vertical scrolling navigation with keyboard working * Code cleanup - Remove extra ref - Format JSX * Update react to the stable version Delete/Ignore package-lock.json * Remove deprecated babel plugins * Export individual constants instead of exporting a default object * Remove react dependency from react-data-grid Delete package.json for now * Remove ReactDOM reference and use refs instead * More code cleanup - Fix formatting - Remove extra spread operator * Add innerRef to fix scrolling Remove unused methods * Remove GridWrapper and GridContainer as it breaks instance methods * Remove unused CellExpander component * - Remove singleton store - Add basic implementation for store/reducer/dispatch - Remove CellContainer to prevent rerendering of each cell on selection change * Delete unused files Cleanup event handlers * Move copy paste functionality to the Interaction mask component Check if cell is editable * Remove flow types * Remove flow types * Remove unused variables * Move copy/paste logic to the interaction layer * Horizontal scroll using keyboard Temporarily disable animation * Rename folder to containers * Fix cell navigation mode * Do not prevent event bubling to show context menu * Add pointer events to fix cell actions * Fix Filter Row focus * Dynamically connect cell to support custom renderers * Fox committing changes Disable cell container component as it degraded performance * Migrate cell drag down to Interaction Layer * Remove react-motion * Add CellMask to highlight copied cell * Add drag mask to highlight dragged cells * Cleanup render method * Add eventbus to communicate with InteractionMask component Delete state and containers * Move EventTypes to contants folder * Fix clicking on a cell scrolls the canvas to the top * Fix cell double click to edit * Fix tests InteractionMasks * Fix issue with press enter not committing * Keep InteractionMask focus logic in central place * Fix canvas tests * Fix Canvas tests * Remove redundant Cell tests * Fix Cell tests and remove redundant ones * Fix clicking on a cell scrolls the canvas to the left Remove componentWillMount * Add a new DragEnter method Some code cleanup * Delete redundant displayStart and displayEnd states * Prevent navigation in FF on drag * Fix Grid.js and remove redundant tests * Move tab behaviour from ReactDataGrid to InteractionMask * Clean up initial tests for tab behavior in InteractionMasks * Fix typo and event name * Use CellNavigationMode constant * Ignore invalid drag items * Use a single div instead of multiple divs for drag mask * Fix SelectionMask zIndex for locked columns * Delete OverflowCell and OverflowRow components * Remove unused props and methods * Clean up props * Fix scrolling when scrollToRowIndex is set * Reorder props for clarity * Commented unused props and methods * Fix ESLint errors * Dispatch SCROLL_TO_COLUMN event to scroll Canvas from ReactDataGrid * Trigger onCellSelected, onCellDeSelected events when cell selection is changed Fix openCellEditor instance method * Fix openCellEditor instance method * Specify required PropTypes * Fix closing tags * Enable auto focus on grid * Fix last row check * Implement tab behavior for InteractionMasks * Fix PropTypes warnings Remove unused state * Fix Cell PropTypes * Fix rowData in EditorContainer * Fix null reference error for drag copy * Check onCheckCellIsEditable for editing * Fix some broken unit tests * Removed redundant and fixed remaining tests * Fix context menu * Fix RowsContainer unit tests * Disable duplicate tests * Fix example home page fonts * Install latest node version * Simplify appveyor script after node upgrade * Fix lint errors * Fix failing IE 11 test * IE compatible version of Array.keys * packages/rdg-test-utils/index.js * Delete unused test-utils project * install gulp gloablly in order to post to coveralls * Use node 6 on appveyor * Delete obsolete scroll utils * Add unit tests for CellMask * Add unit tests for CopyMask * Add unit tests for DragMask * Remove fdescribe * Add unit tests for DragHandle * Add unit tests for EventBus * Format code and object initialization cleanup * Add unit test for copy operation * Use conditional rendering instead of returning null * Add unit tests for Drag functionaity * Add unit tests for the SelectionMask component * Add unit tests for CanvasUtils * Add unit tests for context menu * Add test to check if Canvas renders the InteractionMasks component * Delete commented code * Handle scrolling when selected cell hits the top/bottom boundary when the cellNavigationMode is changeRow * Fix tab behavior * Fix cell selection mask for grouped rows * Add back IE support * Add polyfills for Set and Map to make the examples work in IE10 * Remove unused variable * Fix zIndex for filters * Fix scrolling when editor is closed * Deleted commented code * Fix eslint errors * Delete obsolete tests Remove commented code * Fix Typo * Move the drag enter logic to Row component * Uncomment code * Fix event bus prop type * Define ref callback as a bound method on the class * Remove private getSelectedValue method * Fix Cell component export and columns count (#1227) * Fix cell export * Fix columns count * update file names (#1245) * Rectangular selection range support (on top of 'next') (#1210) * Allow selection of ranges (with mouse & keyboard) Parent components of ReactDataGrid can subscribe to (start, update, end) events about selection ranges. An example page demonstrates this. * Minor InteractionMasks refactoring based on comments on PR #1210 * Update ReactDataGrid API to group cell range event handlers under cellRangeSelection prop * Refactor single and multi-cell range selection masks into components * Revert "Refactor single and multi-cell range selection masks into components" This reverts commit 8ea34d7. * Scrolling improvements (#1254) * Effiecient windowing example * Remove use of refs to setScrollLeft. Renamed row/col visible boundary property names * Calculate overscan columns based on scroll direction * Render overscan columns and rows based on scroll direction * Set height of grid * Improved overscan row/col calcualtion * Send isScrolling prop to formatters to improve perf of complex formatters * Pass isScrolling prop to HeaderCell and Formatter * Pass isScrolling prop to HeaderCell and Formatter 2 * Set pointer-events to none when scrolling * reset setScrollLeft functionality to enable frozen columns * Ensure set scroll left on frozen columns when scrolling in vertical direction * Fix context menu * zindex styles for locked cells * Render overscan columns when row scrolling has complete * Show correct SelectionMask position for locked cells * is scrolling example * Do not deep compare dependentValues check * Ensure rowOverscanEndIdx within bounds * Ensure frozen cells are mounted in correct fixed position if canvas has been scrolled * Move InteractionMasks styles to a separate file * Cherry pick set cell ref commit * Base SelectionMask top and left off rendered cells to handle dynamic row heights * Take scroll left into account when open editor container * Catchup with next branch * Re-add lost canvas.js file * Fix lint errors * Fix some build errors * Remove references to deleted RowsContainer file * Fix typo * Fix InteractionMaks test * Fix some tests * Fix failing tests * Handle dynamic row heights in SelectionMask * Remove unnecessary packages * Viewport scroll calculations * Address pull request comments * use let instead of const in checkScroll function * Remove unneeded id from Row component * Chang logic around getRenderedColumns * Address more PR comments * Tests for Viewport Utils * Fix lint errors and remove console rule from lintrc * Tests for getScrollDirection * Tests for getRowOverscanStartIdx * getRowOverscanEndIdx tests * Tests for getColOverscanEndIdx * Tidy up syntax in example31-isScrolling * Ensure locked columns are shifted to start of column metrics array * Test for rendering the correct cells * Fix lint errors * Rename all fixed/locked/frozen columns to frozen * Fix tests after npm update * Fix IE test * Fixed new warnings in tests * Fix failing test * Update version to 5.0.0-alpha1 * Ensure render all visible columns if scrolled to the right and using frozen columns * Version bump * Change test expectation * Fix test * Ensure last column is rendered when grid scrolled and using frozen columns * Minor version bump * Handle viewport scroll state when no columns present * 5.0.0-alpha8 * Fallback for getSelectedRowTop if no access to row ref * Fix some bugs around cell selection for RowGroups * Fix failing test * Pass row prop to formatters * Fix failing test and version bump * Fix lint error * Re-add deprecated onRowUpdatedMethod - to be removed in v6 * Address some more PR comments * Air BNB browser shims for Enzyme testing * Remove unused functions * prop deprecation warnings * onDragHandleDoubleClick deprecation warning * Publish next branch on commit to next * Get selected row columns if applicable * Fix failing tests * Update npmrc token * Fix some zIndex issues around frozen cells and editors * Remove ReactDataGrid dependency from addons bundle (#1272) * Fix some zIndex issues around frozen cells and editors * Remove rdg dependency from addons package * Fix object assign * Adress PR comments * Fix tests * Fix lint error * add ref to draggable header cell * Adress PR comments * Pass renderBase row and correct ref to custom row renderer * Change editor container to be fixed position * Add missing rdg-editor-container class on EditorContainer (#1275) * Ensure row refs reference an RDG Row component * Show all columns unless scrolling vertically * isFrozen column check * Render edtior container without taking scrollLeft into account if column is frozen * Set CellMask position to be fixed when scrolling horizontally and frozen column is selected * Unit tests and refactoring (#1279) Added unit tests for editor position relating to frozen columns. And refactored spec file, updating legacy code * Upgrade to RDG 5

serv · 2018-10-25T02:20:31Z

When I attempt to create a build using parcel, it say I need immutable still.

🚨  /Users/jasonkim/work/cmg-ad-reporting-ui/node_modules/react-data-grid/dist/react-data-grid.js:7:85: Cannot resolve dependency 'immutable'
   5 | 		define(["react", "react-dom", "immutable"], factory);
   6 | 	else if(typeof exports === 'object')
>  7 | 		exports["ReactDataGrid"] = factory(require("react"), require("react-dom"), require("immutable"));
     | 		                                                                                  ^
   8 | 	else
   9 | 		root["ReactDataGrid"] = factory(root["React"], root["ReactDOM"], root["immutable"]);
  10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_16__, __WEBPACK_EXTERNAL_MODULE_33__) {

I had to fix the issue temporarily instsall immutable

npm i --save immutable

malonecj added 3 commits September 5, 2018 10:43

Fix some zIndex issues around frozen cells and editors

5134c89

Remove rdg dependency from addons package

955d673

Fix object assign

be93dad

malonecj changed the title ~~Cm fix bundle~~ Remove ReactDataGrid dependency from addons bundle Sep 6, 2018

amanmahajan7 requested changes Sep 6, 2018

View reviewed changes

malonecj added 2 commits September 7, 2018 10:30

Adress PR comments

a189f4a

Fix tests

24a0e7d

Fix lint error

3560fb5

amanmahajan7 approved these changes Sep 10, 2018

View reviewed changes

amanmahajan7 reviewed Sep 10, 2018

View reviewed changes

malonecj added 2 commits September 11, 2018 09:51

add ref to draggable header cell

12764bf

Adress PR comments

0f5bdeb

amanmahajan7 approved these changes Sep 11, 2018

View reviewed changes

amanmahajan7 merged commit ab2da43 into next Sep 11, 2018

amanmahajan7 deleted the cm-fix-bundle branch September 11, 2018 16:04

malonecj mentioned this pull request Oct 22, 2018

5.0.1 #1312

Merged

amanmahajan7 mentioned this pull request Oct 31, 2018

Remove react-data-grid dependency from the addons package #1354

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove ReactDataGrid dependency from addons bundle #1272

Remove ReactDataGrid dependency from addons bundle #1272

malonecj commented Sep 6, 2018 •

edited

Loading

amanmahajan7 left a comment

amanmahajan7 Sep 6, 2018

malonecj Sep 11, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 10, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

amanmahajan7 Sep 6, 2018

malonecj commented Sep 7, 2018

amanmahajan7 left a comment

amanmahajan7 left a comment

amanmahajan7 Sep 10, 2018

amanmahajan7 Sep 10, 2018

amanmahajan7 Sep 10, 2018 •

edited

Loading

malonecj Sep 11, 2018

serv commented Oct 25, 2018 •

edited

Loading

Remove ReactDataGrid dependency from addons bundle #1272

Remove ReactDataGrid dependency from addons bundle #1272

Conversation

malonecj commented Sep 6, 2018 • edited Loading

Description

Tasks

Previous bundle size

New bundle size

amanmahajan7 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

malonecj commented Sep 7, 2018

amanmahajan7 left a comment

Choose a reason for hiding this comment

amanmahajan7 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amanmahajan7 Sep 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

serv commented Oct 25, 2018 • edited Loading

malonecj commented Sep 6, 2018 •

edited

Loading

amanmahajan7 Sep 10, 2018 •

edited

Loading

serv commented Oct 25, 2018 •

edited

Loading