feat(language-server): generate template virtual code #69

johnsoncodehk · 2024-03-13T18:48:12Z

This is a new draft implementation of Vue Vine language services by Volar 2.

Support variable reference and click jumping into definition.
Migrate to TS plugin to resolve component types to support props intellisense and be compatible with SFC components.

netlify · 2024-03-13T18:48:43Z

✅ Deploy Preview for vue-vine ready!

Name	Link
🔨 Latest commit	`506a4ab`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-vine/deploys/6603975af0338c0008e36d51
😎 Deploy Preview	https://deploy-preview-69--vue-vine.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ShenQingchuan · 2024-03-14T01:48:49Z

@johnsoncodehk

Awesome work !! Thanks for joining us 🎉🥳🎉🥳🎉🥳🎉🥳

and make this epic PR, here's my feedback after trying this PR's effect.

There are 3 issues in demo that need to be addressed.

The first question is: _unref requires external import, I see you left a comment of Todo in the code, do you need the compiler of Vue Vine or other parts to do any additional support?

The generated _unref comes from nowhere, why and how does it be generated?

Also, the mapping from _unref(loading) to original loading is broken and dislocated
The second question is: The @click="...some bare expression" seems not detected by template generation process, and there's not any segement about it in the final virtual code as well.

Is this a compiler-dom bug or something we need to modify?
The third question may be related to Issue 1, those variables need to be wrapped with _unref to get actual type from Ref<ThatType> to ThatType.

johnsoncodehk · 2024-03-15T16:09:39Z

This was due to the mode: 'module' option being passed in, I disabled it in johnsoncodehk@84133d1 which seemed to fix the mapping issue.
This is also fixed by remove mode: 'module' option.
It's implement by johnsoncodehk@421ec36.

ShenQingchuan · 2024-03-16T02:17:40Z

This was due to the mode: 'module' option being passed in, I disabled it in johnsoncodehk@84133d1 which seemed to fix the mapping issue.

This is also fixed by remove mode: 'module' option.

It's implement by johnsoncodehk@421ec36.

@johnsoncodehk Thanks for such detailed explanation 🙏！！

After trying the new commits, I‘ve got some new questions:

Some functions are still not referenced

It's interesting that variables id and isDark which are been referenced didn't show any warning of ts(6133) declared but not used, but why do those functions toggleDark and randomString get warnings?

Those imported variables get "unused" warnings too.

TS diagnostics are reported twice

It seems the functions TS language service provided always run twice, like the examples below:

the intellisense options are duplicated.

The diagnostics are reported twice.

More extensive support

The last question is what am I supposed to do (maybe add more API from compiler) to support component props typing when user're writing components in template.

I've talked about this with @so1ve in #53 , I think I can provide a feature-specific API for this

All I wanna achieve is to fix #52 #53 , and I think the basic features of Vue Vine language service are done.

ShenQingchuan · 2024-03-16T14:38:39Z

@johnsoncodehk Also mentioned in #53,

as long as we need type definitions fromuser source code, we can easily read them on VineCompFnCtx,

every component context stores a Record of prop name and it's typing source code babel node,

so that we can use it's location and copy it into final virtual code for Volar

…late-codegen

…egen

johnsoncodehk · 2024-03-26T08:41:52Z

From https://github.com/volarjs/insiders/issues/3

I gave it a try in e126df4

But it seems that nothing has changed after I write contributes.typescriptServerPlugin this into @vue-vine/vscode-ext package.json

There is a fews problems.

The ts plugin should be export with export = instead of export default
tsup config incorrect
The way Volar patches languageServiceHost for .vine.ts is incorrect

For 3. I will update a version for Volar first.

By the way, I found in vue/language-tools that many intellisense feature in Vue SFC template is done by creating Volar Service Plugin, I'm wondering if we can adopt it into Vue Vine ?

Yes it is possible, let's see after completing the TS plugin.

…le extensions fixes cannot generate virtual code in ts plugin for vue-vine refs: vue-vine/vue-vine#69

…egen

…into template-codegen

ShenQingchuan · 2024-03-26T16:42:30Z

@johnsoncodehk I got many Errors in every .vine.ts after the latest commit, is that because those globalTypes and TS service are not completely loaded?

johnsoncodehk · 2024-03-27T00:56:21Z

@johnsoncodehk I got many Errors in every .vine.ts after the latest commit, is that because those globalTypes and TS service are not completely loaded?

Can you reproduce the problem in the playground directory?

ShenQingchuan · 2024-03-27T02:04:45Z

@johnsoncodehk I got many Errors in every .vine.ts after the latest commit, is that because those globalTypes and TS service are not completely loaded?

Can you reproduce the problem in the playground directory?

@johnsoncodehk Yes, for now if I want to verify our results for language service support, I'll do:

run build script in the root directory to ensure we have the latest dists
click VSCode's Debug panel -> "Run Vine extension”
The extension debug host window automatically opens packages/playground, and I'll open src/vine/app.vine.ts to see the syntax highlight & TS semantics diagnoses

Could you reproduce the same as what I saw here after following these steps above in your environment?

johnsoncodehk · 2024-03-27T02:15:13Z

This seems to be vuejs/language-tools#3942, which may be related to the extensions you installed.

This issue cannot be avoided from us and I will discuss this with the TS team.

ShenQingchuan · 2024-03-27T03:47:55Z

This seems to be vuejs/language-tools#3942, which may be related to the extensions you installed.

