Add bundle size validations + cleanup main entry points

eslint.config.mjs

@@ -77,6 +77,7 @@ export default [
             '**/eslint.config.mjs',
             '**/jest.*.{cjs,js}',
             '**/.dependency-cruiser.js',
+            '**/.size-limit.js',
         ],
     },
     pluginJs.configs.recommended,

package.json

@@ -39,6 +39,9 @@
     "@nx/js": "18.3.4",
     "@nx/vite": "18.3.4",
     "@nx/workspace": "18.3.4",
+    "@size-limit/esbuild": "^11.1.6",
+    "@size-limit/esbuild-why": "^11.1.6",
+    "@size-limit/file": "^11.1.6",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "0.1.62",
     "@swc/core": "1.3.96",
@@ -71,8 +74,8 @@
     "esbuild-plugin-umd-wrapper": "^2.0.0",
     "eslint": "^9.14.0",
     "eslint-plugin-check-file": "^2.8.0",
-    "eslint-plugin-sonarjs": "^2.0.4",
     "eslint-plugin-react-hooks": "^5.1.0-rc-df783f9ea1-20240708",
+    "eslint-plugin-sonarjs": "^2.0.4",
     "glob": "8.0.3",
     "globals": "^15.12.0",
     "html-minifier-terser": "^7.2.0",
@@ -106,6 +109,7 @@
     "react-instantsearch-dom": "^6.40.1",
     "react-query": "^3.39.3",
     "rimraf": "3.0.2",
+    "size-limit": "^11.1.6",
     "sucrase": "^3.32.0",
     "timezone-mock": "^1.3.6",
     "ts-jest": "^29.1.0",

packages/ag-charts-community/.npmignore

@@ -5,6 +5,7 @@ tools
 .prettierignore
 .swcrc
 .dependency-cruiser.js
+.size-limit.js
 jest.*
 tsconfig.*
 project.json

packages/ag-charts-community/.size-limit.js

@@ -0,0 +1,19 @@
+const defaultConfig = {
+    path: './src/main-modules.ts',
+    brotli: false,
+};
+
+module.exports = [
+    {
+        name: 'Full package',
+        import: '*',
+        limit: '200 kB',
+        ...defaultConfig,
+    },
+    // {
+    //     name: 'Testing EventEmitter',
+    //     import: '{ EventEmitter }',
+    //     limit: '20 kB',
+    //     ...defaultConfig,
+    // },
+];

packages/ag-charts-community/package.json

@@ -7,18 +7,22 @@
   "module": "./dist/package/main.esm.mjs",
   "exports": {
     ".": {
-      "import": "./dist/package/main.esm.mjs",
-      "require": "./dist/package/main.cjs.js",
       "types": "./dist/types/src/main.d.ts",
+      "require": "./dist/package/main.cjs.js",
+      "import": "./dist/package/main.esm.mjs",
       "default": "./dist/package/main.cjs.js"
     },
-    "./scene": {
-      "import": "./dist/package/integrated-charts-scene.esm.mjs",
-      "require": "./dist/package/integrated-charts-scene.cjs.js",
-      "types": "./dist/types/src/integrated-charts-scene.d.ts",
-      "default": "./dist/package/integrated-charts-scene.cjs.js"
+    "./modules": {
+      "types": "./dist/types/src/main-modules.d.ts",
+      "require": "./dist/package/main-modules.cjs.js",
+      "import": "./dist/package/main-modules.esm.mjs",
+      "default": "./dist/package/main-modules.cjs.js"
     }
   },
+  "sideEffects": [
+    "*.css",
+    "*.html"
+  ],
   "scripts": {
     "lint:prune": "npx ts-prune -p tsconfig.lib.json"
   },

packages/ag-charts-community/project.json

@@ -16,13 +16,13 @@
     },
     "build:types": {
       "options": {
-        "additionalEntryPoints": ["{projectRoot}/src/integrated-charts-scene.ts"]
+        "additionalEntryPoints": ["{projectRoot}/src/main-modules.ts"]
       }
     },
     "build:test": {},
     "build:package": {
       "options": {
-        "additionalEntryPoints": ["{projectRoot}/src/integrated-charts-scene.ts"]
+        "additionalEntryPoints": ["{projectRoot}/src/main-modules.ts"]
       }
     },
     "build:umd": {
@@ -125,6 +125,14 @@
       "options": {
         "commands": ["node tools/package/sanity-check-package.js dist/packages/contents/ag-charts-community/package"]
       }
+    },
+    "validate-size": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "size-limit"
+      }
     }
   },
   "implicitDependencies": ["ag-charts-test", "ag-charts-locale"],

