diagram-2020 0.0.2 → 0.0.4

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.
Files changed (4) hide show
  1. package/diagram.txt +1 -1
  2. package/index.html +13 -10
  3. package/package.json +1 -1
  4. package/server.js +110 -4
package/diagram.txt CHANGED
@@ -1,4 +1,4 @@
1
1
  jam_delapan --> pegawai_datang
2
2
  pegawai_datang --> hrd_senang
3
3
  jam_delapan --> pegawai_tidakDatang
4
- pegawai_tidakDatang --> hrd_tidakSenang
4
+ pegawai_tidakDatang --> hrd_tidakSenangHahaha
package/index.html CHANGED
@@ -1,19 +1,22 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
+ <!--
9
+ <script src="http://localhost:35730/livereload.js"></script>
10
+ -->
8
11
  <script>
12
+ const lrPort = 35730;
13
+ const host = location.hostname;
14
+ const script = document.createElement("script");
15
+ script.src = 'http://' + host + ':' + lrPort + '/livereload.js';
16
+ document.head.appendChild(script);
17
+
9
18
  mermaid.initialize({ startOnLoad: true });
10
19
  </script>
11
- <style>
12
- body {
13
- font-family: sans-serif;
14
- padding: 20px;
15
- }
16
- </style>
17
20
  </head>
18
21
  <body>
19
22
  <div class="mermaid">
@@ -30,12 +33,12 @@ state pegawai {
30
33
  }
31
34
  state hrd {
32
35
  hrd_senang: senang
33
- hrd_tidakSenang: tidak senang
36
+ hrd_tidakSenangHahaha: tidak senang hahaha
34
37
  }
35
38
  jam_delapan --> pegawai_datang
36
39
  pegawai_datang --> hrd_senang
37
40
  jam_delapan --> pegawai_tidakDatang
38
- pegawai_tidakDatang --> hrd_tidakSenang
41
+ pegawai_tidakDatang --> hrd_tidakSenangHahaha
39
42
  </div>
40
43
  </body>
41
44
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diagram-2020",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "start": "node server.js"
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,59 @@ 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
+ <!--
154
+ <script src="http://localhost:${lrPort}/livereload.js"></script>
155
+ -->
156
+ <script>
157
+ const lrPort = ${lrPort};
158
+ const host = location.hostname;
159
+ const script = document.createElement("script");
160
+ script.src = 'http://' + host + ':' + lrPort + '/livereload.js';
161
+ document.head.appendChild(script);
162
+
163
+ mermaid.initialize({ startOnLoad: true });
164
+ </script>
165
+ </head>
166
+ <body>
167
+ <div class="mermaid">
168
+ ${diagram}
169
+ </div>
170
+ </body>
171
+ </html>`;
172
+
173
+ fs.writeFileSync(HTML_FILE, html);
174
+ }
175
+
95
176
  /* =========================
96
177
  2. GENERATE HTML
97
178
  ========================= */
179
+ /*
98
180
  function generateHTML() {
99
181
  let diagram = fs.existsSync(DIAGRAM_FILE)
100
182
  ? fs.readFileSync(DIAGRAM_FILE, "utf8")
@@ -129,33 +211,57 @@ ${diagram}
129
211
  fs.writeFileSync(HTML_FILE, html);
130
212
  console.log("🔄 index.html updated");
131
213
  }
214
+ */
132
215
 
133
216
  /* =========================
134
217
  3. LIVE RELOAD SERVER
135
218
  ========================= */
219
+ /*
136
220
  const liveReloadServer = livereload.createServer();
137
221
  liveReloadServer.watch(process.cwd());
222
+ */
138
223
 
139
224
  const app = express();
140
225
  app.use(connectLiveReload());
141
226
  app.use(express.static(process.cwd()));
142
227
 
228
+ /*
143
229
  app.listen(PORT, () => {
144
230
  console.log(`🚀 Static server running at http://localhost:${PORT}`);
145
231
  });
232
+ */
233
+
234
+ startServer(PORT);
146
235
 
147
236
  /* =========================
148
237
  4. WATCH FILE
149
238
  ========================= */
150
239
  async function main() {
151
240
  await ensureMermaid();
152
- generateHTML();
153
241
 
242
+ const liveReloadPort = await findFreePort(35729);
243
+
244
+ const liveReloadServer = livereload.createServer({
245
+ port: liveReloadPort,
246
+ });
247
+
248
+ liveReloadServer.watch(process.cwd());
249
+
250
+ console.log(`🔁 LiveReload running on port ${liveReloadPort}`);
251
+
252
+ generateHTML(liveReloadPort);
253
+ chokidar.watch(DIAGRAM_FILE).on("change", () => {
254
+ console.log("✏️ diagram.txt changed");
255
+ generateHTML(liveReloadPort);
256
+ liveReloadServer.refresh("/");
257
+ });
258
+ /*
154
259
  chokidar.watch(DIAGRAM_FILE).on("change", () => {
155
260
  console.log("✏️ diagram.txt changed");
156
261
  generateHTML();
157
262
  liveReloadServer.refresh("/");
158
263
  });
264
+ */
159
265
  }
160
266
 
161
267
  main();