HMR not working on import code snippets

[yuxino]

Describe the bug

HMR not working on import code snippets

To Reproduce

Steps to reproduce the behavior:

see this video

• git clone https://github.com/febug/vitepress-import-code-snippet.git
• yarn
• yarn serve
• edit hello.vue content

Expected behavior

auto update code

System Info

• vitepress version: 0.7.2
• Node version: v13.14.0
• OS version: osx 10.15.3

[kiaking]

@yuxino Hi! I can't even make code snippet import to work in the first place 😅 Your reproduction repo is 404, could you fix that?

[yuxino]

@kiaking my bad ，now repo is public

[kiaking]

OK thanks! I've confirmed it. I'm not sure if this feature is fully supported yet... 😅 Let's mark this issue as an enhancement and see if we can make it work.

[lovetingyuan]

any update on this feature?

[brc-dd]

Also not on imported markdown files. HMR is triggering for them, but we are using custom handleHotUpdate that's not able to handle the updates in that case.

[brc-dd]

https://github.com/vuejs/vitepress/compare/chore/vite-3...fix/hmr?expand=1 -- these changes seem to fix this. But I'm not sure if this is proper/elegant way to do stuff.

[yl-199807]

I also met. Hope to be fixed.
The same problem on vuepress is fixed.
vuejs/vuepress#1309
vuejs/vuepress#1358

[wycats]

@brc-dd said:

chore?expand=1 (compare) -- these changes seem to fix this. But I'm not sure if this is proper/elegant way to do stuff.

This link isn't working (anymore?). What did your kludgy fix do?

[brc-dd]

Ah, that vite-3 branch was deleted after merging. That HMR branch is still there (outdated though). These were the changes I was referring to: 7dbceaa?w=1

[wycats]

Is there any more progress on this? I can see how to do it in a fork, but I'd rather not rely on code that will inevitably become stale.

If I'm thinking about this correctly, what we need is a way to augment the includes that are currently hardcoded to the @include syntax (the code already calls server.addWatchFile for all files that the markdown function returns as includes).

Adding a way to collect additional includes to the markdown-it env seems straightforward. If there's interest, I'd be happy to take a stab at a pull request that does that 😄

[wycats]

Ah, I can see that this problem exists even if an include is added. I was so focused on my use-case that I didn't notice that the HMR issue exists even if server.addWatchFile is used.

I still think that it would be good to let markdown plugins do custom includes, but perhaps the API needs to be rich enough to support HMR. If there's interest, I can dig into that 😄

[brc-dd]

The solution in #2581 seems to work for most cases, but one might also need to add some plugin like https://github.com/ElMassimo/vite-plugin-full-reload e.g. in cases where a vue component is both imported and included as code snippet.

[brc-dd]

Okay, so this should work fine without any extra config in next version. I went with a slightly modified approach of what I had earlier proposed in 7dbceaa