Easy hot module reloading (HMR) for Node.js and ESM
npm install @sonamu-kit/hmr-hook이 패키지는 hot-hook을 기반으로 하여 Sonamu 프레임워크에서 사용할 목적으로 수정을 가한 패키지입니다.
Credit: Julien Ripouteau for hot-hook. Thank you for your great work!
원본 문서는 여기에서 확인하실 수 있습니다.
위치: src/dynamic_import_checker.ts:23-46 - ensureFileIsImportedDynamicallyFromParent()
변수를 사용한 동적 import(await import(variablePath))도 유효한 동적 import로 인정하도록 변경했습니다. 원본은 리터럴 문자열만 허용했으나, 프레임워크 패턴에서 경로가 런타임에 결정되는 경우를 지원하기 위해 수정했습니다.
위치: src/loader.ts:390-424 - resolve 훅
부모 파일도 boundary인 경우 자식 boundary를 정적 import하는 것을 허용합니다. 부모가 reload될 때 자식도 함께 새로 로드되므로 안전하게 HMR이 작동합니다.
위치: src/loader.ts:345-357 - resolve 훅
@sonamu-kit/loader가 제공하는 result.importAttributes.ts를 활용하여 실제 소스 파일(.ts) 경로를 정확히 추적합니다.
위치: src/hot.ts:160-183 - invalidateFile() 메서드
외부 파일 워처를 사용하는 경우를 위해 파일 변경을 수동으로 알릴 수 있는 메서드를 추가했습니다.
위치:
- src/hot.ts:189-210 - invalidateAll() 메서드
- src/loader.ts:120-143 - 메시지 핸들러
Sonamu UI 서버에서 사용자 프로젝트의 모든 모듈을 한번에 리로드할 수 있도록 전체 캐시 무효화 기능을 추가했습니다.
외부 패키지가 프로젝트 소스를 동적으로 import할 때 의존성 트리에 없어 발생하는 오류를 방지하기 위해 버전을 0으로 처리합니다.
- 8562208: knex같은 외부 패키지가 프로젝트 소스코드를 동적으로 임포트하려는 경우 처리
- e2c4e9b: 모든 모듈 cache를 invalidate하는 메소드 추가
---
ROOT (index.ts)
↓ 정적 import (OK)
app.ts
↓ 정적 import (OK)
loader.ts
↓ 동적 import (필수!) ← 여기서 끊을 수 있음
BOUNDARY (service.ts)
↓ 정적 import (OK, boundary 아니니까)
helper.ts
---
우리가 추가한 예외 규칙
$3
파일: 원래: 리터럴 문자열 동적 import만 인정
typescript
await import('./service.ts') // ✅ OK
await import(variablePath) // ❌ 불인정
`수정 후: 변수 기반도 인정
typescript
await import(variablePath) // ✅ OK!
`이유: 프레임워크 패턴 지원 (경로가 런타임에 결정됨)
---
$3
파일: 원래: Boundary는 무조건 동적 import만
mymodel.ts [BOUNDARY]
↓ 정적 import
libmodel.ts [BOUNDARY] // ❌ 에러!
수정 후: 부모도 boundary면 정적 import 허용
module-loader.js
↓ 동적 import (OK!)
mymodel.ts [BOUNDARY]
↓ 정적 import (OK! 부모가 boundary니까) ✅
libmodel.ts [BOUNDARY]
이유:
- mymodel.ts가 reload되면 내부의
---
---
이제 Saessak 프레임워크가 hot-hook과 완벽하게 호환됩니다! 🎉