Avoiding relying on "this" in functions attached to "import.meta.hot"

[fabiospampinato]

Describe the bug

Basically I've been doing HMR for a component like this:

export default hmr ( import.meta.hot?.accept, Component );

But since v5 the "accept" function relies on "this", which is not preserved the way I was using it, so it breaks.

Reproduction

https://github.com/utrolig/voby-vite-error

Steps to reproduce

npm i && npm run dev

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 105.52 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    bun: 1.0.15 - ~/.bun/bin/bun
  npmPackages:
    vite: ^5.0.12 => 5.0.12

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

cc @sheremet-va. I'm not sure if this is something we had always guaranteed. You can also manually do import.meta.hot?.accept.bind(import.meta.hot) to make it work for Vite 5. If we want to support it, we'd also do the bind manually internally. And as shown in #15610, binding is expensive especially that it'll apply to all files that uses the HMR API.

[sheremet-va]

Hmm, I did not expect this usage. I am fine with changing the context implementation back to the object instead of a class.

[bluwy]

Closing according to #15679 (comment)