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

フィードバック

Environment API feedback discussionでフィードバックをお寄せください。

Environment APIを意識するために、handleHotUpdate プラグインフックを非推奨とし、hotUpdate フックを使用し、create と delete で追加の監視イベントを処理する予定です。

影響範囲: Vite プラグイン作成者

将来の廃止予定

hotUpdate は v6.0 で初めて導入されました。handleHotUpdate の廃止は v7.0 で予定されています。現時点では、まだ handleHotUpdate からの移行は推奨していません。もし実験して私たちにフィードバックをしたいのであれば、vite config で future.removePluginHookHandleHotUpdate を "warn" に指定してください。

動機

handleHotUpdate フックはカスタム HMR 更新処理を行うことができます。更新するモジュールのリストは HmrContext に渡されます

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

このフックはすべての環境に対して一度だけ呼び出され、渡されたモジュールはクライアント環境と SSR 環境だけの情報が混在しています。フレームワークがカスタム環境に移行すると、それぞれの環境に対して呼び出される新しいフックが必要になります。

新しい hotUpdate フックは handleHotUpdate と同じように動作しますが、環境ごとに呼び出され、新しい HotUpdateContext インスタンスを受け取ります:

interface HotUpdateContext {
  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` プラグインフック

動機

移行ガイド