Code split ag-grid

package.json

@@ -63,6 +63,7 @@
     "happy-dom": "7.7.2",
     "nano-staged": "0.8.0",
     "playwright": "1.27.1",
+    "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.56.1",
     "simple-git-hooks": "2.8.1",
     "stylelint": "^14.16.0",
@@ -78,6 +79,10 @@
     "vitest": "0.25.3"
   },
   "dependencies": {
+    "@ag-grid-community/client-side-row-model": "^28.2.1",
+    "@ag-grid-community/core": "^28.2.1",
+    "@ag-grid-community/react": "^28.2.1",
+    "@ag-grid-community/styles": "^28.2.1",
     "@mantine/core": "^5.9.2",
     "@mantine/dates": "^5.9.2",
     "@mantine/dropzone": "^5.9.2",
@@ -89,8 +94,6 @@
     "@tanstack/react-query": "^4.19.1",
     "@tanstack/react-query-devtools": "^4.19.1",
     "@vitejs/plugin-react": "^2.2.0",
-    "ag-grid-community": "^28.2.1",
-    "ag-grid-react": "^28.2.1",
     "electron-localshortcut": "^3.2.1",
     "electron-store": "^8.1.0",
     "electron-updater": "5.3.0",

packages/renderer/src/app.tsx

@@ -1,4 +1,6 @@
 import { useEffect } from 'react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { ModuleRegistry } from '@ag-grid-community/core';
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -10,7 +12,9 @@ import { queryClient } from './lib/react-query';
 import { AppRouter } from './router/app-router';
 import { useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
-import 'ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-grid.css';
+
+ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
 initSimpleImg({ threshold: 0.05 }, true);
 

packages/renderer/src/components/virtual-table/cells/album-artist-cell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
+import type { ICellRendererParams } from '@ag-grid-community/core';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/api/types';

packages/renderer/src/components/virtual-table/cells/artist-cell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
+import type { ICellRendererParams } from '@ag-grid-community/core';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/api/types';

packages/renderer/src/components/virtual-table/cells/combined-title-cell.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
+import type { ICellRendererParams } from '@ag-grid-community/core';
 import { motion } from 'framer-motion';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';

packages/renderer/src/components/virtual-table/cells/generic-cell.tsx

@@ -1,4 +1,4 @@
-import type { ICellRendererParams } from 'ag-grid-community';
+import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Text } from '/@/components/text';

packages/renderer/src/components/virtual-table/cells/genre-cell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
+import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/api/types';
 import { Text } from '/@/components/text';

packages/renderer/src/components/virtual-table/headers/duration-header.tsx

@@ -1,4 +1,4 @@
-import type { IHeaderParams } from 'ag-grid-community';
+import type { IHeaderParams } from '@ag-grid-community/core';
 import { FiClock } from 'react-icons/fi';
 
 export interface ICustomHeaderParams extends IHeaderParams {

packages/renderer/src/components/virtual-table/headers/generic-table-header.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { IHeaderParams } from 'ag-grid-community';
+import type { IHeaderParams } from '@ag-grid-community/core';
 import { AiOutlineNumber } from 'react-icons/ai';
 import { FiClock } from 'react-icons/fi';
 import styled from 'styled-components';

packages/renderer/src/components/virtual-table/index.tsx

@@ -7,10 +7,10 @@ import type {
   IHeaderParams,
   ValueFormatterParams,
   ColDef,
-} from 'ag-grid-community';
+} from '@ag-grid-community/core';
-import type { AgGridReactProps } from 'ag-grid-react';
+import type { AgGridReactProps } from '@ag-grid-community/react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridReact } from '@ag-grid-community/react';
-import type { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import formatDuration from 'format-duration';
 import { generatePath } from 'react-router';
 import styled from 'styled-components';

packages/renderer/src/features/now-playing/components/play-queue.tsx

@@ -4,8 +4,8 @@ import type {
   ColDef,
   RowClassRules,
   RowDragEvent,
-} from 'ag-grid-community';
+} from '@ag-grid-community/core';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
+import '@ag-grid-community/styles/ag-theme-alpine.css';
 import {
   VirtualGridAutoSizerContainer,
   VirtualGridContainer,