Skip to content

Instantly share code, notes, and snippets.

@EmmanuelOga
Last active December 9, 2020 17:56
Show Gist options
  • Save EmmanuelOga/e39409172879683862b263fead182950 to your computer and use it in GitHub Desktop.
Save EmmanuelOga/e39409172879683862b263fead182950 to your computer and use it in GitHub Desktop.
Nice reloadable boilerplate for JavScript projects with esbuild, chokidar and browser-sync.
{
"devDependencies": {
"browser-sync": "^2.26.13",
"chokidar": "^3.4.3",
"esbuild": "^0.8.21"
},
"dependencies": {
"cytoscape": "^3.17.0",
"lodash": "^4.17.20"
},
"scripts": {
"dev": "node script/dev.js"
}
body {
margin: 0;
padding: 0;
background-color: aliceblue;
}
#cy {
margin: 1rem;
width: 1024px;
height: 768px;
display: block;
background-color: white;
border: 1px solid gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="cy"></div>
<script src="index.js"></script>'
</body>
</html>
const { startService } = require("esbuild");
const { watch } = require("chokidar");
const build = async () => {
const service = await startService();
try {
const timerStart = Date.now();
await service.build({
color: true,
entryPoints: ["./src/index.js"],
outfile: "./public/index.js",
// minify: true,
bundle: true,
sourcemap: true,
});
console.log(`Built in ${Date.now() - timerStart}ms.`, true);
} catch (e) {
console.error(e);
} finally {
service.stop();
}
};
const browserSync = require("browser-sync");
browserSync({ server: "./public" });
console.log("Watching files... \n");
const watcher = watch(["src/**/*"]);
build();
watcher.on("change", () => {
build().then(() => {
browserSync.reload("*.js");
})
});
import cytoscape from 'cytoscape';
const elements = [];
for (let i = 0; i < 100; i++) {
const [from, to] = [`${i}`, `${i + 1}`];
elements.push({ data: { id: from } });
elements.push({ data: { id: `${from}-${to}`, source: from, target: to } });
}
elements.push({ data: { id: "100" } });
elements.push({ data: { id: `end`, source: 100, target: 0 } });
let cy = cytoscape({
container: document.querySelector("#cy"),
elements,
style: [
{
selector: 'node',
style: { 'background-color': '#666', 'label': 'data(id)' }
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}
}
],
});
window.cy = cy;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment