create-vite-react-boot 1.0.16 → 1.0.18

package/bin/cli.js

@@ -6,6 +6,187 @@ import prompts from "prompts";
 import spawn from "cross-spawn"; // 크로스플랫폼 스폰
 import { green, yellow, red, cyan, bold } from "kolorist";
 import { applyScaffold } from "../lib/apply.js";
+import readline from "node:readline"; // ← 진행바 렌더링용
+
+
+function formatHMS(s) {
+  const m = Math.floor(s / 60).toString().padStart(2, "0");
+  const ss = Math.floor(s % 60).toString().padStart(2, "0");
+  return `${m}:${ss}`;
+}
+function barLine({ width, ratio }) {
+  const w = Math.max(10, width);
+  const filled = Math.round(w * Math.max(0, Math.min(1, ratio)));
+  return `[${"#".repeat(filled)}${"-".repeat(w - filled)}]`;
+}
+function writeLine(y, text) {
+  readline.cursorTo(process.stdout, 0, y);
+  readline.clearLine(process.stdout, 0);
+  process.stdout.write(text);
+}
+function termSize() {
+  const cols = process.stdout.columns || 80;
+  const rows = process.stdout.rows || 24;
+  return { cols, rows };
+}
+
+async function runWithProgress(cmd, args = [], { cwd, env } = {}, label = "작업") {
+  const start = Date.now();
+  const { cols } = termSize();
+  const barWidth = Math.min(40, Math.max(20, Math.floor(cols * 0.35)));
+  let linesReserved = 3; // 헤더 + 메인바 + 로그요약 1줄
+
+  // 상태
+  let percent = null;          // 0..1 (정확 모드에서만)
+  let downloadedBytes = 0;     // 추정치(출력 길이 기반, npm fallback)
+  let totalHint = null;        // yarn/pnpm가 알려주면 총량
+  let lastTick = Date.now();
+  let emaRate = 0;             // 지수이동평균(바이트/초), ETA 추정용
+  const alpha = 0.15;
+
+  // 화면 세팅
+  const startTop = process.stdout.rows ? (process.stdout.rows - 1) : 0;
+  process.stdout.write("\x1B[?25l"); // 커서 숨김
+  const header = () => {
+    const elapsed = (Date.now() - start) / 1000;
+    const eta = (() => {
+      if (percent != null && percent > 0 && totalHint) {
+        const remain = (1 - percent) * totalHint;
+        const rate = emaRate > 1 ? emaRate : null;
+        return rate ? formatHMS(remain / rate) : "--:--";
+      }
+      if (emaRate > 100) {
+        const remainBytes = totalHint ? (totalHint - downloadedBytes) : null;
+        if (remainBytes && remainBytes > 0) return formatHMS(remainBytes / emaRate);
+      }
+      return "--:--";
+    })();
+    return `${label}  [${formatHMS(elapsed)}]  ${totalHint ? `${(downloadedBytes / 1048576).toFixed(1)} / ${(totalHint / 1048576).toFixed(1)} MiB` : `${(downloadedBytes / 1048576).toFixed(1)} MiB`}  (eta: ${eta})`;
+  };
+
+  // 렌더러
+  function render(lastMsg = "") {
+    const elapsed = (Date.now() - start) / 1000;
+    const ratio = percent != null ? percent : Math.min(0.95, Math.max(0.1, 1 - 1 / Math.max(2, elapsed / 3)));
+    const line0 = header();
+    const line1 = `${barLine({ width: barWidth, ratio })}`;
+    const line2 = lastMsg ? `… ${lastMsg.slice(0, cols - 4)}` : "";
+
+    // 위에서 3줄 확보해 덮어쓰기
+    writeLine(0, line0.padEnd(cols));
+    writeLine(1, line1.padEnd(cols));
+    writeLine(2, line2.padEnd(cols));
+  }
+
+  // 프로세스 실행
+  await new Promise((resolve, reject) => {
+    // yarn/pnpm에선 JSON/ndjson 모드로 이벤트 파싱을 노려본다
+    let a = args.slice();
+    const isYarn = /yarn/i.test(cmd);
+    const isPnpm = /pnpm/i.test(cmd);
+
+    if (isYarn && !a.includes("--json")) a.push("--json");
+    if (isPnpm && !a.includes("--reporter")) a.push("--reporter", "ndjson");
+
+    const child = spawn(cmd, a, {
+      stdio: ["ignore", "pipe", "pipe"],
+      cwd,
+      env: { ...process.env, ...env },
+      shell: false,
+    });
+
+    let bufOut = "", bufErr = "";
+    let lastMsg = "";
+
+    const handleJSONLine = (line) => {
+      try {
+        const j = JSON.parse(line);
+        // yarn classic: progressStart/progressTick/progressFinish
+        if (j.type === "progressStart" && j.data && typeof j.data.current === "number" && typeof j.data.total === "number") {
+          const total = j.data.total;
+          totalHint = total;       // 단위는 'tick'이지만 총량 힌트로 사용
+        }
+        if (j.type === "progressTick" && j.data && typeof j.data.current === "number" && typeof j.data.total === "number") {
+          percent = Math.max(0, Math.min(1, j.data.current / j.data.total));
+          // tick 기반으로도 바이트 추정치 보정
+          downloadedBytes += 64 * 1024; // 대략치
+        }
+        if (j.type === "step" && j.data) {
+          lastMsg = j.data;
+        }
+        // pnpm ndjson: msg에 Progress 문구가 섞임
+        if (j.msg) lastMsg = j.msg;
+      } catch { /* ignore non-json */ }
+    };
+
+    const tickRate = (chunkLen) => {
+      const now = Date.now();
+      const dt = (now - lastTick) / 1000;
+      lastTick = now;
+      if (dt > 0) {
+        const inst = chunkLen / dt;
+        emaRate = emaRate ? (emaRate * (1 - alpha) + inst * alpha) : inst;
+      }
+    };
+
+    child.stdout.on("data", (b) => {
+      const s = b.toString("utf8");
+      bufOut += s;
+      downloadedBytes += b.length;  // npm fallback 시 “대략 MiB”로 사용
+      tickRate(b.length);
+
+      // yarn/pnpm JSON 라인 파싱
+      if (isYarn || isPnpm) {
+        const lines = s.split(/\r?\n/);
+        for (const ln of lines) {
+          if (!ln.trim()) continue;
+          handleJSONLine(ln);
+        }
+      } else {
+        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
+      }
+      render(lastMsg);
+    });
+    child.stderr.on("data", (b) => {
+      const s = b.toString("utf8");
+      bufErr += s;
+      downloadedBytes += b.length;
+      tickRate(b.length);
+
+      if (isYarn || isPnpm) {
+        const lines = s.split(/\r?\n/);
+        for (const ln of lines) {
+          if (!ln.trim()) continue;
+          // 일부 PM은 stderr에도 json이 섞여온다
+          if ((ln.startsWith("{") && ln.endsWith("}"))) handleJSONLine(ln);
+        }
+      } else {
+        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
+      }
+      render(lastMsg);
+    });
+
+    // 주기적 리렌더 (출력이 잠시 멎어도 바 갱신)
+    const iv = setInterval(() => render(lastMsg), 80);
+
+    child.on("error", (e) => {
+      clearInterval(iv);
+      // 마지막 화면 정리
+      render("에러 발생");
+      process.stdout.write("\x1B[?25h");
+      reject(e);
+    });
+    child.on("close", (code) => {
+      clearInterval(iv);
+      percent = 1;
+      render("완료");
+      process.stdout.write("\n\x1B[?25h");
+      if (code === 0) resolve();
+      else reject(Object.assign(new Error(`${cmd} exited ${code}`), { code, stdout: bufOut, stderr: bufErr }));
+    });
+  });
+}
+
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const cwd = process.cwd();
@@ -276,19 +457,27 @@ export default function App(){
 
     // ─────────────────────────────────────────────
     // 2) 1회 설치 (조용히 설치: fund/audit 등 장황 로그 숨김)
-    // ─────────────────────────────────────────────
-    console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
+  // ─────────────────────────────────────────────
+  console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
+
 
     // 패키지 매니저별 silent 옵션
-    const silentFlag =
-        pm === "npm" ? "--silent" :
-            pm === "yarn" ? "--silent" :
-                pm === "pnpm" ? "--silent" :
-                    "";
+  const silentFlag =
+    pm === "npm" ? "--silent" :
+      pm === "yarn" ? "--silent" :
+        pm === "pnpm" ? "--silent" : "";
 
-    runQuiet(pm, ["install", ...(silentFlag ? [silentFlag] : [])], { cwd: target });
-    console.log(green("   → 의존성 설치 완료!\n"));
+  // CI 환경이면 npm은 ci 사용, 아니면 install
+  const isCI = process.env.CI === "true";
+  const args =
+    pm === "npm"
+      ? [isCI ? "ci" : "install", ...(silentFlag ? [silentFlag] : [])]
+      : ["install", ...(silentFlag ? [silentFlag] : [])];
+  
+  
+  await runWithProgress(pm, args, { cwd: target }, "의존성 설치");
 
+  console.log(green("   → 의존성 설치 완료!\n"));
     // ─────────────────────────────────────────────
     // 3) 인증/라우팅/axios/Tailwind 추가 파일 (파일만 생성, 설치 없음)
     // ─────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-vite-react-boot",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "description": "Create a Vite + React + TS app with Tailwind, axios, AuthContext, login/register, routing.",
     "type": "module",
     "bin": {