@mandujs/cli 0.3.6 → 0.4.1

package/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "@mandujs/cli",
-  "version": "0.3.6",
-  "description": "Agent-Native Fullstack Framework - 에이전트가 코딩해도 아키텍처가 무너지지 않는 개발 OS",
-  "type": "module",
-  "main": "./src/main.ts",
-  "bin": {
-    "mandu": "./src/main.ts"
-  },
-  "files": [
-    "src/**/*",
-    "templates/**/*"
-  ],
-  "keywords": [
-    "ai",
-    "agent",
-    "framework",
-    "fullstack",
-    "bun",
-    "typescript",
-    "react",
-    "ssr",
-    "code-generation"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/konamgil/mandu.git"
-  },
-  "author": "konamgil",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@mandujs/core": "^0.3.4"
-  },
-  "engines": {
-    "bun": ">=1.0.0"
-  }
-}
+{
+  "name": "@mandujs/cli",
+  "version": "0.4.1",
+  "description": "Agent-Native Fullstack Framework - 에이전트가 코딩해도 아키텍처가 무너지지 않는 개발 OS",
+  "type": "module",
+  "main": "./src/main.ts",
+  "bin": {
+    "mandu": "./src/main.ts"
+  },
+  "files": [
+    "src/**/*",
+    "templates/**/*"
+  ],
+  "keywords": [
+    "ai",
+    "agent",
+    "framework",
+    "fullstack",
+    "bun",
+    "typescript",
+    "react",
+    "ssr",
+    "code-generation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konamgil/mandu.git"
+  },
+  "author": "konamgil",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mandujs/core": "^0.4.1"
+  },
+  "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/commands/dev.ts

@@ -1,9 +1,19 @@
-import { loadManifest, startServer, registerApiHandler, registerPageLoader } from "@mandujs/core";
+import {
+  loadManifest,
+  startServer,
+  registerApiHandler,
+  registerPageLoader,
+  startDevBundler,
+  createHMRServer,
+  needsHydration,
+} from "@mandujs/core";
 import { resolveFromCwd } from "../util/fs";
 import path from "path";
 
 export interface DevOptions {
   port?: number;
+  /** HMR 비활성화 */
+  noHmr?: boolean;
 }
 
 export async function dev(options: DevOptions = {}): Promise<void> {
@@ -21,9 +31,11 @@ export async function dev(options: DevOptions = {}): Promise<void> {
     process.exit(1);
   }
 
-  console.log(`✅ Spec 로드 완료: ${result.data.routes.length}개 라우트`);
+  const manifest = result.data;
+  console.log(`✅ Spec 로드 완료: ${manifest.routes.length}개 라우트`);
 
-  for (const route of result.data.routes) {
+  // 핸들러 등록
+  for (const route of manifest.routes) {
     if (route.kind === "api") {
       const modulePath = path.resolve(rootDir, route.module);
       try {
@@ -36,7 +48,8 @@ export async function dev(options: DevOptions = {}): Promise<void> {
     } else if (route.kind === "page" && route.componentModule) {
       const componentPath = path.resolve(rootDir, route.componentModule);
       registerPageLoader(route.id, () => import(componentPath));
-      console.log(`  📄 Page: ${route.pattern} -> ${route.id}`);
+      const isIsland = needsHydration(route);
+      console.log(`  📄 Page: ${route.pattern} -> ${route.id}${isIsland ? " 🏝️" : ""}`);
     }
   }
 
@@ -44,17 +57,69 @@ export async function dev(options: DevOptions = {}): Promise<void> {
 
   const port = options.port || Number(process.env.PORT) || 3000;
 
-  const server = startServer(result.data, { port });
+  // HMR 서버 시작 (클라이언트 슬롯이 있는 경우)
+  let hmrServer: ReturnType<typeof createHMRServer> | null = null;
+  let devBundler: Awaited<ReturnType<typeof startDevBundler>> | null = null;
 
-  process.on("SIGINT", () => {
-    console.log("\n🛑 서버 종료 중...");
-    server.stop();
-    process.exit(0);
+  const hasIslands = manifest.routes.some(
+    (r) => r.kind === "page" && r.clientModule && needsHydration(r)
+  );
+
+  if (hasIslands && !options.noHmr) {
+    // HMR 서버 시작
+    hmrServer = createHMRServer(port);
+
+    // Dev 번들러 시작 (파일 감시)
+    devBundler = await startDevBundler({
+      rootDir,
+      manifest,
+      onRebuild: (result) => {
+        if (result.success) {
+          hmrServer?.broadcast({
+            type: "island-update",
+            data: {
+              routeId: result.routeId,
+              timestamp: Date.now(),
+            },
+          });
+        } else {
+          hmrServer?.broadcast({
+            type: "error",
+            data: {
+              routeId: result.routeId,
+              message: result.error,
+            },
+          });
+        }
+      },
+      onError: (error, routeId) => {
+        hmrServer?.broadcast({
+          type: "error",
+          data: {
+            routeId,
+            message: error.message,
+          },
+        });
+      },
+    });
+  }
+
+  // 메인 서버 시작
+  const server = startServer(manifest, {
+    port,
+    isDev: true,
+    hmrPort: hmrServer ? port : undefined,
   });
 
-  process.on("SIGTERM", () => {
+  // 정리 함수
+  const cleanup = () => {
     console.log("\n🛑 서버 종료 중...");
     server.stop();
+    devBundler?.close();
+    hmrServer?.close();
     process.exit(0);
-  });
+  };
+
+  process.on("SIGINT", cleanup);
+  process.on("SIGTERM", cleanup);
 }

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"