[fix] Importing only used components from echarts

codesankalp · codesankalp · commit 9598d7cab4cb · 2025-09-11T02:33:43.000+05:30
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,7 @@
 {
   "trailingComma": "all",
   "bracketSpacing": false,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "printWidth": 88,
+  "insertFinalNewLine": true
 }
diff --git a/README.md b/README.md
@@ -23,47 +23,24 @@ yarn start
 
 ## Building the library
 
-NetJSONGraph.js offers **3 build variants** to match different needs.
-
-**Note**: using `yarn build` will generate the all the variants.
-
-### Complete Bundle
+To build the production-ready library:
 
 ```bash
-yarn build:complete
+yarn build
 ```
 
-**Output**: single file with all the dependencies (echarts and leaflet).
-
-- `netjsongraph-complete.[hash].min.js`
-
-**Best for**: apps that need to support both network graphs and geographic maps.
-
-### ECharts Bundle
-
-```bash
-yarn build:echarts
-```
-
-**Output**: single javascript file optimized for rendering network graphs.
-
-- `netjsongraph-echarts.[hash].min.js`
-
-**Best for**: apps focused exclusively on network topology graphs.
-
-### Chunked Build
-
-```bash
-yarn build:chunks
-```
+**Output**: Single optimized bundle with all dependencies included.
 
-**Output**: separate files for optimal loading.
+- `netjsongraph.[hash].min.js` - Complete library with ECharts and Leaflet
+- `netjsongraph.[hash].min.js.map` - Source map for debugging
+- Compressed versions (`.gz` and `.br`) for optimized delivery
 
-- `netjsongraph.[hash].min.js` - Core library
-- `echarts.[hash].min.js` - Network graph rendering
-- `leaflet.[hash].min.js` - Geographic map rendering
+The build includes:
+- **ECharts** for network graph rendering
+- **Leaflet** for geographic map rendering
+- **Core NetJSONGraph.js** functionality
 
-**Best for**: large applications with conditional loading.
+This unified bundle approach ensures compatibility and simplifies deployment while maintaining optimal performance through advanced webpack optimizations.
 
 ### Run Tests
 
diff --git a/jest.global-setup.js b/jest.global-setup.js
@@ -1,5 +1,4 @@
 module.exports = async () => {
   // timezone returned in tests must be always UTC
   process.env.TZ = "UTC";
-  process.env.NODE_ENV = "test";
 };
diff --git a/lib/js/echarts-leaflet/LeafletCoordSys.js b/lib/js/echarts-leaflet/LeafletCoordSys.js
@@ -1,14 +1,14 @@
+import { util, graphic, matrix } from "echarts/core";
+
 /* eslint-disable no-underscore-dangle */
 // Underscore dangling allowed to identify internal methods and variable
 /**
  * generate leaflet coord system
- * @param {object}   echarts api object
  * @param {object}   L       leaflet
  *
  * @return {function} LeafletCoordSys
  */
