[chore] Add different build variants support

Signed-off-by: Sankalp <[email protected]>

Author: codesankalp

README.md

@@ -21,6 +21,48 @@ yarn install
 yarn start
 ```
 
+## Build Variants
+
+NetJSONGraph.js offers **3 optimized build variants** to match different integration needs:
+
+### **Chunked Build**
+
+```bash
+yarn build:chunks
+```
+
+**Output**: Separate files for optimal loading
+
+- `netjsongraph.[hash].min.js` - Core library
+- `echarts.[hash].min.js` - Graph rendering
+- `leaflet.[hash].min.js` - Map rendering
+
+**Best for**: Large applications with conditional loading
+
+### **ECharts Bundle**
+
+```bash
+yarn build:echarts
+```
+
+**Output**: Single file optimized for graphs
+
+- `netjsongraph-with-echarts.[hash].min.js`
+
+**Best for**: Pages showing only network topology graphs
+
+### **Complete Bundle**
+
+```bash
+yarn build:complete
+```
+
+**Output**: Single file with all features
+
+- `netjsongraph-complete.[hash].min.js`
+
+**Best for**: Pages with both graphs and maps
+
 ### Run Tests
 
 The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.

package.json

@@ -9,6 +9,10 @@
     "dev": "webpack serve --open --mode development",
     "start": "yarn dev",
     "build": "webpack --progress --mode production",
+    "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:all": "yarn build:chunks && yarn build:echarts && yarn build:complete",
     "coverage": "jest --silent --coverage",
     "coveralls": "jest --silent -f ./coverage/lcov.info && cat ./coverage/lcov.info | coveralls || echo 'no coverage file found'",
     "precommit": "lint-staged",

src/js/netjsongraph.gui.js

@@ -236,10 +236,21 @@ class NetJSONGraphGUI {
       keyLabel.setAttribute("class", "njg-keyLabel");
       const valueLabel = document.createElement("span");
       valueLabel.setAttribute("class", "njg-valueLabel");
-      keyLabel.innerHTML = formatKeyLabel(key);
-      const displayVal =
-        typeof val === "string" ? val.replace(/\n/g, "<br/>") : String(val);
-      valueLabel.innerHTML = displayVal;
+      if (key === "location") {
+        keyLabel.innerHTML = "Location";
+        valueLabel.innerHTML = `${Math.round(data[key].lat * 1000) / 1000}, ${
+          Math.round(data[key].lng * 1000) / 1000
+        }`;
+      } else if (key === "localAddresses") {
+        keyLabel.innerHTML = "Local Addresses";
+        valueLabel.innerHTML = data[key].join("<br/>");
+      } else {
+        keyLabel.innerHTML = key;
+        // Preserve multiline values
+        const displayVal = typeof val === "string" ? val.replace(/\n/g, "<br/>") : val;
+        valueLabel.innerHTML = displayVal;
+      }
+
       infoItems.appendChild(keyLabel);
       infoItems.appendChild(valueLabel);
       parent.appendChild(infoItems);

src/js/netjsongraph.js

@@ -1,9 +1,20 @@
+/* eslint-disable no-undef */
 import NetJSONGraphCore from "./netjsongraph.core";
-import {NetJSONGraphRender, echarts, L} from "./netjsongraph.render";
-import registerLeafletSystem from "../../lib/js/echarts-leaflet/index";
+import {NetJSONGraphRender, echarts} from "./netjsongraph.render";
 import NetJSONGraphGUI from "./netjsongraph.gui";
 import attachClientsOverlay from "./netjsongraph.clients";
 
+let L;
+let registerLeafletSystem;
+if (typeof __INCLUDE_LEAFLET__ !== "undefined" && __INCLUDE_LEAFLET__) {
+  // eslint-disable-next-line import/no-dynamic-require,global-require
+  const renderModule = require("./netjsongraph.render");
+  // eslint-disable-next-line import/no-dynamic-require,global-require
+  const leafletModule = require("../../lib/js/echarts-leaflet/index");
+  L = renderModule.L;
+  registerLeafletSystem = leafletModule.default;
+}
+
 const colorTool = require("zrender/lib/tool/color");
 const {each} = require("zrender/lib/core/util");
 const env = require("zrender/lib/core/env");
@@ -36,12 +47,25 @@ class NetJSONGraph {
    * @returns {Object} - The final configuration object.
    */
   initializeConfig(config = {}) {
+    let renderFunction;
+    if (config.render === "map") {
+      if (typeof __INCLUDE_LEAFLET__ !== "undefined" && __INCLUDE_LEAFLET__) {
+        renderFunction = NetJSONGraphRender.prototype.mapRender;
+      } else {
+        const buildType =
+          typeof __BUILD_TYPE__ !== "undefined" ? __BUILD_TYPE__ : "unknown";
+        console.warn(
+          `Map rendering not available in ${buildType} bundle. Use complete bundle or chunked build.`,
+        );
+        renderFunction = NetJSONGraphRender.prototype.graphRender;
+      }
+    } else {
+      renderFunction = NetJSONGraphRender.prototype.graphRender;
+    }
+
     return {
       ...config,
-      render:
-        config.render === "map"
-          ? NetJSONGraphRender.prototype.mapRender
-          : NetJSONGraphRender.prototype.graphRender,
+      render: renderFunction,
       onInit: this.onInit,
       onRender: this.onRender,
       onUpdate: this.onUpdate,
@@ -123,33 +147,45 @@ class NetJSONGraph {
       this.gui.nodeLinkInfoContainer = this.gui.createNodeLinkInfoContainer();
     }
     if (this.config.switchMode && this.utils.isNetJSON(this.data)) {
-      this.gui.renderModeSelector.onclick = () => {
-        // Switch from map to graph mode, first clear canvasContainer and then render
-        if (this.config.render === this.utils.mapRender) {
-          this.config.render = this.utils.graphRender;
-          const canvasContainer = this.echarts
-            .getZr()
-            .painter.getViewportRoot().parentNode;
-          this.echarts.clear();
-          this.utils.graphRender(this.data, this);
-          canvasContainer.style.background =
-            // eslint-disable-next-line no-underscore-dangle
-            this.echarts.getZr()._backgroundColor;
-
-          // Hide Openstreetmap credits in the bottom right corner
-          document.querySelector(".leaflet-control-attribution").style.display = "none";
-          // Hide zoom control buttons in top right corner
-          document.querySelector(".leaflet-control-zoom").style.display = "none";
-        } else {
-          this.echarts.clear();
-          this.config.render = this.utils.mapRender;
-          this.utils.mapRender(this.data, this);
-          // Show OpenStreetMap credits and zoom control buttons in map mode
-          document.querySelector(".leaflet-control-attribution").style.display =
-            "block";
-          document.querySelector(".leaflet-control-zoom").style.display = "block";
-        }
-      };
+      if (
+        typeof __INCLUDE_MAP_SWITCHING__ !== "undefined" &&
+        __INCLUDE_MAP_SWITCHING__
+      ) {
+        this.gui.renderModeSelector.onclick = () => {
+          // Switch from map to graph mode, first clear canvasContainer and then render
+          if (this.config.render === this.utils.mapRender) {
+            this.config.render = this.utils.graphRender;
+            const canvasContainer = this.echarts
+              .getZr()
+              .painter.getViewportRoot().parentNode;
+            this.echarts.clear();
+            this.utils.graphRender(this.data, this);
+            canvasContainer.style.background =
+              // eslint-disable-next-line no-underscore-dangle
+              this.echarts.getZr()._backgroundColor;
+
+            // Hide Openstreetmap credits in the bottom right corner
+            document.querySelector(".leaflet-control-attribution").style.display =
+              "none";
+            // Hide zoom control buttons in top right corner
+            document.querySelector(".leaflet-control-zoom").style.display = "none";
+          } else {
+            this.echarts.clear();
+            this.config.render = this.utils.mapRender;
+            this.utils.mapRender(this.data, this);
+            // Show OpenStreetMap credits and zoom control buttons in map mode
+            document.querySelector(".leaflet-control-attribution").style.display =
+              "block";
+            document.querySelector(".leaflet-control-zoom").style.display = "block";
+          }
+        };
+      } else {
+        const buildType =
+          typeof __BUILD_TYPE__ !== "undefined" ? __BUILD_TYPE__ : "unknown";
+        console.warn(
+          `switchMode not available in ${buildType} bundle - map rendering not included`,
+        );
+      }
     }
     this.utils.hideLoading.call(this);
 
@@ -160,12 +196,17 @@ class NetJSONGraph {
   }
 }
 
-registerLeafletSystem(echarts, L, {
-  colorTool,
-  each,
-  env,
-});
+if (typeof __INCLUDE_LEAFLET__ !== "undefined" && __INCLUDE_LEAFLET__) {
+  registerLeafletSystem(echarts, L, {
+    colorTool,
+    each,
+    env,
+  });
+  window.L = L;
+} else {
+  const buildType = typeof __BUILD_TYPE__ !== "undefined" ? __BUILD_TYPE__ : "unknown";
+  console.info(`NetJSONGraph ${buildType} Bundle loaded - Graph rendering only`);
+}
 
 window.NetJSONGraph = NetJSONGraph;
 window.echarts = echarts;
-window.L = L;

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const fs = require("fs");
+const webpack = require("webpack");
 const TerserPlugin = require("terser-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
@@ -67,23 +68,19 @@ module.exports = (env, argv) => {
   const isProduction = argv.mode === "production";
   const isDevelopment = !isProduction;
 
-  return {
-    entry: {
-      netjsongraph: "./src/js/netjsongraph.js",
-    },
-    output: {
-      path: path.resolve(__dirname, "dist"),
-      filename: isProduction ? "[name].[contenthash:8].min.js" : "[name].js",
-      chunkFilename: isProduction
-        ? "chunks/[name].[contenthash:8].chunk.js"
-        : "chunks/[name].chunk.js",
-      clean: true,
-      publicPath: "/",
-    },
-    devtool: argv.mode === "development" ? "eval-source-map" : "source-map",
-    optimization: {
-      minimize: isProduction,
-      minimizer: getMinimizers(isProduction),
+  // Multi-build strategy: chunks, echarts-bundle, complete-bundle
+  const buildType = env?.BUILD_TYPE || "chunks";
+
+  // Base entry configuration
+  const baseEntry = {
+    netjsongraph: "./src/js/netjsongraph.js",
+  };
+
+  // Build-specific configurations
+  const buildConfigs = {
+    // Separate chunks
+    chunks: {
+      entry: baseEntry,
       splitChunks: {
         chunks: "all",
         cacheGroups: {
@@ -113,6 +110,56 @@ module.exports = (env, argv) => {
           },
         },
       },
+      filename: isProduction ? "[name].[contenthash:8].min.js" : "[name].js",
+      chunkFilename: isProduction
+        ? "chunks/[name].[contenthash:8].chunk.js"
+        : "chunks/[name].chunk.js",
+      buildType: "chunks",
+    },
+
+    // Library + ECharts bundle (single file)
+    "echarts-bundle": {
+      entry: {
+        "netjsongraph-with-echarts": "./src/js/netjsongraph.js", // Use main file
+      },
+      splitChunks: false,
+      filename: isProduction ? "[name].[contenthash:8].min.js" : "[name].js",
+      chunkFilename: isProduction
+        ? "bundles/[name].[contenthash:8].chunk.js"
+        : "bundles/[name].chunk.js",
+      buildType: "echarts-only",
+    },
+
+    // Complete bundle (everything)
+    "complete-bundle": {
+      entry: {
+        "netjsongraph-complete": "./src/js/netjsongraph.js",
+      },
+      splitChunks: false,
+      filename: isProduction ? "[name].[contenthash:8].min.js" : "[name].js",
+      chunkFilename: isProduction
+        ? "complete/[name].[contenthash:8].chunk.js"
+        : "complete/[name].chunk.js",
+      buildType: "complete",
+    },
+  };
+
+  const currentBuild = buildConfigs[buildType];
+
+  return {
+    entry: currentBuild.entry,
+    output: {
+      path: path.resolve(__dirname, "dist"),
+      filename: currentBuild.filename,
+      chunkFilename: currentBuild.chunkFilename,
+      clean: buildType === "chunks",
+      publicPath: "/",
+    },
+    devtool: argv.mode === "development" ? "eval-source-map" : "source-map",
+    optimization: {
+      minimize: isProduction,
+      minimizer: getMinimizers(isProduction),
+      splitChunks: currentBuild.splitChunks,
       usedExports: true,
       sideEffects: false,
       providedExports: true,
@@ -162,6 +209,16 @@ module.exports = (env, argv) => {
       },
     },
     plugins: [
+      // Define build-time constants for conditional compilation
+      new webpack.DefinePlugin({
+        __BUILD_TYPE__: JSON.stringify(currentBuild.buildType),
+        __INCLUDE_LEAFLET__: JSON.stringify(
+          currentBuild.buildType === "complete" || currentBuild.buildType === "chunks",
+        ),
+        __INCLUDE_MAP_SWITCHING__: JSON.stringify(
+          currentBuild.buildType === "complete" || currentBuild.buildType === "chunks",
+        ),
+      }),
       ...templates,
       new CopyPlugin({
         patterns: [