@vue/typescript-plugin 2.1.10 → 2.2.0

package/lib/client.d.ts

@@ -6,11 +6,12 @@ export declare function collectExtractProps(...args: Parameters<typeof import('.
 export declare function getImportPathForFile(...args: Parameters<typeof import('./requests/getImportPathForFile.js')['getImportPathForFile']>): Promise<string | null | undefined>;
 export declare function getPropertiesAtLocation(...args: Parameters<typeof import('./requests/getPropertiesAtLocation.js')['getPropertiesAtLocation']>): Promise<string[] | null | undefined>;
 export declare function getQuickInfoAtPosition(...args: Parameters<typeof import('./requests/getQuickInfoAtPosition.js')['getQuickInfoAtPosition']>): Promise<string | null | undefined>;
-export declare function getComponentProps(...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentProps']>): Promise<{
+export declare function getComponentProps(fileName: string, componentName: string): Promise<{
     name: string;
-    commentMarkdown: string;
+    required?: true;
+    commentMarkdown?: string;
 }[] | null | undefined>;
 export declare function getComponentEvents(...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentEvents']>): Promise<string[] | null | undefined>;
 export declare function getTemplateContextProps(...args: Parameters<typeof import('./requests/componentInfos.js')['getTemplateContextProps']>): Promise<string[] | null | undefined>;
-export declare function getComponentNames(...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentNames']>): Promise<string[] | null | undefined>;
+export declare function getComponentNames(fileName: string): Promise<string[] | undefined>;
 export declare function getElementAttrs(...args: Parameters<typeof import('./requests/componentInfos.js')['getElementAttrs']>): Promise<string[] | null | undefined>;

package/lib/client.js

@@ -11,68 +11,50 @@ exports.getComponentNames = getComponentNames;
 exports.getElementAttrs = getElementAttrs;
 const utils_1 = require("./utils");
 function collectExtractProps(...args) {
-    return sendRequest({
-        type: 'collectExtractProps',
-        args,
-    });
+    return sendRequest('collectExtractProps', ...args);
 }
 async function getImportPathForFile(...args) {
-    return await sendRequest({
-        type: 'getImportPathForFile',
-        args,
-    });
+    return await sendRequest('getImportPathForFile', ...args);
 }
 async function getPropertiesAtLocation(...args) {
-    return await sendRequest({
-        type: 'getPropertiesAtLocation',
-        args,
-    });
+    return await sendRequest('getPropertiesAtLocation', ...args);
 }
 function getQuickInfoAtPosition(...args) {
-    return sendRequest({
-        type: 'getQuickInfoAtPosition',
-        args,
-    });
+    return sendRequest('getQuickInfoAtPosition', ...args);
 }
 // Component Infos
-function getComponentProps(...args) {
-    return sendRequest({
-        type: 'getComponentProps',
-        args,
-    });
+async function getComponentProps(fileName, componentName) {
+    const server = await (0, utils_1.getBestServer)(fileName);
+    if (!server) {
+        return;
+    }
+    return await server.getComponentProps(fileName, componentName);
 }
 function getComponentEvents(...args) {
-    return sendRequest({
-        type: 'getComponentEvents',
-        args,
-    });
+    return sendRequest('getComponentEvents', ...args);
 }
 function getTemplateContextProps(...args) {
-    return sendRequest({
-        type: 'getTemplateContextProps',
-        args,
-    });
+    return sendRequest('getTemplateContextProps', ...args);
 }
-function getComponentNames(...args) {
-    return sendRequest({
-        type: 'getComponentNames',
-        args,
-    });
+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);
 }
 function getElementAttrs(...args) {
-    return sendRequest({
-        type: 'getElementAttrs',
-        args,
-    });
+    return sendRequest('getElementAttrs', ...args);
 }
-async function sendRequest(request) {
-    const server = (await (0, utils_1.searchNamedPipeServerForFile)(request.args[0]));
+async function sendRequest(requestType, fileName, ...rest) {
+    const server = await (0, utils_1.getBestServer)(fileName);
     if (!server) {
-        console.warn('[Vue Named Pipe Client] No server found for', request.args[0]);
         return;
     }
-    const res = await (0, utils_1.sendRequestWorker)(request, server.socket);
-    server.socket.end();
-    return res;
+    return server.sendRequest(requestType, fileName, ...rest);
 }
 //# sourceMappingURL=client.js.map

package/lib/common.js

@@ -42,8 +42,8 @@ function getCompletionsAtPosition(vueOptions, getCompletionsAtPosition) {
         const result = getCompletionsAtPosition(fileName, position, options, formattingSettings);
         if (result) {
             // filter __VLS_
-            result.entries = result.entries.filter(entry => entry.name.indexOf('__VLS_') === -1
-                && (!entry.labelDetails?.description || entry.labelDetails.description.indexOf('__VLS_') === -1));
+            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) {
@@ -124,7 +124,7 @@ function getCodeFixesAtPosition(getCodeFixesAtPosition) {
     return (...args) => {
         let result = getCodeFixesAtPosition(...args);
         // filter __VLS_
-        result = result.filter(entry => entry.description.indexOf('__VLS_') === -1);
+        result = result.filter(entry => !entry.description.includes('__VLS_'));
         return result;
     };
 }
@@ -170,11 +170,12 @@ function getEncodedSemanticClassifications(ts, language, languageService, asScri
     return (filePath, span, format) => {
         const fileName = filePath.replace(windowsPathReg, '/');
         const result = getEncodedSemanticClassifications(fileName, span, format);
-        const file = language.scripts.get(asScriptId(fileName));
-        if (file?.generated?.root instanceof language_core_1.VueVirtualCode) {
-            const { template } = file.generated.root._sfc;
+        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 }, file.generated.root, template, {
+                for (const componentSpan of getComponentSpans.call({ typescript: ts, languageService }, root, template, {
                     start: span.start - template.startTagEnd,
                     length: span.length,
                 })) {

package/lib/requests/collectExtractProps.js

@@ -4,17 +4,21 @@ exports.collectExtractProps = collectExtractProps;
 const language_core_1 = require("@vue/language-core");
 function collectExtractProps(fileName, templateCodeRange) {
     const { typescript: ts, languageService, language, isTsPlugin, getFileId } = this;
-    const volarFile = language.scripts.get(getFileId(fileName));
-    if (!(volarFile?.generated?.root instanceof language_core_1.VueVirtualCode)) {
+    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 result = new Map();
     const program = languageService.getProgram();
     const sourceFile = program.getSourceFile(fileName);
     const checker = program.getTypeChecker();
-    const script = volarFile.generated?.languagePlugin.typescript?.getServiceScript(volarFile.generated.root);
+    const script = sourceScript.generated?.languagePlugin.typescript?.getServiceScript(root);
     const maps = script ? [...language.maps.forEach(script.code)].map(([_sourceScript, map]) => map) : [];
-    const sfc = volarFile.generated.root._sfc;
+    const sfc = root._sfc;
     sourceFile.forEachChild(function visit(node) {
         if (ts.isPropertyAccessExpression(node)
             && ts.isIdentifier(node.expression)
@@ -23,7 +27,7 @@ function collectExtractProps(fileName, templateCodeRange) {
             const { name } = node;
             for (const map of maps) {
                 let mapped = false;
-                for (const source of map.toSourceLocation(name.getEnd() - (isTsPlugin ? volarFile.snapshot.getLength() : 0))) {
+                for (const source of map.toSourceLocation(name.getEnd() - (isTsPlugin ? sourceScript.snapshot.getLength() : 0))) {
                     if (source[0] >= sfc.template.startTagEnd + templateCodeRange[0]
                         && source[0] <= sfc.template.startTagEnd + templateCodeRange[1]
                         && (0, language_core_1.isSemanticTokensEnabled)(source[1].data)) {

package/lib/requests/componentInfos.d.ts

@@ -1,9 +1,10 @@
 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, requiredOnly?: boolean): {
+export declare function getComponentProps(this: RequestContext, fileName: string, tag: string): {
     name: string;
-    commentMarkdown: 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;

package/lib/requests/componentInfos.js

@@ -8,7 +8,7 @@ exports._getComponentNames = _getComponentNames;
 exports.getElementAttrs = getElementAttrs;
 const vue = require("@vue/language-core");
 const shared_1 = require("@vue/shared");
-function getComponentProps(fileName, tag, requiredOnly = false) {
+function getComponentProps(fileName, tag) {
     const { typescript: ts, language, languageService, getFileId } = this;
     const volarFile = language.scripts.get(getFileId(fileName));
     if (!(volarFile?.generated?.root instanceof vue.VueVirtualCode)) {
@@ -22,11 +22,9 @@ function getComponentProps(fileName, tag, requiredOnly = false) {
         return [];
     }
     const name = tag.split('.');
-    let componentSymbol = components.type.getProperty(name[0]);
-    if (!componentSymbol) {
-        componentSymbol = components.type.getProperty((0, shared_1.camelize)(name[0]))
-            ?? components.type.getProperty((0, shared_1.capitalize)((0, shared_1.camelize)(name[0])));
-    }
+    let componentSymbol = components.type.getProperty(name[0])
+        ?? components.type.getProperty((0, shared_1.camelize)(name[0]))
+        ?? components.type.getProperty((0, shared_1.capitalize)((0, shared_1.camelize)(name[0])));
     if (!componentSymbol) {
         return [];
     }
@@ -47,11 +45,10 @@ function getComponentProps(fileName, tag, requiredOnly = false) {
             const propsType = checker.getTypeOfSymbolAtLocation(propParam, components.node);
             const props = propsType.getProperties();
             for (const prop of props) {
-                if (!requiredOnly || !(prop.flags & ts.SymbolFlags.Optional)) {
-                    const name = prop.name;
-                    const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
-                    result.set(name, { name, commentMarkdown });
-                }
+                const name = prop.name;
+                const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
+                const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags()) || undefined;
+                result.set(name, { name, required, commentMarkdown });
             }
         }
     }
@@ -65,11 +62,10 @@ function getComponentProps(fileName, tag, requiredOnly = false) {
                 if (prop.flags & ts.SymbolFlags.Method) { // #2443
                     continue;
                 }
-                if (!requiredOnly || !(prop.flags & ts.SymbolFlags.Optional)) {
-                    const name = prop.name;
-                    const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
-                    result.set(name, { name, commentMarkdown });
-                }
+                const name = prop.name;
+                const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
+                const commentMarkdown = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags()) || undefined;
+                result.set(name, { name, required, commentMarkdown });
             }
         }
     }
@@ -155,7 +151,7 @@ function getComponentNames(fileName) {
         ?.type
         ?.getProperties()
         .map(c => c.name)
-        .filter(entry => entry.indexOf('$') === -1 && !entry.startsWith('_'))
+        .filter(entry => !entry.includes('$') && !entry.startsWith('_'))
         ?? [];
 }
 function _getComponentNames(ts, tsLs, vueCode) {
@@ -163,7 +159,7 @@ function _getComponentNames(ts, tsLs, vueCode) {
         ?.type
         ?.getProperties()
         .map(c => c.name)
-        .filter(entry => entry.indexOf('$') === -1 && !entry.startsWith('_'))
+        .filter(entry => !entry.includes('$') && !entry.startsWith('_'))
         ?? [];
 }
 function getElementAttrs(fileName, tagName) {

package/lib/requests/types.d.ts

@@ -1,7 +1,7 @@
 import type { Language } from '@vue/language-core';
 import type * as ts from 'typescript';
 export interface RequestContext<T = any> {
-    typescript: typeof import('typescript');
+    typescript: typeof ts;
     languageService: ts.LanguageService;
     languageServiceHost: ts.LanguageServiceHost;
     language: Language<T>;

package/lib/server.d.ts

@@ -1,9 +1,22 @@
-import type { Language } from '@vue/language-core';
+import { Language } from '@vue/language-core';
 import type * as ts from 'typescript';
-export interface Request {
-    type: 'containsFile' | 'projectInfo' | 'collectExtractProps' | 'getImportPathForFile' | 'getPropertiesAtLocation' | 'getQuickInfoAtPosition' | 'getComponentProps' | 'getComponentEvents' | 'getTemplateContextProps' | 'getComponentNames' | 'getElementAttrs';
-    args: [fileName: string, ...rest: any];
-}
+export type RequestType = 'containsFile' | 'projectInfo' | 'collectExtractProps' | 'getImportPathForFile' | 'getPropertiesAtLocation' | 'getQuickInfoAtPosition' | 'subscribeComponentProps' | 'getComponentEvents' | 'getTemplateContextProps' | 'getElementAttrs';
+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;

package/lib/server.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startNamedPipeServer = startNamedPipeServer;
-const fs = require("fs");
-const net = require("net");
+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 componentInfos_1 = require("./requests/componentInfos");
 const getImportPathForFile_1 = require("./requests/getImportPathForFile");
@@ -10,82 +11,55 @@ const getPropertiesAtLocation_1 = require("./requests/getPropertiesAtLocation");
 const getQuickInfoAtPosition_1 = require("./requests/getQuickInfoAtPosition");
 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 => {
-        connection.on('data', data => {
-            const text = data.toString();
-            if (text === 'ping') {
-                connection.write('pong');
-                return;
-            }
-            const request = JSON.parse(text);
-            const fileName = request.args[0];
-            const requestContext = {
-                typescript: ts,
-                languageService: info.languageService,
-                languageServiceHost: info.languageServiceHost,
-                language: language,
-                isTsPlugin: true,
-                getFileId: (fileName) => fileName,
-            };
-            if (request.type === 'containsFile') {
-                sendResponse(info.project.containsFile(ts.server.toNormalizedPath(fileName)));
-            }
-            else if (request.type === 'projectInfo') {
-                sendResponse({
-                    name: info.project.getProjectName(),
-                    kind: info.project.projectKind,
-                    currentDirectory: info.project.getCurrentDirectory(),
-                });
-            }
-            else if (request.type === 'collectExtractProps') {
-                const result = collectExtractProps_1.collectExtractProps.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getImportPathForFile') {
-                const result = getImportPathForFile_1.getImportPathForFile.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getPropertiesAtLocation') {
-                const result = getPropertiesAtLocation_1.getPropertiesAtLocation.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getQuickInfoAtPosition') {
-                const result = getQuickInfoAtPosition_1.getQuickInfoAtPosition.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            // Component Infos
-            else if (request.type === 'getComponentProps') {
-                const result = componentInfos_1.getComponentProps.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getComponentEvents') {
-                const result = componentInfos_1.getComponentEvents.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getTemplateContextProps') {
-                const result = componentInfos_1.getTemplateContextProps.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getComponentNames') {
-                const result = componentInfos_1.getComponentNames.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else if (request.type === 'getElementAttrs') {
-                const result = componentInfos_1.getElementAttrs.apply(requestContext, request.args);
-                sendResponse(result);
-            }
-            else {
-                console.warn('[Vue Named Pipe Server] Unknown request type:', request.type);
+        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));
-        function sendResponse(data) {
-            connection.write(JSON.stringify(data ?? null) + '\n\n');
+        for (const [fileName, [componentNames, componentProps]] of currentData) {
+            notify(connection, 'componentNamesUpdated', fileName, Object.keys(componentNames));
+            for (const [name, props] of Object.entries(componentProps)) {
+                notify(connection, 'componentPropsUpdated', fileName, [name, props]);
+            }
         }
     });
-    for (let i = 0; i < 20; i++) {
-        const path = (0, utils_1.getNamedPipePath)(projectKind, i);
-        const socket = await (0, utils_1.connect)(path, 100);
+    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();
         }
@@ -98,6 +72,164 @@ async function startNamedPipeServer(ts, info, language, projectKind) {
             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 = componentInfos_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 = componentInfos_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 = componentInfos_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 componentInfos_1.getComponentEvents.apply(requestContext, args);
+        }
+        else if (requestType === 'getTemplateContextProps') {
+            return componentInfos_1.getTemplateContextProps.apply(requestContext, args);
+        }
+        else if (requestType === 'getElementAttrs') {
+            return componentInfos_1.getElementAttrs.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 => {

package/lib/utils.d.ts

@@ -1,16 +1,38 @@
-import * as net from 'net';
+import { FileMap } from '@vue/language-core';
+import * as net from 'node:net';
 import type * as ts from 'typescript';
-import type { ProjectInfo, Request } from './server';
+import type { NotificationData, ProjectInfo, RequestData } from './server';
 export { TypeScriptProjectHost } from '@volar/typescript';
-export declare const onSomePipeReadyCallbacks: (() => void)[];
-export declare function getNamedPipePath(projectKind: ts.server.ProjectKind.Configured | ts.server.ProjectKind.Inferred, key: number): string;
-export declare function getReadyNamedPipePaths(): {
-    configured: string[];
-    inferred: string[];
-};
-export declare function connect(namedPipePath: string, timeout?: number): Promise<net.Socket | "error" | "timeout">;
-export declare function searchNamedPipeServerForFile(fileName: string): Promise<{
-    socket: net.Socket;
-    projectInfo: ProjectInfo;
-} | undefined>;
-export declare function sendRequestWorker<T>(request: Request, socket: net.Socket): Promise<T | null | undefined>;
+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, {
+        name: string;
+        required?: true;
+        commentMarkdown?: string;
+    }[] | null>>;
+    constructor(kind: ts.server.ProjectKind, id: number);
+    containsFile(fileName: string): Promise<boolean | null | undefined> | undefined;
+    getComponentProps(fileName: string, tag: string): Promise<{
+        name: string;
+        required?: true;
+        commentMarkdown?: string;
+    }[] | 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

@@ -1,195 +1,232 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSomePipeReadyCallbacks = void 0;
-exports.getNamedPipePath = getNamedPipePath;
-exports.getReadyNamedPipePaths = getReadyNamedPipePaths;
-exports.connect = connect;
-exports.searchNamedPipeServerForFile = searchNamedPipeServerForFile;
-exports.sendRequestWorker = sendRequestWorker;
-const fs = require("fs");
-const net = require("net");
-const os = require("os");
-const path = require("path");
+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`;
-const toFullPath = (file) => {
-    if (platform === 'win32') {
-        return pipeDir + '\\' + file;
+    ? `\\\\.\\pipe\\`
+    : `/tmp/`;
+function getServerPath(kind, id) {
+    if (kind === 1) {
+        return `${pipeDir}vue-named-pipe-${version}-configured-${id}`;
     }
     else {
-        return pipeDir + '/' + file;
-    }
-};
-const configuredNamedPipePathPrefix = toFullPath(`vue-named-pipe-${version}-configured-`);
-const inferredNamedPipePathPrefix = toFullPath(`vue-named-pipe-${version}-inferred-`);
-const pipes = new Map();
-exports.onSomePipeReadyCallbacks = [];
-function waitingForNamedPipeServerReady(namedPipePath) {
-    const socket = net.connect(namedPipePath);
-    const start = Date.now();
-    socket.on('connect', () => {
-        console.log('[Vue Named Pipe Client] Connected:', namedPipePath, 'in', (Date.now() - start) + 'ms');
-        socket.write('ping');
-    });
-    socket.on('data', () => {
-        console.log('[Vue Named Pipe Client] Ready:', namedPipePath, 'in', (Date.now() - start) + 'ms');
-        pipes.set(namedPipePath, 'ready');
-        socket.end();
-        exports.onSomePipeReadyCallbacks.forEach(cb => cb());
-    });
-    socket.on('error', err => {
-        if (err.code === 'ECONNREFUSED') {
-            try {
-                console.log('[Vue Named Pipe Client] Deleting:', namedPipePath);
-                fs.promises.unlink(namedPipePath);
-            }
-            catch { }
-        }
-        pipes.delete(namedPipePath);
-        socket.end();
-    });
-    socket.on('timeout', () => {
-        pipes.delete(namedPipePath);
-        socket.end();
-    });
-}
-function getNamedPipePath(projectKind, key) {
-    return projectKind === 1
-        ? `${configuredNamedPipePathPrefix}${key}`
-        : `${inferredNamedPipePathPrefix}${key}`;
+        return `${pipeDir}vue-named-pipe-${version}-inferred-${id}`;
+    }
 }
-function getReadyNamedPipePaths() {
-    const configuredPipes = [];
-    const inferredPipes = [];
-    for (let i = 0; i < 20; i++) {
-        const configuredPipe = getNamedPipePath(1, i);
-        const inferredPipe = getNamedPipePath(0, i);
-        if (pipes.get(configuredPipe) === 'ready') {
-            configuredPipes.push(configuredPipe);
-        }
-        else if (!pipes.has(configuredPipe)) {
-            pipes.set(configuredPipe, 'unknown');
-            waitingForNamedPipeServerReady(configuredPipe);
+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);
         }
-        if (pipes.get(inferredPipe) === 'ready') {
-            inferredPipes.push(inferredPipe);
+    }
+    async getComponentProps(fileName, tag) {
+        const componentAndProps = this.componentNamesAndProps.get(fileName);
+        if (!componentAndProps) {
+            return;
         }
-        else if (!pipes.has(inferredPipe)) {
-            pipes.set(inferredPipe, 'unknown');
-            waitingForNamedPipeServerReady(inferredPipe);
+        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);
     }
-    return {
-        configured: configuredPipes,
-        inferred: inferredPipes,
-    };
-}
-function connect(namedPipePath, timeout) {
-    return new Promise(resolve => {
-        const socket = net.connect(namedPipePath);
-        if (timeout) {
-            socket.setTimeout(timeout);
+    update() {
+        if (!this.connecting && !this.projectInfo) {
+            this.connecting = true;
+            this.connect();
         }
-        const onConnect = () => {
-            cleanup();
-            resolve(socket);
-        };
-        const onError = (err) => {
+    }
+    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('[Vue Named Pipe Client] Deleting:', namedPipePath);
-                    fs.promises.unlink(namedPipePath);
+                    console.log('Deleteing invalid named pipe file:', this.path);
+                    fs.promises.unlink(this.path);
                 }
                 catch { }
             }
-            pipes.delete(namedPipePath);
-            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);
-    });
+            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);
+        });
+    }
 }
-async function searchNamedPipeServerForFile(fileName) {
-    const paths = await getReadyNamedPipePaths();
-    const configuredServers = (await Promise.all(paths.configured.map(async (path) => {
-        // Find existing servers
-        const socket = await connect(path);
-        if (typeof socket !== 'object') {
+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;
         }
-        // Find servers containing the current file
-        const containsFile = await sendRequestWorker({ type: 'containsFile', args: [fileName] }, socket);
+        const containsFile = await server.containsFile(fileName);
         if (!containsFile) {
-            socket.end();
-            return;
-        }
-        // Get project info for each server
-        const projectInfo = await sendRequestWorker({ type: 'projectInfo', args: [fileName] }, socket);
-        if (!projectInfo) {
-            socket.end();
             return;
         }
-        return {
-            socket,
-            projectInfo,
-        };
+        return server;
     }))).filter(server => !!server);
     // Sort servers by tsconfig
-    configuredServers.sort((a, b) => sortTSConfigs(fileName, a.projectInfo.name, b.projectInfo.name));
-    if (configuredServers.length) {
-        // Close all but the first server
-        for (let i = 1; i < configuredServers.length; i++) {
-            configuredServers[i].socket.end();
-        }
+    servers.sort((a, b) => sortTSConfigs(fileName, a.projectInfo.name, b.projectInfo.name));
+    if (servers.length) {
         // Return the first server
-        return configuredServers[0];
+        return servers[0];
     }
-    const inferredServers = (await Promise.all(paths.inferred.map(async (namedPipePath) => {
-        // Find existing servers
-        const socket = await connect(namedPipePath);
-        if (typeof socket !== 'object') {
-            return;
-        }
-        // Get project info for each server
-        const projectInfo = await sendRequestWorker({ type: 'projectInfo', args: [fileName] }, socket);
+    for (const server of exports.inferredServers) {
+        server.update();
+    }
+    servers = (await Promise.all(exports.inferredServers.map(server => {
+        const projectInfo = server.projectInfo;
         if (!projectInfo) {
-            socket.end();
             return;
         }
         // Check if the file is in the project's directory
-        if (!path.relative(projectInfo.currentDirectory, fileName).startsWith('..')) {
-            return {
-                socket,
-                projectInfo,
-            };
+        if (path.relative(projectInfo.currentDirectory, fileName).startsWith('..')) {
+            return;
         }
+        return server;
     }))).filter(server => !!server);
     // Sort servers by directory
-    inferredServers.sort((a, b) => b.projectInfo.currentDirectory.replace(/\\/g, '/').split('/').length
+    servers.sort((a, b) => b.projectInfo.currentDirectory.replace(/\\/g, '/').split('/').length
         - a.projectInfo.currentDirectory.replace(/\\/g, '/').split('/').length);
-    if (inferredServers.length) {
-        // Close all but the first server
-        for (let i = 1; i < inferredServers.length; i++) {
-            inferredServers[i].socket.end();
-        }
+    if (servers.length) {
         // Return the first server
-        return inferredServers[0];
+        return servers[0];
     }
 }
 function sortTSConfigs(file, a, b) {
@@ -208,37 +245,4 @@ function isFileInDir(fileName, dir) {
     const relative = path.relative(dir, fileName);
     return !!relative && !relative.startsWith('..') && !path.isAbsolute(relative);
 }
-function sendRequestWorker(request, socket) {
-    return new Promise(resolve => {
-        let dataChunks = [];
-        const onData = (chunk) => {
-            dataChunks.push(chunk);
-            const data = Buffer.concat(dataChunks);
-            const text = data.toString();
-            if (text.endsWith('\n\n')) {
-                let json = null;
-                try {
-                    json = JSON.parse(text);
-                }
-                catch (e) {
-                    console.error('[Vue Named Pipe Client] Failed to parse response:', text);
-                }
-                cleanup();
-                resolve(json);
-            }
-        };
-        const onError = (err) => {
-            console.error('[Vue Named Pipe Client] Error:', err.message);
-            cleanup();
-            resolve(undefined);
-        };
-        const cleanup = () => {
-            socket.off('data', onData);
-            socket.off('error', onError);
-        };
-        socket.on('data', onData);
-        socket.on('error', onError);
-        socket.write(JSON.stringify(request));
-    });
-}
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/typescript-plugin",
-	"version": "2.1.10",
+	"version": "2.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",
@@ -13,12 +13,12 @@
 		"directory": "packages/typescript-plugin"
 	},
 	"dependencies": {
-		"@volar/typescript": "~2.4.8",
-		"@vue/language-core": "2.1.10",
+		"@volar/typescript": "~2.4.11",
+		"@vue/language-core": "2.2.0",
 		"@vue/shared": "^3.5.0"
 	},
 	"devDependencies": {
 		"@types/node": "latest"
 	},
-	"gitHead": "b0af30caee2f8dfb1a8393c1b400f38e31fa4883"
+	"gitHead": "5babca774658d4b9afbe877ac7c8cafdaecf2c3e"
 }