@vue/typescript-plugin 2.2.8 → 3.0.0-alpha.0

package/index.d.ts

@@ -1,3 +1,3 @@
 import type * as ts from 'typescript';
-declare const plugin: ts.server.PluginModuleFactory;
-export = plugin;
+declare const _default: ts.server.PluginModuleFactory;
+export = _default;

package/index.js

@@ -2,21 +2,27 @@
 const createLanguageServicePlugin_1 = require("@volar/typescript/lib/quickstart/createLanguageServicePlugin");
 const vue = require("@vue/language-core");
 const common_1 = require("./lib/common");
-const server_1 = require("./lib/server");
+const collectExtractProps_1 = require("./lib/requests/collectExtractProps");
+const getComponentDirectives_1 = require("./lib/requests/getComponentDirectives");
+const getComponentEvents_1 = require("./lib/requests/getComponentEvents");
+const getComponentNames_1 = require("./lib/requests/getComponentNames");
+const getComponentProps_1 = require("./lib/requests/getComponentProps");
+const getElementAttrs_1 = require("./lib/requests/getElementAttrs");
+const getElementNames_1 = require("./lib/requests/getElementNames");
+const getImportPathForFile_1 = require("./lib/requests/getImportPathForFile");
+const getPropertiesAtLocation_1 = require("./lib/requests/getPropertiesAtLocation");
+const getQuickInfoAtPosition_1 = require("./lib/requests/getQuickInfoAtPosition");
 const windowsPathReg = /\\/g;