packages/ag-charts-community/src/main-modules.ts

@@ -1,23 +1 @@
-import type { IntegratedModule } from 'ag-charts-types';
-
-import { AgCharts } from './api/agCharts';
-import { registerInbuiltModules } from './chart/factory/registerInbuiltModules';
-import * as _Scene from './integrated-charts-scene';
-import * as _Theme from './integrated-charts-theme';
-import * as _Util from './integrated-charts-util';
-import { VERSION } from './version';
-
-export { AgCharts } from './api/agCharts';
-export { VERSION } from './version';
-export { registerInbuiltModules as setupCommunityModules } from './chart/factory/registerInbuiltModules';
-
-export const AgChartsCommunityModule = {
-    VERSION,
-    _Scene,
-    _Theme,
-    _Util,
-    create: AgCharts.create.bind(AgCharts),
-    createSparkline: AgCharts.__createSparkline.bind(AgCharts),
-    setup: registerInbuiltModules,
-    isEnterprise: false,
-} satisfies IntegratedModule;
+// Entry point to implement and test our tree-shaking abilities

packages/ag-charts-community/src/main.ts

@@ -1,16 +1,33 @@
+import type { IntegratedModule } from 'ag-charts-types';
+
+import { AgCharts } from './api/agCharts';
+import { registerInbuiltModules } from './chart/factory/registerInbuiltModules';
+import * as _Scene from './integrated-charts-scene';
+import * as _Theme from './integrated-charts-theme';
+import * as _Util from './integrated-charts-util';
+import { VERSION } from './version';
+
 // Documented APIs.
 export { AG_CHARTS_LOCALE_EN_US } from 'ag-charts-locale';
 export * from 'ag-charts-types';
-export * from './main-modules';
-export * as time from './util/time/index';
-export { Marker } from './chart/marker/marker';
-
-// Undocumented APIs used by Integrated Charts.
-// TODO remove after ag-grid refactored to look at main-module.ts
-export * as _Scene from './integrated-charts-scene';
-export * as _Theme from './integrated-charts-theme';
-export * as _Util from './integrated-charts-util';
+export * as time from './util/time';
+export { AgCharts, VERSION };
 
 // Undocumented APIs used by Enterprise Modules.
 export * as _ModuleSupport from './module-support';
 export * as _Widget from './widget/exports';
+export { registerInbuiltModules as setupCommunityModules };
+
+// Undocumented APIs used by Integrated Charts.
+export { _Scene, _Theme, _Util };
+
+export const AgChartsCommunityModule = {
+    VERSION,
+    _Scene,
+    _Theme,
+    _Util,
+    create: AgCharts.create.bind(AgCharts),
+    createSparkline: AgCharts.__createSparkline.bind(AgCharts),
+    setup: registerInbuiltModules,
+    isEnterprise: false,
+} satisfies IntegratedModule;

packages/ag-charts-enterprise/.npmignore

@@ -5,6 +5,7 @@ tools
 .prettierignore
 .swcrc
 .dependency-cruiser.js
+.size-limit.js
 jest.*
 tsconfig.*
 project.json

packages/ag-charts-enterprise/.size-limit.js

@@ -0,0 +1,19 @@
+const defaultConfig = {
+    path: './src/main-modules.ts',
+    brotli: false,
+};
+
+module.exports = [
+    {
+        name: 'Full package',
+        import: '*',
+        limit: '200 kB',
+        ...defaultConfig,
+    },
+    // {
+    //     name: 'Testing EventEmitter',
+    //     import: '{ EventEmitter }',
+    //     limit: '20 kB',
+    //     ...defaultConfig,
+    // },
+];

packages/ag-charts-enterprise/package.json

@@ -7,13 +7,12 @@
   "module": "./dist/package/main.esm.mjs",
   "exports": {
     ".": {
-      "import": "./dist/package/main.esm.mjs",
-      "require": "./dist/package/main.cjs.js",
       "types": "./dist/types/src/main.d.ts",
+      "require": "./dist/package/main.cjs.js",
+      "import": "./dist/package/main.esm.mjs",
       "default": "./dist/package/main.cjs.js"
     }
   },
-  "private": false,
   "scripts": {
     "lint:prune": "npx ts-prune -p tsconfig.lib.json"
   },

