Implement hybrid mode support

[rchl]

vue.hybridMode is a mode where LSP-vue works together with LSP-typescript (with Vue Typescript plugin enabled) where each handles different functionality within the vue file.

vue.hybridMode is currently disabled and not recommended because:

• enabling the Vue Typescript plugin within LSP-typescript is a bit cumbersome and I want to provide some helper command for that
• LSP-typescript and LSP-vue running together in a vue file fight over which one should handle requests and those don't always end up going to proper servers - this can be fixed by disabling certain capabilities for LSP-vue when hybrid mode is enabled

[rchl]

A current blocker is related to making the Vue Typescript plugin easy to set up with LSP-typescript.

Setting up Vue Typescript plugin basically means adding a configuration like this in project settings:

	"settings": {
		"LSP": {
			"LSP-vue": {
				"initializationOptions": {
					"vue.hybridMode": true
				},
				// Preferred for handling requests in Vue files over LSP-typescript.
				"priority_selector": "text.html.vue source.js, text.html.vue source.ts",
				"disabled_capabilities": {
					"definitionProvider": true,
					"referencesProvider": true,
					"typeDefinitionProvider": true,
				},
			},
			"LSP-typescript": {
				"selector": "source.js, source.jsx, source.ts, source.tsx, text.html.vue",
				"initializationOptions": {
					"plugins": [
						{
							"languages": ["vue"],
							"location": "/Users/rafal/Library/Caches/Sublime Text/Package Storage/LSP-vue/20.18.0/server/node_modules",
							"name": "@vue/typescript-plugin",
						}
					],
				},
			},
		}
	},

The problem is the path to the plugin which is not know up-front (it's only known once the LSP-vue is initialized and also it's not ideal that it includes the node version since it means that this setup will break and will have to be updated once node version is updated.

I'd rather define some variable that would provide path to the LSP-vue node_modules but as said before, it's not that straightforward since that path is not known until server is initialized.

I was thinking of maybe copying the vue typescript plugin to a different location but that doesn't sound that great either IMO.

[rchl]

For the record (if someone wants to use hybrid mode before it's officially supported), to fix some issues with requests prioritization, it's recommended to also disable some capabilities and set priority_selector. I've updated configuration above with those.

[Narretz]

I activated hybrid mode, and updated the settings, but I don't get diagnostics in my .vue files, neither in the html nor in the script part.

The logs:

LSP: applying .sublime-project override for LSP-vue
LSP: starting ['C:\\Program Files\\nodejs\\node.EXE', 'C:\\Users\\marti\\AppData\\Local\\Sublime Text\\Package Storage\\LSP-vue\\20.9.0\\server\\node_modules\\@vue\\language-server\\bin\\vue-language-server.js', '--stdio'] in C:\Users\marti\dev
LSP: LSP-vue: Supported execute commands: ['vue.parseSfc', 'vue.detectNameCasing', 'vue.convertTagsToKebabCase', 'vue.convertTagsToPascalCase', 'vue.convertPropsToKebabCase', 'vue.convertPropsToCamelCase']
LSP: LSP-vue: registering capability: didChangeConfigurationProvider
LSP: starting ['C:\\Program Files\\nodejs\\node.EXE', 'C:\\Users\\marti\\AppData\\Local\\Sublime Text\\Package Storage\\LSP-vue\\20.9.0\\server\\node_modules\\@vue\\language-server\\bin\\vue-language-server.js', '--stdio'] in C:\Users\marti\dev
LSP: LSP-vue: Supported execute commands: ['vue.parseSfc', 'vue.detectNameCasing', 'vue.convertTagsToKebabCase', 'vue.convertTagsToPascalCase', 'vue.convertPropsToKebabCase', 'vue.convertPropsToCamelCase']

LSP log when hovering over an undefined variable

:: [11:53:44.001] --> LSP-vue textDocument/hover (110): {'textDocument': {'uri': 'file:///C:/Users/marti/dev/packages/client/src/components/SideDetail.vue'}, 'position': {'line': 68, 'character': 23}}
:: [11:53:44.005] --> LSP-vue textDocument/codeAction (111): {'textDocument': {'uri': 'file:///C:/Users/marti/dev/packages/client/src/components/SideDetail.vue'}, 'range': {'start': {'line': 68, 'character': 23}, 'end': {'line': 68, 'character': 23}}, 'context': {'diagnostics': [], 'triggerKind': 2}}
:: [11:53:44.071] <<< LSP-vue (110) (duration: 69ms): None
:: [11:53:44.071] <<< LSP-vue (111) (duration: 65ms): []

Maybe it's a Windows problem?

[niksy]

I think LSP-typescript is missing "selector": "source.js, source.jsx, source.ts, source.tsx, text.html.vue" in settings, by default it handles only pure JS/TS files, Vue has different scope.

[rchl]

I've edited the comments to just have one configuration instead of confusing two different ones.

But yeah, LSP-typescript must be running also.

[Narretz]

Thanks!

It works now.

One other thing I had wrong was that I used unix style path for the plugin path, which does not work in Windows. So LSP-typescript started without the plugin and I got garbage diagnostics in .vue files. It would be cool if LSP-vue or LSP-typescript could validate the plugin path somehow. Or maybe typescript does it but it's not reported.

[niksy]

It would be cool if LSP-vue or LSP-typescript could validate the plugin path somehow.

This is what @rchl is trying to automate.