@vue/language-service 1.9.0-alpha.3 → 2.0.1

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;

package/lib/plugins/vue-sfc.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const vue = require("@vue/language-core");
+const volar_service_html_1 = require("volar-service-html");
+const html = require("vscode-html-languageservice");
+const data_1 = require("./data");
+let sfcDataProvider;
+function create() {
+    return {
+        name: 'vue-sfc',
+        create(context) {
+            const htmlPlugin = (0, volar_service_html_1.create)({
+                documentSelector: ['vue'],
+                useCustomDataProviders: false,
+            }).create(context);
+            const htmlLanguageService = htmlPlugin.provide['html/languageService']();
+            sfcDataProvider ??= html.newHTMLDataProvider('vue', (0, data_1.loadLanguageBlocks)(context.env.locale ?? 'en'));
+            htmlLanguageService.setDataProviders(false, [sfcDataProvider]);
+            return {
+                ...htmlPlugin,
+                provide: {
+                    'vue/vueFile': document => {
+                        return worker(document, (vueFile) => {
+                            return vueFile;
+                        });
+                    },
+                },
+                async resolveEmbeddedCodeFormattingOptions(code, options) {
+                    const sourceFile = context.language.files.getByVirtualCode(code);
+                    if (sourceFile.generated?.code instanceof vue.VueGeneratedCode) {
+                        if (code.id === 'scriptFormat' || code.id === 'scriptSetupFormat') {
+                            if (await context.env.getConfiguration?.('vue.format.script.initialIndent') ?? false) {
+                                options.initialIndentLevel++;
+                            }
+                        }
+                        else if (code.id.startsWith('style_')) {
+                            if (await context.env.getConfiguration?.('vue.format.style.initialIndent') ?? false) {
+                                options.initialIndentLevel++;
+                            }
+                        }
+                        else if (code.id === 'template') {
+                            if (await context.env.getConfiguration?.('vue.format.template.initialIndent') ?? true) {
+                                options.initialIndentLevel++;
+                            }
+                        }
+                    }
+                    return options;
+                },
+                provideDocumentLinks: undefined,
+                provideDocumentSymbols(document) {
+                    return worker(document, (vueSourceFile) => {
+                        const result = [];
+                        const descriptor = vueSourceFile.sfc;
+                        if (descriptor.template) {
+                            result.push({
+                                name: 'template',
+                                kind: 2,
+                                range: {
+                                    start: document.positionAt(descriptor.template.start),
+                                    end: document.positionAt(descriptor.template.end),
+                                },
+                                selectionRange: {
+                                    start: document.positionAt(descriptor.template.start),
+                                    end: document.positionAt(descriptor.template.startTagEnd),
+                                },
+                            });
+                        }
+                        if (descriptor.script) {
+                            result.push({
+                                name: 'script',
+                                kind: 2,
+                                range: {
+                                    start: document.positionAt(descriptor.script.start),
+                                    end: document.positionAt(descriptor.script.end),
+                                },
+                                selectionRange: {
+                                    start: document.positionAt(descriptor.script.start),
+                                    end: document.positionAt(descriptor.script.startTagEnd),
+                                },
+                            });
+                        }
+                        if (descriptor.scriptSetup) {
+                            result.push({
+                                name: 'script setup',
+                                kind: 2,
+                                range: {
+                                    start: document.positionAt(descriptor.scriptSetup.start),
+                                    end: document.positionAt(descriptor.scriptSetup.end),
+                                },
+                                selectionRange: {
+                                    start: document.positionAt(descriptor.scriptSetup.start),
+                                    end: document.positionAt(descriptor.scriptSetup.startTagEnd),
+                                },
+                            });
+                        }
+                        for (const style of descriptor.styles) {
+                            let name = 'style';
+                            if (style.scoped)
+                                name += ' scoped';
+                            if (style.module)
+                                name += ' module';
+                            result.push({
+                                name,
+                                kind: 2,
+                                range: {
+                                    start: document.positionAt(style.start),
+                                    end: document.positionAt(style.end),
+                                },
+                                selectionRange: {
+                                    start: document.positionAt(style.start),
+                                    end: document.positionAt(style.startTagEnd),
+                                },
+                            });
+                        }
+                        for (const customBlock of descriptor.customBlocks) {
+                            result.push({
+                                name: `${customBlock.type}`,
+                                kind: 2,
+                                range: {
+                                    start: document.positionAt(customBlock.start),
+                                    end: document.positionAt(customBlock.end),
+                                },
+                                selectionRange: {
+                                    start: document.positionAt(customBlock.start),
+                                    end: document.positionAt(customBlock.startTagEnd),
+                                },
+                            });
+                        }
+                        return result;
+                    });
+                },
+                provideDocumentFormattingEdits(document, range, options) {
+                    return worker(document, async (vueCode) => {
+                        const formatSettings = await context.env.getConfiguration?.('html.format') ?? {};
+                        const blockTypes = ['template', 'script', 'style'];
+                        for (const customBlock of vueCode.sfc.customBlocks) {
+                            blockTypes.push(customBlock.type);
+                        }
+                        return htmlLanguageService.format(document, range, {
+                            ...options,
+                            ...formatSettings,
+                            unformatted: '',
+                            contentUnformatted: blockTypes.join(','),
+                            extraLiners: blockTypes.join(','),
+                            endWithNewline: options.insertFinalNewline ? true
+                                : options.trimFinalNewlines ? false
+                                    : document.getText().endsWith('\n'),
+                        });
+                    });
+                },
+            };
+            function worker(document, callback) {
+                const [vueFile] = context.documents.getVirtualCodeByUri(document.uri);
+                if (vueFile instanceof vue.VueGeneratedCode) {
+                    return callback(vueFile);
+                }
+            }
+        },
+    };
+}
+exports.create = create;
+//# sourceMappingURL=vue-sfc.js.map

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

@@ -0,0 +1,3 @@
+import type { ServiceEnvironment } from '@volar/language-service';
+import { ServicePlugin, VueCompilerOptions } from '../types';
+export declare function create(mode: 'html' | 'pug', ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions): ServicePlugin;