Not rerender when code snippet file changes

[shigma]

• I confirm that this is a issue rather than a question.

Bug report

Version

1.0.0-alpha.39

Steps to reproduce

The issue is found by @jiaming743 in #1297. Thanks!

Suppose we have two files, foo.js and foo.md.

foo.js

export default {
    // this is a test file
}

foo.md

<<< @/foo.js

What is expected?

When updating foo.js, foo.html will automatically rerender.

What is actually happening?

After updating foo.js, foo.html does not changes.

Other relevant information

• Your OS: Windows
• Node.js version: v10.12.0
• Browser version: N/A
• Is this a global or local install? Local
• Which package manager did you use for the install? Yarn

[shigma]

The problem is we use cache in markdown-loader:

https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown-loader/index.js#L36

In that case, changes in code snippets will not be able to be detected even if we add them as dependencies.

[shigma]

@ulivz What do you mean by:

https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown-loader/index.js#L30-L32

Can we only cache the markdown tokens and do the rendering repetitively?

[BuptStEve]

I hava a plan.

• markdown-loader index.js

  // const cached = cache.get(key)
  // if (cached && (isProd || /\?vue/.test(this.resourceQuery))) {
  //   return cached
  // }

  ...

  // the render method has been augmented to allow plugins to
  // register data during render
  const {
    html,
    data: { hoistedTags, links, deps },
    dataBlockString
  } = markdown.render(content, {
    frontmatter: frontmatter.data,
    relPath: path.relative(sourceDir, file)
  })

  deps.forEach(this.addDependency) // <-- add deps for webpack

• markdown lib/snippet.js

    md.$data = md.$data || {}
    md.$data.deps = md.$data.deps || []
    md.$data.deps.push(filename) // <-- add dep

• markdown index.js

module.exports.dataReturnable = function dataReturnable (md) {
  // override render to allow custom plugins return data
  const render = md.render
  md.render = (...args) => {
    md.$data = md.$data || {} // <-- markdown-it plugins can pass deps via md.$data
    
    ...
  }
}

@ulivz what do you think?

[shigma]

@BuptStEve
Working out a simple solution is not difficult, but actually we should make sure to take advantage of lru cache as far as possible. Your solution will increase the rendering time.

[BuptStEve]

@BuptStEve
Working out a simple solution is not difficult, but actually we should make sure to take advantage of lru cache as far as possible. Your solution will increase the rendering time.

Yeah, it's just a simple and naive solution. Any better ideas?

[shigma]

My idea is to separate md.render into two parts: md.parse and md.renderer.render.

Every part will has cache with it, which will not only solve the problem but improve performance for general situations as well. I will open a pr later to clarify some technical details.