@vue/language-service 3.0.0 → 3.0.2

package/index.d.ts

@@ -1,6 +1,5 @@
 export * from '@volar/language-service';
 export * from '@volar/language-service/lib/utils/featureWorkers';
-import type { LanguageServicePlugin } from '@volar/language-service';
 import type { VueCompilerOptions } from '@vue/language-core';
 import type * as ts from 'typescript';
 declare module '@volar/language-service' {
@@ -12,4 +11,4 @@ declare module '@volar/language-service' {
 }
 export declare function createVueLanguageServicePlugins(ts: typeof import('typescript'), tsPluginClient: (import('@vue/typescript-plugin/lib/requests').Requests & {
     getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>;
-}) | undefined): LanguageServicePlugin<any>[];
+}) | undefined): import("@volar/language-service").LanguageServicePlugin<any>[];

package/index.js

@@ -22,59 +22,51 @@ __exportStar(require("@volar/language-service/lib/utils/featureWorkers"), export
 const volar_service_emmet_1 = require("volar-service-emmet");
 const volar_service_json_1 = require("volar-service-json");
 const volar_service_pug_beautify_1 = require("volar-service-pug-beautify");
-const volar_service_typescript_twoslash_queries_1 = require("volar-service-typescript-twoslash-queries");
 const docCommentTemplate_1 = require("volar-service-typescript/lib/plugins/docCommentTemplate");
 const syntactic_1 = require("volar-service-typescript/lib/plugins/syntactic");
 const css_1 = require("./lib/plugins/css");
+const typescript_semantic_tokens_1 = require("./lib/plugins/typescript-semantic-tokens");
 const vue_autoinsert_dotvalue_1 = require("./lib/plugins/vue-autoinsert-dotvalue");
 const vue_autoinsert_space_1 = require("./lib/plugins/vue-autoinsert-space");
 const vue_compiler_dom_errors_1 = require("./lib/plugins/vue-compiler-dom-errors");
-const vue_complete_define_assignment_1 = require("./lib/plugins/vue-complete-define-assignment");
+const vue_component_semantic_tokens_1 = require("./lib/plugins/vue-component-semantic-tokens");
 const vue_directive_comments_1 = require("./lib/plugins/vue-directive-comments");
 const vue_document_drop_1 = require("./lib/plugins/vue-document-drop");
 const vue_document_highlights_1 = require("./lib/plugins/vue-document-highlights");
 const vue_document_links_1 = require("./lib/plugins/vue-document-links");
 const vue_extract_file_1 = require("./lib/plugins/vue-extract-file");
+const vue_global_types_error_1 = require("./lib/plugins/vue-global-types-error");
 const vue_inlayhints_1 = require("./lib/plugins/vue-inlayhints");
 const vue_missing_props_hints_1 = require("./lib/plugins/vue-missing-props-hints");
 const vue_sfc_1 = require("./lib/plugins/vue-sfc");
+const vue_suggest_define_assignment_1 = require("./lib/plugins/vue-suggest-define-assignment");
 const vue_template_1 = require("./lib/plugins/vue-template");
 const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
 function createVueLanguageServicePlugins(ts, tsPluginClient) {
+    const getTsPluginClient = () => tsPluginClient;
     const plugins = [
-        (0, syntactic_1.create)(ts),
-        (0, docCommentTemplate_1.create)(ts),
-        ...getCommonLanguageServicePlugins(ts, () => tsPluginClient),
-    ];
-    if (tsPluginClient) {
-        plugins.push((0, vue_document_highlights_1.create)(tsPluginClient.getDocumentHighlights));
-    }
-    for (const plugin of plugins) {
-        // avoid affecting TS plugin
-        delete plugin.capabilities.semanticTokensProvider;
-    }
-    return plugins;
-}
-function getCommonLanguageServicePlugins(ts, getTsPluginClient) {
-    return [
-        (0, volar_service_typescript_twoslash_queries_1.create)(ts),
         (0, css_1.create)(),
-        (0, volar_service_pug_beautify_1.create)(),
         (0, volar_service_json_1.create)(),
-        (0, vue_template_1.create)('html', getTsPluginClient),
-        (0, vue_template_1.create)('pug', getTsPluginClient),
-        (0, vue_missing_props_hints_1.create)(getTsPluginClient),
+        (0, volar_service_pug_beautify_1.create)(),
+        (0, docCommentTemplate_1.create)(ts),
+        (0, typescript_semantic_tokens_1.create)(getTsPluginClient),
+        (0, syntactic_1.create)(ts),
+        (0, vue_autoinsert_space_1.create)(),
+        (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient),
         (0, vue_compiler_dom_errors_1.create)(),
-        (0, vue_sfc_1.create)(),
-        (0, vue_twoslash_queries_1.create)(getTsPluginClient),
+        (0, vue_component_semantic_tokens_1.create)(getTsPluginClient),
         (0, vue_document_drop_1.create)(ts, getTsPluginClient),
         (0, vue_document_links_1.create)(),
-        (0, vue_complete_define_assignment_1.create)(),
-        (0, vue_autoinsert_dotvalue_1.create)(ts, getTsPluginClient),
-        (0, vue_autoinsert_space_1.create)(),
-        (0, vue_inlayhints_1.create)(ts),
         (0, vue_directive_comments_1.create)(),
         (0, vue_extract_file_1.create)(ts, getTsPluginClient),
+        (0, vue_global_types_error_1.create)(),
+        (0, vue_inlayhints_1.create)(ts),
+        (0, vue_missing_props_hints_1.create)(getTsPluginClient),
+        (0, vue_sfc_1.create)(),
+        (0, vue_suggest_define_assignment_1.create)(),
+        (0, vue_template_1.create)('html', getTsPluginClient),
+        (0, vue_template_1.create)('pug', getTsPluginClient),
+        (0, vue_twoslash_queries_1.create)(getTsPluginClient),
         (0, volar_service_emmet_1.create)({
             mappedLanguages: {
                 'vue-root-tags': 'html',
@@ -82,5 +74,9 @@ function getCommonLanguageServicePlugins(ts, getTsPluginClient) {
             },
         }),
     ];
+    if (tsPluginClient) {
+        plugins.push((0, vue_document_highlights_1.create)(tsPluginClient.getDocumentHighlights));
+    }
+    return plugins;
 }
 //# sourceMappingURL=index.js.map

package/lib/plugins/typescript-semantic-tokens.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
+export declare function create(getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/typescript-semantic-tokens.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+const language_core_1 = require("@vue/language-core");
+const semanticTokens_1 = require("volar-service-typescript/lib/semanticFeatures/semanticTokens");
+const vscode_uri_1 = require("vscode-uri");
+function create(getTsPluginClient) {
+    return {
+        name: 'typescript-highlights',
+        capabilities: {
+            semanticTokensProvider: {
+                legend: {
+                    tokenTypes: [
+                        'namespace',
+                        'class',
+                        'enum',
+                        'interface',
+                        'typeParameter',
+                        'type',
+                        'parameter',
+                        'variable',
+                        'property',
+                        'enumMember',
+                        'function',
+                        'method',
+                    ],
+                    tokenModifiers: [
+                        'declaration',
+                        'readonly',
+                        'static',
+                        'async',
+                        'defaultLibrary',
+                        'local',
+                    ],
+                },
+            },
+        },
+        create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
+            return {
+                async provideDocumentSemanticTokens(document, range, legend) {
+                    const uri = vscode_uri_1.URI.parse(document.uri);
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!sourceScript?.generated || virtualCode?.id !== 'main') {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const start = document.offsetAt(range.start);
+                    const end = document.offsetAt(range.end);
+                    const span = {
+                        start: start,
+                        length: end - start,
+                    };
+                    const classifications = await tsPluginClient?.getEncodedSemanticClassifications(root.fileName, span);
+                    if (classifications) {
+                        return (0, semanticTokens_1.convertClassificationsToSemanticTokens)(document, span, legend, classifications);
+                    }
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=typescript-semantic-tokens.js.map

package/lib/plugins/vue-component-semantic-tokens.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
+export declare function create(getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;

package/lib/plugins/vue-component-semantic-tokens.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+const language_core_1 = require("@vue/language-core");
+const vscode_uri_1 = require("vscode-uri");
+function create(getTsPluginClient) {
+    return {
+        name: 'vue-component-highlights',
+        capabilities: {
+            semanticTokensProvider: {
+                legend: {
+                    tokenTypes: ['component'],
+                    tokenModifiers: [],
+                },
+            },
+        },
+        create(context) {
+            const tsPluginClient = getTsPluginClient?.(context);
+            return {
+                async provideDocumentSemanticTokens(document, range, legend) {
+                    const uri = vscode_uri_1.URI.parse(document.uri);
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!sourceScript?.generated || virtualCode?.id !== 'template') {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const { template } = root.sfc;
+                    if (!template) {
+                        return;
+                    }
+                    const result = [];
+                    const tokenTypes = legend.tokenTypes.indexOf('component');
+                    const componentSpans = await getComponentSpans(root.fileName, template, {
+                        start: document.offsetAt(range.start),
+                        length: document.offsetAt(range.end) - document.offsetAt(range.start),
+                    });
+                    for (const span of componentSpans) {
+                        const position = document.positionAt(span.start);
+                        result.push([
+                            position.line,
+                            position.character,
+                            span.length,
+                            tokenTypes,
+                            0,
+                        ]);
+                    }
+                    return result;
+                },
+            };
+            async function getComponentSpans(fileName, template, spanTemplateRange) {
+                const result = [];
+                const validComponentNames = await tsPluginClient?.getComponentNames(fileName) ?? [];
+                const elements = new Set(await tsPluginClient?.getElementNames(fileName) ?? []);
+                const components = new Set([
+                    ...validComponentNames,
+                    ...validComponentNames.map(language_core_1.hyphenateTag),
+                ]);
+                if (template.ast) {
+                    for (const node of (0, language_core_1.forEachElementNode)(template.ast)) {
+                        if (node.loc.end.offset <= spanTemplateRange.start
+                            || node.loc.start.offset >= (spanTemplateRange.start + spanTemplateRange.length)) {
+                            continue;
+                        }
+                        if (components.has(node.tag) && !elements.has(node.tag)) {
+                            let start = node.loc.start.offset;
+                            if (template.lang === 'html') {
+                                start += '<'.length;
+                            }
+                            result.push({
+                                start,
+                                length: node.tag.length,
+                            });
+                            if (template.lang === 'html' && !node.isSelfClosing) {
+                                result.push({
+                                    start: node.loc.start.offset + node.loc.source.lastIndexOf(node.tag),
+                                    length: node.tag.length,
+                                });
+                            }
+                        }
+                    }
+                }
+                return result;
+            }
+        },
+    };
+}
+//# sourceMappingURL=vue-component-semantic-tokens.js.map

package/lib/plugins/vue-diagnostic-global-types.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/plugins/vue-diagnostic-global-types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=vue-diagnostic-global-types.js.map

package/lib/plugins/vue-global-types-error.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

package/lib/plugins/vue-global-types-error.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+function create() {
+    return {
+        name: 'vue-compiler-dom-errors',
+        capabilities: {
+            diagnosticProvider: {
+                interFileDependencies: false,
+                workspaceDiagnostics: false,
+            },
+        },
+        create(context) {
+            return {
+                provideDiagnostics(document) {
+                    if (document.languageId !== 'vue-root-tags') {
+                        return;
+                    }
+                    const vueCompilerOptions = context.project.vue?.compilerOptions;
+                    if (vueCompilerOptions && vueCompilerOptions.globalTypesPath === undefined) {
+                        return [{
+                                range: {
+                                    start: document.positionAt(0),
+                                    end: document.positionAt(0),
+                                },
+                                severity: 1,
+                                code: 404,
+                                source: 'vue',
+                                message: `Write global types file failed. Please ensure that "node_modules" exists and "${vueCompilerOptions.lib}" is a direct dependency, or set "vueCompilerOptions.globalTypesPath" in "tsconfig.json" manually.`,
+                            }];
+                    }
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=vue-global-types-error.js.map

package/lib/plugins/vue-suggest-define-assignment.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+export declare function create(): LanguageServicePlugin;

package/lib/plugins/vue-suggest-define-assignment.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+const language_core_1 = require("@vue/language-core");
+const vscode_uri_1 = require("vscode-uri");
+const utils_1 = require("./utils");
+function create() {
+    return {
+        name: 'vue-suggest-define-assignment',
+        capabilities: {
+            completionProvider: {},
+        },
+        create(context) {
+            return {
+                isAdditionalCompletion: true,
+                async provideCompletionItems(document) {
+                    if (!(0, utils_1.isTsDocument)(document)) {
+                        return;
+                    }
+                    const enabled = await context.env.getConfiguration?.('vue.suggest.defineAssignment') ?? true;
+                    if (!enabled) {
+                        return;
+                    }
+                    const uri = vscode_uri_1.URI.parse(document.uri);
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
+                    const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+                    const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+                    if (!sourceScript?.generated || !virtualCode) {
+                        return;
+                    }
+                    const root = sourceScript.generated.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const { sfc } = root;
+                    const codegen = language_core_1.tsCodegen.get(sfc);
+                    const scriptSetup = sfc.scriptSetup;
+                    const scriptSetupRanges = codegen?.getScriptSetupRanges();
+                    if (!scriptSetup || !scriptSetupRanges) {
+                        return;
+                    }
+                    const result = [];
+                    const mappings = [...context.language.maps.forEach(virtualCode)];
+                    addDefineCompletionItem(scriptSetupRanges.defineProps?.statement, scriptSetupRanges.withDefaults?.exp ?? scriptSetupRanges.defineProps?.exp, 'props');
+                    addDefineCompletionItem(scriptSetupRanges.defineEmits?.statement, scriptSetupRanges.defineEmits?.exp, 'emit');
+                    addDefineCompletionItem(scriptSetupRanges.defineSlots?.statement, scriptSetupRanges.defineSlots?.exp, 'slots');
+                    return {
+                        isIncomplete: false,
+                        items: result,
+                    };
+                    function addDefineCompletionItem(statement, exp, name) {
+                        if (!exp || exp.start !== statement?.start) {
+                            return;
+                        }
+                        let offset;
+                        for (const [, map] of mappings) {
+                            for (const [generatedOffset] of map.toGeneratedLocation(scriptSetup.startTagEnd + exp.start)) {
+                                offset = generatedOffset;
+                                break;
+                            }
+                        }
+                        if (offset === undefined) {
+                            return;
+                        }
+                        const pos = document.positionAt(offset);
+                        result.push({
+                            label: name,
+                            kind: 6,
+                            commitCharacters: ['.', ',', ';'],
+                            additionalTextEdits: [{
+                                    newText: `const ${name} = `,
+                                    range: {
+                                        start: pos,
+                                        end: pos,
+                                    },
+                                }],
+                        });
+                    }
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=vue-suggest-define-assignment.js.map

package/lib/plugins/vue-twoslash-queries.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = create;
 const language_core_1 = require("@vue/language-core");
 const vscode_uri_1 = require("vscode-uri");
-const twoslashReg = /<!--\s*\^\?\s*-->/g;
+const twoslashTemplateReg = /<!--\s*\^\?\s*-->/g;
+const twoslashScriptReg = /(?<=^|\n)\s*\/\/\s*\^\?/g;
 function create(getTsPluginClient) {
     return {
         name: 'vue-twoslash-queries',
@@ -18,7 +19,8 @@ function create(getTsPluginClient) {
                     const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
                     const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
-                    if (!sourceScript?.generated || virtualCode?.id !== 'template') {
+                    if (!sourceScript?.generated
+                        || (virtualCode?.id !== 'template' && !virtualCode?.id.startsWith('script_'))) {
                         return;
                     }
                     const root = sourceScript.generated.root;
@@ -27,6 +29,7 @@ function create(getTsPluginClient) {
                     }
                     const hoverOffsets = [];
                     const inlayHints = [];
+                    const twoslashReg = virtualCode.id === 'template' ? twoslashTemplateReg : twoslashScriptReg;
                     for (const pointer of document.getText(range).matchAll(twoslashReg)) {
                         const offset = pointer.index + pointer[0].indexOf('^?') + document.offsetAt(range.start);
                         const position = document.positionAt(offset);
@@ -38,10 +41,11 @@ function create(getTsPluginClient) {
                             }),
                         ]);
                     }
+                    const sourceDocument = context.documents.get(decoded[0], sourceScript.languageId, sourceScript.snapshot);
                     for (const [pointerPosition, hoverOffset] of hoverOffsets) {
                         const map = context.language.maps.get(virtualCode, sourceScript);
                         for (const [sourceOffset] of map.toSourceLocation(hoverOffset)) {
-                            const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(root.fileName, document.positionAt(sourceOffset));
+                            const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(root.fileName, sourceDocument.positionAt(sourceOffset));
                             if (quickInfo) {
                                 inlayHints.push({
                                     position: { line: pointerPosition.line, character: pointerPosition.character + 2 },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "3.0.0",
+	"version": "3.0.2",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -17,29 +17,28 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-service": "2.4.16",
-		"@vue/language-core": "3.0.0",
+		"@volar/language-service": "2.4.19",
+		"@vue/language-core": "3.0.2",
 		"@vue/shared": "^3.5.0",
 		"path-browserify": "^1.0.1",
-		"volar-service-css": "0.0.64",
-		"volar-service-emmet": "0.0.64",
-		"volar-service-html": "0.0.64",
-		"volar-service-json": "0.0.64",
-		"volar-service-pug": "0.0.64",
-		"volar-service-pug-beautify": "0.0.64",
-		"volar-service-typescript": "0.0.64",
-		"volar-service-typescript-twoslash-queries": "0.0.64",
+		"volar-service-css": "0.0.65",
+		"volar-service-emmet": "0.0.65",
+		"volar-service-html": "0.0.65",
+		"volar-service-json": "0.0.65",
+		"volar-service-pug": "0.0.65",
+		"volar-service-pug-beautify": "0.0.65",
+		"volar-service-typescript": "0.0.65",
 		"vscode-html-languageservice": "^5.2.0",
 		"vscode-uri": "^3.0.8"
 	},
 	"devDependencies": {
 		"@types/node": "^22.10.4",
 		"@types/path-browserify": "^1.0.1",
-		"@volar/kit": "2.4.16",
-		"@volar/typescript": "2.4.16",
+		"@volar/kit": "2.4.19",
+		"@volar/typescript": "2.4.19",
 		"@vue/compiler-dom": "^3.5.0",
-		"@vue/typescript-plugin": "3.0.0",
+		"@vue/typescript-plugin": "3.0.2",
 		"vscode-css-languageservice": "^6.3.1"
 	},
-	"gitHead": "620f050fd494cccd215781907c950e17dae4fd58"
+	"gitHead": "7343119e9ca4f6a54f63b57f448f15df4b592a9a"
 }