-function createLeafletCoordSystem(echarts, L) {
-  const {util, graphic, matrix} = echarts;
+function createLeafletCoordSystem(L) {
   const CustomOverlay = L.Layer.extend({
     initialize(container) {
       this._container = container;
diff --git a/lib/js/echarts-leaflet/LeafletModel.js b/lib/js/echarts-leaflet/LeafletModel.js
@@ -1,8 +1,9 @@
+import { extendComponentModel } from "echarts/core";
+
 /**
  * extend echarts model
- * @param {object} echarts
  */
-export default function extendLeafletModel(echarts) {
+export default function extendLeafletModel() {
   /**
    * compare if two arrays of length 2 are equal
    * @param {Array} a array of length 2
@@ -13,7 +14,7 @@ export default function extendLeafletModel(echarts) {
     return a && b && a[0] === b[0] && a[1] === b[1];
   }
 
-  echarts.extendComponentModel({
+  extendComponentModel({
     type: "leaflet",
 
     getLeaflet() {
diff --git a/lib/js/echarts-leaflet/LeafletView.js b/lib/js/echarts-leaflet/LeafletView.js
@@ -1,11 +1,11 @@
+import {extendComponentView, getInstanceByDom} from "echarts/core";
 /* eslint-disable no-underscore-dangle */
 /**
  * extend echarts view
- * @param {object} echarts
  * @param {object} L
  */
-export default function extendLeafletView(echarts, L) {
-  echarts.extendComponentView({
+export default function extendLeafletView(L) {
+  extendComponentView({
     type: "leaflet",
 
     render(leafletModel, ecModel, api) {
@@ -76,7 +76,7 @@ export default function extendLeafletView(echarts, L) {
         if (rendering) {
           return;
         }
-        
+
         api.dispatchAction({
           type: "leafletRoam",
         });
@@ -90,7 +90,7 @@ export default function extendLeafletView(echarts, L) {
        * handler for map resize event
        */
       function resizeHandler() {
-        echarts.getInstanceByDom(api.getDom()).resize();
+        getInstanceByDom(api.getDom()).resize();
       }
 
       if (this._oldMoveHandler) {
diff --git a/lib/js/echarts-leaflet/index.js b/lib/js/echarts-leaflet/index.js
@@ -1,27 +1,27 @@
 import createLeafletCoordSystem from "./LeafletCoordSys";
 import extendLeafletModel from "./LeafletModel";
 import extendLeafletView from "./LeafletView";
+import {registerCoordinateSystem, registerAction} from "echarts/core";
 
 /**
  * echarts register leaflet coord system
- * @param {object} echarts
  * @param {object} L
  * @param {object} API {
  *   colorTool: "zrender/lib/tool/color",
  *   { each }: "zrender/lib/core/util",
  *   env: "zrender/lib/core/env",
  * }
  */
-function registerLeafletSystem(echarts, L, API) {
-  extendLeafletModel(echarts);
-  extendLeafletView(echarts, L);
+function registerLeafletSystem(L, API) {
+  extendLeafletModel();
+  extendLeafletView(L);
 
-  echarts.registerCoordinateSystem(
+  registerCoordinateSystem(
     "leaflet",
-    createLeafletCoordSystem(echarts, L),
+    createLeafletCoordSystem(L),
   );
 
-  echarts.registerAction(
+  registerAction(
     {
       type: "leafletRoam",
       event: "leafletRoam",
diff --git a/package.json b/package.json
@@ -8,10 +8,7 @@
     "test": "jest --silent",
     "dev": "webpack serve --open --mode development",
     "start": "yarn dev",
-    "build": "yarn build:chunks && yarn build:echarts && yarn build:complete",
-    "build:chunks": "webpack --progress --mode production --env BUILD_TYPE=chunks",
-    "build:echarts": "webpack --progress --mode production --env BUILD_TYPE=echarts-bundle",
-    "build:complete": "webpack --progress --mode production --env BUILD_TYPE=complete-bundle",
+    "build": "webpack --progress --mode production",
     "coverage": "jest --silent --coverage",
     "coveralls": "jest --silent -f ./coverage/lcov.info && cat ./coverage/lcov.info | coveralls || echo 'no coverage file found'",
     "precommit": "lint-staged",
diff --git a/src/js/leaflet-loader.js b/src/js/leaflet-loader.js
@@ -4,47 +4,23 @@
  */
 
 let leafletInstance = null;
-let isLoaded = false;
 
 /**
  * Get the Leaflet instance, loading it conditionally based on build type
  * @returns {Object|null} Leaflet instance or null if not available in current build
  */
 export function getLeaflet() {
-  if (isLoaded) {
-    return leafletInstance;
-  }
-
-  // In test environment, always try to load Leaflet for testing
-  const shouldLoadLeaflet =
-    (typeof process !== "undefined" &&
-      process.env &&
-      process.env.NODE_ENV === "test") ||
-    // eslint-disable-next-line no-undef
-    (typeof __INCLUDE_LEAFLET__ !== "undefined" && __INCLUDE_LEAFLET__);
+  if (leafletInstance !== null) return leafletInstance;
 
-  if (shouldLoadLeaflet) {
-    try {
-      // eslint-disable-next-line import/no-dynamic-require,global-require
-      leafletInstance = require("leaflet/dist/leaflet");
-      isLoaded = true;
-      return leafletInstance;
-    } catch (error) {
-      console.warn("Failed to load Leaflet:", error);
-      leafletInstance = null;
-    }
-  } else {
-    const buildType =
-      // eslint-disable-next-line no-undef
-      typeof __BUILD_TYPE__ !== "undefined" ? __BUILD_TYPE__ : "unknown";
-    console.info(`Leaflet not available in ${buildType} bundle`);
+  try {
+    // eslint-disable-next-line import/no-dynamic-require,global-require
+    leafletInstance = require("leaflet/dist/leaflet");
+  } catch (error) {
+    console.warn("Failed to load Leaflet:", error);
     leafletInstance = null;
   }
 
-  isLoaded = true;
   return leafletInstance;
 }
 
-const L = getLeaflet();
-
-export default L;
+export default getLeaflet();
diff --git a/src/js/netjsongraph.clients.js b/src/js/netjsongraph.clients.js
@@ -1,5 +1,6 @@
+import {graphic} from "echarts/core";
+
 /* eslint-disable no-underscore-dangle */
-/* global echarts */
 /**
  * Attaches a visual overlay to display WiFi clients as colored dots around nodes.
  *
@@ -10,7 +11,6 @@
  */
 function attachClientsOverlay(graph, options = {}) {
   const chart = graph.echarts;
-  const g = echarts.graphic;
   const colors = {
     wifi: (options.colors && options.colors.wifi) || "#d35454",
   };
@@ -48,7 +48,7 @@ function attachClientsOverlay(graph, options = {}) {
   // Create the overlay group and attach it to the series view
   const parent = getSeriesViewGroup();
   if (!parent) return {destroy() {}};
-  const overlay = new g.Group({silent: true, z: 100, zlevel: 1});
+  const overlay = new graphic.Group({silent: true, z: 100, zlevel: 1});
   parent.add(overlay);
 
   // Extract node radius from graph configuration for positioning calculations
@@ -118,7 +118,7 @@ function attachClientsOverlay(graph, options = {}) {
           const y = centerY + distance * Math.sin(angle);
 
           overlay.add(
-            new g.Circle({
+            new graphic.Circle({
               shape: {cx: x, cy: y, r: radius},
               style: {fill: color},
               silent: true,
diff --git a/src/js/netjsongraph.js b/src/js/netjsongraph.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
+import {init} from "echarts/core";
 import NetJSONGraphCore from "./netjsongraph.core";
-import {NetJSONGraphRender, echarts} from "./netjsongraph.render";
+import {NetJSONGraphRender} from "./netjsongraph.render";
 import NetJSONGraphGUI from "./netjsongraph.gui";
 import attachClientsOverlay from "./netjsongraph.clients";
 import L from "./leaflet-loader";
@@ -66,7 +67,7 @@ class NetJSONGraph {
    * Initializes the ECharts rendering engine. Used in constructor
    */
   initializeECharts() {
-    this.graph.echarts = echarts.init(this.graph.el, null, {
+    this.graph.echarts = init(this.graph.el, null, {
       renderer: this.graph.config.svgRender ? "svg" : "canvas",
     });
   }
@@ -164,7 +165,7 @@ class NetJSONGraph {
 if (L) {
   // eslint-disable-next-line import/no-dynamic-require,global-require
   const leafletModule = require("../../lib/js/echarts-leaflet/index");
-  leafletModule.default(echarts, L, {
+  leafletModule.default(L, {
     colorTool,
     each,
     env,
@@ -173,5 +174,4 @@ if (L) {
 }
 
 window.NetJSONGraph = NetJSONGraph;
-window.echarts = echarts;
 window.L = L;
diff --git a/src/js/netjsongraph.render.js b/src/js/netjsongraph.render.js
@@ -1,17 +1,18 @@
-import * as echarts from "echarts/core";
-import {GraphChart, LinesChart, ScatterChart} from "echarts/charts";
-import {
-  TooltipComponent,
-  TitleComponent,
-  ToolboxComponent,
-  LegendComponent,
-  GraphicComponent,
-} from "echarts/components";
-import {SVGRenderer, CanvasRenderer} from "echarts/renderers";
+import {use} from "echarts/core";
+import {install as LinesChart} from "echarts/lib/chart/lines/install";
+import {install as GraphChart} from "echarts/lib/chart/graph/install";
+import {install as ScatterChart} from "echarts/lib/chart/scatter/install";
+import {install as TooltipComponent} from "echarts/lib/component/tooltip/install";
+import {install as TitleComponent} from "echarts/lib/component/title/install";
+import {install as ToolboxComponent} from "echarts/lib/component/toolbox/install";
+import {install as LegendComponent} from "echarts/lib/component/legend/install";
+import {install as GraphicComponent} from "echarts/lib/component/graphic/install";
+import {install as SVGRenderer} from "echarts/lib/renderer/installSVGRenderer";
+import {install as CanvasRenderer} from "echarts/lib/renderer/installCanvasRenderer";
 import {addPolygonOverlays} from "./netjsongraph.geojson";
 import L from "./leaflet-loader";
 
-echarts.use([
+use([
   GraphChart,
   LinesChart,
   TooltipComponent,
@@ -728,4 +729,4 @@ class NetJSONGraphRender {
   }
 }
 
-export {NetJSONGraphRender, echarts, L};
+export {NetJSONGraphRender, L};
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"trailingComma": "all",`
`3`	`3`	`"bracketSpacing": false,`
`4`		`- "tabWidth": 2`
	`4`	`+ "tabWidth": 2,`
	`5`	`+ "printWidth": 88,`
	`6`	`+ "insertFinalNewLine": true`
`5`	`7`	`}`