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

package/index.js

@@ -11,7 +11,6 @@ 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 project2Service = new WeakMap();
 module.exports = (0, createLanguageServicePlugin_1.createLanguageServicePlugin)((ts, info) => {
@@ -74,11 +73,6 @@ module.exports = (0, createLanguageServicePlugin_1.createLanguageServicePlugin)(
                 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) ?? [],

package/lib/client.d.ts

@@ -0,0 +1,16 @@
+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<{
+    name: string;
+}[] | null | undefined>;
+export declare const getSlotNames: (fileName: string) => Promise<string[] | null | undefined>;

package/lib/client.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSlotNames = 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');
+exports.getSlotNames = createRequest('getSlotNames');
+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/proxy.d.ts

@@ -0,0 +1,3 @@
+import { Language, VueCompilerOptions } from '@vue/language-core';
+import type * as ts from 'typescript';
+export declare function proxyLanguageServiceForVue<T>(ts: typeof import('typescript'), language: Language<T>, languageService: ts.LanguageService, vueOptions: VueCompilerOptions, asScriptId: (fileName: string) => T): ts.LanguageService;

package/lib/proxy.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.proxyLanguageServiceForVue = proxyLanguageServiceForVue;
+const language_core_1 = require("@vue/language-core");
+const shared_1 = require("@vue/shared");
+const getComponentNames_1 = require("./requests/getComponentNames");
+const windowsPathReg = /\\/g;
+function proxyLanguageServiceForVue(ts, language, languageService, vueOptions, asScriptId) {
+    const proxyCache = new Map();
+    const getProxyMethod = (target, p) => {
+        switch (p) {
+            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 'getEncodedSemanticClassifications': return getEncodedSemanticClassifications(ts, language, target, asScriptId, target[p]);
+            case 'getQuickInfoAtPosition': return getQuickInfoAtPosition(ts, target, target[p]);
+            case 'getSemanticDiagnostics': return getSemanticDiagnostics(ts, language, languageService, asScriptId, target[p]);
+        }
+    };
+    return new Proxy(languageService, {
+        get(target, p, receiver) {
+            if (getProxyMethod) {
+                if (!proxyCache.has(p)) {
+                    proxyCache.set(p, getProxyMethod(target, p));
+                }
+                const proxyMethod = proxyCache.get(p);
+                if (proxyMethod) {
+                    return proxyMethod;
+                }
+            }
+            return Reflect.get(target, p, receiver);
+        },
+        set(target, p, value, receiver) {
+            return Reflect.set(target, p, value, receiver);
+        },
+    });
+}
+function getCompletionsAtPosition(vueOptions, getCompletionsAtPosition) {
+    return (filePath, position, options, formattingSettings) => {
+        const fileName = filePath.replace(windowsPathReg, '/');
+        const result = getCompletionsAtPosition(fileName, position, options, formattingSettings);
+        if (result) {
+            // filter __VLS_
+            result.entries = result.entries.filter(entry => !entry.name.includes('__VLS_')
+                && !entry.labelDetails?.description?.includes('__VLS_'));
+            // modify label
+            for (const item of result.entries) {
+                if (item.source) {
+                    const originalName = item.name;
+                    for (const vueExt of vueOptions.extensions) {
+                        const suffix = (0, shared_1.capitalize)(vueExt.slice(1)); // .vue -> Vue
+                        if (item.source.endsWith(vueExt) && item.name.endsWith(suffix)) {
+                            item.name = (0, shared_1.capitalize)(item.name.slice(0, -suffix.length));
+                            if (item.insertText) {
+                                // #2286
+                                item.insertText = item.insertText.replace(`${suffix}$1`, '$1');
+                            }
+                            if (item.data) {
+                                // @ts-expect-error
+                                item.data.__isComponentAutoImport = {
+                                    ext: vueExt,
+                                    suffix,
+                                    originalName,
+                                    newName: item.insertText,
+                                };
+                            }
+                            break;
+                        }
+                    }
+                    if (item.data) {
+                        // @ts-expect-error
+                        item.data.__isAutoImport = {
+                            fileName,
+                        };
+                    }
+                }
+            }
+        }
+        return result;
+    };
+}
+function getCompletionEntryDetails(language, asScriptId, getCompletionEntryDetails) {
+    return (...args) => {
+        const details = getCompletionEntryDetails(...args);
+        // modify import statement
+        // @ts-expect-error
+        if (args[6]?.__isComponentAutoImport) {
+            // @ts-expect-error
+            const { ext, suffix, originalName, newName } = args[6]?.__isComponentAutoImport;
+            for (const codeAction of details?.codeActions ?? []) {
+                for (const change of codeAction.changes) {
+                    for (const textChange of change.textChanges) {
+                        textChange.newText = textChange.newText.replace('import ' + originalName + ' from ', 'import ' + newName + ' from ');
+                    }
+                }
+            }
+        }
+        // @ts-expect-error
+        if (args[6]?.__isAutoImport) {
+            // @ts-expect-error
+            const { fileName } = args[6]?.__isAutoImport;
+            const sourceScript = language.scripts.get(asScriptId(fileName));
+            if (sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) {
+                const sfc = sourceScript.generated.root.vueSfc;
+                if (!sfc?.descriptor.script && !sfc?.descriptor.scriptSetup) {
+                    for (const codeAction of details?.codeActions ?? []) {
+                        for (const change of codeAction.changes) {
+                            for (const textChange of change.textChanges) {
+                                textChange.newText = `<script setup lang="ts">${textChange.newText}</script>\n\n`;
+                                break;
+                            }
+                            break;
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        return details;
+    };
+}
+function getCodeFixesAtPosition(getCodeFixesAtPosition) {
+    return (...args) => {
+        let result = getCodeFixesAtPosition(...args);
+        // filter __VLS_
+        result = result.filter(entry => !entry.description.includes('__VLS_'));
+        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);
+        if (result && result.documentation?.length === 1 && result.documentation[0].text.startsWith('__VLS_emit,')) {
+            const [_, emitVarName, eventName] = result.documentation[0].text.split(',');
+            const program = languageService.getProgram();
+            const typeChecker = program.getTypeChecker();
+            const sourceFile = program.getSourceFile(args[0]);
+            result.documentation = undefined;
+            let symbolNode;
+            sourceFile?.forEachChild(function visit(node) {
+                if (ts.isIdentifier(node) && node.text === emitVarName) {
+                    symbolNode = node;
+                }
+                if (symbolNode) {
+                    return;
+                }
+                ts.forEachChild(node, visit);
+            });
+            if (symbolNode) {
+                const emitSymbol = typeChecker.getSymbolAtLocation(symbolNode);
+                if (emitSymbol) {
+                    const type = typeChecker.getTypeOfSymbolAtLocation(emitSymbol, symbolNode);
+                    const calls = type.getCallSignatures();
+                    for (const call of calls) {
+                        const callEventName = typeChecker.getTypeOfSymbolAtLocation(call.parameters[0], symbolNode).value;
+                        call.getJsDocTags();
+                        if (callEventName === eventName) {
+                            result.documentation = call.getDocumentationComment(typeChecker);
+                            result.tags = call.getJsDocTags();
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    };
+}
+function getSemanticDiagnostics(ts, language, languageService, asScriptId, getSemanticDiagnostics) {
+    return (fileName) => {
+        const result = getSemanticDiagnostics(fileName);
+        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;
+        }
+        const { template } = root.sfc;
+        if (!template) {
+            return result;
+        }
+        const sourceFile = program.getSourceFile(fileName);
+        if (!sourceFile) {
+            return result;
+        }
+        const additionalResult = [];
+        const { commentDirectives } = template;
+        for (const dir of commentDirectives) {
+            const start = template.startTagEnd + dir.start;
+            const end = template.startTagEnd + dir.end;
+            const rangeStart = template.startTagEnd + dir.rangeStart;
+            const rangeEnd = template.startTagEnd + dir.rangeEnd;
+            if (dir.name === 'expect-error') {
+                let containError = false;
+                for (let i = 0; i < result.length; i++) {
+                    const diag = result[i];
+                    if (diag.start >= rangeStart && diag.start + diag.length <= rangeEnd) {
+                        containError = true;
+                        result.splice(i, 1);
+                        i--;
+                    }
+                }
+                if (!containError) {
+                    additionalResult.push({
+                        category: ts.DiagnosticCategory.Error,
+                        code: 2578,
+                        file: sourceFile,
+                        start,
+                        length: end - start,
+                        messageText: `Unused '@vue-expect-error' directive.`,
+                    });
+                }
+            }
+            else if (dir.name === 'ignore') {
+                for (let i = 0; i < result.length; i++) {
+                    const diag = result[i];
+                    if (diag.start >= rangeStart && diag.start + diag.length <= rangeEnd) {
+                        result.splice(i, 1);
+                        i--;
+                    }
+                }
+            }
+        }
+        return [...result, ...additionalResult];
+    };
+}
+function getEncodedSemanticClassifications(ts, language, languageService, asScriptId, getEncodedSemanticClassifications) {
+    return (filePath, span, format) => {
+        const fileName = filePath.replace(windowsPathReg, '/');
+        const result = getEncodedSemanticClassifications(fileName, span, format);
+        const sourceScript = language.scripts.get(asScriptId(fileName));
+        const root = sourceScript?.generated?.root;
+        if (root instanceof language_core_1.VueVirtualCode) {
+            const { template } = root.sfc;
+            if (template) {
+                for (const componentSpan of getComponentSpans.call({ typescript: ts, languageService }, root, template, {
+                    start: span.start - template.startTagEnd,
+                    length: span.length,
+                })) {
+                    result.spans.push(componentSpan.start + template.startTagEnd, componentSpan.length, 256 // class
+                    );
+                }
+            }
+        }
+        return result;
+    };
+}
+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, getComponentNames_1._getElementNames)(ts, languageService, vueCode));
+    const components = new Set([
+        ...validComponentNames,
+        ...validComponentNames.map(language_core_1.hyphenateTag),
+    ]);
+    if (template.ast) {
+        for (const node of (0, language_core_1.forEachTemplateChild)(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=proxy.js.map

package/lib/requests/getSlotNames.d.ts

@@ -0,0 +1,6 @@
+import type { RequestContext } from './types';
+export interface ElementAttrInfo {
+    name: string;
+    values?: string[];
+}
+export declare function getSlotNames(this: RequestContext, fileName: string): string[] | undefined;

package/lib/requests/getSlotNames.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSlotNames = getSlotNames;
+const language_core_1 = require("@vue/language-core");
+function getSlotNames(fileName) {
+    const { typescript: ts, language, languageService, getFileId } = this;
+    const sourceScript = language.scripts.get(getFileId(fileName));
+    if (!sourceScript?.generated) {
+        return;
+    }
+    const root = sourceScript.generated.root;
+    if (!(root instanceof language_core_1.VueVirtualCode)) {
+        return;
+    }
+    const program = languageService.getProgram();
+    const tsSourceFile = program.getSourceFile(fileName);
+    if (!tsSourceFile) {
+        return;
+    }
+    const checker = program.getTypeChecker();
+    const typeNode = tsSourceFile.statements
+        .filter(ts.isTypeAliasDeclaration)
+        .find(node => node.name.getText() === '__VLS_Slots');
+    if (typeNode) {
+        const attrs = checker.getTypeFromTypeNode(typeNode.type).getProperties();
+        return attrs.map(attr => attr.name);
+    }
+    return [];
+}
+//# sourceMappingURL=getSlotNames.js.map

package/lib/requests/index.d.ts

@@ -3,12 +3,15 @@ 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']>;
+    getQuickInfoAtPosition: ToRequest<(fileName: string, position: {
+        line: number;
+        character: number;
+    }) => string>;
 };
 export {};

package/lib/server.d.ts

@@ -0,0 +1,25 @@
+import { Language } from '@vue/language-core';
+import type * as ts from 'typescript';
+export type RequestType = 'containsFile' | 'projectInfo' | 'collectExtractProps' | 'getImportPathForFile' | 'getPropertiesAtLocation' | 'getQuickInfoAtPosition' | 'subscribeComponentProps' | 'getComponentEvents' | 'getComponentDirectives' | 'getElementAttrs' | 'getSlotNames';
+export type NotificationType = 'componentNamesUpdated' | 'componentPropsUpdated';
+export type RequestData = [
+    seq: number,
+    type: RequestType,
+    fileName: string,
+    ...args: any[]
+];
+export type ResponseData = [
+    seq: number,
+    data: any
+];
+export type NotificationData = [
+    type: NotificationType,
+    fileName: string,
+    data: any
+];
+export interface ProjectInfo {
+    name: string;
+    kind: ts.server.ProjectKind;
+    currentDirectory: string;
+}
+export declare function startNamedPipeServer(ts: typeof import('typescript'), info: ts.server.PluginCreateInfo, language: Language<string>, projectKind: ts.server.ProjectKind.Inferred | ts.server.ProjectKind.Configured): Promise<void>;

package/lib/server.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startNamedPipeServer = startNamedPipeServer;
+const language_core_1 = require("@vue/language-core");
+const fs = require("node:fs");
+const net = require("node:net");
+const collectExtractProps_1 = require("./requests/collectExtractProps");
+const getComponentDirectives_1 = require("./requests/getComponentDirectives");
+const getComponentEvents_1 = require("./requests/getComponentEvents");
+const getComponentNames_1 = require("./requests/getComponentNames");
+const getComponentProps_1 = require("./requests/getComponentProps");
+const getElementAttrs_1 = require("./requests/getElementAttrs");
+const getImportPathForFile_1 = require("./requests/getImportPathForFile");
+const getPropertiesAtLocation_1 = require("./requests/getPropertiesAtLocation");
+const getQuickInfoAtPosition_1 = require("./requests/getQuickInfoAtPosition");
+const getSlotNames_1 = require("./requests/getSlotNames");
+const utils_1 = require("./utils");
+async function startNamedPipeServer(ts, info, language, projectKind) {
+    let lastProjectVersion;
+    const requestContext = {
+        typescript: ts,
+        languageService: info.languageService,
+        languageServiceHost: info.languageServiceHost,
+        language: language,
+        isTsPlugin: true,
+        getFileId: (fileName) => fileName,
+    };
+    const dataChunks = [];
+    const currentData = new language_core_1.FileMap(false);
+    const allConnections = new Set();
+    const pendingRequests = new Set();
+    const server = net.createServer(connection => {
+        allConnections.add(connection);
+        connection.on('end', () => {
+            allConnections.delete(connection);
+        });
+        connection.on('data', buffer => {
+            dataChunks.push(buffer);
+            const text = dataChunks.toString();
+            if (text.endsWith('\n\n')) {
+                dataChunks.length = 0;
+                const requests = text.split('\n\n');
+                for (let json of requests) {
+                    json = json.trim();
+                    if (!json) {
+                        continue;
+                    }
+                    try {
+                        onRequest(connection, JSON.parse(json));
+                    }
+                    catch (e) {
+                        console.error('[Vue Named Pipe Server] JSON parse error:', e);
+                    }
+                }
+            }
+        });
+        connection.on('error', err => console.error('[Vue Named Pipe Server]', err.message));
+        for (const [fileName, [componentNames, componentProps]] of currentData) {
+            notify(connection, 'componentNamesUpdated', fileName, componentNames);
+            for (const [name, props] of Object.entries(componentProps)) {
+                notify(connection, 'componentPropsUpdated', fileName, [name, props]);
+            }
+        }
+    });
+    for (let i = 0; i < 10; i++) {
+        const path = (0, utils_1.getServerPath)(projectKind, i);
+        const socket = await connect(path, 100);
+        if (typeof socket === 'object') {
+            socket.end();
+        }
+        const namedPipeOccupied = typeof socket === 'object' || socket === 'timeout';
+        if (namedPipeOccupied) {
+            continue;
+        }
+        const success = await tryListen(server, path);
+        if (success) {
+            break;
+        }
+    }
+    updateWhile();
+    async function updateWhile() {
+        while (true) {
+            await sleep(500);
+            const projectVersion = info.project.getProjectVersion();
+            if (lastProjectVersion === projectVersion) {
+                continue;
+            }
+            const connections = [...allConnections].filter(c => !c.destroyed);
+            if (!connections.length) {
+                continue;
+            }
+            const token = info.languageServiceHost.getCancellationToken?.();
+            const openedScriptInfos = info.project.getRootScriptInfos().filter(info => info.isScriptOpen());
+            if (!openedScriptInfos.length) {
+                continue;
+            }
+            for (const scriptInfo of openedScriptInfos) {
+                await sleep(10);
+                if (token?.isCancellationRequested()) {
+                    break;
+                }
+                let data = currentData.get(scriptInfo.fileName);
+                if (!data) {
+                    data = [[], {}];
+                    currentData.set(scriptInfo.fileName, data);
+                }
+                const [oldComponentNames, componentProps] = data;
+                const newComponentNames = getComponentNames_1.getComponentNames.apply(requestContext, [scriptInfo.fileName]) ?? [];
+                if (JSON.stringify(oldComponentNames) !== JSON.stringify(newComponentNames)) {
+                    data[0] = newComponentNames;
+                    for (const connection of connections) {
+                        notify(connection, 'componentNamesUpdated', scriptInfo.fileName, newComponentNames);
+                    }
+                }
+                for (const [name, props] of Object.entries(componentProps)) {
+                    await sleep(10);
+                    if (token?.isCancellationRequested()) {
+                        break;
+                    }
+                    const newProps = getComponentProps_1.getComponentProps.apply(requestContext, [scriptInfo.fileName, name]) ?? [];
+                    if (JSON.stringify(props) !== JSON.stringify(newProps)) {
+                        componentProps[name] = newProps;
+                        for (const connection of connections) {
+                            notify(connection, 'componentPropsUpdated', scriptInfo.fileName, [name, newProps]);
+                        }
+                    }
+                }
+            }
+            lastProjectVersion = projectVersion;
+        }
+    }
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    function notify(connection, type, fileName, data) {
+        connection.write(JSON.stringify([type, fileName, data]) + '\n\n');
+    }
+    function onRequest(connection, [seq, requestType, ...args]) {
+        if (pendingRequests.has(seq)) {
+            return;
+        }
+        setTimeout(() => pendingRequests.delete(seq), 500);
+        pendingRequests.add(seq);
+        let data;
+        try {
+            data = handleRequest(requestType, ...args);
+        }
+        catch {
+            data = null;
+        }
+        connection.write(JSON.stringify([seq, data ?? null]) + '\n\n');
+    }
+    function handleRequest(requestType, ...args) {
+        const fileName = args[0];
+        if (requestType === 'projectInfo') {
+            return {
+                name: info.project.getProjectName(),
+                kind: info.project.projectKind,
+                currentDirectory: info.project.getCurrentDirectory(),
+            };
+        }
+        else if (requestType === 'containsFile') {
+            return info.project.containsFile(ts.server.toNormalizedPath(fileName));
+        }
+        else if (requestType === 'collectExtractProps') {
+            return collectExtractProps_1.collectExtractProps.apply(requestContext, args);
+        }
+        else if (requestType === 'getImportPathForFile') {
+            return getImportPathForFile_1.getImportPathForFile.apply(requestContext, args);
+        }
+        else if (requestType === 'getPropertiesAtLocation') {
+            return getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, args);
+        }
+        else if (requestType === 'getQuickInfoAtPosition') {
+            return getQuickInfoAtPosition_1.getQuickInfoAtPosition.apply(requestContext, args);
+        }
+        else if (requestType === 'subscribeComponentProps') {
+            const tag = args[1];
+            const props = getComponentProps_1.getComponentProps.apply(requestContext, [fileName, tag]) ?? [];
+            let data = currentData.get(fileName);
+            if (!data) {
+                data = [[], {}];
+                currentData.set(fileName, data);
+            }
+            data[1][tag] = props;
+            return props;
+        }
+        else if (requestType === 'getComponentEvents') {
+            return getComponentEvents_1.getComponentEvents.apply(requestContext, args);
+        }
+        else if (requestType === 'getComponentDirectives') {
+            return getComponentDirectives_1.getComponentDirectives.apply(requestContext, args);
+        }
+        else if (requestType === 'getElementAttrs') {
+            return getElementAttrs_1.getElementAttrs.apply(requestContext, args);
+        }
+        else if (requestType === 'getSlotNames') {
+            return getSlotNames_1.getSlotNames.apply(requestContext, args);
+        }
+        console.warn('[Vue Named Pipe Server] Unknown request:', requestType);
+        debugger;
+        return undefined;
+    }
+}
+function connect(namedPipePath, timeout) {
+    return new Promise(resolve => {
+        const socket = net.connect(namedPipePath);
+        if (timeout) {
+            socket.setTimeout(timeout);
+        }
+        const onConnect = () => {
+            cleanup();
+            resolve(socket);
+        };
+        const onError = (err) => {
+            if (err.code === 'ECONNREFUSED') {
+                try {
+                    console.log('[Vue Named Pipe Client] Deleting:', namedPipePath);
+                    fs.promises.unlink(namedPipePath);
+                }
+                catch { }
+            }
+            cleanup();
+            resolve('error');
+            socket.end();
+        };
+        const onTimeout = () => {
+            cleanup();
+            resolve('timeout');
+            socket.end();
+        };
+        const cleanup = () => {
+            socket.off('connect', onConnect);
+            socket.off('error', onError);
+            socket.off('timeout', onTimeout);
+        };
+        socket.on('connect', onConnect);
+        socket.on('error', onError);
+        socket.on('timeout', onTimeout);
+    });
+}
+function tryListen(server, namedPipePath) {
+    return new Promise(resolve => {
+        const onSuccess = () => {
+            server.off('error', onError);
+            resolve(true);
+        };
+        const onError = (err) => {
+            if (err.code === 'ECONNREFUSED') {
+                try {
+                    console.log('[Vue Named Pipe Client] Deleting:', namedPipePath);
+                    fs.promises.unlink(namedPipePath);
+                }
+                catch { }
+            }
+            server.off('error', onError);
+            server.close();
+            resolve(false);
+        };
+        server.listen(namedPipePath, onSuccess);
+        server.on('error', onError);
+    });
+}
+//# sourceMappingURL=server.js.map

package/lib/utils.d.ts

@@ -0,0 +1,31 @@
+import { FileMap } from '@vue/language-core';
+import * as net from 'node:net';
+import type * as ts from 'typescript';
+import type { ComponentPropInfo } from './requests/getComponentProps';
+import type { NotificationData, ProjectInfo, RequestData } from './server';
+export { TypeScriptProjectHost } from '@volar/typescript';
+export declare function getServerPath(kind: ts.server.ProjectKind, id: number): string;
+declare class NamedPipeServer {
+    path: string;
+    connecting: boolean;
+    projectInfo?: ProjectInfo;
+    containsFileCache: Map<string, Promise<boolean | null | undefined>>;
+    componentNamesAndProps: FileMap<Record<string, ComponentPropInfo[] | null>>;
+    constructor(kind: ts.server.ProjectKind, id: number);
+    containsFile(fileName: string): Promise<boolean | null | undefined> | undefined;
+    getComponentProps(fileName: string, tag: string): Promise<ComponentPropInfo[] | null | undefined>;
+    update(): void;
+    connect(): void;
+    close(): void;
+    socket?: net.Socket;
+    seq: number;
+    dataChunks: Buffer[];
+    requestHandlers: Map<number, (res: any) => void>;
+    onData(chunk: Buffer): void;
+    onNotification(type: NotificationData[0], fileName: string, data: any): void;
+    sendRequest<T>(requestType: RequestData[1], fileName: string, ...args: any[]): Promise<T | null | undefined>;
+}
+export declare const configuredServers: NamedPipeServer[];
+export declare const inferredServers: NamedPipeServer[];
+export declare const onServerReady: (() => void)[];
+export declare function getBestServer(fileName: string): Promise<NamedPipeServer | undefined>;

package/lib/utils.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onServerReady = exports.inferredServers = exports.configuredServers = void 0;
+exports.getServerPath = getServerPath;
+exports.getBestServer = getBestServer;
+const language_core_1 = require("@vue/language-core");
+const shared_1 = require("@vue/shared");
+const fs = require("node:fs");
+const net = require("node:net");
+const os = require("node:os");
+const path = require("node:path");
+const { version } = require('../package.json');
+const platform = os.platform();
+const pipeDir = platform === 'win32'
+    ? `\\\\.\\pipe\\`
+    : `/tmp/`;
+function getServerPath(kind, id) {
+    if (kind === 1) {
+        return `${pipeDir}vue-named-pipe-${version}-configured-${id}`;
+    }
+    else {
+        return `${pipeDir}vue-named-pipe-${version}-inferred-${id}`;
+    }
+}
+class NamedPipeServer {
+    constructor(kind, id) {
+        this.connecting = false;
+        this.containsFileCache = new Map();
+        this.componentNamesAndProps = new language_core_1.FileMap(false);
+        this.seq = 0;
+        this.dataChunks = [];
+        this.requestHandlers = new Map();
+        this.path = getServerPath(kind, id);
+    }
+    containsFile(fileName) {
+        if (this.projectInfo) {
+            if (!this.containsFileCache.has(fileName)) {
+                this.containsFileCache.set(fileName, (async () => {
+                    const res = await this.sendRequest('containsFile', fileName);
+                    if (typeof res !== 'boolean') {
+                        // If the request fails, delete the cache
+                        this.containsFileCache.delete(fileName);
+                    }
+                    return res;
+                })());
+            }
+            return this.containsFileCache.get(fileName);
+        }
+    }
+    async getComponentProps(fileName, tag) {
+        const componentAndProps = this.componentNamesAndProps.get(fileName);
+        if (!componentAndProps) {
+            return;
+        }
+        const props = componentAndProps[tag]
+            ?? componentAndProps[(0, shared_1.camelize)(tag)]
+            ?? componentAndProps[(0, shared_1.capitalize)((0, shared_1.camelize)(tag))];
+        if (props) {
+            return props;
+        }
+        return await this.sendRequest('subscribeComponentProps', fileName, tag);
+    }
+    update() {
+        if (!this.connecting && !this.projectInfo) {
+            this.connecting = true;
+            this.connect();
+        }
+    }
+    connect() {
+        this.socket = net.connect(this.path);
+        this.socket.on('data', this.onData.bind(this));
+        this.socket.on('connect', async () => {
+            const projectInfo = await this.sendRequest('projectInfo', '');
+            if (projectInfo) {
+                console.log('TSServer project ready:', projectInfo.name);
+                this.projectInfo = projectInfo;
+                this.containsFileCache.clear();
+                exports.onServerReady.forEach(cb => cb());
+            }
+            else {
+                this.close();
+            }
+        });
+        this.socket.on('error', err => {
+            if (err.code === 'ECONNREFUSED') {
+                try {
+                    console.log('Deleteing invalid named pipe file:', this.path);
+                    fs.promises.unlink(this.path);
+                }
+                catch { }
+            }
+            this.close();
+        });
+        this.socket.on('timeout', () => {
+            this.close();
+        });
+    }
+    close() {
+        this.connecting = false;
+        this.projectInfo = undefined;
+        this.socket?.end();
+    }
+    onData(chunk) {
+        this.dataChunks.push(chunk);
+        const data = Buffer.concat(this.dataChunks);
+        const text = data.toString();
+        if (text.endsWith('\n\n')) {
+            this.dataChunks.length = 0;
+            const results = text.split('\n\n');
+            for (let result of results) {
+                result = result.trim();
+                if (!result) {
+                    continue;
+                }
+                try {
+                    const data = JSON.parse(result.trim());
+                    if (typeof data[0] === 'number') {
+                        const [seq, res] = data;
+                        this.requestHandlers.get(seq)?.(res);
+                    }
+                    else {
+                        const [type, fileName, res] = data;
+                        this.onNotification(type, fileName, res);
+                    }
+                }
+                catch (e) {
+                    console.error('JSON parse error:', e);
+                }
+            }
+        }
+    }
+    onNotification(type, fileName, data) {
+        // console.log(`[${type}] ${fileName} ${JSON.stringify(data)}`);
+        if (type === 'componentNamesUpdated') {
+            let components = this.componentNamesAndProps.get(fileName);
+            if (!components) {
+                components = {};
+                this.componentNamesAndProps.set(fileName, components);
+            }
+            const newNames = data;
+            const newNameSet = new Set(newNames);
+            for (const name in components) {
+                if (!newNameSet.has(name)) {
+                    delete components[name];
+                }
+            }
+            for (const name of newNames) {
+                if (!components[name]) {
+                    components[name] = null;
+                }
+            }
+        }
+        else if (type === 'componentPropsUpdated') {
+            const components = this.componentNamesAndProps.get(fileName) ?? {};
+            const [name, props] = data;
+            components[name] = props;
+        }
+        else {
+            console.error('Unknown notification type:', type);
+            debugger;
+        }
+    }
+    sendRequest(requestType, fileName, ...args) {
+        return new Promise(resolve => {
+            const seq = this.seq++;
+            // console.time(`[${seq}] ${requestType} ${fileName}`);
+            this.requestHandlers.set(seq, data => {
+                // console.timeEnd(`[${seq}] ${requestType} ${fileName}`);
+                this.requestHandlers.delete(seq);
+                resolve(data);
+                clearInterval(retryTimer);
+            });
+            const retry = () => {
+                const data = [seq, requestType, fileName, ...args];
+                this.socket.write(JSON.stringify(data) + '\n\n');
+            };
+            retry();
+            const retryTimer = setInterval(retry, 1000);
+        });
+    }
+}
+exports.configuredServers = [];
+exports.inferredServers = [];
+exports.onServerReady = [];
+for (let i = 0; i < 10; i++) {
+    exports.configuredServers.push(new NamedPipeServer(1, i));
+    exports.inferredServers.push(new NamedPipeServer(0, i));
+}
+async function getBestServer(fileName) {
+    for (const server of exports.configuredServers) {
+        server.update();
+    }
+    let servers = (await Promise.all(exports.configuredServers.map(async (server) => {
+        const projectInfo = server.projectInfo;
+        if (!projectInfo) {
+            return;
+        }
+        const containsFile = await server.containsFile(fileName);
+        if (!containsFile) {
+            return;
+        }
+        return server;
+    }))).filter(server => !!server);
+    // Sort servers by tsconfig
+    servers.sort((a, b) => sortTSConfigs(fileName, a.projectInfo.name, b.projectInfo.name));
+    if (servers.length) {
+        // Return the first server
+        return servers[0];
+    }
+    for (const server of exports.inferredServers) {
+        server.update();
+    }
+    servers = (await Promise.all(exports.inferredServers.map(server => {
+        const projectInfo = server.projectInfo;
+        if (!projectInfo) {
+            return;
+        }
+        // Check if the file is in the project's directory
+        if (path.relative(projectInfo.currentDirectory, fileName).startsWith('..')) {
+            return;
+        }
+        return server;
+    }))).filter(server => !!server);
+    // Sort servers by directory
+    servers.sort((a, b) => b.projectInfo.currentDirectory.replace(/\\/g, '/').split('/').length
+        - a.projectInfo.currentDirectory.replace(/\\/g, '/').split('/').length);
+    if (servers.length) {
+        // Return the first server
+        return servers[0];
+    }
+}
+function sortTSConfigs(file, a, b) {
+    const inA = isFileInDir(file, path.dirname(a));
+    const inB = isFileInDir(file, path.dirname(b));
+    if (inA !== inB) {
+        const aWeight = inA ? 1 : 0;
+        const bWeight = inB ? 1 : 0;
+        return bWeight - aWeight;
+    }
+    const aLength = a.split('/').length;
+    const bLength = b.split('/').length;
+    return bLength - aLength;
+}
+function isFileInDir(fileName, dir) {
+    const relative = path.relative(dir, fileName);
+    return !!relative && !relative.startsWith('..') && !path.isAbsolute(relative);
+}
+//# sourceMappingURL=utils.js.map

package/package.json

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