@vue/language-service 3.0.0-alpha.4 → 3.0.0-alpha.6

package/index.d.ts

@@ -3,7 +3,7 @@ export * from '@vue/language-core';
 export * from './lib/nameCasing';
 export * from './lib/types';
 import type { LanguageServicePlugin } from '@volar/language-service';
-import { VueCompilerOptions } from '@vue/language-core';
+import { type VueCompilerOptions } from '@vue/language-core';
 declare module '@volar/language-service' {
     interface ProjectContext {
         vue?: {

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)() ?? new Map();
+}
+//# sourceMappingURL=nameCasing.js.map

package/lib/plugins/vue-compiler-dom-errors.d.ts

@@ -1,2 +1,2 @@
-import { LanguageServicePlugin } from '../types';
+import type { LanguageServicePlugin } from '../types';
 export declare function create(): LanguageServicePlugin;

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

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

package/lib/plugins/vue-extract-file.d.ts

@@ -1,5 +1,5 @@
 import type { LanguageServiceContext, LanguageServicePlugin } from '@volar/language-service';
-import { Sfc } from '@vue/language-core';
+import { type Sfc } from '@vue/language-core';
 import type * as ts from 'typescript';
 export declare function create(ts: typeof import('typescript'), getTsPluginClient?: (context: LanguageServiceContext) => import('@vue/typescript-plugin/lib/requests').Requests | undefined): LanguageServicePlugin;
 export declare function getLastImportNode(ts: typeof import('typescript'), sourceFile: ts.SourceFile): ts.Node | undefined;

package/lib/plugins/vue-missing-props-hints.d.ts

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

package/lib/plugins/vue-template.d.ts

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

package/lib/plugins/vue-template.js

@@ -258,7 +258,7 @@ function create(mode, getTsPluginClient) {
                                 ...propInfos,
                                 ...attrs.map(attr => ({ name: attr })),
                             ]) {
-                                const isGlobal = !propsSet.has(prop.name);
+                                const isGlobal = prop.isAttribute || !propsSet.has(prop.name);
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
                                 const isEvent = (0, language_core_1.hyphenateAttr)(name).startsWith('on-');
                                 if (isEvent) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-service",
-	"version": "3.0.0-alpha.4",
+	"version": "3.0.0-alpha.6",
 	"license": "MIT",
 	"files": [
 		"data",
@@ -17,13 +17,13 @@
 		"update-html-data": "node ./scripts/update-html-data.js"
 	},
 	"dependencies": {
-		"@volar/language-core": "~2.4.11",
-		"@volar/language-service": "~2.4.11",
-		"@volar/typescript": "~2.4.11",
+		"@volar/language-core": "~2.4.13",
+		"@volar/language-service": "~2.4.13",
+		"@volar/typescript": "~2.4.13",
 		"@vue/compiler-dom": "^3.5.0",
-		"@vue/language-core": "3.0.0-alpha.4",
+		"@vue/language-core": "3.0.0-alpha.6",
 		"@vue/shared": "^3.5.0",
-		"@vue/typescript-plugin": "3.0.0-alpha.4",
+		"@vue/typescript-plugin": "3.0.0-alpha.6",
 		"alien-signals": "^1.0.3",
 		"path-browserify": "^1.0.1",
 		"volar-service-css": "0.0.64",
@@ -42,8 +42,8 @@
 	"devDependencies": {
 		"@types/node": "^22.10.4",
 		"@types/path-browserify": "^1.0.1",
-		"@volar/kit": "~2.4.11",
+		"@volar/kit": "~2.4.13",
 		"vscode-languageserver-protocol": "^3.17.5"
 	},
-	"gitHead": "1769cd6b94ec9e0cc2681b8dbba904f35856ba1c"
+	"gitHead": "a7b5649ab4957cd2228f4bbc9205b2008bff58a2"
 }

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

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

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

@@ -1,33 +0,0 @@
-"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