-const vueCompilerOptions = new WeakMap();
-const plugin = (0, createLanguageServicePlugin_1.createLanguageServicePlugin)((ts, info) => {
+const project2Service = new WeakMap();
+module.exports = (0, createLanguageServicePlugin_1.createLanguageServicePlugin)((ts, info) => {
     const vueOptions = getVueCompilerOptions();
     const languagePlugin = vue.createVueLanguagePlugin(ts, info.languageServiceHost.getCompilationSettings(), vueOptions, id => id);
-    vueCompilerOptions.set(info.project, vueOptions);
+    addVueCommands();
     return {
         languagePlugins: [languagePlugin],
         setup: language => {
+            project2Service.set(info.project, [language, info.languageServiceHost, info.languageService]);
             info.languageService = (0, common_1.proxyLanguageServiceForVue)(ts, language, info.languageService, vueOptions, fileName => fileName);
-            if (info.project.projectKind === ts.server.ProjectKind.Configured
-                || info.project.projectKind === ts.server.ProjectKind.Inferred) {
-                (0, server_1.startNamedPipeServer)(ts, info, language, info.project.projectKind);
-            }
             // #3963
             const timer = setInterval(() => {
                 if (info.project['program']) {
@@ -35,6 +41,93 @@ const plugin = (0, createLanguageServicePlugin_1.createLanguageServicePlugin)((t
             return vue.createParsedCommandLineByJson(ts, ts.sys, info.languageServiceHost.getCurrentDirectory(), {}).vueOptions;
         }
     }
+    // https://github.com/JetBrains/intellij-plugins/blob/6435723ad88fa296b41144162ebe3b8513f4949b/Angular/src-js/angular-service/src/index.ts#L69
+    function addVueCommands() {
+        const projectService = info.project.projectService;
+        projectService.logger.info("Vue: called handler processing " + info.project.projectKind);
+        const session = info.session;
+        if (session == undefined) {
+            projectService.logger.info("Vue: there is no session in info.");
+            return;
+        }
+        if (session.addProtocolHandler == undefined) {
+            // addProtocolHandler was introduced in TS 4.4 or 4.5 in 2021, see https://github.com/microsoft/TypeScript/issues/43893
+            projectService.logger.info("Vue: there is no addProtocolHandler method.");
+            return;
+        }
+        if (session.vueCommandsAdded) {
+            return;
+        }
+        session.vueCommandsAdded = true;
+        session.addProtocolHandler('vue:collectExtractProps', ({ arguments: args }) => {
+            return {
+                response: collectExtractProps_1.collectExtractProps.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getImportPathForFile', ({ arguments: args }) => {
+            return {
+                response: getImportPathForFile_1.getImportPathForFile.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getPropertiesAtLocation', ({ arguments: args }) => {
+            return {
+                response: getPropertiesAtLocation_1.getPropertiesAtLocation.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getQuickInfoAtPosition', ({ arguments: args }) => {
+            return {
+                response: getQuickInfoAtPosition_1.getQuickInfoAtPosition.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getComponentNames', ({ arguments: args }) => {
+            return {
+                response: getComponentNames_1.getComponentNames.apply(getRequestContext(args[0]), args) ?? [],
+            };
+        });
+        session.addProtocolHandler('vue:getComponentProps', ({ arguments: args }) => {
+            return {
+                response: getComponentProps_1.getComponentProps.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getComponentEvents', ({ arguments: args }) => {
+            return {
+                response: getComponentEvents_1.getComponentEvents.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getComponentDirectives', ({ arguments: args }) => {
+            return {
+                response: getComponentDirectives_1.getComponentDirectives.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getElementAttrs', ({ arguments: args }) => {
+            return {
+                response: getElementAttrs_1.getElementAttrs.apply(getRequestContext(args[0]), args),
+            };
+        });
+        session.addProtocolHandler('vue:getElementNames', ({ arguments: args }) => {
+            return {
+                response: getElementNames_1.getElementNames.apply(getRequestContext(args[0]), args),
+            };
+        });
+        projectService.logger.info('Vue specific commands are successfully added.');
+    }
+    function getRequestContext(fileName) {
+        const fileAndProject = info.session.getFileAndProject({
+            file: fileName,
+            projectFileName: undefined,
+        });
+        const service = project2Service.get(fileAndProject.project);
+        if (!service) {
+            throw 'No RequestContext';
+        }
+        return {
+            typescript: ts,
+            languageService: service[2],
+            languageServiceHost: service[1],
+            language: service[0],
+            isTsPlugin: true,
+            getFileId: (fileName) => fileName,
+        };
+    }
 });
-module.exports = plugin;
 //# sourceMappingURL=index.js.map

package/lib/common.d.ts

@@ -1,5 +1,3 @@
-import { Language, VueCompilerOptions, VueVirtualCode } from '@vue/language-core';
+import { Language, VueCompilerOptions } from '@vue/language-core';
 import type * as ts from 'typescript';
-import type { RequestContext } from './requests/types';
 export declare function proxyLanguageServiceForVue<T>(ts: typeof import('typescript'), language: Language<T>, languageService: ts.LanguageService, vueOptions: VueCompilerOptions, asScriptId: (fileName: string) => T): ts.LanguageService;
-export declare function getComponentSpans(this: Pick<RequestContext, 'typescript' | 'languageService'>, vueCode: VueVirtualCode, template: NonNullable<VueVirtualCode['_sfc']['template']>, spanTemplateRange: ts.TextSpan): ts.TextSpan[];

package/lib/common.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.proxyLanguageServiceForVue = proxyLanguageServiceForVue;
-exports.getComponentSpans = getComponentSpans;
 const language_core_1 = require("@vue/language-core");
 const shared_1 = require("@vue/shared");
 const getComponentNames_1 = require("./requests/getComponentNames");
+const getElementNames_1 = require("./requests/getElementNames");
 const windowsPathReg = /\\/g;
 function proxyLanguageServiceForVue(ts, language, languageService, vueOptions, asScriptId) {
     const proxyCache = new Map();
@@ -13,6 +13,7 @@ function proxyLanguageServiceForVue(ts, language, languageService, vueOptions, a
             case 'getCompletionsAtPosition': return getCompletionsAtPosition(vueOptions, target[p]);
             case 'getCompletionEntryDetails': return getCompletionEntryDetails(language, asScriptId, target[p]);
             case 'getCodeFixesAtPosition': return getCodeFixesAtPosition(target[p]);
+            case 'getDefinitionAndBoundSpan': return getDefinitionAndBoundSpan(ts, language, languageService, vueOptions, asScriptId, target[p]);
             case 'getQuickInfoAtPosition': return getQuickInfoAtPosition(ts, target, target[p]);
             // TS plugin only
             case 'getEncodedSemanticClassifications': return getEncodedSemanticClassifications(ts, language, target, asScriptId, target[p]);
@@ -128,6 +129,77 @@ function getCodeFixesAtPosition(getCodeFixesAtPosition) {
         return result;
     };
 }
+function getDefinitionAndBoundSpan(ts, language, languageService, vueOptions, asScriptId, getDefinitionAndBoundSpan) {
+    return (fileName, position) => {
+        const result = getDefinitionAndBoundSpan(fileName, position);
+        if (!result?.definitions?.length) {
+            return result;
+        }
+        const program = languageService.getProgram();
+        const sourceScript = language.scripts.get(asScriptId(fileName));
+        if (!sourceScript?.generated) {
+            return result;
+        }
+        const root = sourceScript.generated.root;
+        if (!(root instanceof language_core_1.VueVirtualCode)) {
+            return result;
+        }
+        if (!root.sfc.template
+            || position < root.sfc.template.startTagEnd
+            || position > root.sfc.template.endTagStart) {
+            return result;
+        }
+        const definitions = new Set(result.definitions);
+        const skippedDefinitions = [];
+        for (const definition of result.definitions) {
+            if (vueOptions.extensions.some(ext => definition.fileName.endsWith(ext))) {
+                continue;
+            }
+            const sourceFile = program.getSourceFile(definition.fileName);
+            if (!sourceFile) {
+                continue;
+            }
+            visit(sourceFile, definition, sourceFile);
+        }
+        for (const definition of skippedDefinitions) {
+            definitions.delete(definition);
+        }
+        return {
+            definitions: [...definitions],
+            textSpan: result.textSpan,
+        };
+        function visit(node, definition, sourceFile) {
+            if (ts.isPropertySignature(node) && node.type) {
+                proxy(node.name, node.type, definition, sourceFile);
+            }
+            else if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.type && !node.initializer) {
+                proxy(node.name, node.type, definition, sourceFile);
+            }
+            else {
+                ts.forEachChild(node, child => visit(child, definition, sourceFile));
+            }
+        }
+        function proxy(name, type, definition, sourceFile) {
+            const { textSpan, fileName } = definition;
+            const start = name.getStart(sourceFile);
+            const end = name.getEnd();
+            if (start !== textSpan.start || end - start !== textSpan.length) {
+                return;
+            }
+            if (!ts.isIndexedAccessTypeNode(type)) {
+                return;
+            }
+            const pos = type.indexType.getStart(sourceFile);
+            const res = getDefinitionAndBoundSpan(fileName, pos);
+            if (res?.definitions?.length) {
+                for (const definition of res.definitions) {
+                    definitions.add(definition);
+                }
+                skippedDefinitions.push(definition);
+            }
+        }
+    };
+}
 function getQuickInfoAtPosition(ts, languageService, getQuickInfoAtPosition) {
     return (...args) => {
         const result = getQuickInfoAtPosition(...args);
@@ -191,6 +263,7 @@ function getComponentSpans(vueCode, template, spanTemplateRange) {
     const { typescript: ts, languageService } = this;
     const result = [];
     const validComponentNames = (0, getComponentNames_1._getComponentNames)(ts, languageService, vueCode);
+    const elements = new Set((0, getElementNames_1._getElementNames)(ts, languageService, vueCode));
     const components = new Set([
         ...validComponentNames,
         ...validComponentNames.map(language_core_1.hyphenateTag),
@@ -200,7 +273,7 @@ function getComponentSpans(vueCode, template, spanTemplateRange) {
             if (node.loc.end.offset <= spanTemplateRange.start || node.loc.start.offset >= (spanTemplateRange.start + spanTemplateRange.length)) {
                 continue;
             }
-            if (components.has(node.tag)) {
+            if (components.has(node.tag) && !elements.has(node.tag)) {
                 let start = node.loc.start.offset;
                 if (template.lang === 'html') {
                     start += '<'.length;

package/lib/requests/getElementAttrs.js

@@ -1,29 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getElementAttrs = getElementAttrs;
-const vue = require("@vue/language-core");
+const language_core_1 = require("@vue/language-core");
+const utils_1 = require("./utils");
 function getElementAttrs(fileName, tagName) {
     const { typescript: ts, language, languageService, getFileId } = this;
     const volarFile = language.scripts.get(getFileId(fileName));
-    if (!(volarFile?.generated?.root instanceof vue.VueVirtualCode)) {
+    if (!(volarFile?.generated?.root instanceof language_core_1.VueVirtualCode)) {
         return;
     }
+    const vueCode = volarFile.generated.root;
     const program = languageService.getProgram();
-    let tsSourceFile;
-    if (tsSourceFile = program.getSourceFile(fileName)) {
-        const checker = program.getTypeChecker();
-        const typeNode = tsSourceFile.statements
-            .filter(ts.isTypeAliasDeclaration)
-            .find(node => node.name.getText() === '__VLS_IntrinsicElementsCompletion');
-        if (checker && typeNode) {
-            const type = checker.getTypeFromTypeNode(typeNode.type);
-            const el = type.getProperty(tagName);
-            if (el) {
-                const attrs = checker.getTypeOfSymbolAtLocation(el, typeNode).getProperties();
-                return attrs.map(c => c.name);
-            }
-        }
+    const checker = program.getTypeChecker();
+    const elements = (0, utils_1.getVariableType)(ts, languageService, vueCode, '__VLS_elements');
+    if (!elements) {
+        return [];
     }
-    return [];
+    const elementType = elements.type.getProperty(tagName);
+    if (!elementType) {
+        return [];
+    }
+    const attrs = checker.getTypeOfSymbol(elementType).getProperties();
+    return attrs.map(c => c.name);
 }
 //# sourceMappingURL=getElementAttrs.js.map

package/lib/requests/getElementNames.d.ts

@@ -0,0 +1,5 @@
+import { VueVirtualCode } from '@vue/language-core';
+import type * as ts from 'typescript';
+import type { RequestContext } from './types';
+export declare function getElementNames(this: RequestContext, fileName: string): string[] | undefined;
+export declare function _getElementNames(ts: typeof import('typescript'), tsLs: ts.LanguageService, vueCode: VueVirtualCode): string[];

package/lib/requests/getElementNames.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getElementNames = getElementNames;
+exports._getElementNames = _getElementNames;
+const language_core_1 = require("@vue/language-core");
+const utils_1 = require("./utils");
+function getElementNames(fileName) {
+    const { typescript: ts, language, languageService, getFileId } = this;
+    const volarFile = language.scripts.get(getFileId(fileName));
+    if (!(volarFile?.generated?.root instanceof language_core_1.VueVirtualCode)) {
+        return;
+    }
+    const vueCode = volarFile.generated.root;
+    return _getElementNames(ts, languageService, vueCode);
+}
+function _getElementNames(ts, tsLs, vueCode) {
+    return (0, utils_1.getVariableType)(ts, tsLs, vueCode, '__VLS_elements')
+        ?.type
+        ?.getProperties()
+        .map(c => c.name)
+        ?? [];
+}
+//# sourceMappingURL=getElementNames.js.map

package/lib/requests/getPropertiesAtLocation.js

@@ -1,4 +1,5 @@
 "use strict";
+/// <reference types="@volar/typescript" />
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPropertiesAtLocation = getPropertiesAtLocation;
 const language_core_1 = require("@vue/language-core");

package/lib/requests/index.d.ts

@@ -0,0 +1,14 @@
+type ToRequest<T extends (...args: any) => any> = (...args: Parameters<T>) => Promise<ReturnType<T> | null | undefined>;
+export type Requests = {
+    collectExtractProps: ToRequest<typeof import('./collectExtractProps.js')['collectExtractProps']>;
+    getImportPathForFile: ToRequest<typeof import('./getImportPathForFile.js')['getImportPathForFile']>;
+    getPropertiesAtLocation: ToRequest<typeof import('./getPropertiesAtLocation.js')['getPropertiesAtLocation']>;
+    getQuickInfoAtPosition: ToRequest<typeof import('./getQuickInfoAtPosition.js')['getQuickInfoAtPosition']>;
+    getComponentNames: ToRequest<typeof import('./getComponentNames.js')['getComponentNames']>;
+    getComponentProps: ToRequest<typeof import('./getComponentProps.js')['getComponentProps']>;
+    getComponentEvents: ToRequest<typeof import('./getComponentEvents.js')['getComponentEvents']>;
+    getComponentDirectives: ToRequest<typeof import('./getComponentDirectives.js')['getComponentDirectives']>;
+    getElementAttrs: ToRequest<typeof import('./getElementAttrs.js')['getElementAttrs']>;
+    getElementNames: ToRequest<typeof import('./getElementNames.js')['getElementNames']>;
+};
+export {};

package/lib/requests/index.js

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

package/lib/requests/utils.js

@@ -36,11 +36,11 @@ function getSelfComponentName(fileName) {
 }
 function getVariableType(ts, languageService, vueCode, name) {
     const program = languageService.getProgram();
-    let tsSourceFile;
-    if (tsSourceFile = program.getSourceFile(vueCode.fileName)) {
-        const node = searchVariableDeclarationNode(ts, tsSourceFile, name);
+    const tsSourceFile = program.getSourceFile(vueCode.fileName);
+    if (tsSourceFile) {
         const checker = program.getTypeChecker();
-        if (checker && node) {
+        const node = searchVariableDeclarationNode(ts, tsSourceFile, name);
+        if (node) {
             return {
                 node: node,
                 type: checker.getTypeAtLocation(node),
@@ -49,15 +49,15 @@ function getVariableType(ts, languageService, vueCode, name) {
     }
 }
 function searchVariableDeclarationNode(ts, sourceFile, name) {
-    let componentsNode;
+    let result;
     walk(sourceFile);
-    return componentsNode;
+    return result;
     function walk(node) {
-        if (componentsNode) {
+        if (result) {
             return;
         }
         else if (ts.isVariableDeclaration(node) && node.name.getText() === name) {
-            componentsNode = node;
+            result = node;
         }
         else {
             node.forEachChild(walk);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/typescript-plugin",
-	"version": "2.2.8",
+	"version": "3.0.0-alpha.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",
@@ -14,11 +14,11 @@
 	},
 	"dependencies": {
 		"@volar/typescript": "~2.4.11",
-		"@vue/language-core": "2.2.8",
+		"@vue/language-core": "3.0.0-alpha.0",
 		"@vue/shared": "^3.5.0"
 	},
 	"devDependencies": {
 		"@types/node": "^22.10.4"
 	},
-	"gitHead": "cdf00e6f19971260607ea2347924b94126a254fc"
+	"gitHead": "4b49cbe09097e482def4603b90f6c3b93bb2e913"
 }

package/lib/client.d.ts

@@ -1,13 +0,0 @@
-export declare const collectExtractProps: (fileName: string, templateCodeRange: [number, number]) => Promise<{
-    name: string;
-    type: string;
-    model: boolean;
-}[] | null | undefined>;
-export declare const getImportPathForFile: (fileName: string, incomingFileName: string, preferences: import("typescript").UserPreferences) => Promise<string | null | undefined>;
-export declare const getPropertiesAtLocation: (fileName: string, position: number) => Promise<string[] | null | undefined>;
-export declare const getQuickInfoAtPosition: (fileName: string, position: number) => Promise<string | null | undefined>;
-export declare function getComponentProps(fileName: string, componentName: string): Promise<import("./requests/getComponentProps").ComponentPropInfo[] | null | undefined>;
-export declare const getComponentEvents: (fileName: string, tag: string) => Promise<string[] | null | undefined>;
-export declare const getComponentDirectives: (fileName: string) => Promise<string[] | null | undefined>;
-export declare function getComponentNames(fileName: string): Promise<string[] | undefined>;
-export declare const getElementAttrs: (fileName: string, tagName: string) => Promise<string[] | null | undefined>;

package/lib/client.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getElementAttrs = exports.getComponentDirectives = exports.getComponentEvents = exports.getQuickInfoAtPosition = exports.getPropertiesAtLocation = exports.getImportPathForFile = exports.collectExtractProps = void 0;
-exports.getComponentProps = getComponentProps;
-exports.getComponentNames = getComponentNames;
-const utils_1 = require("./utils");
-exports.collectExtractProps = createRequest('collectExtractProps');
-exports.getImportPathForFile = createRequest('getImportPathForFile');
-exports.getPropertiesAtLocation = createRequest('getPropertiesAtLocation');
-exports.getQuickInfoAtPosition = createRequest('getQuickInfoAtPosition');
-// Component Infos
-async function getComponentProps(fileName, componentName) {
-    const server = await (0, utils_1.getBestServer)(fileName);
-    if (!server) {
-        return;
-    }
-    return await server.getComponentProps(fileName, componentName);
-}
-exports.getComponentEvents = createRequest('getComponentEvents');
-exports.getComponentDirectives = createRequest('getComponentDirectives');
-async function getComponentNames(fileName) {
-    const server = await (0, utils_1.getBestServer)(fileName);
-    if (!server) {
-        return;
-    }
-    const componentAndProps = server.componentNamesAndProps.get(fileName);
-    if (!componentAndProps) {
-        return;
-    }
-    return Object.keys(componentAndProps);
-}
-exports.getElementAttrs = createRequest('getElementAttrs');
-function createRequest(requestType) {
-    return async function (...[fileName, ...rest]) {
-        const server = await (0, utils_1.getBestServer)(fileName);
-        if (!server) {
-            return;
-        }
-        return server.sendRequest(requestType, fileName, ...rest);
-    };
-}
-//# sourceMappingURL=client.js.map

package/lib/requests/componentInfos.d.ts

@@ -1,13 +0,0 @@
-import * as vue from '@vue/language-core';
-import type * as ts from 'typescript';
-import type { RequestContext } from './types';
-export declare function getComponentProps(this: RequestContext, fileName: string, tag: string): {
-    name: string;
-    required?: true;
-    commentMarkdown?: string;
-}[] | undefined;
-export declare function getComponentEvents(this: RequestContext, fileName: string, tag: string): string[] | undefined;
-export declare function getTemplateContextProps(this: RequestContext, fileName: string): string[] | undefined;
-export declare function getComponentNames(this: RequestContext, fileName: string): string[] | undefined;
-export declare function _getComponentNames(ts: typeof import('typescript'), tsLs: ts.LanguageService, vueCode: vue.VueVirtualCode): string[];
-export declare function getElementAttrs(this: RequestContext, fileName: string, tagName: string): string[] | undefined;