Feature request: parseComponent's pad: true option should use spaces for padding

[sandersn]

When an external tool is using vue-template-compiler to grab the script block, { pad: true } fills in preceding non-script lines with // so that line+column-oriented tools can get the line numbers right.

However, this doesn't work as well for character-oriented tools like the Typescript language service, which treat positions as a single index into a single string. It would be better if { pad: true } replaced the contents of all non-script blocks with spaces.

For example:

import { parseComponent } from 'vue-template-compiler'
const desc = parseComponent(`<template>
blah
</template>
<script>
export default {
  data: { example: 12 }
  // etc etc
}
</script>`, { pad: true })
console.log(desc.script.content)

Current behaviour prints:

//
//
//

export default {
  data: ...

Desired behaviour prints:

......................................................
.......................................
....
...........
........
export default {
  data: ...

except instead of ., it should print .

Motivation

For background, I'm working on a Vue plugin for the Typescript language service so that editors like VS Code, Visual Studio, Sublime, emacs, etc, can get Javascript and Typescript completions inside .vue files. The next version of Typescript will support full completions on Vue and Vue options objects with no type annotations, and the plugin will make that work inside .vue files as well as .js and .ts files.

I tried using the start/end offsets returned from parseComponent, which kind of works, but Typescript has previously only used offsets for non-critical parsing like JSDoc. I'd like to use the space-replacing technique since I know it has worked in the past, for example in Visual Studio's handling of Javascript embedded in HTML.

Implementation

Replace the body of padContent in src/sfc/parser.js with return content.slice(0, block.start).replace(/./g, ' '). This correctly avoids replacing both \n and \r\n, at least on node 7.4 on Linux.

I'll send a PR as soon as I get Vue building and have added a test.

[octref]

@sandersn

Hello, I'm working on a vue extension for VSCode.

Vue plugin for the Typescript language service so that editors like VS Code, Visual Studio, Sublime, emacs, etc, can get Javascript and Typescript completions inside .vue files. The next version of Typescript will support full completions on Vue and Vue options objects with no type annotations, and the plugin will make that work inside .vue files as well as .js and .ts files.

This sounds really interesting. Will that take the form of a language server following LSP, or do you plan to write client plugins for all these editors?

Also microsoft/TypeScript#14141 doesn't seem to be able to handle vuex. For example, suggesting this.$store.getters.myGetter based on the shape of the store. Will your plugin support it? Also, It seems your plan is to just work on the js part of a vue SFC, however I also find IntelliSense for the html template indispensable.

Would be great if you can open a devoted issue for this plugin and give a bit more detail. I feel sorry for digressing from the original topic, but this is exciting and I look forward to integrate your work.

[sandersn]

Yes, it will use the normal Typescript language service for JS/TS, extended using the new Typescript plugin API. Right now you have to add a "plugins" entry to a tsconfig.json to activate the plugin. I just created a repo for the plugin, although it's in an alpha state that depends on modifications from the vue-plugin-WIP branch in Microsoft/TypeScript. The readme has a few more details.

I prototyped the plugin using emacs, which does only support the script block. For VS Code I am trying to get vetur's script block support working with the plugin so that existing HTML intellisense will still work and Typescript will be able to provide better intellisense inside the script block. Supporting things like {{ }} syntax inside the HTML block is still future work.

I don't know much about the Vue ecosystem, so I need to go learn about vuex to understand its usage patterns. I'll open a separate issue on vetur's repo and we can discuss both intellisense and vuex usage there.