Update Ag Grid to 31.1.0

NPM_CHANGELOG.md

@@ -1,5 +1,10 @@
 # NPM Changelog
 
+## [4.0.0]
+
+- Updates AG Grid to 31.1.x
+- AG Grid dependencies now via modules (https://www.ag-grid.com/javascript-data-grid/modules/). If you are upgrading from an older version, you need to change your NPM dependencies to use the module-based imports. Also check your Browser console for warnings from AG Grid.
+
 ## [3.7.1]
 
 - Explicitly check in column events for `finished === false`

README.md

@@ -27,7 +27,7 @@ new ElmAgGrid();
 Elm.Main.init({ node: document.getElementById("app") });
 ```
 
-**Note:** The package requires at least `ag-grid-community` to be available in the project.
+**Note:** The package requires at least `@ag-grid-community/core` to be available in the project.
 
 ## Package version requirements
 
@@ -47,16 +47,16 @@ The latest [Elm package version](https://package.elm-lang.org/packages/mercuryme
 | 14.0.0 - 18.0.0 |   3.4.0 - 3.4.2    |
 | 19.0.0 - 22.0.0 |       3.5.0        |
 | 23.0.0 - 23.1.0 |       3.6.0        |
-|   24.0.0 - \*   |   3.7.0 - 3.7.1    |
+|   24.0.0 - \*   |   3.7.0 - 4.0.0    |
 
 ## Ag Grid Enterprise
 
-The `elm-ag-grid` package uses Ag Grid Enterprise features. To enable them install the `ag-grid-enterprise` package and activate it by setting the license key. See the [official Ag Grid documentation](http://54.222.217.254/javascript-grid-set-license/) for further details.
+The `elm-ag-grid` package uses Ag Grid Enterprise features. To enable them install the `@ag-grid-enterprise/core` package and activate it by setting the license key. See the [official Ag Grid documentation](http://54.222.217.254/javascript-grid-set-license/) for further details.
 
 ```js
-import * as AgGridEnterprise from "ag-grid-enterprise";
+import { LicenseManager } from '@ag-grid-enterprise/core'
 
-AgGridEnterprise.LicenseManager.setLicenseKey("YOUR-LICENSE-KEY");
+LicenseManager.setLicenseKey("YOUR LICENSE KEY");
 ```
 
 ## Themes

ag-grid-webcomponent/index.js

@@ -1,4 +1,4 @@
-import { Grid, ComponentUtil } from "ag-grid-community";
+import { createGrid, ComponentUtil } from "@ag-grid-community/core";
 
 import cellRenderer from "./cell_renderer";
 import cellEditor from "./cell_editor";
@@ -58,20 +58,14 @@ class AgGrid extends HTMLElement {
   set gridOptions(options) {
     let globalEventListener = this.globalEventListener.bind(this);
 
-    this._gridOptions = ComponentUtil.copyAttributesToGridOptions(
-      options,
-      this._preInitAgGridAttributes
-    );
-
+    let mergedOptions = Object.assign(options, this._preInitAgGridAttributes)
 
     // Can only be instantiated once
     if (!this._initialised) {
       // prevent instantiating multiple grids
       let gridParams = { globalEventListener };
-      this._agGrid = new Grid(this, this._gridOptions, gridParams);
+      this._api = createGrid(this, mergedOptions, gridParams);
 
-      this.api = options.api;
-      this.columnApi = options.columnApi;
       this._initialised = true;
 
       Object.entries(this._preInitCustomAttributes).map(
@@ -102,7 +96,7 @@ class AgGrid extends HTMLElement {
   }
 
   set columnState(state) {
-    this.columnApi.applyColumnState({ state: state, applyOrder: true });
+    this._api.applyColumnState({ state: state, applyOrder: true });
   }
 
   set disableResizeOnScroll(disabled) {
@@ -116,7 +110,7 @@ class AgGrid extends HTMLElement {
   }
 
   set filterState(state) {
-    this.api.setFilterModel(state);
+    this._api.setFilterModel(state);
   }
 
   set sizeToFitAfterFirstDataRendered(sizeToFit) {
@@ -132,16 +126,16 @@ class AgGrid extends HTMLElement {
   set rowData(data) {
     this._applyChange("rowData", data);
 
-    if (this._agGrid.gridOptions.rowData === null) {
-      this.api.showNoRowsOverlay();
+    if (data == []) {
+      this._api.showNoRowsOverlay();
     }
   }
 
   set selectedIds(selectedIds) {
     if (selectedIds.length == 0) {
-      this.api.deselectAll();
+      this._api.deselectAll();
     } else {
-      this.api.forEachNode(function (node) {
+      this._api.forEachNode(function (node) {
         const selected = selectedIds.includes(node.id);
         node.setSelected(selected);
       });
@@ -159,7 +153,7 @@ class AgGrid extends HTMLElement {
         ),
       };
     }
-    this.api.setColumnDefs(defs.map(applyCallbacks));
+    this._api.updateGridOptions({columnDefs: defs.map(applyCallbacks)});
   }
 
   set getContextMenuItems(data) {
@@ -212,10 +206,7 @@ class AgGrid extends HTMLElement {
   }
 
   _applyChange(propertyName, newValue) {
-    let changeObject = {};
-    changeObject[propertyName] = { currentValue: newValue };
-
-    ComponentUtil.processOnChange(changeObject, this.api);
+    this._api.setGridOption(propertyName, newValue);
   }
 
   _addEventHandler(eventName, type, callback) {
@@ -224,9 +215,9 @@ class AgGrid extends HTMLElement {
 
     this._events = collection;
 
-    this._gridOptions[eventName] = function (args) {
+    this._api.setGridOption(eventName, function (args) {
       Object.values(collection).map((event) => event(args));
-    };
+    });
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -361,7 +352,7 @@ class AgGrid extends HTMLElement {
 
         const stateChangeEvent = columnStateChangedEvent(
           params,
-          params.columnApi.getColumnState()
+          params.api.getColumnState()
         );
 
         _this.dispatchEvent(stateChangeEvent);

examples/index.js

@@ -1,18 +1,39 @@
 import "@webcomponents/custom-elements";
-import * as AgGridEnterprise from "ag-grid-enterprise";
 
-// This would usually be the pacakge import
+// This would usually be the package import
 // import ElmAgGrid from "@mercurymedia/elm-ag-grid";
 import ElmAgGrid from "../ag-grid-webcomponent";
 import { Elm } from "./src/Main.elm";
 
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-balham.css";
+import { ModuleRegistry } from '@ag-grid-community/core'
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'
+import { LicenseManager } from '@ag-grid-enterprise/core'
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel'
+import { FiltersToolPanelModule } from '@ag-grid-enterprise/filter-tool-panel'
+import { MenuModule } from '@ag-grid-enterprise/menu'
+import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection'
+import { RichSelectModule } from '@ag-grid-enterprise/rich-select'
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping'
+import { SideBarModule } from '@ag-grid-enterprise/side-bar'
+
+// For AG Grid Enterprise features set your license key here:
+// LicenseManager.setLicenseKey("YOUR LICENSE KEY");
+
+ModuleRegistry.registerModules([
+  ClientSideRowModelModule,
+  ColumnsToolPanelModule,
+  FiltersToolPanelModule,
+  MenuModule,
+  RangeSelectionModule,
+  RichSelectModule,
+  RowGroupingModule,
+  SideBarModule
+]);
+
+import "@ag-grid-community/styles/ag-grid.css";
+import "@ag-grid-community/styles/ag-theme-balham.css";
 import "./styles/ag_grid_custom.css";
 
-// For AG Grid Enterprise you can set license key by calling:
-// AgGridEnterprise.LicenseManager.setLicenseKey("YOUR-LICENSE-KEY");
-
 // Component import
 import ButtonRenderer from "./src/Components/Button.elm";
 import LinkRenderer from "./src/Components/Link.elm";