Adapt to typescript-plugin approach

[rchl]

New version of Vue Language Tools is implemented using a typescript plugin rather than standalone server. We should support that approach.

(We shouldn't need to rush since it will take some time for it to iron out new issues)

Some ways of handling it:

1. Let user use LSP-typescript and manually set up the plugin per project
2. Bundle VLT plugin with LSP-typescript
3. Support some way of auto-registering plugins with LSP-typescript so that it's possible for this package to register the plugin automatically when installed. (Q: will it be OK to enable the plugin even for non-vue projects or could it cause issues?)
4. Like 3 but using a separate "LSP-typescript-vue-plugin" package (or whatever would be the appropriate name)

[niksy]

Is there any ETA when can we expect this?

It seems like issue with changes in related files is fixed with TS plugin approach.

[rchl]

I don't have time to work on that at the moment. Maybe in few months. But my current thinking is that it should:

• be a separate package like LSP-typescript-vue maybe to make it clear that it's a plugin to LSP-typescript
• not activate unless opted-in (how opt-in should work is to be determined)

[niksy]

It seems like Volar 2.0 has reached stable state: https://gist.github.com/johnsoncodehk/62580d04cb86e576e0e8d6bf1cb44e73

I’m currently using fork where I’ve updated dependencies and am using following configuration for LSP-typesript and it seems to be working:

{
	"initializationOptions": {
		"plugins": [{
			"name": "@vue/typescript-plugin",
			"location": "{path to Volar dependecies}/node_modules/@vue/typescript-plugin",
			"languages": ["vue"]
		}]
	},
	"selector": "source.js, source.jsx, source.ts, source.tsx, text.html.vue"
}

[rchl]

As far as I understand, the plugin only handles standalone .ts/.js files and the script block within vue files. For the rest of the functionality (like style and some of the functionality in the template blocks) you still need to run the 2.x "volar" server on top of that.

So I'm not sure how we should go about it. Whether LSP-volar should configure LSP-typescript plugin behind the scenes or should we put that responsibility on the user by editing tsconfig or project settings (and maybe provide some helper commands to make that semi-automatic)...

[niksy]

As far as I understand, the plugin only handles standalone .ts/.js files and the script block within vue files. For the rest of the functionality (like style and some of the functionality in the template blocks) you still need to run the 2.x "volar" server on top of that.

Yes, that is correct. Both LSPs need to be active for Vue files, hence the selector field adjustments. I think this new approach is basically about reducing memory consumption between running multiple TS server instances and simplification of codebase on Volar side.

So I'm not sure how we should go about it. Whether LSP-volar should configure LSP-typescript plugin behind the scenes or should we put that responsibility on the user by editing tsconfig or project settings (and maybe provide some helper commands to make that semi-automatic)...

Completely automatic feels magical if it means that user-specific LSP-typescript settings get changed, I just think it would look weird if users settings get changed without any information (maybe some comment inside settings which explain why the change is there). If it can be done without user knowing that initialization options are changed then I think it’s good. Otherwise, helper seems okay approach, and even instructions in documentation are OK, but it’s definitely something power users know.

Are there any similar examples of these kind of changes?

[dten]

I'm trying @niksy fork and have it working with by using the snippet above. However... is it just me or does getting that path to that node_modules dir really suck? I've ended up with an absolute path that includes a version number. If users had to fix that every time the plugin updated that would be painful.

/home/david/.cache/sublime-text/Package Storage/LSP-volar-next/20.12.2/server/node_modules/node_modules/@vue/typescript-plugin

[dten]

btw i started looking because Vue 3.5's useTemplateRef does not figure out its own type in the current LSP-volar

[niksy]

Yes, unfortunately, you need to use absolute path to plugin.

This could definitely be solved at LSP client level as mentioned by @rchl:

Whether LSP-volar should configure LSP-typescript plugin behind the scenes or should we put that responsibility on the user by editing tsconfig or project settings (and maybe provide some helper commands to make that semi-automatic)...

Other than that: @dten, do you find it working properly for you? I’m asking because I haven’t seen others using this approach and we could all benefit from real world usage so we know what needs to be changed in official client.

[dten]

I've only been using it a few hours but everything seems fine so far

[rchl]

https://github.com/sublimelsp/LSP-vue now runs on latest version of Vue Language Server so I would consider this resolved even if it's currently not using the plugin approach.

I intend to get the plugin approach (hybrid mode) support but currently it's a bit trickly for few reason listed in sublimelsp/LSP-vue#130