Skip to content

[change] Reduce library size #392 #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
codesankalp wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[change] Reduce library size #392 #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8db6100
[change] Reduce library size #392
codesankalp Nov 2, 2025
b021e12
[change] Reduce library size #392
codesankalp Nov 21, 2025
b32b4e3
[chore] Use leaflet dynamically for echartjs builds
codesankalp Nov 21, 2025
ee0de39
[chore] Fix codeql warnings
codesankalp Jan 20, 2026
8fc85d0
[chore] Remove dead code
codesankalp Jan 20, 2026
237e343
[chores] Minor improvements
nemesifier Jan 23, 2026
b67a347
[fix] Fixed loader
nemesifier Jan 23, 2026
e0b6035
[chores] Optimized png
nemesifier Jan 23, 2026
ab2c0bd
[fix] Webpack plugin assumes HTML structure
nemesifier Jan 23, 2026
1670b7b
[fix] Improve CI coverage and fix webpack configurations
codesankalp Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,65 +49,84 @@
run: ./run-qa-checks

build:
name: Tests and Coverage
name: Tests and Coverage (${{ matrix.build-type }})
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
build-type: [dev, prod, echarts-only]

steps:
- uses: actions/checkout@v6

- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: ".nvmrc"

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- name: Cache yarn
uses: actions/cache@v5
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: ${{ runner.os }}-yarn-

- name: Installing dependencies
run: |
yarn install

- name: Running Server
- name: Build (Prod Full)
if: matrix.build-type == 'prod'
run: yarn build:full

- name: Build (Echarts Only)
if: matrix.build-type == 'echarts-only'
run: yarn build:echarts-only

- name: Running Server (Dev)
if: matrix.build-type == 'dev'
run: yarn start &

- name: Running Server (Dist)
if: matrix.build-type == 'prod' || matrix.build-type == 'echarts-only'
run: npx --yes http-server dist -p 8080 &

- name: Wait for server to be ready
run: npx wait-on http://localhost:8080

- name: Set up Chrome
uses: browser-actions/setup-chrome@v2

- name: Set up ChromeDriver
uses: nanasess/setup-chromedriver@v2

- name: Check chrome and chromedriver version
run: |
chrome --version
which chrome
chromedriver --version
which chromedriver

- name: Unit tests
if: matrix.build-type == 'dev'
run: yarn coverage --testPathIgnorePatterns=test/netjsongraph.browser.test.js

- name: Browser tests
# Test timeout set to 30 seconds in CI since it runs slower
run: yarn test --runInBand --testTimeout=30000 test/netjsongraph.browser.test.js

- name: Coveralls
if: matrix.build-type == 'dev'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}

build-and-deploy:

Check warning

Code scanning / CodeQL

Workflow does not contain permissions Medium

