HMR `hotUpdate` プラグインフック

フィードバック

Viteは、handleHotUpdate プラグインフックを非推奨にし、環境APIに対応したhotUpdate フックに移行し、create と delete で追加の監視イベントを処理することを計画しています。

対象範囲: Vite プラグイン作者

将来的な非推奨化

hotUpdate は v6.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)
}

// Migrate to:

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

空の配列を返し、完全なリロードを実行します。

handleHotUpdate({ server, modules, timestamp }) {
  // Invalidate modules manually
  const invalidatedModules = new Set()
  for (const mod of modules) {
    server.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  server.ws.send({ type: 'full-reload' })
  return []
}

// Migrate to:

hotUpdate({ modules, timestamp }) {
  // Invalidate modules manually
  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 []
}

// Migrate to...

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

HMR hotUpdate プラグインフック ​

動機 ​

移行ガイド ​

HMR `hotUpdate` プラグインフック

動機

移行ガイド