This issue cannot be avoided from us and I will discuss this with the TS team.

@johnsoncodehk Thanks a lot !!!!

After switching from my Linux PC to my Mac, there's indeed not these diagnoses occurred.

Everything looks pretty fine now.

So I'll merge this PR, and we can open new PRs for further extension features later.
The next big thing may be Intellisense for component name after typing '<'

ShenQingchuan · 2024-03-27T09:54:42Z

Oh I figured out ~

@johnsoncodehk It seems like that I meet some problems with VSCode extension bundling that after packing out a .vsix file, installing locally and opening a .vine.ts, I found there's not a Vine Language Server in "Output" panel.

Can easily reproduce in main branch now with the same operations.

With some exploring by myself, I can make "Vine Language Server" show but still nothing output correctly.

After installing packed VSIX file and I saw Vine language server is working fine with Volar Labs, it shows virtual files and service plugins.
But the output panel shows like this:

feat(language-server): generate template virtual code

cc48e83

chore: lint fix

1a5ee52

johnsoncodehk added 2 commits March 15, 2024 23:33

fix mapping

84133d1

implement todo

421ec36

johnsoncodehk and others added 3 commits March 16, 2024 00:20

fix component types

c7b5119

fix auto closing tags not working

97120f1

Merge branch 'main' into template-codegen

b560215

ShenQingchuan and others added 5 commits March 21, 2024 23:05

wip: try migrating to ts plugin

e126df4

fix: refactor vine compiler options

3a81608

wip: adjust ts plugin output dir

db62684

Merge branch 'main' of https://github.com/vue-vine/vue-vine into temp…

2df4f1e

…late-codegen

Merge branch 'main' of github.com:vue-vine/vue-vine into template-cod…

604580b

…egen

johnsoncodehk added a commit to volarjs/volar.js that referenced this pull request Mar 26, 2024

fix(typescript): getScriptSnapshot, getScriptKind should not check fi…

79e50fa

…le extensions fixes cannot generate virtual code in ts plugin for vue-vine refs: vue-vine/vue-vine#69

johnsoncodehk and others added 7 commits March 26, 2024 19:45

make ts plugin working

06a074e

avoid duplicate intellisense

28ccc0a

Merge branch 'main' of github.com:vue-vine/vue-vine into template-cod…

5ee1998

…egen

Merge branch 'template-codegen' of github.com:johnsoncodehk/vue-vine …

c7dd136

…into template-codegen

fix formatting

c0233e5

pin volar typescript

49e7f33

Merge branch 'template-codegen' of github.com:johnsoncodehk/vue-vine …

206f831

…into template-codegen

ShenQingchuan and others added 2 commits March 27, 2024 01:02

chore: fix lint

34b624a

fix semantic tokens not working

8f0b85b

ShenQingchuan marked this pull request as ready for review March 27, 2024 03:48

chore: fix lint issues

506a4ab

ShenQingchuan merged commit 622f87f into vue-vine:main Mar 27, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(language-server): generate template virtual code #69

feat(language-server): generate template virtual code #69

johnsoncodehk commented Mar 13, 2024 •

edited by ShenQingchuan

netlify bot commented Mar 13, 2024 •

edited

ShenQingchuan commented Mar 14, 2024 •

edited

johnsoncodehk commented Mar 15, 2024

ShenQingchuan commented Mar 16, 2024 •

edited

ShenQingchuan commented Mar 16, 2024 •

edited

johnsoncodehk commented Mar 26, 2024

ShenQingchuan commented Mar 26, 2024

johnsoncodehk commented Mar 27, 2024

ShenQingchuan commented Mar 27, 2024 •

edited

johnsoncodehk commented Mar 27, 2024 •

edited

ShenQingchuan commented Mar 27, 2024 •

edited

ShenQingchuan commented Mar 27, 2024 •

edited

feat(language-server): generate template virtual code #69

feat(language-server): generate template virtual code #69

Conversation

johnsoncodehk commented Mar 13, 2024 • edited by ShenQingchuan

netlify bot commented Mar 13, 2024 • edited

✅ Deploy Preview for vue-vine ready!

ShenQingchuan commented Mar 14, 2024 • edited

johnsoncodehk commented Mar 15, 2024

ShenQingchuan commented Mar 16, 2024 • edited

Some functions are still not referenced

TS diagnostics are reported twice

More extensive support

ShenQingchuan commented Mar 16, 2024 • edited

johnsoncodehk commented Mar 26, 2024

ShenQingchuan commented Mar 26, 2024

johnsoncodehk commented Mar 27, 2024

ShenQingchuan commented Mar 27, 2024 • edited

johnsoncodehk commented Mar 27, 2024 • edited

ShenQingchuan commented Mar 27, 2024 • edited

ShenQingchuan commented Mar 27, 2024 • edited

johnsoncodehk commented Mar 13, 2024 •

edited by ShenQingchuan

netlify bot commented Mar 13, 2024 •

edited

ShenQingchuan commented Mar 14, 2024 •

edited

ShenQingchuan commented Mar 16, 2024 •

edited

ShenQingchuan commented Mar 16, 2024 •

edited

ShenQingchuan commented Mar 27, 2024 •

edited

johnsoncodehk commented Mar 27, 2024 •

edited

ShenQingchuan commented Mar 27, 2024 •

edited

ShenQingchuan commented Mar 27, 2024 •

edited