Digitalbrainstem / Javascript-Vue

Provides html syntax highlighting inside javascript files.
MIT License
1 stars 2 forks source link

Trying to use slots with template tag in an inline template breaks syntax highlighting #4

Open Betanu701 opened 4 years ago

Betanu701 commented 4 years ago

Originally from @kyletheninja

The problem in a nutshell is this, using my dropdown component example:

Vue.component('test', {
  template : `
  <dropdown label='My Button contents'>
    <my-actual-menu-component></my-actual-menu-component>
  </dropdown>
  `,
   beforeCreate() {
      console.log('whatever');
    }
})

Above everything is highlighted correctly, but as soon as I use the template tag in there like so:

Vue.component('test', {
  template : `
  <dropdown>
    <template #btn>
      My Button Contents<i class='icon></i>
    </template>
    <my-actual-menu-component></my-actual-menu-component>
  </dropdown>
  `,
   beforeCreate() {
      console.log('whatever');
    }
})

The template string and everything above it is highlighted properly, but everything after the backtick enclosed string gets highlighted as if it is a string. If I remove the #btn from the <template #btn> tag so that there are no spaces between template and its opening and closing angle brackets, only the template tags themselves get highlighted as strings, and the rest of the document is fine. However, in order to use slots properly we must necessarily use the name sometimes, as in this case where the default slot is already being used for the dropdown menu, not the toggle button. I should mention that <template v-slot:btn> does not work either. It seems to be the space, even <template > gives the same bug.

For now my workaround is to put the template at the bottom of the definition object, since it only messes with the highlighting after it. Thank you for this plugin by the way! This is the best way to write components, I've wanted it since I started using angularjs 5 years ago.