hot reload doesn't work in conjunction with markdown-it-include plugin

aliniacb commented 5 years ago

[x] I confirm that this is an issue rather than a question.

Bug report

When changing imported files supported via markdown-it-include reload isn't triggered

Steps to reproduce

Install markdown-it-include via extendMarkdown option in config.js

// in my config.js
markdown: {
        lineNumbers: true,
        extendMarkdown: md => {
            md.use(require('markdown-it-include'), 'docs/api/');
        }
    }

What is expected?

Hot reload should be triggered and files recompiled

What is actually happening?

Whenever I change content in a file that is being imported nothing happens. I have also tried adding the imported files in the extraWatchFiles and the hot reload is triggered but it only refreshes the page without compiling.

To be able to see the changes I have to hit save in the parent file (which cannot be an imported file by itself otherwise it won't work).

Other relevant information

[x] My VuePress version is higher than 1.0.0-alpha.47, the following is the output of npx vuepress info in my VuePress project:


System:
OS: macOS 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 11.3.0 - ~/.nvm/versions/node/v11.3.0/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v11.3.0/bin/npm
Browsers:
Chrome: 74.0.3729.169
Firefox: Not Found
Safari: 12.1.1
npmPackages:
@vuepress/core:  1.0.0-alpha.48 
@vuepress/theme-default:  1.0.0-alpha.48 
vuepress: ^1.0.0-alpha.48 => 1.0.0-alpha.48 
npmGlobalPackages:
vuepress: 0.14.11

markchagers commented 4 years ago

I can confirm that this issue still occurs in vuepress@latest In fact, even rebuilding the project won't show the updated contents of the included file. I have to remove the import line, save the file and re-add the import for the changed file contants to show up in the rendered page.

tyrw commented 3 years ago

Confirmed as well; this is quite a blocker for larger documentation sets, and unfortunately makes the include feature mostly unusable.

InfoSec812 commented 3 years ago

I can confirm this is still an issue in 1.8.2 and I am pretty certain I know why. Even when you set up extraWatchFiles, the parent page of the include doesn't get modified and so it doesn't get re-rendered. I believe we would need some mechanism for VuePress to pre-scan for include files and trigger a re-render of the parent page instead. Not sure how that could be accomplished though.

cjcandctr commented 3 years ago

I simply forget to use build-in link extention in markdown files. So no need markdown-it-include plugin.

[Home](/) <!-- Sends the user to the root README.md -->
[foo](/foo/) <!-- Sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- Anchors user to a heading in the foo README file -->
[bar - three](../bar/three.md) <!-- You can append .md (recommended) -->
[bar - four](../bar/four.html) <!-- Or you can append .html -->

alexfornuto commented 3 years ago

I simply forget to use build-in link extention in markdown files. So no need markdown-it-include plugin.

[Home](/) <!-- Sends the user to the root README.md -->
[foo](/foo/) <!-- Sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- Anchors user to a heading in the foo README file -->
[bar - three](../bar/three.md) <!-- You can append .md (recommended) -->
[bar - four](../bar/four.html) <!-- Or you can append .html -->

I think we're talking about two different things. You're talking about a markdown link, and they're talking about embedding content from a markdown file in another markdown file. For example, this file is one of several that re-use content from this partial.

I've not commented on this issue but I've been watching it. I also experience this issue and would like to see it resolved.

markchagers commented 3 years ago

I think we're talking about two different things. You're talking about a markdown link, and they're talking about embedding content from a markdown file in another markdown file. For example, this file is one of several that re-use content from this

Actually the OP was talking about embedding code fragments in markdown files using the markdown-it plugin. When the embedded code changes, the generated p[ages should refresh to show the updated source code, but that doesn't happen.

alexfornuto commented 3 years ago

OK, embedded *. In any case, the behavior is the same in that it doesn't reload on change, and has nothing to do with markdown-formatted links.

cjcandctr commented 3 years ago

OK, embedded *. In any case, the behavior is the same in that it doesn't reload on change, and has nothing to do with markdown-formatted links.

Sorry for the confusion, but I've realize my mistake and did some research. I think ulivz provide a possible soution here https://github.com/vuejs/vuepress/issues/222, using the <content>component. I personally think it's a valid option but not as intuitive as the markdown-it-include does.

Besides, I can confirm the issue exists. Using markdown-it-include with vuepress, I have to update the reference(like this line !!!include(./embeddedFile.md)!!!), save the markdown, then update the reference back and save again to make the page render correctly.

vuejs / vuepress