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
wants to merge 1 commit 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
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"trailingComma": "all",
"bracketSpacing": false,
"tabWidth": 2
"tabWidth": 2,
"printWidth": 88
}
22 changes: 22 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,28 @@ yarn install
yarn start
```

## Building the library

To build the production-ready library:

```bash
yarn build
```

**Output**: Single optimized bundle with all dependencies included.

- `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

The build includes:

- **ECharts** for network graph rendering
- **Leaflet** for geographic map rendering
- **Core NetJSONGraph.js** functionality

This unified bundle approach ensures compatibility and simplifies deployment while maintaining optimal performance through advanced webpack optimizations.

### Run Tests

The test suite includes browser tests, so **ensure that ChromeDriver is installed** before running them.
Expand Down
45 changes: 22 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,13 @@
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color var(--transition-speed) ease,
color var(--transition-speed) ease;
transition:
background-color var(--transition-speed) ease,
color var(--transition-speed) ease;
}

body {
font-family: 'Inter', sans-serif;
font-family: "Inter", sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
Expand Down Expand Up @@ -124,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 @@ -186,11 +189,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
>Leaflet plugins</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/netjsongraph-elementsLegend.html" target="_blank"
>Custom attributes</a
Expand All @@ -216,11 +215,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
>Multiple tiles render</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/netjsonmap-appendData2.html" target="_blank"
>Append data using arrays</a
Expand All @@ -244,23 +239,27 @@ <h1>NetJSONGraph.js Example Demos</h1>
</main>

<script>
const themeToggle = document.querySelector('.theme-toggle');
const themeToggle = document.querySelector(".theme-toggle");
const htmlElement = document.documentElement;

// Check for saved theme preference or system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
htmlElement.classList.add('dark-mode');
if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
htmlElement.classList.add("dark-mode");
}

themeToggle.addEventListener('click', () => {
htmlElement.classList.toggle('dark-mode');
themeToggle.addEventListener("click", () => {
htmlElement.classList.toggle("dark-mode");

// Save theme preference
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
localStorage.setItem('theme', currentTheme);
const currentTheme = htmlElement.classList.contains("dark-mode")
? "dark"
: "light";
localStorage.setItem("theme", currentTheme);
});
</script>
</body>
Expand Down
1 change: 0 additions & 1 deletion lib/js/echarts-gl.min.js
View file
Open in desktop

This file was deleted.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.3.0-alpha",
"description": "NetJSON NetworkGraph visualizer",
"main": "index.js",
"sideEffects": false,
"scripts": {
"test": "jest --silent",
"dev": "webpack serve --open --mode development",
Expand Down Expand Up @@ -52,6 +53,7 @@
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^30.0.0",
"acorn": "^8.11.3",
"compression-webpack-plugin": "^11.1.0",
"copy-webpack-plugin": "^13.0.0",
"coveralls": "^3.1.1",
"css-loader": "^7.1.2",
Expand All @@ -73,12 +75,12 @@
"style-loader": "^4.0.0",
"terser-webpack-plugin": "^5.3.10",
"webpack": "^5.90.3",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.0.2"
},
"dependencies": {
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"kdbush": "^4.0.2",
"leaflet": "^1.8.0",
"zrender": "^6.0.0"
Expand Down
Loading
Loading