vuejs/vue-loader

Tricky Src Imports : no compile or hot-reload with version 17.4.2

sebastienroul opened this issue · 0 comments

Using Webpack 3.12.4 + vue-loader 17.4.2.

Our practice is to split html and js (for maintenance purpose)

Here is a simplified sample of what we have

  • index.vue
<template src="./index.html"></template>
<script src="./index.js"></script>
  • index.js
export default {
data () {
  return {}
}
  • index.html
  <div>
    <template v-if="loading">
      <div>
        FOO
      </div>
    </template>
    <template v-else>
      <div >
        BAR
      </div>
    </template>
  </div>

In version 17.4.1 before commit src/templateLoader.ts

It worked like a charm.

But after, this commit (and also in version 17.4.0) it doesn't work any more.

=> It silenty kill all our app, just with a build in our CDI.

  • Problem : Compile Error : Invalid end tag

As the 'html' part is parsed via AST, AST try to find a child which is a template => and consider it as THE template of the page : In our cas :

<template v-else>
      <div >
        BAR
      </div>
    </template>

And then fail in compilation with 'Invalid end tag'....

  • Fix try

We try to fix it, by encapsulating the html code in a template :

 <template>
  <div>
    <template v-if="loading">
      <div>
        FOO
      </div>
    </template>
    <template v-else>
      <div >
        BAR
      </div>
    </template>
  </div>
</template>

It works ! vue-loader give the control to compiler-scf.js, and everything is ok. Html is 'compiled'

BUT the hotreload doesn't work anymore.

  • Reason
    We dived in the deep, and our analysis is :
  • At the first load : the Templateloader make a descriptor of our html file, and put it in the descriptorCache
    • => the descriptor contains an ast property and a source property
  • When new save happened, the TemplateLoader find our html in the cache and send it to the compileTemplate
    • => the main problem is TemplateLoader send to compiler the cache object with it's 'original' ast, not with the modified source

Then hot-reload happened, but not with the new code, only with original source ast-parsed.

Sorry for being so long to explain, but it's tricky.

Let me know if you need any explanation or info.

Regards