@vue/language-service 3.0.0-alpha.0 → 3.0.0-alpha.2

package/index.d.ts

@@ -12,4 +12,7 @@ declare module '@volar/language-service' {
     }
 }
 export declare function getFullLanguageServicePlugins(ts: typeof import('typescript')): LanguageServicePlugin<any>[];
-export declare function getHybridModeLanguageServicePlugins(ts: typeof import('typescript'), getTsPluginClient: import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin<any>[];
+import type * as ts from 'typescript';
+export declare function getHybridModeLanguageServicePlugins(ts: typeof import('typescript'), tsPluginClient: (import('@vue/typescript-plugin/lib/requests').Requests & {
+    getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>;
+}) | undefined): LanguageServicePlugin<any>[];

package/index.js

@@ -36,6 +36,7 @@ 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_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_inlayhints_1 = require("./lib/plugins/vue-inlayhints");
@@ -105,31 +106,31 @@ function getFullLanguageServicePlugins(ts) {
         };
         return {
             async collectExtractProps(...args) {
-                return await collectExtractProps_1.collectExtractProps.apply(requestContext, args);
+                return collectExtractProps_1.collectExtractProps.apply(requestContext, args);
             },
             async getPropertiesAtLocation(...args) {
-                return await getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, args);
+                return getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, args);
             },
             async getImportPathForFile(...args) {
-                return await getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
+                return getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
             },
             async getComponentEvents(...args) {
-                return await getComponentEvents_1.getComponentEvents.apply(requestContext, args);
+                return getComponentEvents_1.getComponentEvents.apply(requestContext, args);
             },
             async getComponentDirectives(...args) {
-                return await getComponentDirectives_1.getComponentDirectives.apply(requestContext, args);
+                return getComponentDirectives_1.getComponentDirectives.apply(requestContext, args);
             },
             async getComponentNames(...args) {
-                return await getComponentNames_1.getComponentNames.apply(requestContext, args);
+                return getComponentNames_1.getComponentNames.apply(requestContext, args);
             },
             async getComponentProps(...args) {
-                return await getComponentProps_1.getComponentProps.apply(requestContext, args);
+                return getComponentProps_1.getComponentProps.apply(requestContext, args);
             },
             async getElementAttrs(...args) {
-                return await getElementAttrs_1.getElementAttrs.apply(requestContext, args);
+                return getElementAttrs_1.getElementAttrs.apply(requestContext, args);
             },
             async getElementNames(...args) {
-                return await getElementNames_1.getElementNames.apply(requestContext, args);
+                return getElementNames_1.getElementNames.apply(requestContext, args);
             },
             async getQuickInfoAtPosition(fileName, position) {
                 const languageService = context.getLanguageService();
@@ -138,8 +139,7 @@ function getFullLanguageServicePlugins(ts) {
                 if (!sourceScript) {
                     return;
                 }
-                const document = context.documents.get(uri, sourceScript.languageId, sourceScript.snapshot);
-                const hover = await languageService.getHover(uri, document.positionAt(position));
+                const hover = await languageService.getHover(uri, position);
                 let text = '';
                 if (typeof hover?.contents === 'string') {
                     text = hover.contents;
@@ -167,12 +167,15 @@ function getFullLanguageServicePlugins(ts) {
         };
     }
 }
-function getHybridModeLanguageServicePlugins(ts, getTsPluginClient) {
+function getHybridModeLanguageServicePlugins(ts, tsPluginClient) {
     const plugins = [
         (0, syntactic_1.create)(ts),
         (0, docCommentTemplate_1.create)(ts),
-        ...getCommonLanguageServicePlugins(ts, () => getTsPluginClient)
+        ...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;
@@ -191,8 +194,8 @@ function getCommonLanguageServicePlugins(ts, getTsPluginClient) {
         (0, vue_compiler_dom_errors_1.create)(),
         (0, vue_sfc_1.create)(),
         (0, vue_twoslash_queries_1.create)(getTsPluginClient),
-        (0, vue_document_links_1.create)(),
         (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)(),

package/lib/ideFeatures/nameCasing.d.ts

@@ -0,0 +1,14 @@
+import type { LanguageServiceContext } from '@volar/language-service';
+import type * as vscode from 'vscode-languageserver-protocol';
+import type { URI } from 'vscode-uri';
+import { AttrNameCasing, TagNameCasing } from '../types';
+export declare function convertTagName(context: LanguageServiceContext, uri: URI, casing: TagNameCasing, tsPluginClient: typeof import('@vue/typescript-plugin/lib/client') | undefined): Promise<vscode.TextEdit[] | undefined>;
+export declare function convertAttrName(context: LanguageServiceContext, uri: URI, casing: AttrNameCasing, tsPluginClient?: typeof import('@vue/typescript-plugin/lib/client')): Promise<vscode.TextEdit[] | undefined>;
+export declare function getNameCasing(context: LanguageServiceContext, uri: URI): Promise<{
+    tag: TagNameCasing;
+    attr: AttrNameCasing;
+}>;
+export declare function detect(context: LanguageServiceContext, uri: URI): Promise<{
+    tag: TagNameCasing[];
+    attr: AttrNameCasing[];
+}>;

package/lib/ideFeatures/nameCasing.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTagName = convertTagName;
+exports.convertAttrName = convertAttrName;
+exports.getNameCasing = getNameCasing;
+exports.detect = detect;
+const vue = require("@vue/language-core");
+const language_core_1 = require("@vue/language-core");
+const alien_signals_1 = require("alien-signals");
+const types_1 = require("../types");
+async function convertTagName(context, uri, casing, tsPluginClient) {
+    const sourceFile = context.language.scripts.get(uri);
+    if (!sourceFile) {
+        return;
+    }
+    const root = sourceFile?.generated?.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
+        return;
+    }
+    const { template } = root._sfc;
+    if (!template) {
+        return;
+    }
+    const document = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
+    const edits = [];
+    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(root);
+    for (const [tagName, { offsets }] of tags) {
+        const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
+        if (componentName) {
+            for (const offset of offsets) {
+                const start = document.positionAt(template.startTagEnd + offset);
+                const end = document.positionAt(template.startTagEnd + offset + tagName.length);
+                const range = { start, end };
+                if (casing === types_1.TagNameCasing.Kebab && tagName !== (0, language_core_1.hyphenateTag)(componentName)) {
+                    edits.push({ range, newText: (0, language_core_1.hyphenateTag)(componentName) });
+                }
+                if (casing === types_1.TagNameCasing.Pascal && tagName !== componentName) {
+                    edits.push({ range, newText: componentName });
+                }
+            }
+        }
+    }
+    return edits;
+}
+async function convertAttrName(context, uri, casing, tsPluginClient) {
+    const sourceFile = context.language.scripts.get(uri);
+    if (!sourceFile) {
+        return;
+    }
+    const root = sourceFile?.generated?.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
+        return;
+    }
+    const { template } = root._sfc;
+    if (!template) {
+        return;
+    }
+    const document = context.documents.get(uri, sourceFile.languageId, sourceFile.snapshot);
+    const edits = [];
+    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(root);
+    for (const [tagName, { attrs }] of tags) {
+        const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
+        if (componentName) {
+            const props = (await tsPluginClient?.getComponentProps(root.fileName, componentName) ?? []).map(prop => prop.name);
+            for (const [attrName, { offsets }] of attrs) {
+                const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
+                if (propName) {
+                    for (const offset of offsets) {
+                        const start = document.positionAt(template.startTagEnd + offset);
+                        const end = document.positionAt(template.startTagEnd + offset + attrName.length);
+                        const range = { start, end };
+                        if (casing === types_1.AttrNameCasing.Kebab && attrName !== (0, language_core_1.hyphenateAttr)(propName)) {
+                            edits.push({ range, newText: (0, language_core_1.hyphenateAttr)(propName) });
+                        }
+                        if (casing === types_1.AttrNameCasing.Camel && attrName !== propName) {
+                            edits.push({ range, newText: propName });
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return edits;
+}
+async function getNameCasing(context, uri) {
+    const detected = await detect(context, uri);
+    const [attr, tag] = await Promise.all([
+        context.env.getConfiguration?.('vue.complete.casing.props', uri.toString()),
+        context.env.getConfiguration?.('vue.complete.casing.tags', uri.toString()),
+    ]);
+    const tagNameCasing = detected.tag.length === 1 && (tag === 'autoPascal' || tag === 'autoKebab') ? detected.tag[0] : (tag === 'autoKebab' || tag === 'kebab') ? types_1.TagNameCasing.Kebab : types_1.TagNameCasing.Pascal;
+    const attrNameCasing = detected.attr.length === 1 && (attr === 'autoCamel' || attr === 'autoKebab') ? detected.attr[0] : (attr === 'autoCamel' || attr === 'camel') ? types_1.AttrNameCasing.Camel : types_1.AttrNameCasing.Kebab;
+    return {
+        tag: tagNameCasing,
+        attr: attrNameCasing,
+    };
+}
+async function detect(context, uri) {
+    const rootFile = context.language.scripts.get(uri)?.generated?.root;
+    if (!(rootFile instanceof language_core_1.VueVirtualCode)) {
+        return {
+            tag: [],
+            attr: [],
+        };
+    }
+    return {
+        tag: await getTagNameCase(rootFile),
+        attr: getAttrNameCase(rootFile),
+    };
+    function getAttrNameCase(file) {
+        const tags = getTemplateTagsAndAttrs(file);
+        const result = [];
+        for (const [_, { attrs }] of tags) {
+            for (const [tagName] of attrs) {
+                // attrName
+                if (tagName !== (0, language_core_1.hyphenateTag)(tagName)) {
+                    result.push(types_1.AttrNameCasing.Camel);
+                    break;
+                }
+            }
+            for (const [tagName] of attrs) {
+                // attr-name
+                if (tagName.includes('-')) {
+                    result.push(types_1.AttrNameCasing.Kebab);
+                    break;
+                }
+            }
+        }
+        return result;
+    }
+    function getTagNameCase(file) {
+        const result = new Set();
+        if (file._sfc.template?.ast) {
+            for (const element of vue.forEachElementNode(file._sfc.template.ast)) {
+                if (element.tagType === 1) {
+                    if (element.tag !== (0, language_core_1.hyphenateTag)(element.tag)) {
+                        // TagName
+                        result.add(types_1.TagNameCasing.Pascal);
+                    }
+                    else {
+                        // Tagname -> tagname
+                        // TagName -> tag-name
+                        result.add(types_1.TagNameCasing.Kebab);
+                    }
+                }
+            }
+        }
+        return [...result];
+    }
+}
+const map = new WeakMap();
+function getTemplateTagsAndAttrs(sourceFile) {
+    if (!map.has(sourceFile)) {
+        const getter = (0, alien_signals_1.computed)(() => {
+            if (!(sourceFile instanceof vue.VueVirtualCode)) {
+                return;
+            }
+            const ast = sourceFile._sfc.template?.ast;
+            const tags = new Map();
+            if (ast) {
+                for (const node of vue.forEachElementNode(ast)) {
+                    if (!tags.has(node.tag)) {
+                        tags.set(node.tag, { offsets: [], attrs: new Map() });
+                    }
+                    const tag = tags.get(node.tag);
+                    const startTagHtmlOffset = node.loc.start.offset + node.loc.source.indexOf(node.tag);
+                    const endTagHtmlOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+                    tag.offsets.push(startTagHtmlOffset);
+                    if (!node.isSelfClosing) {
+                        tag.offsets.push(endTagHtmlOffset);
+                    }
+                    for (const prop of node.props) {
+                        let name;
+                        let offset;
+                        if (prop.type === 7
+                            && prop.arg?.type === 4
+                            && prop.arg.isStatic) {
+                            name = prop.arg.content;
+                            offset = prop.arg.loc.start.offset;
+                        }
+                        else if (prop.type === 6) {
+                            name = prop.name;
+                            offset = prop.loc.start.offset;
+                        }
+                        if (name !== undefined && offset !== undefined) {
+                            if (!tag.attrs.has(name)) {
+                                tag.attrs.set(name, { offsets: [] });
+                            }
+                            tag.attrs.get(name).offsets.push(offset);
+                        }
+                    }
+                }
+            }
+            return tags;
+        });
+        map.set(sourceFile, getter);
+    }
+    return map.get(sourceFile).get() ?? new Map();
+}
+//# sourceMappingURL=nameCasing.js.map

package/lib/plugins/vue-autoinsert-self-closing.d.ts

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

package/lib/plugins/vue-autoinsert-self-closing.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = create;
+function create() {
+    return {
+        name: 'vue-autoinsert-selfClosing',
+        capabilities: {
+            autoInsertionProvider: {
+                triggerCharacters: ['/'],
+                configurationSections: ['vue.autoInsert.selfClosing'],
+            },
+        },
+        create(context) {
+            return {
+                async provideAutoInsertSnippet(document, selection, change) {
+                    if (document.languageId !== 'html') {
+                        return;
+                    }
+                    const enabled = await context.env.getConfiguration?.('vue.autoInsert.selfClosing') ?? true;
+                    if (!enabled) {
+                        return;
+                    }
+                    if (change.text === '{}'
+                        && document.getText().slice(change.rangeOffset - 1, change.rangeOffset + 3) === '{{}}'
+                        && document.offsetAt(selection) === change.rangeOffset + 1) {
+                        return ` $0 `;
+                    }
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=vue-autoinsert-self-closing.js.map

package/lib/plugins/vue-document-highlights.d.ts

@@ -0,0 +1,3 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+import type * as ts from 'typescript';
+export declare function create(getDocumentHighlights: (fileName: string, position: number) => Promise<ts.DocumentHighlights[] | null>): LanguageServicePlugin;

package/lib/plugins/vue-document-highlights.js

@@ -0,0 +1,46 @@
+"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(getDocumentHighlights) {
+    return {
+        name: 'vue-document-highlights',
+        capabilities: {
+            documentHighlightProvider: true,
+        },
+        create(context) {
+            return {
+                async provideDocumentHighlights(document, position) {
+                    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 result = await getDocumentHighlights(root.fileName, document.offsetAt(position));
+                    return result
+                        ?.filter(({ fileName }) => fileName === root.fileName)
+                        .flatMap(({ highlightSpans }) => highlightSpans)
+                        .map(({ textSpan, kind }) => ({
+                        range: {
+                            start: document.positionAt(textSpan.start),
+                            end: document.positionAt(textSpan.start + textSpan.length),
+                        },
+                        kind: kind === 'reference'
+                            ? 2
+                            : kind === 'writtenReference'
+                                ? 3
+                                : 1,
+                    }));
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=vue-document-highlights.js.map

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

@@ -38,7 +38,7 @@ function create(getTsPluginClient) {
                     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, sourceOffset);
+                            const quickInfo = await tsPluginClient?.getQuickInfoAtPosition(root.fileName, document.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-alpha.0",
+	"version": "3.0.0-alpha.2",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -21,9 +21,9 @@
 		"@volar/language-service": "~2.4.11",
 		"@volar/typescript": "~2.4.11",
 		"@vue/compiler-dom": "^3.5.0",
-		"@vue/language-core": "3.0.0-alpha.0",
+		"@vue/language-core": "3.0.0-alpha.2",
 		"@vue/shared": "^3.5.0",
-		"@vue/typescript-plugin": "3.0.0-alpha.0",
+		"@vue/typescript-plugin": "3.0.0-alpha.2",
 		"alien-signals": "^1.0.3",
 		"path-browserify": "^1.0.1",
 		"volar-service-css": "0.0.62",
@@ -45,5 +45,5 @@
 		"@volar/kit": "~2.4.11",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "4b49cbe09097e482def4603b90f6c3b93bb2e913"
+	"gitHead": "79247b7c24b7202ec676723440fdb36c38e6d450"
 }