HMR 동작 원리

# Entity 수정 → 서버 재시작 → 테스트
1. Sonamu UI에서 Entity 수정
2. Ctrl+C (서버 종료)
3. pnpm dev (서버 재시작)
4. 20~30초 대기...
5. 테스트

반복할 때마다 30초씩 낭비 😫

# Entity 수정 → 즉시 반영
1. Sonamu UI에서 Entity 수정
2. 2초 후 콘솔에 🔄 Invalidated 로그
3. 테스트

반복해도 2초면 충분 🚀

// User Entity에 nickname 추가
nickname: StringProp({ maxLength: 50 })

🔄 Invalidated:
- src/application/user/user.entity.ts
- src/application/user/user.model.ts (with 8 APIs)
- src/application/user/user.api.ts

✅ All files are synced!

# 서버 재시작 없이 바로 API 호출
curl http://localhost:3000/api/user/1
{
  "id": 1,
  "name": "John",
  "nickname": null  // 👈 새 필드가 즉시 반영됨!
}

// user.api.ts 수정 전
@api({ httpMethod: "GET" })
async list() {
  return UserModel.findMany();
}

// user.api.ts 수정 후
@api({ httpMethod: "GET" })
async list(listParams: ListParams & { keyword?: string }) {
  const where = listParams.keyword 
    ? { name: { $like: `%${listParams.keyword}%` } }
    : undefined;
  
  return UserModel.findMany({
    where,
    limit: listParams.num,
    offset: (listParams.page - 1) * listParams.num,
  });
}

🔄 Invalidated:
- src/application/user/user.api.ts

✨ API re-registered: GET /api/user/list

GET /api/user/list?keyword=john&page=1&num=10
# 바로 동작함 ✅

// user.model.ts
export class UserModel extends BaseModel {
  static async findActive() {
    return this.findMany({ 
      where: { status: "active", deletedAt: null } 
    });
  }
  
  isActive(): boolean {
    return this.status === "active" && !this.deletedAt;
  }
}

// post.api.ts
@api({ httpMethod: "POST" })
async create(body: PostForm) {
  const user = await UserModel.findById(body.userId);
  
  if (!user.isActive()) {  // 👈 방금 추가한 메서드 바로 사용!
    throw new BadRequestError("User is not active");
  }
  
  return PostModel.save(body);
}

User Entity 수정
  ↓
Syncer가 파일 생성 시작...
  ↓
HMR이 감지해서 재로드 시작... ← 🚨 아직 생성 중인데!
  ↓
타이밍 꼬임 → 오류 발생

// syncer.ts
async syncFromWatcher(event: string, diffFilePath: AbsolutePath) {
  // 1. HMR에게 파일 무효화 요청
  const invalidatedPaths = await hot.invalidateFile(diffFilePath, event);
  
  // 2. 자동 생성 코드 싱크 완료 (순서 보장!)
  await this.doSyncActions([diffFilePath]);
  
  // 3. 이제 안전하게 모듈 재로드
  await this.autoloadTypes();
  await this.autoloadModels();
  await this.autoloadApis();
  await this.autoloadWorkflows();
  
  // 4. 완료!
  this.eventEmitter.emit("onHMRCompleted");
}

// hmr-hook-register.ts
if (process.env.HOT === "yes" && process.env.API_ROOT_PATH) {
  const { hot } = await import("@sonamu-kit/hmr-hook");

  await hot.init({
    rootDirectory: process.env.API_ROOT_PATH,
    boundaries: [`./src/**/*.ts`],  // 모든 .ts 파일이 HMR 대상
  });

  console.log("🔥 HMR-hook initialized");
}

user.model.ts
  ├─ user.api.ts
  ├─ post.api.ts
  └─ admin.api.ts

// 파일 워처
watcher.on("change", async (filePath) => {
  await syncer.syncFromWatcher("change", filePath);
});

// chokidar로 파일시스템 감시
watcher.on("change", (filePath) => {
  console.log(`File changed: ${filePath}`);
});

// ESM 캐시 제거
const invalidatedPaths = await hot.invalidateFile(diffFilePath, "change");
// ["src/user/user.model.ts", "src/user/user.api.ts", ...]

await this.doSyncActions([diffFilePath]);

await this.autoloadTypes();
await this.autoloadModels();
await this.autoloadApis();
await this.autoloadWorkflows();

removeInvalidatedRegisteredApis(invalidatedPath: AbsolutePath) {
  const entityId = EntityManager.getEntityIdFromPath(invalidatedPath);
  const toRemove = registeredApis.filter((api) => api.modelName === `${entityId}Model`);
  
  for (const api of toRemove) {
    registeredApis.splice(registeredApis.indexOf(api), 1);
  }
  
  return toRemove;
}

🔄 Invalidated:
- src/user/user.model.ts (with 8 APIs)

// 원본 hot-hook: ❌ 불가능
const modelPath = `./models/${entityId}.model`;
await import(modelPath);  // 에러 발생!

// Sonamu hmr-hook: ✅ 가능
const modelPath = `./models/${entityId}.model`;
await import(modelPath);  // 정상 동작

// user.model.ts (boundary)
import { PostModel } from "./post.model";  // 원본: ❌ / Sonamu: ✅

export class UserModel extends BaseModel {
  async getPosts() {
    return PostModel.findMany({ where: { userId: this.id } });
  }
}

// Syncer가 파일 변경을 감지하면 HMR에 직접 알림
await hot.invalidateFile(filePath, "change");

// user.types.ts 변경 → user.model.ts만 재로드
// 전체 프로젝트가 아닌 영향받는 파일만!

const changedFiles = await findChangedFilesUsingChecksums();
if (changedFiles.length === 0) {
  console.log(chalk.black.bgGreen("All files are synced!"));
  return;
}

await runWithGracefulShutdown(
  async () => {
    await this.doSyncActions(changedFiles);
    await renewChecksums();
  },
  { whenThisHappens: "SIGUSR2", waitForUpTo: 20000 },
);

pnpm dev  # HOT=yes가 자동 설정됨

# HMR 활성화
HOT=yes pnpm dev

# HMR 비활성화 (디버깅 시)
HOT=no pnpm dev

// 터미널에 출력되는 로그 확인
🔥 HMR-hook initialized

// 파일 변경 시
🔄 Invalidated:
- src/user/user.model.ts (with 8 APIs)
- src/user/user.api.ts

✅ All files are synced!

# 의존성 트리 확인
const dump = await hot.dump();
console.log(`Total modules: ${dump.length}`);
console.log(`Boundaries: ${dump.filter(d => d.boundary).length}`);