Actions job or workflow does not limit the permissions of the GITHUB_TOKEN. Consider setting an explicit permissions block, using the following as a minimal starting point: {contents: read}
name: Build and Deploy
runs-on: ubuntu-latest
if: ${{ github.event_name=='push' }}
Expand Down
41 changes: 41 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,47 @@ yarn install
yarn start
```

## Building the library

The netjsongraph.js library provides **two build variants** to optimize bundle size for different use cases.

By default, `yarn build` executes the full bundle.

### 1. Full Bundle (Recommended for standalone usage)

Build the complete library with all dependencies included:

```bash
yarn build:full
```

**Output**:

- `netjsongraph.[hash].min.js` - Complete library with ECharts and Leaflet
- Compressed versions (`.gz` and `.br`) for optimized delivery

**Use when**: You want a standalone library with all dependencies bundled.

### 2. ECharts-Only Bundle (Optimized for projects with existing Leaflet)

Build the library without Leaflet, expecting it to be provided externally:

```bash
yarn build:echarts-only
```

**Output**:

- `netjsongraph.echarts.[hash].min.js` - Library with ECharts only
- Compressed versions (`.gz` and `.br`)

**Use when**: Your project already includes Leaflet (e.g., via django-leaflet in OpenWISP projects). This reduces bundle size by ~144 KiB.

**Requirements**: Leaflet must be loaded before NetJSONGraph (available as global `L` object).

**Note**: The echarts-only build dynamically loads Leaflet from CDN for map examples.
For production use, ensure Leaflet is available locally or from a trusted CDN.

### Run Tests

The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
Expand Down
13 changes: 3 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,12 +125,14 @@
flex-direction: column;
align-items: center;
}

.cards a {
width: 100%;
}
}
</style>
</head>

<body>
<button class="theme-toggle" aria-label="Toggle Dark Mode">
🌓 Toggle Theme
Expand Down Expand Up @@ -239,16 +241,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
>Multiple links render</a
>
</div>
<div class="cards">
<a href="./examples/netjsongraph-graphGL.html" target="_blank"
>GraphGL render for big data</a
>
</div>
<div class="cards">
<a href="./examples/netjsonmap-animation.html" target="_blank"
>Geographic map animated links</a
>
</div>

<div class="cards">
<a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
>Nodes expand or fold</a
Expand Down
3 changes: 2 additions & 1 deletion knip.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"$schema": "https://unpkg.com/knip@5/schema.json",
"project": ["src/**/*.js", "test/**/*.js"],
"ignore": ["examples/**", "lib/js/**", "public/**", "scripts/**"],
"ignoreBinaries": ["wait-on"]
"ignoreBinaries": ["wait-on"],
"ignoreDependencies": ["leaflet"]
Copy link
Member Author

@codesankalp codesankalp Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is optional now.

}
Binary file modified lib/css/assets/leaflet-measure.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 18 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@
"name": "netjsongraph.js",
"version": "0.3.0",
"description": "NetJSON NetworkGraph visualizer",
"main": "src/js/netjsongraph.js",
"main": "index.js",
"sideEffects": false,
Comment on lines +5 to +6
Copy link

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify index.js exists and check its contents
if [ -f "index.js" ]; then
  echo "index.js exists:"
  cat index.js
else
  echo "WARNING: index.js does not exist at package root"
  echo "Searching for potential entry points:"
  fd -t f 'index.js' --max-depth 2
fi

Repository: openwisp/netjsongraph.js

Length of output: 154

🏁 Script executed:

#!/bin/bash
# List files at package root
echo "=== Package root contents ==="
ls -la | grep -E '^-'

echo ""
echo "=== Directory structure (top level) ==="
ls -la | head -20

echo ""
echo "=== Search for all index files ==="
fd -t f 'index\.' --max-depth 3

echo ""
echo "=== Check if there's a dist or build directory ==="
ls -la | grep -E '^d' | grep -v '^\.'

Repository: openwisp/netjsongraph.js

Length of output: 3683

🏁 Script executed:

#!/bin/bash
# Check lib directory
echo "=== Contents of lib/ ==="
find lib -type f -name '*.js' -o -name '*.ts' | head -20

echo ""
echo "=== Contents of src/ ==="
find src -type f -name '*.js' -o -name '*.ts' | head -20

echo ""
echo "=== Current package.json main field ==="
grep -A 2 '"main"' package.json

echo ""
echo "=== package.json excerpt (lines 1-20) ==="
head -20 package.json

Repository: openwisp/netjsongraph.js

Length of output: 1556

🏁 Script executed:

#!/bin/bash
# Check webpack.config.js for output configuration
echo "=== webpack.config.js output config ==="
grep -A 10 "output:" webpack.config.js

echo ""
echo "=== Check if there's any dist or build directory already ==="
ls -la | grep -E '^d' | awk '{print $NF}'

Repository: openwisp/netjsongraph.js

Length of output: 765

The main entry point does not exist and must be fixed before publishing.

The package.json points to "main": "index.js", but this file does not exist at the package root. npm consumers will fail to import this package. The webpack configuration outputs to dist/ with filenames like netjsongraph.js (dev) or netjsongraph.[contenthash:8].min.js (production).

Either create an index.js entry point that re-exports the library's public API, or update the main field to point to the correct build output location (e.g., dist/netjsongraph.js for production builds).

🤖 Prompt for AI Agents 
In `@package.json` around lines 5 - 6, The package.json "main" entry points to a
non-existent index.js; fix by either adding a top-level index.js that re-exports
the library's public API (matching what built bundles export) or update the
"main" field to the actual build output (e.g., "dist/netjsongraph.js" or the
production filename pattern). Modify package.json "main" to the chosen bundle or
create an index.js that imports/exports from the build output (ensure symbols
exported by your library remain identical), and update any build/publish scripts
if needed so the referenced file exists after npm publish.

"scripts": {
"test": "jest --silent",
"dev": "webpack serve --open --mode development",
"start": "yarn dev",
"build": "webpack --progress --mode production",
"build": "yarn build:full",
"build:full": "webpack --progress --mode production --env BUILD_TYPE=full",
"build:echarts-only": "webpack --progress --mode production --env BUILD_TYPE=echarts-only",
"coverage": "jest --silent --coverage",
"coveralls": "jest --silent -f ./coverage/lcov.info && cat ./coverage/lcov.info | coveralls || echo 'no coverage file found'",
"precommit": "lint-staged",
Expand Down Expand Up @@ -55,6 +58,7 @@
"@babel/preset-env": "^7.23.9",
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^30.0.0",
"compression-webpack-plugin": "^11.1.0",
"copy-webpack-plugin": "^13.0.0",
"coveralls": "^3.1.1",
"css-loader": "^7.1.2",
Expand All @@ -77,15 +81,22 @@
"terser-webpack-plugin": "^5.3.10",
"typescript": "^5.9.3",
"webpack": "^5.90.3",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.0.2"
"webpack-dev-server": "^5.0.2",
"leaflet": "^1.8.0"
},
"dependencies": {
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"kdbush": "^4.0.2",
"leaflet": "^1.8.0",
"zrender": "^6.0.0"
"kdbush": "^4.0.2"
},
"peerDependencies": {
"leaflet": "^1.8.0"
},
"peerDependenciesMeta": {
"leaflet": {
"optional": true
}
},
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
Loading
Loading