@mandujs/cli 0.3.6 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/cli",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Agent-Native Fullstack Framework - 에이전트가 코딩해도 아키텍처가 무너지지 않는 개발 OS",
   "type": "module",
   "main": "./src/main.ts",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@mandujs/core": "^0.3.4"
+    "@mandujs/core": "^0.4.0"
   },
   "engines": {
     "bun": ">=1.0.0"

package/src/commands/build.ts

@@ -0,0 +1,156 @@
+/**
+ * mandu build - 클라이언트 번들 빌드
+ *
+ * Hydration이 필요한 Island들을 번들링합니다.
+ */
+
+import { loadManifest, buildClientBundles, printBundleStats } from "@mandujs/core";
+import path from "path";
+import fs from "fs/promises";
+
+export interface BuildOptions {
+  /** 코드 압축 (기본: production에서 true) */
+  minify?: boolean;
+  /** 소스맵 생성 */
+  sourcemap?: boolean;
+  /** 감시 모드 */
+  watch?: boolean;
+  /** 출력 디렉토리 */
+  outDir?: string;
+}
+
+export async function build(options: BuildOptions = {}): Promise<boolean> {
+  const cwd = process.cwd();
+  const specPath = path.join(cwd, "spec", "routes.manifest.json");
+
+  console.log("📦 Mandu Build - Client Bundle Builder\n");
+
+  // 1. Spec 로드
+  const specResult = await loadManifest(specPath);
+  if (!specResult.success) {
+    console.error("❌ Spec 로드 실패:");
+    for (const error of specResult.errors) {
+      console.error(`   ${error}`);
+    }
+    return false;
+  }
+
+  const manifest = specResult.manifest;
+  console.log(`✅ Spec 로드 완료: ${manifest.routes.length}개 라우트`);
+
+  // 2. Hydration이 필요한 라우트 확인
+  const hydratedRoutes = manifest.routes.filter(
+    (route) =>
+      route.kind === "page" &&
+      route.clientModule &&
+      (!route.hydration || route.hydration.strategy !== "none")
+  );
+
+  if (hydratedRoutes.length === 0) {
+    console.log("\n📭 Hydration이 필요한 라우트가 없습니다.");
+    console.log("   (clientModule이 없거나 hydration.strategy: none)");
+    return true;
+  }
+
+  console.log(`\n🏝️  ${hydratedRoutes.length}개 Island 빌드 중...`);
+  for (const route of hydratedRoutes) {
+    const hydration = route.hydration || { strategy: "island", priority: "visible" };
+    console.log(`   - ${route.id} (${hydration.strategy}, ${hydration.priority || "visible"})`);
+  }
+
+  // 3. 번들 빌드
+  const startTime = performance.now();
+  const result = await buildClientBundles(manifest, cwd, {
+    minify: options.minify,
+    sourcemap: options.sourcemap,
+    outDir: options.outDir,
+  });
+
+  // 4. 결과 출력
+  console.log("");
+  printBundleStats(result);
+
+  if (!result.success) {
+    console.error("\n❌ 빌드 실패");
+    return false;
+  }
+
+  const elapsed = (performance.now() - startTime).toFixed(0);
+  console.log(`\n✅ 빌드 완료 (${elapsed}ms)`);
+  console.log(`   출력: .mandu/client/`);
+
+  // 5. 감시 모드
+  if (options.watch) {
+    console.log("\n👀 파일 감시 모드...");
+    console.log("   Ctrl+C로 종료\n");
+
+    await watchAndRebuild(manifest, cwd, options);
+  }
+
+  return true;
+}
+
+/**
+ * 파일 감시 및 재빌드
+ */
+async function watchAndRebuild(
+  manifest: Awaited<ReturnType<typeof loadManifest>>["manifest"],
+  rootDir: string,
+  options: BuildOptions
+): Promise<void> {
+  const slotsDir = path.join(rootDir, "spec", "slots");
+
+  // 디렉토리 존재 확인
+  try {
+    await fs.access(slotsDir);
+  } catch {
+    console.warn(`⚠️  슬롯 디렉토리가 없습니다: ${slotsDir}`);
+    return;
+  }
+
+  const { watch } = await import("fs");
+
+  const watcher = watch(slotsDir, { recursive: true }, async (event, filename) => {
+    if (!filename) return;
+
+    // .client.ts 파일만 감시
+    if (!filename.endsWith(".client.ts")) return;
+
+    const routeId = filename.replace(".client.ts", "").replace(/\\/g, "/").split("/").pop();
+    if (!routeId) return;
+
+    const route = manifest!.routes.find((r) => r.id === routeId);
+    if (!route || !route.clientModule) return;
+
+    console.log(`\n🔄 변경 감지: ${routeId}`);
+
+    try {
+      const result = await buildClientBundles(manifest!, rootDir, {
+        minify: options.minify,
+        sourcemap: options.sourcemap,
+        outDir: options.outDir,
+      });
+
+      if (result.success) {
+        console.log(`✅ 재빌드 완료: ${routeId}`);
+      } else {
+        console.error(`❌ 재빌드 실패: ${routeId}`);
+        for (const error of result.errors) {
+          console.error(`   ${error}`);
+        }
+      }
+    } catch (error) {
+      console.error(`❌ 재빌드 오류: ${error}`);
+    }
+  });
+
+  // 종료 시 정리
+  process.on("SIGINT", () => {
+    console.log("\n\n👋 빌드 감시 종료");
+    watcher.close();
+    process.exit(0);
+  });
+
+  // 무한 대기
+  await new Promise(() => {});
+}

package/src/main.ts

@@ -5,6 +5,7 @@ import { generateApply } from "./commands/generate-apply";
 import { guardCheck } from "./commands/guard-check";
 import { dev } from "./commands/dev";
 import { init } from "./commands/init";
+import { build } from "./commands/build";
 import {
   changeBegin,
   changeCommit,
@@ -24,6 +25,7 @@ Commands:
   spec-upsert    Spec 파일 검증 및 lock 갱신
   generate       Spec에서 코드 생성
   guard          Guard 규칙 검사
+  build          클라이언트 번들 빌드 (Hydration)
   dev            개발 서버 실행
 
   change begin   변경 트랜잭션 시작 (스냅샷 생성)
@@ -38,6 +40,9 @@ Options:
   --file <path>      spec-upsert 시 사용할 spec 파일 경로
   --port <port>      dev 서버 포트 (기본: 3000)
   --no-auto-correct  guard 시 자동 수정 비활성화
+  --minify           build 시 코드 압축
+  --sourcemap        build 시 소스맵 생성
+  --watch            build 시 파일 감시 모드
   --message <msg>    change begin 시 설명 메시지
   --id <id>          change rollback 시 특정 변경 ID
   --keep <n>         change prune 시 유지할 스냅샷 수 (기본: 5)
@@ -48,13 +53,15 @@ Examples:
   bunx mandu spec-upsert
   bunx mandu generate
   bunx mandu guard
+  bunx mandu build --minify
+  bunx mandu build --watch
   bunx mandu dev --port 3000
   bunx mandu change begin --message "Add new route"
   bunx mandu change commit
   bunx mandu change rollback
 
 Workflow:
-  1. init → 2. spec-upsert → 3. generate → 4. guard → 5. dev
+  1. init → 2. spec-upsert → 3. generate → 4. build → 5. guard → 6. dev
 `;
 
 function parseArgs(args: string[]): { command: string; options: Record<string, string> } {
@@ -110,6 +117,14 @@ async function main(): Promise<void> {
       });
       break;
 
+    case "build":
+      success = await build({
+        minify: options.minify === "true",
+        sourcemap: options.sourcemap === "true",
+        watch: options.watch === "true",
+      });
+      break;
+
     case "dev":
       await dev({ port: options.port ? Number(options.port) : undefined });
       break;

package/templates/default/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "mandu dev",
+    "build": "mandu build",
     "generate": "mandu generate",
     "guard": "mandu guard",
     "spec": "mandu spec-upsert",
@@ -11,12 +12,12 @@
     "test:watch": "bun test --watch"
   },
   "dependencies": {
-    "@mandujs/core": "^0.3.4",
+    "@mandujs/core": "^0.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@mandujs/cli": "^0.3.6",
+    "@mandujs/cli": "^0.4.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "typescript": "^5.0.0"