perf: upgrade AG Grid v32 → v33

paddymul · claude · paddymul · commit 564e20d0ec7d · 2026-02-23T23:02:58.000-05:00
Consolidate 6 @ag-grid-community/* packages into 2 unified packages
(ag-grid-community + ag-grid-react). v33 improves internal tree-shaking.

- Rewrite all imports across 16 source files
- Rename CSS variables: --ag-grid-size → --ag-spacing,
  --ag-alpine-active-color → --ag-accent-color,
  --ag-range-selection-background-color-3 → --ag-range-selection-background-color
- ESM bundle: 2,277 KB → 1,722 KB (-24.4%)

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/buckaroo-js-core/package.json b/packages/buckaroo-js-core/package.json
@@ -30,12 +30,8 @@
     "/dist"
   ],
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^32.3.9",
-    "@ag-grid-community/core": "^32.3.9",
-    "@ag-grid-community/infinite-row-model": "^32.3.9",
-    "@ag-grid-community/react": "^32.3.9",
-    "@ag-grid-community/styles": "^32.3.9",
-    "@ag-grid-community/theming": "^32.3.9",
+    "ag-grid-community": "^33.3.2",
+    "ag-grid-react": "^33.3.2",
     "hyparquet": "^1.8.2",
     "lodash-es": "^4.17.21",
     "recharts": "^2.13.1"
diff --git a/packages/buckaroo-js-core/src/components/BuckarooWidgetInfinite.tsx b/packages/buckaroo-js-core/src/components/BuckarooWidgetInfinite.tsx
@@ -15,7 +15,7 @@ import {
     IDisplayArgs
 } from "./DFViewerParts/gridUtils";
 import { DatasourceOrRaw, DFViewerInfinite } from "./DFViewerParts/DFViewerInfinite";
-import { IDatasource } from "@ag-grid-community/core";
+import { IDatasource } from "ag-grid-community";
 import { KeyAwareSmartRowCache, PayloadArgs, PayloadResponse, RequestFN } from "./DFViewerParts/SmartRowCache";
 import { parquetRead, parquetMetadata } from 'hyparquet'
 import { MessageBox } from "./MessageBox";
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerDataHelper.ts b/packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerDataHelper.ts
@@ -1,4 +1,4 @@
-import { IDatasource, IGetRowsParams } from "@ag-grid-community/core";
+import { IDatasource, IGetRowsParams } from "ag-grid-community";
 import { keys, times, reduce } from "lodash-es";
 
 export type RawDataWrapper = {
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerInfinite.tsx b/packages/buckaroo-js-core/src/components/DFViewerParts/DFViewerInfinite.tsx
@@ -8,7 +8,7 @@ import { DFData, DFDataRow, DFViewerConfig, SDFT } from "./DFWhole";
 
 import { getCellRendererSelector, dfToAgrid, extractPinnedRows, extractSDFT } from "./gridUtils";
 
-import { AgGridReact } from "@ag-grid-community/react"; // the AG Grid React Component
+import { AgGridReact } from "ag-grid-react"; // the AG Grid React Component
 import {
     GetRowIdParams,
     GridApi,
@@ -18,10 +18,9 @@ import {
     SortChangedEvent,
     CellClassParams,
     RefreshCellsParams,
-    //ColDef,
-} from "@ag-grid-community/core";
-import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
-import { InfiniteRowModelModule } from "@ag-grid-community/infinite-row-model";
+    ClientSideRowModelModule,
+    InfiniteRowModelModule,
+} from "ag-grid-community";
 
 import {
     getAutoSize,
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/DFWhole.ts b/packages/buckaroo-js-core/src/components/DFViewerParts/DFWhole.ts
@@ -1,6 +1,6 @@
 // I'm not sure about adding underlying types too
 
-import { ColDef, ColGroupDef, GridOptions } from "@ag-grid-community/core";
+import { ColDef, ColGroupDef, GridOptions } from "ag-grid-community";
 
 type AGGrid_ColDef = ColDef;
 export type ColDefOrGroup = ColDef|ColGroupDef
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/Displayer.ts b/packages/buckaroo-js-core/src/components/DFViewerParts/Displayer.ts
@@ -1,4 +1,4 @@
-import { ValueFormatterFunc, ValueFormatterParams } from "@ag-grid-community/core";
+import { ValueFormatterFunc, ValueFormatterParams } from "ag-grid-community";
 import {
     DisplayerArgs,
     cellRendererDisplayers,
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/HistogramCell.tsx b/packages/buckaroo-js-core/src/components/DFViewerParts/HistogramCell.tsx
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 
 import { Bar, BarChart, Tooltip } from "recharts";
 import { getChartColors } from "./ChartCell";
-import { ColDef, Column, Context, GridApi } from "@ag-grid-community/core";
+import { ColDef, Column, Context, GridApi } from "ag-grid-community";
 import { useColorScheme } from "../useColorScheme";
 
 export interface HistogramNode {
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/OtherRenderers.tsx b/packages/buckaroo-js-core/src/components/DFViewerParts/OtherRenderers.tsx
@@ -1,4 +1,4 @@
-import { ValueFormatterFunc } from "@ag-grid-community/core";
+import { ValueFormatterFunc } from "ag-grid-community";
 
 export const getTextCellRenderer = (formatter: ValueFormatterFunc<any>) => {
     const TextCellRenderer = (props: any) => {
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/SeriesSummaryTooltip.tsx b/packages/buckaroo-js-core/src/components/DFViewerParts/SeriesSummaryTooltip.tsx
@@ -1,6 +1,6 @@
 import { DFViewer } from "./DFViewerInfinite";
 import { DFWhole, TooltipConfig } from "./DFWhole";
-import { ITooltipParams } from "@ag-grid-community/core";
+import { ITooltipParams } from "ag-grid-community";
 
 export function getBakedDFViewer(seriesDf: DFWhole) {
     const retFunc = (_props: ITooltipParams) => {
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/Styler.tsx b/packages/buckaroo-js-core/src/components/DFViewerParts/Styler.tsx
@@ -1,6 +1,6 @@
 import {
     CellClassParams,
-} from "@ag-grid-community/core";
+} from "ag-grid-community";
 
 import { BLUE_TO_YELLOW, DIVERGING_RED_WHITE_BLUE } from "../../baked_data/colorMap";
 import {
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.test.ts b/packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.test.ts
@@ -14,7 +14,7 @@ import {
 import { omit } from "lodash-es";
 import { DFData, DFViewerConfig, NormalColumnConfig, MultiIndexColumnConfig, PinnedRowConfig, ColumnConfig } from "./DFWhole";
 import { getFloatFormatter } from './Displayer';
-import { ColDef, ValueFormatterParams } from '@ag-grid-community/core';
+import { ColDef, ValueFormatterParams } from 'ag-grid-community';
 
 describe("testing utility functions in gridUtils ", () => {
   // mostly sanity checks to help develop gridUtils
diff --git a/packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.ts b/packages/buckaroo-js-core/src/components/DFViewerParts/gridUtils.ts
@@ -8,7 +8,11 @@ import {
     IGetRowsParams,
     SizeColumnsToContentStrategy,
     SizeColumnsToFitProvidedWidthStrategy,
-} from "@ag-grid-community/core";
+    colorSchemeDark,
+    colorSchemeLight,
+    themeAlpine,
+    Theme,
+} from "ag-grid-community";
 
 import {
     DFWhole,
@@ -34,7 +38,7 @@ import { getFormatterFromArgs, getCellRenderer, objFormatter, getFormatter } fro
 import { CSSProperties, Dispatch, SetStateAction } from "react";
 import { CommandConfigT } from "../CommandUtils";
 import { KeyAwareSmartRowCache, PayloadArgs } from "./SmartRowCache";
-import { colorSchemeDark, colorSchemeLight, themeAlpine, Theme } from "@ag-grid-community/theming";
+
 
 
 // for now colDef stuff with less than 3 implementantions should stay in this file
diff --git a/packages/buckaroo-js-core/src/components/StatusBar.tsx b/packages/buckaroo-js-core/src/components/StatusBar.tsx
@@ -1,16 +1,13 @@
 // https://plnkr.co/edit/QTNwBb2VEn81lf4t?open=index.tsx
 import React, { useRef, useCallback, useState, memo, useEffect, useMemo } from "react";
 import { clone, fromPairs, includes, indexOf, keys, map } from "lodash-es";
-import { AgGridReact } from "@ag-grid-community/react"; // the AG Grid React Component
-import { ColDef, GridApi, GridOptions, ModuleRegistry } from "@ag-grid-community/core";
+import { AgGridReact, CustomCellEditorProps } from "ag-grid-react";
+import { ColDef, GridApi, GridOptions, ModuleRegistry, ClientSideRowModelModule, Theme } from "ag-grid-community";
 import { basicIntFormatter } from "./DFViewerParts/Displayer";
 import { DFMeta } from "./WidgetTypes";
 import { BuckarooOptions } from "./WidgetTypes";
 import { BuckarooState, BKeys } from "./WidgetTypes";
-import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
-import { CustomCellEditorProps } from '@ag-grid-community/react';
 import { getThemeForScheme } from "./DFViewerParts/gridUtils";
-import { Theme } from "@ag-grid-community/theming";
 import { useColorScheme } from "./useColorScheme";
 
 export type setColumFunc = (newCol: string) => void;
diff --git a/packages/buckaroo-js-core/src/components/utils.ts b/packages/buckaroo-js-core/src/components/utils.ts
@@ -1,6 +1,6 @@
 import { clone, pickBy } from "lodash-es";
 import { DFWhole } from "./DFViewerParts/DFWhole";
-import { ColDef } from "@ag-grid-community/core";
+import { ColDef } from "ag-grid-community";
 
 export type setDFFunc = (newDf: DFWhole) => void;
 
diff --git a/packages/buckaroo-js-core/src/stories/OutsideParamsInconsistency.stories.tsx b/packages/buckaroo-js-core/src/stories/OutsideParamsInconsistency.stories.tsx
@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React, { useMemo, useState } from "react";
 import { DFViewerInfinite } from "../components/DFViewerParts/DFViewerInfinite";
 import { DFViewerConfig } from "../components/DFViewerParts/DFWhole";
-import { IDatasource, IGetRowsParams } from "@ag-grid-community/core";
+import { IDatasource, IGetRowsParams } from "ag-grid-community";
 
 const makeContextualDatasource = (dataA: any[], dataB: any[], delayMs = 0): IDatasource => {
   const total = Math.max(dataA.length, dataB.length);
diff --git a/packages/buckaroo-js-core/src/stories/RawAGGrid.stories.tsx b/packages/buckaroo-js-core/src/stories/RawAGGrid.stories.tsx
@@ -4,20 +4,17 @@ import { DFData } from "../components/DFViewerParts/DFWhole";
 import { createDatasourceWrapper, DatasourceWrapper } from "../components/DFViewerParts/DFViewerDataHelper";
 
 import {SelectBox } from './StoryUtils'
-import { AgGridReact } from "@ag-grid-community/react"; // the AG Grid React Component
+import { AgGridReact } from "ag-grid-react";
 import {
     GridOptions,
-    //IDatasource,
     ModuleRegistry,
     ColDef,
-    CellClassParams
-} from "@ag-grid-community/core";
-
-import { themeAlpine} from '@ag-grid-community/theming';
-import { colorSchemeDark } from '@ag-grid-community/theming';
-
-import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
-import { InfiniteRowModelModule } from "@ag-grid-community/infinite-row-model";
+    CellClassParams,
+    themeAlpine,
+    colorSchemeDark,
+    ClientSideRowModelModule,
+    InfiniteRowModelModule,
+} from "ag-grid-community";
 
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 ModuleRegistry.registerModules([InfiniteRowModelModule]);
diff --git a/packages/buckaroo-js-core/src/style/dcf-npm.css b/packages/buckaroo-js-core/src/style/dcf-npm.css
@@ -58,8 +58,8 @@
   font-size: 0.95em;
 }
 .dependent-tabs ul.tabs li.active {
-  background: var(--ag-range-selection-background-color-3);
-  color: var(--ag-alpine-active-color);
+  background: var(--ag-range-selection-background-color);
+  color: var(--ag-accent-color);
 }
 .dependent-tabs .output-area {
   clear: both;
@@ -366,7 +366,7 @@
 }
 
 .ag-theme-alpine-dark, .ag-theme-alpine  {
-    --ag-grid-size:3px;
+    --ag-spacing:3px;
     --ag-list-item-height: 20px;
  }
 
diff --git a/packages/pnpm-lock.yaml b/packages/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { IDatasource, IGetRowsParams } from "@ag-grid-community/core";`
	`1`	`+import { IDatasource, IGetRowsParams } from "ag-grid-community";`
`2`	`2`	`import { keys, times, reduce } from "lodash-es";`
`3`	`3`
`4`	`4`	`export type RawDataWrapper = {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ValueFormatterFunc, ValueFormatterParams } from "@ag-grid-community/core";`
	`1`	`+import { ValueFormatterFunc, ValueFormatterParams } from "ag-grid-community";`
`2`	`2`	`import {`
`3`	`3`	`DisplayerArgs,`
`4`	`4`	`cellRendererDisplayers,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ValueFormatterFunc } from "@ag-grid-community/core";`
	`1`	`+import { ValueFormatterFunc } from "ag-grid-community";`
`2`	`2`
`3`	`3`	`export const getTextCellRenderer = (formatter: ValueFormatterFunc<any>) => {`
`4`	`4`	`const TextCellRenderer = (props: any) => {`