Replace lodash-es with es-toolkit (#2025)

Our demo app main.js goes from ~1003.1 KiB down to ~991.6 KiB, so saving ~11.5KiB.

Co-authored-by: Adrien Crivelli <adrien.crivelli@gmail.com>

Author: lexasq

README.md

@@ -22,6 +22,7 @@ The required packages will be automatically installed, and your `app.config.ts`
 changes to start using the library right away.
 
 If you want to install [schematics](https://www.npmjs.com/package/ng2-charts-schematics) for easier code generation too:
+
 ```bash
 npm install --save-dev ng2-charts-schematics
 ```

apps/ng2-charts-demo/jest.config.ts

@@ -1,4 +1,4 @@
-const esModules = ['lodash-es', 'marked', 'ngx-markdown'].join('|');
+const esModules = ['es-toolkit', 'marked', 'ngx-markdown'].join('|');
 export default {
   displayName: 'ng2-charts',
   preset: '../../jest.preset.js',

libs/ng2-charts/jest.config.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-const esModules = ['lodash-es'].join('|');
+const esModules = ['es-toolkit'].join('|');
 export default {
   displayName: 'ng2-charts',
   preset: '../../jest.preset.js',

libs/ng2-charts/ng-package.json

@@ -5,5 +5,5 @@
   "lib": {
     "entryFile": "src/index.ts"
   },
-  "allowedNonPeerDependencies": ["lodash-es"]
+  "allowedNonPeerDependencies": ["es-toolkit"]
 }

libs/ng2-charts/package.json

@@ -11,7 +11,7 @@
     "rxjs": "^6.5.3 || ^7.4.0"
   },
   "dependencies": {
-    "lodash-es": "^4.17.15"
+    "es-toolkit": "^1.39.7"
   },
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "contributors": [

libs/ng2-charts/src/lib/base-chart.directive.ts

@@ -25,7 +25,7 @@ import {
 import { ThemeService } from './theme.service';
 import { Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
-import { merge } from 'lodash-es';
+import { merge } from 'es-toolkit';
 import {
   NG_CHARTS_CONFIGURATION,
   NgChartsConfiguration,
@@ -209,37 +209,33 @@ export class BaseChartDirective<
     TData,
     TLabel
   >['options'] {
-    const baseOptions = {
-      onHover: (event: ChartEvent, active: object[]) => {
-        if (!this.chartHover.observed && !this.chartHover.observers?.length) {
-          return;
-        }
+    return [
+      {
+        onHover: (event: ChartEvent, active: object[]) => {
+          if (!this.chartHover.observed && !this.chartHover.observers?.length) {
+            return;
+          }
 
-        this.zone.run(() => this.chartHover.emit({ event, active }));
-      },
-      onClick: (event?: ChartEvent, active?: object[]) => {
-        if (!this.chartClick.observed && !this.chartClick.observers?.length) {
-          return;
-        }
+          this.zone.run(() => this.chartHover.emit({ event, active }));
+        },
+        onClick: (event?: ChartEvent, active?: object[]) => {
+          if (!this.chartClick.observed && !this.chartClick.observers?.length) {
+            return;
+          }
 
-        this.zone.run(() => this.chartClick.emit({ event, active }));
+          this.zone.run(() => this.chartClick.emit({ event, active }));
+        },
       },
-    };
-
-    const legendOptions = {
-      plugins: {
-        legend: {
-          display: this.legend,
+      this.themeOverrides ?? {},
+      this.options ?? {},
+      {
+        plugins: {
+          legend: {
+            display: this.legend,
+          },
         },
       },
-    };
-
-    return merge(
-      baseOptions,
-      this.themeOverrides || {},
-      this.options || {},
-      legendOptions,
-    ) as ChartConfiguration<TType, TData, TLabel>['options'];
+    ].reduce(merge, {}) as ChartConfiguration<TType, TData, TLabel>['options'];
   }
 
   private getChartConfiguration(): ChartConfiguration<TType, TData, TLabel> {

libs/ng2-charts/src/lib/ng-charts.provider.ts

@@ -5,7 +5,7 @@ import {
   registerables as defaultRegisterables,
 } from 'chart.js';
 import { DeepPartial } from './utils';
-import { merge } from 'lodash-es';
+import { merge } from 'es-toolkit';
 
 export const NG_CHARTS_CONFIGURATION =
   new InjectionToken<NgChartsConfiguration>('Configuration for ngCharts');
@@ -38,6 +38,6 @@ export function withDefaultRegisterables(
 export function provideCharts(
   ...configurations: readonly NgChartsConfiguration[]
 ) {
-  const config: NgChartsConfiguration = merge({}, ...configurations);
+  const config: NgChartsConfiguration = configurations.reduce(merge, {});
   return { provide: NG_CHARTS_CONFIGURATION, useValue: config };
 }

package-lock.json

@@ -49,9 +49,9 @@
     "core-js": "^3.23.5",
     "date-fns": "^3.3.1",
     "dompurify": "^3.2.1",
+    "es-toolkit": "^1.39.7",
     "express": "^4.18.2",
     "highlight.js": "^11.6.0",
-    "lodash-es": "^4.17.21",
     "marked": "^17.0.0",
     "ngx-highlightjs": "^10.0.0",
     "ngx-markdown": "21.1.0",
@@ -82,7 +82,6 @@
     "@schematics/angular": "21.2.0",
     "@types/express": "^4.17.17",
     "@types/jest": "^30.0.0",
-    "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.9.3",
     "@typescript-eslint/eslint-plugin": "^8.56.1",