Write Vue components in .js files, template & style as tagged templates

[beeplin]

What problem does this feature solve?

It has been long since vue-loader used the html-like .vue file to compile vue components. Back then this choice was reasonable, since at that time there was no ES6, no VSCode, no so many editor extensions, and the editor support for .html file format was relatively mature.

Today we might face a different story. Now when editing we have tons of tools based on .js files, many of which don't naturally work in .vue files. In all kinds of vscode extension repos people keep asking for .vue support, but the supports are always late and incomplete, if any. Many populate extensions like import-cost still fail to recognize .vue files at all.

Now we have template strings and tagged templates, so it might be possible to create a new type of vue components, not .vue files as 'js-and-css-in-html`, but (for example) .jsv files as 'html-and-css-in-js'.

By doing this, the .js supports are all out of box, and then we could have a new extenstion and a new language server for .jsv to parse and serve for the detected template/style tags, just as what the graphql extensions can do in editors with the tag gql:

What does the proposed API look like?

// SomeComponent.jsv
import { html, css} from 'jsv-tags'

export default {
  name: 'xxx',
  data: () => ({
    a: 1
  }),
  template: html`
    <div> 
      {{ a }}
    </div>
  `,
  style: css`
    div {
      color: red;
    }
  `
}

or for other types of loaders:

// SomeComponent.jsv
import { pug, stylus } from 'jsv-tags'

export default {
  name: 'xxx',
  data: () => ({
    a: 1
  }),
  template: pug`
    div {{ a }}
  `,
  style: stylus`
    div
      color red
  `,
  styleScoped: true
}