create-medan-app 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
 import { resolve } from "node:path";
-import { DEV_MJS, GITIGNORE, mainMedan, packageJson, readme } from "./templates.js";
+import { DEV_MJS, DEV_PORT, GITIGNORE, mainMedan, packageJson, readme } from "./templates.js";
 function isValidPackageName(name) {
     return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
 }
@@ -30,8 +30,7 @@ function main() {
     console.log("langkah selanjutnya:\n");
     console.log(`  cd ${rawName}`);
     console.log("  npm install");
-    console.log("  npm run dev   # auto-regenerate tiap main.medan disave");
-    console.log("  # atau: npm start   # generate sekali doang");
-    console.log("  # terus buka landing.html di browser");
+    console.log(`  npm run dev   # jalan di http://localhost:${DEV_PORT}, auto-reload`);
+    console.log("  # atau: npm start   # generate landing.html sekali doang");
 }
 main();

package/dist/templates.js

@@ -13,28 +13,101 @@ export function packageJson(name) {
 }
 `;
 }
+export const DEV_PORT = 7777;
 export const DEV_MJS = `// dev.mjs
-// "npm run dev" jalanin file ini: generate landing.html sekali, terus
-// nungguin main.medan berubah dan regenerate otomatis tiap disave.
+// "npm run dev" nge-generate landing.html, jalanin server di
+// http://localhost:${DEV_PORT}, terus mantau main.medan dan auto-reload
+// browser tiap kamu save.
 
 import { spawnSync } from "node:child_process";
-import { watch } from "node:fs";
+import { watch, readFileSync, existsSync } from "node:fs";
+import { createServer } from "node:http";
+import { networkInterfaces } from "node:os";
 
-function build() {
-  console.log("\\n[medan] generate landing.html ...");
+const PORT = ${DEV_PORT};
+let version = 0;
+
+function fmtMs(ms) {
+  return ms >= 1000 ? (ms / 1000).toFixed(1) + "s" : Math.round(ms) + "ms";
+}
+
+function localIp() {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name] ?? []) {
+      if (net.family === "IPv4" && !net.internal) return net.address;
+    }
+  }
+  return null;
+}
+
+function build(quiet) {
+  const start = Date.now();
+  if (!quiet) console.log("○ compiling main.medan ...");
   const result = spawnSync("medan", ["main.medan"], { stdio: "inherit" });
   if (result.status !== 0) {
-    console.error("[medan] ada error di atas, benerin dulu terus save lagi.");
+    console.error("\\n✗ gagal compile, benerin dulu terus save lagi.\\n");
+    return;
   }
+  version++;
+  console.log(\`✓ Compiled in \${fmtMs(Date.now() - start)}\`);
 }
 
-build();
-console.log("[medan] mantau main.medan, ctrl+c buat berhenti...");
+const RELOAD_SCRIPT = \`
+<script>
+  (function () {
+    var current = null;
+    setInterval(function () {
+      fetch("/__medan-version")
+        .then(function (r) { return r.text(); })
+        .then(function (v) {
+          if (current === null) current = v;
+          else if (v !== current) location.reload();
+        })
+        .catch(function () {});
+    }, 400);
+  })();
+</script>
+\`;
+
+const server = createServer((req, res) => {
+  const start = Date.now();
+  res.on("finish", () => {
+    console.log(\` \${req.method} \${req.url} \${res.statusCode} in \${fmtMs(Date.now() - start)}\`);
+  });
+
+  if (req.url === "/__medan-version") {
+    res.writeHead(200, { "content-type": "text/plain" });
+    res.end(String(version));
+    return;
+  }
+
+  if (!existsSync("landing.html")) {
+    res.writeHead(200, { "content-type": "text/html" });
+    res.end("<p>lagi nge-generate landing.html, tunggu bentar terus refresh...</p>");
+    return;
+  }
+
+  const html = readFileSync("landing.html", "utf-8") + RELOAD_SCRIPT;
+  res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+  res.end(html);
+});
+
+const bootStart = Date.now();
+build(true);
+
+server.listen(PORT, () => {
+  const ip = localIp();
+  console.log("\\n▲ Medan-lang dev");
+  console.log(\`  - Local:    http://localhost:\${PORT}\`);
+  if (ip) console.log(\`  - Network:  http://\${ip}:\${PORT}\`);
+  console.log(\`\\n✓ Ready in \${fmtMs(Date.now() - bootStart)}\\n\`);
+});
 
 let timer;
 watch("main.medan", () => {
   clearTimeout(timer);
-  timer = setTimeout(build, 100);
+  timer = setTimeout(() => build(false), 100);
 });
 `;
 export function mainMedan(name) {
@@ -165,7 +238,7 @@ siap
 modal halaman = "<title>${name}</title>" + fontLink + css() + "<div class='page'>" + hero() + stepsSection() + cheatsheetSection() + footerSection() + "</div>"
 
 tulis("landing.html", halaman)
-bilang "landing.html kelar digenerate. buka file itu di browser lu."
+bilang "landing.html kelar digenerate."
 `;
 }
 export function readme(name) {
@@ -180,11 +253,11 @@ npm install
 npm run dev
 \`\`\`
 
-\`npm run dev\` generate \`landing.html\` terus mantau \`main.medan\` — tiap kamu
-save, otomatis di-generate ulang. Buka \`landing.html\` di browser, refresh
-manual tiap abis edit & save.
+Buka http://localhost:${DEV_PORT} di browser. \`npm run dev\` mantau
+\`main.medan\` — tiap kamu save, halamannya auto-reload sendiri, gak perlu
+refresh manual.
 
-Mau generate sekali doang tanpa watch mode, pakai \`npm start\`.
+Mau generate \`landing.html\` sekali doang tanpa server, pakai \`npm start\`.
 
 ## Belajar lebih lanjut
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-medan-app",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Scaffold project Medan-lang baru, kayak 'npx create-next-app'.",
   "author": "Wilbert Law",
   "license": "MIT",