diagram-2020 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +3 -8
- package/package.json +1 -1
- package/server.js +102 -4
package/index.html
CHANGED
|
@@ -1,19 +1,14 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html
|
|
2
|
+
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
5
|
<title>Mermaid Preview</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
7
7
|
<script src="./mermaid.min.js"></script>
|
|
8
|
+
<script src="http://localhost:35730/livereload.js"></script>
|
|
8
9
|
<script>
|
|
9
10
|
mermaid.initialize({ startOnLoad: true });
|
|
10
11
|
</script>
|
|
11
|
-
<style>
|
|
12
|
-
body {
|
|
13
|
-
font-family: sans-serif;
|
|
14
|
-
padding: 20px;
|
|
15
|
-
}
|
|
16
|
-
</style>
|
|
17
12
|
</head>
|
|
18
13
|
<body>
|
|
19
14
|
<div class="mermaid">
|
package/package.json
CHANGED
package/server.js
CHANGED
|
@@ -6,6 +6,39 @@ import chokidar from "chokidar";
|
|
|
6
6
|
import express from "express";
|
|
7
7
|
import livereload from "livereload";
|
|
8
8
|
import connectLiveReload from "connect-livereload";
|
|
9
|
+
import net from "net";
|
|
10
|
+
|
|
11
|
+
function findFreePort(startPort) {
|
|
12
|
+
return new Promise((resolve) => {
|
|
13
|
+
const server = net.createServer();
|
|
14
|
+
server.listen(startPort, () => {
|
|
15
|
+
const port = server.address().port;
|
|
16
|
+
server.close(() => resolve(port));
|
|
17
|
+
});
|
|
18
|
+
server.on("error", () => {
|
|
19
|
+
resolve(findFreePort(startPort + 1));
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function startServer(port) {
|
|
25
|
+
const app = express();
|
|
26
|
+
app.use(connectLiveReload());
|
|
27
|
+
app.use(express.static(process.cwd()));
|
|
28
|
+
|
|
29
|
+
const server = app.listen(port, () => {
|
|
30
|
+
console.log(`🚀 Static server running at http://localhost:${port}`);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
server.on("error", (err) => {
|
|
34
|
+
if (err.code === "EADDRINUSE") {
|
|
35
|
+
console.log(`⚠️ Port ${port} dipakai, coba port ${port + 1}...`);
|
|
36
|
+
startServer(port + 1);
|
|
37
|
+
} else {
|
|
38
|
+
console.error(err);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
9
42
|
|
|
10
43
|
const PORT = 3000;
|
|
11
44
|
const MERMAID_URL =
|
|
@@ -26,7 +59,7 @@ function humanize(text) {
|
|
|
26
59
|
function processDiagram(raw) {
|
|
27
60
|
const lines = raw
|
|
28
61
|
.split("\n")
|
|
29
|
-
.map(l => l.trim())
|
|
62
|
+
.map((l) => l.trim())
|
|
30
63
|
.filter(Boolean);
|
|
31
64
|
|
|
32
65
|
const groups = {};
|
|
@@ -38,7 +71,7 @@ function processDiagram(raw) {
|
|
|
38
71
|
const nodes = line
|
|
39
72
|
.replace(/:.+$/, "")
|
|
40
73
|
.split("-->")
|
|
41
|
-
.map(s => s.trim());
|
|
74
|
+
.map((s) => s.trim());
|
|
42
75
|
|
|
43
76
|
for (const node of nodes) {
|
|
44
77
|
const [group, state] = node.split("_");
|
|
@@ -75,7 +108,6 @@ function processDiagram(raw) {
|
|
|
75
108
|
return output.join("\n");
|
|
76
109
|
}
|
|
77
110
|
|
|
78
|
-
|
|
79
111
|
/* =========================
|
|
80
112
|
1. DOWNLOAD MERMAID JS
|
|
81
113
|
========================= */
|
|
@@ -92,9 +124,51 @@ async function ensureMermaid() {
|
|
|
92
124
|
console.log("✅ mermaid.min.js berhasil di-download");
|
|
93
125
|
}
|
|
94
126
|
|
|
127
|
+
/*
|
|
128
|
+
const liveReloadPort = await findFreePort(35729);
|
|
129
|
+
|
|
130
|
+
const liveReloadServer = livereload.createServer({
|
|
131
|
+
port: liveReloadPort
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
liveReloadServer.watch(process.cwd());
|
|
135
|
+
|
|
136
|
+
console.log(`🔁 LiveReload running on port ${liveReloadPort}`);
|
|
137
|
+
*/
|
|
138
|
+
|
|
139
|
+
function generateHTML(lrPort) {
|
|
140
|
+
const raw = fs.existsSync(DIAGRAM_FILE)
|
|
141
|
+
? fs.readFileSync(DIAGRAM_FILE, "utf8")
|
|
142
|
+
: "";
|
|
143
|
+
|
|
144
|
+
const diagram = processDiagram(raw);
|
|
145
|
+
|
|
146
|
+
const html = `<!DOCTYPE html>
|
|
147
|
+
<html>
|
|
148
|
+
<head>
|
|
149
|
+
<meta charset="UTF-8" />
|
|
150
|
+
<title>Mermaid Preview</title>
|
|
151
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
152
|
+
<script src="./mermaid.min.js"></script>
|
|
153
|
+
<script src="http://localhost:${lrPort}/livereload.js"></script>
|
|
154
|
+
<script>
|
|
155
|
+
mermaid.initialize({ startOnLoad: true });
|
|
156
|
+
</script>
|
|
157
|
+
</head>
|
|
158
|
+
<body>
|
|
159
|
+
<div class="mermaid">
|
|
160
|
+
${diagram}
|
|
161
|
+
</div>
|
|
162
|
+
</body>
|
|
163
|
+
</html>`;
|
|
164
|
+
|
|
165
|
+
fs.writeFileSync(HTML_FILE, html);
|
|
166
|
+
}
|
|
167
|
+
|
|
95
168
|
/* =========================
|
|
96
169
|
2. GENERATE HTML
|
|
97
170
|
========================= */
|
|
171
|
+
/*
|
|
98
172
|
function generateHTML() {
|
|
99
173
|
let diagram = fs.existsSync(DIAGRAM_FILE)
|
|
100
174
|
? fs.readFileSync(DIAGRAM_FILE, "utf8")
|
|
@@ -129,33 +203,57 @@ ${diagram}
|
|
|
129
203
|
fs.writeFileSync(HTML_FILE, html);
|
|
130
204
|
console.log("🔄 index.html updated");
|
|
131
205
|
}
|
|
206
|
+
*/
|
|
132
207
|
|
|
133
208
|
/* =========================
|
|
134
209
|
3. LIVE RELOAD SERVER
|
|
135
210
|
========================= */
|
|
211
|
+
/*
|
|
136
212
|
const liveReloadServer = livereload.createServer();
|
|
137
213
|
liveReloadServer.watch(process.cwd());
|
|
214
|
+
*/
|
|
138
215
|
|
|
139
216
|
const app = express();
|
|
140
217
|
app.use(connectLiveReload());
|
|
141
218
|
app.use(express.static(process.cwd()));
|
|
142
219
|
|
|
220
|
+
/*
|
|
143
221
|
app.listen(PORT, () => {
|
|
144
222
|
console.log(`🚀 Static server running at http://localhost:${PORT}`);
|
|
145
223
|
});
|
|
224
|
+
*/
|
|
225
|
+
|
|
226
|
+
startServer(PORT);
|
|
146
227
|
|
|
147
228
|
/* =========================
|
|
148
229
|
4. WATCH FILE
|
|
149
230
|
========================= */
|
|
150
231
|
async function main() {
|
|
151
232
|
await ensureMermaid();
|
|
152
|
-
generateHTML();
|
|
153
233
|
|
|
234
|
+
const liveReloadPort = await findFreePort(35729);
|
|
235
|
+
|
|
236
|
+
const liveReloadServer = livereload.createServer({
|
|
237
|
+
port: liveReloadPort,
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
liveReloadServer.watch(process.cwd());
|
|
241
|
+
|
|
242
|
+
console.log(`🔁 LiveReload running on port ${liveReloadPort}`);
|
|
243
|
+
|
|
244
|
+
generateHTML(liveReloadPort);
|
|
245
|
+
chokidar.watch(DIAGRAM_FILE).on("change", () => {
|
|
246
|
+
console.log("✏️ diagram.txt changed");
|
|
247
|
+
generateHTML(liveReloadPort);
|
|
248
|
+
liveReloadServer.refresh("/");
|
|
249
|
+
});
|
|
250
|
+
/*
|
|
154
251
|
chokidar.watch(DIAGRAM_FILE).on("change", () => {
|
|
155
252
|
console.log("✏️ diagram.txt changed");
|
|
156
253
|
generateHTML();
|
|
157
254
|
liveReloadServer.refresh("/");
|
|
158
255
|
});
|
|
256
|
+
*/
|
|
159
257
|
}
|
|
160
258
|
|
|
161
259
|
main();
|