feat(vite): add HMR Inspector tab

[arashsheyda]

Description

this PR adds HMR Inspector tab to vite devtools

Linked Issues

closes #232

Additional context

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/devtools@374

npm i https://pkg.pr.new/@vitejs/devtools-kit@374

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@374

npm i https://pkg.pr.new/@vitejs/devtools-self-inspect@374

commit: 2631e09

[antfu]

Thanks for the PR.

But can we make the UI a bit more compact? I think there is quite a lot of duplicate information. For example:

1. I don't think the HMR update badge is necessary because the entire tab is already about HMR.
2. For the file paths, I think we should make them relative to the workspace root. We can use the existing component we have in the Rolldown plugins that renders the file path.

I also wonder if we can provide more information. For example when a component triggers an HMR update, can we show what the boundary of the HMR is? We could even draw a graph of the updated files when a user clicks the HMR update to show the detail panel.

[arashsheyda]

@antfu do you mean something like this? I'm unsure how I can get more data from vite's hmr

[antfu]

@arashsheyda It looks great! I think we can have it as the good starting point and iterate. Can you push you changes to the branch?

[arashsheyda]

oops sorry I forgot about this PR. will be updating it today or tomorrow 😬