Add support for Vue.js

[metlos]

Description

Currently our plugin registry doesn't support Vue.js nicely. We have support for typescript/javascript parts of the code but we lack support for the .vue files altogether (we don't even have syntax highlighting).

This issue is to support the vetur plugin https://marketplace.visualstudio.com/items?itemName=octref.vetur in Che.

I tried adding it naively through a custom plugin called vuejs/vetur/latest with the following meta.yaml to my custom plugin registry:

apiVersion: v2
publisher: vuejs
name: vetur
version: 0.21.1
type: VS Code extension
displayName: Vetur
title: Rich Vue.js support
description: Vue tooling for VS Code
icon: https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg
repository: https://github.com/vuejs/vetur.git
category: Language
firstPublicationDate: "2019-07-02"
spec:
  containers:
    - image: eclipse/che-theia-endpoint-runtime:next
      name: vetur
      memoryLimit: '512Mi'
  extensions:
    - https://github.com/vuejs/vetur/releases/download/v0.21.1/vetur-0.21.1.vsix

But that doesn't seem to work out of the box and will likely require some modifications to the environment the extension runs in or to the extension code itself. Note that the extension seems to run a language server (having little experience with Che plugin development I don't understand the consequences of that).

Reproduction Steps

1. Configure Che to use a custom plugin registry with the above mentioned plugin.
2. Import the following devfile:

---
apiVersion: 1.0.0
metadata:
  name: vuejs
projects:
  -
    name: vuejs-app
    source:
      type: git
      location: "https://github.com/gothinkster/vue-realworld-example-app.git"
components:
  - 
    type: chePlugin
    id: vuejs/vetur/latest
    memoryLimit: 1024Mi
  -
    type: chePlugin
    id: che-incubator/typescript/latest
    memoryLimit: 512Mi
  -
    type: dockerimage
    alias: nodejs
    image: registry.access.redhat.com/ubi8/nodejs-10
    command: ['sleep']
    args: ['infinity']
    env:
      - name: HOME
        value: /tmp/user
      - name: PS1
        value: $(echo ${0})\\$
    memoryLimit: 512Mi
    endpoints:
      - name: 'vuejs-app'
        port: 8080
        attributes:
          discoverable: 'true'
    mountSources: true
commands:
  -
    name: run the web app
    actions:
      - type: exec
        component: nodejs
        command: npm install && npm run serve
        workdir: ${CHE_PROJECTS_ROOT}/vuejs-app
  -
    name: enable app preview
    actions:
      - type: exec
        component: nodejs
        command: |
          echo "module.exports = {devServer: {disableHostCheck: true}};" > vue.config.js
        workdir: ${CHE_PROJECTS_ROOT}/vuejs-app

Notice the lack of any support for .vue files.

OS and version:

Diagnostics:
When a workspace created from the above devfile is opened for the first time and a .vue file is opened, no syntax highlighting is present:

If the Theia window is reloaded, an error saying "Request initialize failed with message: Cannot read property 'suggest' of undefined" is shown. Strangely, the syntax highlighting suddenly seems work:

but code navigation (that works in VS Code) still doesn't.

Related issues:

This issue might be related: #11054

[metlos]

Would you please take a look, @l0rd ?

[l0rd]

Thanks @metlos for raising this. What do you mean when you say But that doesn't seem to work out of the box?

I would be +1 to add the vs code extension to the plugin registry before GA if we don't need to update Theia vscode extension API. Otherwise I would postpone it to 7.1.0.

[metlos]

Thanks @metlos for raising this. What do you mean when you say But that doesn't seem to work out of the box?

Basically the symptoms I described in the Diagnostics section.

[metlos]

@tsmaeder @tolusha would you be able to take a quick look at the above vue extension to estimate how much work it would be to make it work in Theia? Just to be able to give an anwer to @l0rd's question..

[tolusha]

Investigation shows that vue.js doesn't work because html.suggest.html5 is absent in preferences which comes from VS Code html extension [1]

I see two solutions:

