HMR hotUpdate プラグインフック

フィードバック

環境APIフィードバックディスカッションでフィードバックをお寄せください。

handleHotUpdate プラグインフックは、hotUpdateフック（Environment APIに対応し、createおよびdeleteを使用して追加のウォッチイベントを処理する）に置き換えることを計画しています。

影響を受ける範囲: Viteプラグイン開発者

将来の非推奨化

hotUpdateはv6.0で初めて導入されました。handleHotUpdateの非推奨化はv7.0で計画されています。現時点では、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 []
}