packages/ag-charts-enterprise/src/main-modules.ts

@@ -1,30 +1 @@
-import { AgCharts, VERSION, _Scene, _Theme, _Util, setupCommunityModules } from 'ag-charts-community';
-import type { IntegratedModule } from 'ag-charts-types';
-
-import { LicenseManager as RealLicenseManager } from './license/licenseManager';
-import { setupEnterpriseModules as internalSetup } from './setup';
-
-const LicenseManager = {
-    setLicenseKey(key: string) {
-        RealLicenseManager.setLicenseKey(key);
-    },
-};
-export { AgCharts, VERSION, LicenseManager };
-
-export function setupEnterpriseModules() {
-    internalSetup();
-    setupCommunityModules();
-}
-
-export const AgChartsEnterpriseModule: IntegratedModule = {
-    VERSION,
-    _Scene,
-    _Theme,
-    _Util,
-    create: AgCharts.create.bind(AgCharts),
-    createSparkline: AgCharts.__createSparkline.bind(AgCharts),
-    setup: setupEnterpriseModules,
-    setGridContext: RealLicenseManager.setGridContext.bind(RealLicenseManager),
-    setLicenseKey: RealLicenseManager.setLicenseKey.bind(RealLicenseManager),
-    isEnterprise: true,
-};
+// Entry point to implement and test our tree-shaking abilities

packages/ag-charts-enterprise/src/main.ts

@@ -1,8 +1,33 @@
-import { setupEnterpriseModules } from './setup';
+import { AgCharts, VERSION, _Scene, _Theme, _Util, setupCommunityModules } from 'ag-charts-community';
+import type { IntegratedModule } from 'ag-charts-types';
+
+import { LicenseManager as RealLicenseManager } from './license/licenseManager';
+import { setupEnterpriseModules as internalSetup } from './setup';
+
+internalSetup();
 
-// Export types.
 export * from 'ag-charts-community';
-export * from './main-modules';
-// Needed for UMD global exports to work correctly.
 
-setupEnterpriseModules();
+export const LicenseManager = {
+    setLicenseKey(key: string) {
+        RealLicenseManager.setLicenseKey(key);
+    },
+};
+
+export function setupEnterpriseModules() {
+    internalSetup();
+    setupCommunityModules();
+}
+
+export const AgChartsEnterpriseModule: IntegratedModule = {
+    VERSION,
+    _Scene,
+    _Theme,
+    _Util,
+    create: AgCharts.create.bind(AgCharts),
+    createSparkline: AgCharts.__createSparkline.bind(AgCharts),
+    setup: setupEnterpriseModules,
+    setGridContext: RealLicenseManager.setGridContext.bind(RealLicenseManager),
+    setLicenseKey: RealLicenseManager.setLicenseKey.bind(RealLicenseManager),
+    isEnterprise: true,
+};

packages/ag-charts-enterprise/src/preset/priceVolumePreset.test.ts

@@ -11,7 +11,7 @@ import {
 } from 'ag-charts-community-test';
 import type { AgChartInstance, AgFinancialChartOptions } from 'ag-charts-types';
 
-import { setupEnterpriseModules } from '../main-modules';
+import { setupEnterpriseModules } from '../setup';
 import { getStockData } from './test/stockData';
 
 const EXAMPLES: Record<string, AgFinancialChartOptions> = {

packages/ag-charts-website/astro.config.mjs

@@ -77,9 +77,6 @@ export default defineConfig({
             agHotModuleReload(),
             agAutoRedirect(['/javascript', '/react', '/vue', '/angular', '/gallery']),
         ],
-        resolve: {
-            conditions: ['require'],
-        },
         optimizeDeps: {
             exclude: [
                 'ag-charts-angular',

packages/ag-charts-website/src/content/gallery/_examples/custom-marker-shapes/main.ts

@@ -1,4 +1,4 @@
-import { AgChartOptions, AgCharts, AgMarkerShapeFnParams, Marker } from 'ag-charts-enterprise';
+import { AgChartOptions, AgCharts, AgMarkerShapeFnParams } from 'ag-charts-enterprise';
 
 import { getData } from './data';
 

packages/ag-charts-website/src/content/gallery/_examples/multiple-scatter-series/main.ts

@@ -1,4 +1,4 @@
-import { AgChartOptions, AgCharts, Marker } from 'ag-charts-enterprise';
+import { AgChartOptions, AgCharts } from 'ag-charts-enterprise';
 
 import { getData } from './data';