HMR `hotUpdate` 플러그인 훅

피드백

환경 API를 인식하고 create와 delete 이벤트를 추가로 처리할 수 있도록, handleHotUpdate 플러그인 훅을 hotUpdate 훅으로 대체할 예정입니다.

영향을 받는 범위: Vite 플러그인 개발자

지원 중단

hotUpdate는 v6.0에서 처음 도입되었습니다. v7.0에서 handleHotUpdate 지원이 중단될 예정입니다. 다만 아직은 handleHotUpdate 사용을 권장합니다. 실험해보고 피드백을 주고 싶다면, Vite 설정에서 future.removePluginHookHandleHotUpdate를 "warn"으로 설정할 수 있습니다.

배경

handleHotUpdate 훅은 커스텀 HMR 업데이트 처리를 수행할 수 있게 해줍니다. 업데이트될 모듈 목록이 HmrContext로 전달됩니다:

interface HmrContext {
  file: string
  timestamp: number
  modules: Array<ModuleNode>
  read: () => string | Promise<string>
  server: ViteDevServer
}

그러나 이 훅은 모든 환경에서 한 번 호출되며, 전달된 모듈은 클라이언트와 SSR 환경에 대한 정보가 혼합되어 있습니다. 이제 프레임워크가 커스텀 환경으로 이동했기에, 각 환경에 대해 호출되는 새로운 훅이 필요해졌습니다.

새로운 hotUpdate 훅은 handleHotUpdate와 동일한 방식으로 작동하지만 각 환경에 대해 호출되며 새로운 HotUpdateOptions 인스턴스를 전달받습니다:

interface HotUpdateOptions {
  type: 'create' | 'update' | 'delete'
  file: string
  timestamp: number
  modules: Array<EnvironmentModuleNode>
  read: () => string | Promise<string>
  server: ViteDevServer
}

이제 다른 플러그인 훅과 마찬가지로 this.environment를 통해 개발 환경에 접근할 수 있게 되었으며, modules 목록 역시 현재 환경에 대한 모듈 노드만을 포함합니다. 이를 통해 각 환경에 대한 업데이트는 서로 다른 전략을 취할 수 있습니다.

또한 이 훅은 'update'뿐만 아니라 추가적인 감시 이벤트에 대해서도 호출됩니다. type을 사용해 이들을 구분할 수 있습니다.

마이그레이션 가이드

영향을 받는 모듈 목록을 필터링하고 좁혀서 HMR이 더 정확하게 동작하도록 합니다.

handleHotUpdate({ modules }) {
  return modules.filter(condition)
}

// 다음과 같이 마이그레이션:

hotUpdate({ modules }) {
  return modules.filter(condition)
}

빈 배열을 반환해 전체 리로드를 수행:

handleHotUpdate({ server, modules, timestamp }) {
  // 수동으로 모듈 무효화
  const invalidatedModules = new Set()
  for (const mod of modules) {
    server.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  server.ws.send({ type: 'full-reload' })
  return []
}

// 다음과 같이 마이그레이션:

hotUpdate({ modules, timestamp }) {
  // 수동으로 모듈 무효화
  const invalidatedModules = new Set()
  for (const mod of modules) {
    this.environment.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  this.environment.hot.send({ type: 'full-reload' })
  return []
}

빈 배열을 반환하고 클라이언트에 커스텀 이벤트를 전송해 완전히 커스텀한 HMR 처리를 수행:

handleHotUpdate({ server }) {
  server.ws.send({
    type: 'custom',
    event: 'special-update',
    data: {}
  })
  return []
}

// 다음과 같이 마이그레이션:

hotUpdate() {
  this.environment.hot.send({
    type: 'custom',
    event: 'special-update',
    data: {}
  })
  return []
}

HMR hotUpdate 플러그인 훅 ​

배경 ​

마이그레이션 가이드 ​

HMR `hotUpdate` 플러그인 훅

배경

마이그레이션 가이드