feature: language support for vue files

[yusufkandemir]

Actual Behavior

All features except basic syntax highlighting and snippets don't work in .vue files.

Expected Behavior

They should work as expected, just like they do in .js, .ts, .graphql, etc. files.

Steps to Reproduce the Problem Or Description

Just create a .vue file and try to write a query using gql tag, you will just get graphql snippets and basic syntax highlighting.

Specifications

• GraphQL for VSCode Extension Version: graphql.vscode-graphql v0.3.9
• VSCode Version: 1.49.1
• OS Name: Windows 10
• OS Version: v2004 build 19041.450
• Notes: The extension is installed and running in WSL 2. So, the details of that OS:
  • Ubuntu 20.04.1 LTS
  • /proc/version: Linux version 4.19.84-microsoft-standard (oe-user@oe-host) (gcc version 8.2.0 (GCC)) graphql/vscode-graphql#1 SMP Wed Nov 13 11:44:37 UTC 2019

Logs Of TS Server || GraphQL Language Service

N/A

[acao]

@yusufkandemir yes this is a known issue!

the extension supports highlighting vue files, but no language support yet.

i was researching just last night - which would be the best off-the-shelf parser for such a thing?

[acao]

maybe this interface? https://github.com/mysticatea/vue-eslint-parser/blob/c627e36c57ab6607c96f995e81b8ce693ac846ef/src/index.ts#L142

I can probably have this working by next week

[IlCallo]

The vue-template-compiler, which is the one used to compile templates AOT, also return an AST via compile.

Dunno the differences between this and the ESLint one, except that the vue-eslint-parser is probably more lightweight as it doesn't manage compilation but just analysis

[veryeasily]

I kind of poked around on https://astexplorer.net/ with vue parsers, and figured I'd report back my results. Out of all 3 parsers they have, it seems like the vue-eslint-parser is the only one that can parse the javascript inside of the vue single file component script tag for you. All the others just parse the HTML, and deliver the JS as a large string inside the script node. The bad news with vue-eslint-parser is that it failed to parse like 3/4ths of the components from my project that I tried.

The other two worked pretty reliably, with vue-template-compiler being the most reliable. (Edit: I just realized that vue-template-compiler only returns an AST for the HTML template on vue single-file-components. I think the parser to actually use is the other one @vue/compiler-dom)

It seems like maybe you could use @vue/compiler-dom to extract the string from inside the script tag, and then parse it with a normal javascript parser?

[tobiasdiez]

Vue support would be great!

I'm not sure what exactly the parser needs to do, but if it's only to extract the graphql queries in a vue file this library may be helpful: https://www.graphql-tools.com/docs/api/modules/graphql-tag-pluck

[acao]

See #1679 for a path forward on this!

note that the vscode-graphql extension changes will provide highlighting only for vscode users, but the changes we make to the language server will impact all IDEs using the server

Also to note, regular expressions are too brittle for this, we’ve found

[tobiasdiez]

Ok, for reference, graphql-tag-pluck first uses @vue/compiler-sfc to extract the script part of the vue file, and then babel to parse it for gql tags.
https://github.com/ardatan/graphql-tools/blob/master/packages/graphql-tag-pluck/src/index.ts

Maybe using @vue/compiler-sfc to extract the script, and then plug this into the existing parser, may already provide a good-enough solution until #1679 is implemented properly?

[tobiasdiez]

@acao I think this can be closed now!

[acao]

@tobiasdiez indeed it can, thank you!