@vue/language-service 2.0.0 → 2.0.1

package/lib/plugins/vue-autoinsert-parentheses.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const vue_autoinsert_dotvalue_1 = require("./vue-autoinsert-dotvalue");
+function create(ts) {
+    return {
+        name: 'vue-autoinsert-parentheses',
+        create(context) {
+            return {
+                async provideAutoInsertionEdit(document, position, lastChange) {
+                    const enabled = await context.env.getConfiguration?.('vue.autoInsert.parentheses') ?? false;
+                    if (!enabled)
+                        return;
+                    if (!(0, vue_autoinsert_dotvalue_1.isCharacterTyping)(document, lastChange))
+                        return;
+                    const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
+                    if (virtualCode?.id !== 'template_format')
+                        return;
+                    const offset = document.offsetAt(position);
+                    for (const mappedRange of virtualCode.mappings) {
+                        const generatedCodeEnd = mappedRange.generatedOffsets[mappedRange.generatedOffsets.length - 1]
+                            + mappedRange.lengths[mappedRange.lengths.length - 1];
+                        if (generatedCodeEnd === offset) {
+                            const text = document.getText().substring(mappedRange.generatedOffsets[0], generatedCodeEnd);
+                            const ast = ts.createSourceFile('', text, ts.ScriptTarget.Latest);
+                            if (ast.statements.length === 1) {
+                                const statement = ast.statements[0];
+                                if (ts.isExpressionStatement(statement)
+                                    && ((ts.isAsExpression(statement.expression)
+                                        && ts.isTypeReferenceNode(statement.expression.type)
+                                        && ts.isIdentifier(statement.expression.type.typeName)
+                                        && statement.expression.type.typeName.text)
+                                        || (ts.isBinaryExpression(statement.expression)
+                                            && statement.expression.right.getText(ast)
+                                            && statement.expression.operatorToken.kind === ts.SyntaxKind.InstanceOfKeyword)
+                                        || (ts.isTypeOfExpression(statement.expression)
+                                            && statement.expression.expression.getText(ast)))) {
+                                    // https://code.visualstudio.com/docs/editor/userdefinedsnippets#_grammar
+                                    const escapedText = text
+                                        .replaceAll('\\', '\\\\')
+                                        .replaceAll('$', '\\$')
+                                        .replaceAll('}', '\\}');
+                                    return {
+                                        range: {
+                                            start: document.positionAt(mappedRange.generatedOffsets[0]),
+                                            end: document.positionAt(generatedCodeEnd),
+                                        },
+                                        newText: '(' + escapedText + '$0' + ')',
+                                    };
+                                }
+                            }
+                        }
+                    }
+                },
+            };
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-autoinsert-parentheses.js.map

package/lib/plugins/vue-autoinsert-space.d.ts

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

package/lib/plugins/vue-autoinsert-space.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+function create() {
+    return {
+        name: 'vue-autoinsert-space',
+        create(context) {
+            return {
+                async provideAutoInsertionEdit(document, _, lastChange) {
+                    if (document.languageId === 'html' || document.languageId === 'jade') {
+                        const enabled = await context.env.getConfiguration?.('vue.autoInsert.bracketSpacing') ?? true;
+                        if (!enabled)
+                            return;
+                        if (lastChange.text === '{}'
+                            && document.getText({
+                                start: { line: lastChange.range.start.line, character: lastChange.range.start.character - 1 },
+                                end: { line: lastChange.range.start.line, character: lastChange.range.start.character + 3 }
+                            }) === '{{}}') {
+                            return {
+                                newText: ` $0 `,
+                                range: {
+                                    start: { line: lastChange.range.start.line, character: lastChange.range.start.character + 1 },
+                                    end: { line: lastChange.range.start.line, character: lastChange.range.start.character + 1 }
+                                },
+                            };
+                        }
+                    }
+                },
+            };
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-autoinsert-space.js.map

package/lib/plugins/vue-codelens-references.d.ts

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

package/lib/plugins/vue-codelens-references.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const language_core_1 = require("@vue/language-core");
+function create() {
+    return {
+        name: 'vue-codelens-references',
+        create(context) {
+            return {
+                provideReferencesCodeLensRanges(document) {
+                    return worker(document.uri, virtualCode => {
+                        const result = [];
+                        for (const map of context.documents.getMaps(virtualCode) ?? []) {
+                            for (const mapping of map.map.mappings) {
+                                if (!mapping.data.__referencesCodeLens)
+                                    continue;
+                                result.push({
+                                    start: document.positionAt(mapping.generatedOffsets[0]),
+                                    end: document.positionAt(mapping.generatedOffsets[mapping.generatedOffsets.length - 1]
+                                        + mapping.lengths[mapping.lengths.length - 1]),
+                                });
+                            }
+                        }
+                        return result;
+                    });
+                },
+            };
+            function worker(uri, callback) {
+                const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(uri);
+                if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || !sourceFile)
+                    return;
+                return callback(virtualCode, sourceFile);
+            }
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-codelens-references.js.map

package/lib/plugins/vue-directive-comments.d.ts

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

package/lib/plugins/vue-directive-comments.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const cmds = [
+    'vue-ignore',
+    'vue-skip',
+    'vue-expect-error',
+];
+const directiveCommentReg = /<!--\s*@/;
+function create() {
+    return {
+        name: 'vue-directive-comments',
+        triggerCharacters: ['@'],
+        create() {
+            return {
+                provideCompletionItems(document, position) {
+                    if (document.languageId !== 'html')
+                        return;
+                    const line = document.getText({ start: { line: position.line, character: 0 }, end: position });
+                    const cmdStart = line.match(directiveCommentReg);
+                    if (!cmdStart)
+                        return;
+                    const startIndex = cmdStart.index + cmdStart[0].length;
+                    const remainText = line.substring(startIndex);
+                    const result = [];
+                    for (const cmd of cmds) {
+                        let match = true;
+                        for (let i = 0; i < remainText.length; i++) {
+                            if (remainText[i] !== cmd[i]) {
+                                console.log(JSON.stringify(remainText[i]), JSON.stringify(cmd[i]));
+                                match = false;
+                                break;
+                            }
+                        }
+                        if (match) {
+                            result.push({
+                                label: '@' + cmd,
+                                textEdit: {
+                                    range: {
+                                        start: {
+                                            line: position.line,
+                                            character: startIndex - 1,
+                                        },
+                                        end: position,
+                                    },
+                                    newText: '@' + cmd,
+                                },
+                            });
+                        }
+                    }
+                    return {
+                        isIncomplete: false,
+                        items: result,
+                    };
+                },
+            };
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-directive-comments.js.map

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

@@ -0,0 +1,2 @@
+import { ServicePlugin } from '../types';
+export declare function create(ts: typeof import('typescript')): ServicePlugin;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const language_core_1 = require("@vue/language-core");
+const shared_1 = require("@vue/shared");
+const path = require("path-browserify");
+const vue_extract_file_1 = require("../plugins/vue-extract-file");
+const types_1 = require("../types");
+function create(ts) {
+    return {
+        name: 'vue-document-drop',
+        create(context) {
+            let casing = types_1.TagNameCasing.Pascal; // TODO
+            return {
+                async provideDocumentDropEdits(document, _position, dataTransfer) {
+                    if (document.languageId !== 'html')
+                        return;
+                    const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
+                    const vueVirtualCode = sourceFile?.generated?.code;
+                    if (!virtualCode || !(vueVirtualCode instanceof language_core_1.VueGeneratedCode))
+                        return;
+                    let importUri;
+                    for (const [mimeType, item] of dataTransfer) {
+                        if (mimeType === 'text/uri-list') {
+                            importUri = item.value;
+                        }
+                    }
+                    if (!importUri?.endsWith('.vue'))
+                        return;
+                    let baseName = importUri.substring(importUri.lastIndexOf('/') + 1);
+                    baseName = baseName.substring(0, baseName.lastIndexOf('.'));
+                    const newName = (0, shared_1.capitalize)((0, shared_1.camelize)(baseName));
+                    const { sfc } = vueVirtualCode;
+                    const script = sfc.scriptSetup ?? sfc.script;
+                    if (!script)
+                        return;
+                    const additionalEdit = {};
+                    const code = [...(0, language_core_1.forEachEmbeddedCode)(vueVirtualCode)].find(code => code.id === (sfc.scriptSetup ? 'scriptSetupFormat' : 'scriptFormat'));
+                    const lastImportNode = (0, vue_extract_file_1.getLastImportNode)(ts, script.ast);
+                    let importPath = path.relative(path.dirname(document.uri), importUri)
+                        || importUri.substring(importUri.lastIndexOf('/') + 1);
+                    if (!importPath.startsWith('./') && !importPath.startsWith('../')) {
+                        importPath = './' + importPath;
+                    }
+                    additionalEdit.changes ??= {};
+                    additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)] = [];
+                    additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)].push({
+                        range: lastImportNode ? {
+                            start: script.ast.getLineAndCharacterOfPosition(lastImportNode.end),
+                            end: script.ast.getLineAndCharacterOfPosition(lastImportNode.end),
+                        } : {
+                            start: script.ast.getLineAndCharacterOfPosition(0),
+                            end: script.ast.getLineAndCharacterOfPosition(0),
+                        },
+                        newText: `\nimport ${newName} from '${importPath}'`
+                            + (lastImportNode ? '' : '\n'),
+                    });
+                    if (sfc.script) {
+                        const edit = (0, vue_extract_file_1.createAddComponentToOptionEdit)(ts, sfc.script.ast, newName);
+                        if (edit) {
+                            additionalEdit.changes[context.documents.getVirtualCodeUri(sourceFile.id, code.id)].push({
+                                range: {
+                                    start: document.positionAt(edit.range.start),
+                                    end: document.positionAt(edit.range.end),
+                                },
+                                newText: edit.newText,
+                            });
+                        }
+                    }
+                    return {
+                        insertText: `<${casing === types_1.TagNameCasing.Kebab ? (0, shared_1.hyphenate)(newName) : newName}$0 />`,
+                        insertTextFormat: 2,
+                        additionalEdit,
+                    };
+                },
+            };
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-document-drop.js.map

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

@@ -0,0 +1,8 @@
+import type { ServicePlugin } from '@volar/language-service';
+import type * as ts from 'typescript';
+export declare function create(ts: typeof import('typescript')): ServicePlugin;
+export declare function getLastImportNode(ts: typeof import('typescript'), sourceFile: ts.SourceFile): ts.Node | undefined;
+export declare function createAddComponentToOptionEdit(ts: typeof import('typescript'), ast: ts.SourceFile, componentName: string): {
+    range: import("@vue/language-core").TextRange;
+    newText: string;
+} | undefined;

package/lib/plugins/vue-extract-file.js

@@ -0,0 +1,258 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAddComponentToOptionEdit = exports.getLastImportNode = exports.create = void 0;
+const language_core_1 = require("@vue/language-core");
+const client_1 = require("@vue/typescript-plugin/lib/client");
+const unicodeReg = /\\u/g;
+function create(ts) {
+    return {
+        name: 'vue-extract-file',
+        create(context) {
+            return {
+                async provideCodeActions(document, range, _context) {
+                    const startOffset = document.offsetAt(range.start);
+                    const endOffset = document.offsetAt(range.end);
+                    if (startOffset === endOffset) {
+                        return;
+                    }
+                    const [code, vueCode] = context.documents.getVirtualCodeByUri(document.uri);
+                    if (!(vueCode?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template')
+                        return;
+                    const { sfc } = vueCode.generated.code;
+                    const script = sfc.scriptSetup ?? sfc.script;
+                    if (!sfc.template || !script)
+                        return;
+                    const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template);
+                    if (!templateCodeRange)
+                        return;
+                    return [
+                        {
+                            title: 'Extract into new dumb component',
+                            kind: 'refactor.move.newFile.dumb',
+                            data: {
+                                uri: document.uri,
+                                range: [startOffset, endOffset],
+                                newName: 'NewComponent',
+                            },
+                        },
+                    ];
+                },
+                async resolveCodeAction(codeAction) {
+                    const { uri, range, newName } = codeAction.data;
+                    const [startOffset, endOffset] = range;
+                    const [code, sourceFile] = context.documents.getVirtualCodeByUri(uri);
+                    if (!(sourceFile?.generated?.code instanceof language_core_1.VueGeneratedCode) || code?.id !== 'template')
+                        return codeAction;
+                    const document = context.documents.get(uri, code.languageId, code.snapshot);
+                    const sfcDocument = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
+                    const { sfc } = sourceFile.generated.code;
+                    const script = sfc.scriptSetup ?? sfc.script;
+                    if (!sfc.template || !script)
+                        return codeAction;
+                    const templateCodeRange = selectTemplateCode(startOffset, endOffset, sfc.template);
+                    if (!templateCodeRange)
+                        return codeAction;
+                    const toExtract = await (0, client_1.collectExtractProps)(sourceFile.generated.code.fileName, templateCodeRange) ?? [];
+                    if (!toExtract)
+                        return codeAction;
+                    const templateInitialIndent = await context.env.getConfiguration('vue.format.template.initialIndent') ?? true;
+                    const scriptInitialIndent = await context.env.getConfiguration('vue.format.script.initialIndent') ?? false;
+                    const newUri = sfcDocument.uri.substring(0, sfcDocument.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
+                    const lastImportNode = getLastImportNode(ts, script.ast);
+                    let newFileTags = [];
+                    newFileTags.push(constructTag('template', [], templateInitialIndent, sfc.template.content.substring(templateCodeRange[0], templateCodeRange[1])));
+                    if (toExtract.length) {
+                        newFileTags.push(constructTag('script', ['setup', 'lang="ts"'], scriptInitialIndent, generateNewScriptContents()));
+                    }
+                    if (sfc.template.startTagEnd > script.startTagEnd) {
+                        newFileTags = newFileTags.reverse();
+                    }
+                    const templateEdits = [
+                        {
+                            range: {
+                                start: document.positionAt(templateCodeRange[0]),
+                                end: document.positionAt(templateCodeRange[1]),
+                            },
+                            newText: generateReplaceTemplate(),
+                        },
+                    ];
+                    const sfcEdits = [
+                        {
+                            range: lastImportNode ? {
+                                start: sfcDocument.positionAt(script.startTagEnd + lastImportNode.end),
+                                end: sfcDocument.positionAt(script.startTagEnd + lastImportNode.end),
+                            } : {
+                                start: sfcDocument.positionAt(script.startTagEnd),
+                                end: sfcDocument.positionAt(script.startTagEnd),
+                            },
+                            newText: `\nimport ${newName} from './${newName}.vue'`,
+                        },
+                    ];
+                    if (sfc.script) {
+                        const edit = createAddComponentToOptionEdit(ts, sfc.script.ast, newName);
+                        if (edit) {
+                            sfcEdits.push({
+                                range: {
+                                    start: sfcDocument.positionAt(sfc.script.startTagEnd + edit.range.start),
+                                    end: sfcDocument.positionAt(sfc.script.startTagEnd + edit.range.end),
+                                },
+                                newText: edit.newText,
+                            });
+                        }
+                    }
+                    return {
+                        ...codeAction,
+                        edit: {
+                            documentChanges: [
+                                // editing template virtual document
+                                {
+                                    textDocument: {
+                                        uri: document.uri,
+                                        version: null,
+                                    },
+                                    edits: templateEdits,
+                                },
+                                // editing vue sfc
+                                {
+                                    textDocument: {
+                                        uri: sourceFile.id,
+                                        version: null,
+                                    },
+                                    edits: sfcEdits,
+                                },
+                                // creating new file with content
+                                {
+                                    uri: newUri,
+                                    kind: 'create',
+                                },
+                                {
+                                    textDocument: {
+                                        uri: newUri,
+                                        version: null,
+                                    },
+                                    edits: [
+                                        {
+                                            range: {
+                                                start: { line: 0, character: 0 },
+                                                end: { line: 0, character: 0 },
+                                            },
+                                            newText: newFileTags.join('\n'),
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    };
+                    function generateNewScriptContents() {
+                        const lines = [];
+                        const props = toExtract.filter(p => !p.model);
+                        const models = toExtract.filter(p => p.model);
+                        if (props.length) {
+                            lines.push(`defineProps<{ \n\t${props.map(p => `${p.name}: ${p.type};`).join('\n\t')}\n}>()`);
+                        }
+                        for (const model of models) {
+                            lines.push(`const ${model.name} = defineModel<${model.type}>('${model.name}', { required: true })`);
+                        }
+                        return lines.join('\n');
+                    }
+                    function generateReplaceTemplate() {
+                        const props = toExtract.filter(p => !p.model);
+                        const models = toExtract.filter(p => p.model);
+                        return [
+                            `<${newName}`,
+                            ...props.map(p => `:${p.name}="${p.name}"`),
+                            ...models.map(p => `v-model:${p.name}="${p.name}"`),
+                            `/>`,
+                        ].join(' ');
+                    }
+                },
+            };
+        },
+    };
+}
+exports.create = create;
+function selectTemplateCode(startOffset, endOffset, templateBlock) {
+    const insideNodes = [];
+    templateBlock.ast?.children.forEach(function visit(node) {
+        if (node.loc.start.offset >= startOffset
+            && node.loc.end.offset <= endOffset) {
+            insideNodes.push(node);
+        }
+        if ('children' in node) {
+            node.children.forEach(node => {
+                if (typeof node === 'object') {
+                    visit(node);
+                }
+            });
+        }
+        else if ('branches' in node) {
+            node.branches.forEach(visit);
+        }
+        else if ('content' in node) {
+            if (typeof node.content === 'object') {
+                visit(node.content);
+            }
+        }
+    });
+    if (insideNodes.length) {
+        const first = insideNodes.sort((a, b) => a.loc.start.offset - b.loc.start.offset)[0];
+        const last = insideNodes.sort((a, b) => b.loc.end.offset - a.loc.end.offset)[0];
+        return [first.loc.start.offset, last.loc.end.offset];
+    }
+}
+function constructTag(name, attributes, initialIndent, content) {
+    if (initialIndent)
+        content = content.split('\n').map(line => `\t${line}`).join('\n');
+    const attributesString = attributes.length ? ` ${attributes.join(' ')}` : '';
+    return `<${name}${attributesString}>\n${content}\n</${name}>\n`;
+}
+function getLastImportNode(ts, sourceFile) {
+    let lastImportNode;
+    for (const statement of sourceFile.statements) {
+        if (ts.isImportDeclaration(statement)) {
+            lastImportNode = statement;
+        }
+        else {
+            break;
+        }
+    }
+    return lastImportNode;
+}
+exports.getLastImportNode = getLastImportNode;
+function createAddComponentToOptionEdit(ts, ast, componentName) {
+    const exportDefault = language_core_1.scriptRanges.parseScriptRanges(ts, ast, false, true).exportDefault;
+    if (!exportDefault)
+        return;
+    // https://github.com/microsoft/TypeScript/issues/36174
+    const printer = ts.createPrinter();
+    if (exportDefault.componentsOption && exportDefault.componentsOptionNode) {
+        const newNode = {
+            ...exportDefault.componentsOptionNode,
+            properties: [
+                ...exportDefault.componentsOptionNode.properties,
+                ts.factory.createShorthandPropertyAssignment(componentName),
+            ],
+        };
+        const printText = printer.printNode(ts.EmitHint.Expression, newNode, ast);
+        return {
+            range: exportDefault.componentsOption,
+            newText: unescape(printText.replace(unicodeReg, '%u')),
+        };
+    }
+    else if (exportDefault.args && exportDefault.argsNode) {
+        const newNode = {
+            ...exportDefault.argsNode,
+            properties: [
+                ...exportDefault.argsNode.properties,
+                ts.factory.createShorthandPropertyAssignment(`components: { ${componentName} }`),
+            ],
+        };
+        const printText = printer.printNode(ts.EmitHint.Expression, newNode, ast);
+        return {
+            range: exportDefault.args,
+            newText: unescape(printText.replace(unicodeReg, '%u')),
+        };
+    }
+}
+exports.createAddComponentToOptionEdit = createAddComponentToOptionEdit;
+//# sourceMappingURL=vue-extract-file.js.map

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

@@ -0,0 +1,7 @@
+import type { ServicePlugin } from '@volar/language-service';
+import * as vue from '@vue/language-core';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+export interface Provide {
+    'vue/vueFile': (document: TextDocument) => vue.VueGeneratedCode | undefined;
+}
+export declare function create(): ServicePlugin;