[Hot Reload] Add line in <template> cause state lost

[tianjianchn]

Version

15.9.2

Reproduction link

https://github.com/tianjianchn/vue-hello-world/tree/vue-loader-hot-reload-bug

Steps to reproduce

1. add data count
2. add button in template, which will increment count by 1 when clicking
3. then add an new element in template in new line, save the file

What is expected?

the count value should be kept, other than restored to the initial value.

What is actually happening?

the count value was restored to the initial value.

---

[haoqunjiang]

I haven't dug into this yet.

But at first glance, it seems that it's because the changed line numbers lead to changing padding lines for the script block, which in turn triggers a hot-reload of the script, and scripts are not considered side-effects free, thus the full reload of the component.

[tianjianchn]

@sodatea You're right!
Using devtool: 'none' and then compare the leading empty lines' count after building, it also increments by 1.
So, maybe we should trim the whitespaces or empty comment lines while parsing the sections in SFC file?

[tianjianchn]

Found the padding-line codes: https://github.com/vuejs/vue/blob/fb589e6f9bc7db56a508f8f610ce321377bf0a6f/src/sfc/parser.js#L103-L106

      // pad content so that linters and pre-processors can output correct
      // line numbers in errors and warnings
      if (currentBlock.type !== 'template' && options.pad) {
        text = padContent(currentBlock, options.pad) + 

Seems like it's a choice between accurate line number in error and the hot reload tolerance now. Maybe webpack HMR module should do the trim work.

Anyway, if we put the <script> section first in SFC file, the problem is gone. Just a workaround though.

[bobvandevijver]

I guess #1795 is the exact same issue as described here.

Unfortunately, placing the <script> section above the <template> doesn't solve the issue for me, only disabling the source maps work. My reproduction repository is located here, which is using Webpack Encore to use Vue easily in a Symfony application.

By the way, this behaviour also happens when you just replace a character in the template (which means line numbers shouldn't change), or when editing something in the <style> tag

[Herz3h]

Same issue here with v15.9.1 and latest webpack v4. Using devtool: 'none' keeps the state on hot reload though but this has the downside of not having any sourcemap....

Edit: devtool 'none' doesn't seem to work all the time (I'm only making changes in template, adding simple lines, or changing attributes)

[Herz3h]

@sodatea is this an issue that can be solved in vue-loader or it has to be fixed in the sfc/parser (as linked above) ? I tried to look into vue-loader hmr code, can't figure it out and all I see is that api.reload is called everytime a new line is added when it's not a functional component: https://github.com/vuejs/vue-loader/blob/v15.9.8/lib/codegen/hotReload.js#L25

Edit: Moving the script block before the template works but it kinda ruins versionning...

[a298003154]

I guess #1795 is the exact same issue as described here.

Unfortunately, placing the <script> section above the <template> doesn't solve the issue for me, only disabling the source maps work. My reproduction repository is located here, which is using Webpack Encore to use Vue easily in a Symfony application.

By the way, this behaviour also happens when you just replace a character in the template (which means line numbers shouldn't change), or when editing something in the <style> tag

have u fix this bug with any solutions?