1. It is possible to add this property into preferences.
2. We need to create VS Code html extension as a vsix archive (like we did for TS extension [2]) and make sure that it is loaded before vue.js

[1] https://github.com/microsoft/vscode/blob/1.36.0/extensions/html-language-features/package.json#L140
[2] https://github.com/che-incubator/ms-code.typescript

[l0rd]

@tolusha ok so it doesn't look straighforward. I would postpone that for 7.1.0.

[tsmaeder]

Time to revive this one.

[tsmaeder]

VS Code built-ins are now available from npm. Check whether html-language-features is alread in there or how to consume it from npm.

[gattytto]

running vuetur 22.6 (latest release now) over the che node sidecar results in the following docker container logs for the sidecar. Background: after right click->file->new-> "thing.vue", then open thing.vue.
even tho it complains about failing to "initialize" the client, it starts working

"Starting the deployer with the list of resolvers [ LocalDirectoryPluginDeployerResolver {},
GithubPluginDeployerResolver { unpackedFolder: '/tmp/github-remote' },
HttpPluginDeployerResolver { unpackedFolder: '/tmp/http-remote' },
VsCodePluginDeployerResolver { vscodeExtensionsFolder: '/tmp/vscode-extension-marketplace' } ]
Theia Endpoint 1/pid listening on port 2506
Found the list of default plugins ID on env: undefined
Found the list of plugins ID on env: local-dir:///plugins/sidecars/ms_vscode_vuetur_latest
Found the list of default plugins ID from CLI: undefined
unzipping the VS Code extension 'ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix' to directory: /tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix
PluginTheiaDirectoryHandler: accepting plugin with path /tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix
Resolving "ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix" as a VS Code extension...
Resolved "ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix" to a VS Code extension "vetur@0.22.6" with engines: { vscode: '^1.32.0' }
the accepted plugins are []
the acceptedFrontendPlugins plugins are []
the acceptedBackendPlugins plugins are [ PluginDeployerEntryImpl {
originId: 'local-dir:///plugins/sidecars/ms_vscode_vuetur_latest',
pluginId: 'ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix',
map: Map { 'package.json' => [Object] },
changes:
[ 'PluginVsCodeFileHandler', 'PluginVsCodeDirectoryHandler' ],
acceptedTypes: [ 1 ],
currentPath:
'/tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix/extension',
initPath:
'/plugins/sidecars/ms_vscode_vuetur_latest/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix',
resolved: true,
resolvedByName: 'LocalDirectoryPluginDeployerResolver' } ]
local path to deploy on remote instance [ '/tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix/extension' ]
Deploying backend plugin "vetur@0.22.6" from "/tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix/extension/dist/client/vueMain"
PLUGIN_HOST(1): PluginManagerExtImpl/init()
PLUGIN_HOST(1): initializing(vetur@0.22.6 with /remote-endpoint/node_modules/@theia/plugin-ext-vscode/lib/node/plugin-vscode-init.js)
PLUGIN_HOST(1): PluginManagerExtImpl/loadPlugin(/tmp/vscode-unpacked/ms-vscode.vuetur.latest.wljqhlonve.vetur-0.22.6.vsix/extension/dist/client/vueMain)
Client initialization failed"

[gattytto]

VS Code built-ins are now available from npm. Check whether html-language-features is alread in there or how to consume it from npm.

could this be related?
eclipse-theia/theia#6623 (comment)

[gattytto]

https://marketplace.visualstudio.com/items?itemName=SimonSiefke.html-language-features&utm_source=www.vsixhub.com adding this to the meta.yaml before loading the vue extensions makes it work without errors

[che-bot]

Issues go stale after 180 days of inactivity. lifecycle/stale issues rot after an additional 7 days of inactivity and eventually close.

Mark the issue as fresh with /remove-lifecycle stale in a new comment.

If this issue is safe to close now please do so.

Moderators: Add lifecycle/frozen label to avoid stale mode.

[ericwill]

@gattytto I believe this is something you started working on