diagram-2020 0.0.1 → 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.
Files changed (5) hide show
  1. package/README.md +48 -0
  2. package/diagram.txt +4 -3
  3. package/index.html +18 -21
  4. package/package.json +1 -1
  5. package/server.js +102 -4
package/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # Diagram
2
+
3
+ Ini adalah tools untuk mengubah teks diagram menjadi gambar diagram
4
+
5
+ ## Yang Dibutuhkan
6
+
7
+ Satu file `diagram.txt`
8
+
9
+ ## Instalasi
10
+
11
+ ```bash
12
+ npm i -g diagram-2020
13
+ ```
14
+
15
+ ## Menjalankan
16
+
17
+ Di folder yang ada `diagram.txt`, jalankan:
18
+
19
+ ```bash
20
+ diagram
21
+ ```
22
+
23
+ Kemudian kamu buka `localhost:3000` di browser
24
+ ## Sintaks Diagram
25
+
26
+ Contoh:
27
+
28
+ ```bash
29
+ user_masukkanNama --> user_klikSubmit
30
+ user_masukkanPassword --> user_klikSubmit
31
+ ```
32
+
33
+ Hasilnya:
34
+
35
+ ![](https://cdn.imgchest.com/files/fab5dce1c4d3.png)
36
+
37
+ Contoh lainnya:
38
+
39
+ ```bash
40
+ jam_delapan --> pegawai_datang
41
+ pegawai_datang --> hrd_senang
42
+ jam_delapan --> pegawai_tidakDatang
43
+ pegawai_tidakDatang --> hrd_tidakSenang
44
+ ```
45
+
46
+ Hasilnya:
47
+
48
+ ![](https://cdn.imgchest.com/files/26f447a8764d.png)
package/diagram.txt CHANGED
@@ -1,3 +1,4 @@
1
- rumah_masuk --> rumah_berbunyi: harusnya masuk
2
- rumah_masuk --> penghuniRumah_menyapa
3
- penghuniRumah_menyapa --> orangLain_masuk
1
+ jam_delapan --> pegawai_datang
2
+ pegawai_datang --> hrd_senang
3
+ jam_delapan --> pegawai_tidakDatang
4
+ pegawai_tidakDatang --> hrd_tidakSenang
package/index.html CHANGED
@@ -1,39 +1,36 @@
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
+ <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">
20
15
  stateDiagram-v2
21
- rumah: rumah
22
- penghuniRumah: penghuni rumah
23
- orangLain: orang lain
24
- state rumah {
25
- rumah_masuk: masuk
26
- rumah_berbunyi: berbunyi
16
+ jam: jam
17
+ pegawai: pegawai
18
+ hrd: hrd
19
+ state jam {
20
+ jam_delapan: delapan
27
21
  }
28
- state penghuniRumah {
29
- penghuniRumah_menyapa: menyapa
22
+ state pegawai {
23
+ pegawai_datang: datang
24
+ pegawai_tidakDatang: tidak datang
30
25
  }
31
- state orangLain {
32
- orangLain_masuk: masuk
26
+ state hrd {
27
+ hrd_senang: senang
28
+ hrd_tidakSenang: tidak senang
33
29
  }
34
- rumah_masuk --> rumah_berbunyi: harusnya masuk
35
- rumah_masuk --> penghuniRumah_menyapa
36
- penghuniRumah_menyapa --> orangLain_masuk
30
+ jam_delapan --> pegawai_datang
31
+ pegawai_datang --> hrd_senang
32
+ jam_delapan --> pegawai_tidakDatang
33
+ pegawai_tidakDatang --> hrd_tidakSenang
37
34
  </div>
38
35
  </body>
39
36
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diagram-2020",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
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,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();