@volar/vue-typescript - npm Package Compare versions

Comparing version 0.36.1 to 0.37.0

out/index.d.ts

@@ -9,3 +9,1 @@ export * from './utils/sourceMaps';
 export * as tsShared from './utils/ts';
-export { default as useHtmlPlugin } from './plugins/html';
-export { default as usePugPlugin } from './plugins/pug';

out/index.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePugPlugin = exports.useHtmlPlugin = exports.tsShared = exports.localTypes = void 0;
+exports.tsShared = exports.localTypes = void 0;
 __exportStar(require("./utils/sourceMaps"), exports);
@@ -27,6 +27,2 @@ __exportStar(require("./utils/string"), exports);
 exports.tsShared = require("./utils/ts");
-var html_1 = require("./plugins/html");
-Object.defineProperty(exports, "useHtmlPlugin", { enumerable: true, get: function () { return html_1.default; } });
-var pug_1 = require("./plugins/pug");
-Object.defineProperty(exports, "usePugPlugin", { enumerable: true, get: function () { return pug_1.default; } });
 //# sourceMappingURL=index.js.map

out/plugins/empty.d.ts

@@ -1,2 +0,2 @@
-import { VueLanguagePlugin } from '../typescriptRuntime';
+import { VueLanguagePlugin } from '../vueFile';
 export default function (): VueLanguagePlugin;

out/plugins/html.d.ts

@@ -1,2 +0,2 @@
-import { VueLanguagePlugin } from "../typescriptRuntime";
+import { VueLanguagePlugin } from '../vueFile';
 export default function (): VueLanguagePlugin;

out/plugins/pug.d.ts

@@ -1,2 +0,2 @@
-import { VueLanguagePlugin } from '../typescriptRuntime';
+import { VueLanguagePlugin } from '../vueFile';
 export default function (): VueLanguagePlugin;

out/types.d.ts

@@ -11,3 +11,3 @@ import type * as ts from 'typescript/lib/tsserverlibrary';
 export interface VueCompilerOptions {
-    experimentalCompatMode?: 2 | 2.7 | 3;
+    target?: 2 | 2.7 | 3;
     experimentalRuntimeMode?: 'runtime-dom' | 'runtime-uni-app';
@@ -14,0 +14,0 @@ experimentalImplicitWrapComponentOptionsWithDefineComponent?: boolean | 'onlyJs';

out/typescriptRuntime.d.ts

@@ -1,14 +0,4 @@
-import type { TextRange } from '@volar/vue-code-gen';
 import type * as ts from 'typescript/lib/tsserverlibrary';
 import { LanguageServiceHost } from './types';
 import { EmbeddedFile } from './vueFile';
-export interface VueLanguagePlugin {
-    compileTemplate?(tmplate: string, lang: string): {
-        html: string;
-        mapping(htmlStart: number, htmlEnd: number): {
-            start: number;
-            end: number;
-        } | undefined;
-    } | undefined;
-}
 export declare type TypeScriptRuntime = ReturnType<typeof createTypeScriptRuntime>;
@@ -18,4 +8,2 @@ export declare function createTypeScriptRuntime(options: {
     vueLsHost: LanguageServiceHost;
-    baseCssModuleType: string;
-    getCssClasses: (cssEmbeddeFile: EmbeddedFile) => Record<string, TextRange[]>;
     isTsPlugin?: boolean;
@@ -58,3 +46,3 @@ isVueTsc?: boolean;
         }, void, unknown>;
-        fromEmbeddedFile: (file: EmbeddedFile<unknown>) => import("./vueFile").VueFile | undefined;
+        fromEmbeddedFile: (file: EmbeddedFile) => import("./vueFile").VueFile | undefined;
         fromEmbeddedFileName: (fileName: string) => {
@@ -61,0 +49,0 @@ vueFile: import("./vueFile").VueFile;

out/typescriptRuntime.js

@@ -5,4 +5,2 @@ "use strict";
 const path = require("path");
-const html_1 = require("./plugins/html");
-const pug_1 = require("./plugins/pug");
 const localTypes = require("./utils/localTypes");
@@ -18,9 +16,5 @@ const ts_1 = require("./utils/ts");
     const vueFiles = (0, vueFiles_1.createVueFiles)();
-    const plugins = [
-        (0, html_1.default)(),
-        (0, pug_1.default)(),
-    ];
     const tsLsHost = createTsLsHost();
     const tsLsRaw = ts.createLanguageService(tsLsHost);
-    const localTypesScript = ts.ScriptSnapshot.fromString(localTypes.getTypesCode((_a = vueCompilerOptions.experimentalCompatMode) !== null && _a !== void 0 ? _a : 3));
+    const localTypesScript = ts.ScriptSnapshot.fromString(localTypes.getTypesCode((_a = vueCompilerOptions.target) !== null && _a !== void 0 ? _a : 3));
     let lastProjectVersion;
@@ -43,3 +37,3 @@ let tsProjectVersion = 0;
             const fileNames = getLocalTypesFiles();
-            const code = localTypes.getTypesCode((_a = vueCompilerOptions.experimentalCompatMode) !== null && _a !== void 0 ? _a : 3);
+            const code = localTypes.getTypesCode((_a = vueCompilerOptions.target) !== null && _a !== void 0 ? _a : 3);
             return {
@@ -60,4 +54,4 @@ fileNames,
             const fileNames = options.vueLsHost.getScriptFileNames();
-            const vueFileNames = new Set(fileNames.filter(file => file.endsWith('.vue')));
-            const tsFileNames = new Set(fileNames.filter(file => !file.endsWith('.vue')));
+            const vueFileNames = new Set(fileNames.filter(file => file.endsWith('.vue') || file.endsWith('.md')));
+            const tsFileNames = new Set(fileNames.filter(file => !file.endsWith('.vue') && !file.endsWith('.md')));
             const fileNamesToRemove = [];
@@ -134,3 +128,3 @@ const fileNamesToCreate = [];
                     const fileNameTrim = fileName.substring(0, fileName.lastIndexOf('.'));
-                    if (fileNameTrim.endsWith('.vue')) {
+                    if (fileNameTrim.endsWith('.vue') || fileNameTrim.endsWith('.md')) {
                         const vueFile = vueFiles.get(fileNameTrim);
@@ -176,2 +170,3 @@ if (!vueFile) {
                     case '.vue': return ts.ScriptKind.TSX; // can't use External, Unknown
+                    case '.md': return ts.ScriptKind.TSX; // can't use External, Unknown
                     case '.js': return ts.ScriptKind.JS;
@@ -203,3 +198,3 @@ case '.jsx': return ts.ScriptKind.JSX;
                 }
-                else if (!fileName.endsWith('.vue')) {
+                else if (!fileName.endsWith('.vue') && !fileName.endsWith('.md')) {
                     tsFileNames.push(fileName); // .ts
@@ -275,3 +270,3 @@ }
             if (!sourceFile) {
-                vueFiles.set(fileName, (0, vueFile_1.createVueFile)(fileName, scriptText, scriptVersion, plugins, options.vueLsHost.getVueCompilationSettings(), options.typescript, options.baseCssModuleType, options.getCssClasses, tsLsRaw, tsLsHost));
+                vueFiles.set(fileName, (0, vueFile_1.createVueFile)(fileName, scriptText, scriptVersion, options.vueLsHost.getVueCompilationSettings(), options.typescript, tsLsRaw, tsLsHost));
                 vueScriptsUpdated = true;
@@ -278,0 +273,0 @@ }

out/use/useSfcScriptGen.d.ts

@@ -6,6 +6,5 @@ import { Ref, ComputedRef } from '@vue/reactivity';
 import type { parseScriptSetupRanges } from '@volar/vue-code-gen/out/parsers/scriptSetupRanges';
-import type { TextRange } from '@volar/vue-code-gen';
 import { Embedded, EmbeddedFile, Sfc } from '../vueFile';
 import { VueCompilerOptions } from '../types';
-export declare function useSfcScriptGen<T extends 'template' | 'script'>(lsType: T, fileName: string, vueFileContent: Ref<string>, lang: Ref<string>, script: Ref<Sfc['script']>, scriptSetup: Ref<Sfc['scriptSetup']>, scriptRanges: Ref<ReturnType<typeof parseScriptRanges> | undefined>, scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>, htmlGen: Ref<ReturnType<typeof templateGen.generate> | undefined>, sfcStyles: ReturnType<(typeof import('./useSfcStyles'))['useSfcStyles']>['files'], compilerOptions: VueCompilerOptions, getCssVBindRanges: (cssEmbeddeFile: EmbeddedFile) => TextRange[]): {
+export declare function useSfcScriptGen<T extends 'template' | 'script'>(lsType: T, fileName: string, vueFileContent: Ref<string>, lang: Ref<string>, script: Ref<Sfc['script']>, scriptSetup: Ref<Sfc['scriptSetup']>, scriptRanges: Ref<ReturnType<typeof parseScriptRanges> | undefined>, scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>, htmlGen: Ref<ReturnType<typeof templateGen.generate> | undefined>, compilerOptions: VueCompilerOptions, cssVars: Ref<string[]>): {
     lang: Ref<string>;
@@ -12,0 +11,0 @@ file: T extends "script" ? ComputedRef<EmbeddedFile<undefined>> : ComputedRef<EmbeddedFile<undefined> | undefined>;

out/use/useSfcScriptGen.js

@@ -7,4 +7,3 @@ "use strict";
 const script_1 = require("@volar/vue-code-gen/out/generators/script");
-const localTypes_1 = require("../utils/localTypes");
-function useSfcScriptGen(lsType, fileName, vueFileContent, lang, script, scriptSetup, scriptRanges, scriptSetupRanges, htmlGen, sfcStyles, compilerOptions, getCssVBindRanges) {
+function useSfcScriptGen(lsType, fileName, vueFileContent, lang, script, scriptSetup, scriptRanges, scriptSetupRanges, htmlGen, compilerOptions, cssVars) {
     const codeGen = (0, reactivity_1.computed)(() => {
@@ -14,15 +13,11 @@ var _a, _b, _c, _d, _e;
             const bindTexts = [];
-            for (const style of sfcStyles.value) {
-                const binds = getCssVBindRanges(style);
-                for (const cssBind of binds) {
-                    const bindText = style.content.substring(cssBind.start, cssBind.end);
-                    bindTexts.push(bindText);
-                }
+            for (const cssVar of cssVars.value) {
+                bindTexts.push(cssVar);
             }
             return bindTexts;
-        }, (0, localTypes_1.getVueLibraryName)((_c = compilerOptions.experimentalCompatMode) !== null && _c !== void 0 ? _c : 3), ((_d = compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent) !== null && _d !== void 0 ? _d : 'onlyJs') === 'onlyJs'
+        }, ((_c = compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent) !== null && _c !== void 0 ? _c : 'onlyJs') === 'onlyJs'
             ? lang.value === 'js' || lang.value === 'jsx'
-            : !!compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent, ((_e = compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup) !== null && _e !== void 0 ? _e : 'onlyJs') === 'onlyJs'
+            : !!compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent, ((_d = compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup) !== null && _d !== void 0 ? _d : 'onlyJs') === 'onlyJs'
             ? lang.value === 'js' || lang.value === 'jsx'
-            : !!compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup);
+            : !!compilerOptions.experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup, (_e = compilerOptions.experimentalCompatMode) !== null && _e !== void 0 ? _e : 3);
     });
@@ -29,0 +24,0 @@ const file = (0, reactivity_1.computed)(() => {

out/use/useSfcTemplateScript.d.ts

@@ -1,36 +0,10 @@
-import { CodeGen } from '@volar/code-gen';
 import type { parseScriptSetupRanges } from '@volar/vue-code-gen/out/parsers/scriptSetupRanges';
 import { Ref } from '@vue/reactivity';
 import { VueCompilerOptions } from '../types';
-import type { TextRange } from '@volar/vue-code-gen';
 import { Embedded, EmbeddedFile, Sfc } from '../vueFile';
-import { useSfcStyles } from './useSfcStyles';
-import { EmbeddedFileMappingData } from '@volar/vue-code-gen';
-export declare function useSfcTemplateScript(ts: typeof import('typescript/lib/tsserverlibrary'), fileName: string, template: Ref<Sfc['template']>, script: Ref<Sfc['script']>, scriptSetup: Ref<Sfc['scriptSetup']>, scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>, styles: Ref<Sfc['styles']>, styleFiles: ReturnType<typeof useSfcStyles>['files'], styleEmbeddeds: ReturnType<typeof useSfcStyles>['embeddeds'], templateData: Ref<{
-    lang: string;
-    htmlToTemplate: (start: number, end: number) => {
-        start: number;
-        end: number;
-    } | undefined;
-} | undefined>, sfcTemplateCompileResult: Ref<ReturnType<(typeof import('@volar/vue-code-gen'))['compileSFCTemplate']> | undefined>, sfcStyles: ReturnType<(typeof import('./useSfcStyles'))['useSfcStyles']>['files'], scriptLang: Ref<string>, compilerOptions: VueCompilerOptions, baseCssModuleType: string, getCssVBindRanges: (cssEmbeddeFile: EmbeddedFile) => TextRange[], getCssClasses: (cssEmbeddeFile: EmbeddedFile) => Record<string, TextRange[]>, isVue2: boolean, disableTemplateScript: boolean): {
-    templateCodeGens: import("@vue/reactivity").ComputedRef<{
-        codeGen: CodeGen<EmbeddedFileMappingData>;
-        formatCodeGen: CodeGen<EmbeddedFileMappingData>;
-        cssCodeGen: CodeGen<EmbeddedFileMappingData>;
-        tagNames: Record<string, {
-            rawComponent: string;
-            slotsComponent: string;
-            emit: string;
-            slots: string;
-            offsets: number[];
-        }>;
-        attrNames: Set<string>;
-        identifiers: Set<string>;
-    } | undefined>;
+export declare function useSfcTemplateScript(ts: typeof import('typescript/lib/tsserverlibrary'), fileName: string, cssModuleClasses: any, cssScopedClasses: any, templateCodeGens: any, cssVars: any, sfc: Sfc, scriptSetupRanges: Ref<ReturnType<typeof parseScriptSetupRanges> | undefined>, scriptLang: Ref<string>, compilerOptions: VueCompilerOptions, disableTemplateScript: boolean): {
     embedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
     file: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
-    formatFile: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
     formatEmbedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
-    inlineCssFile: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
     inlineCssEmbedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
 };

out/use/useSfcTemplateScript.js

@@ -5,11 +5,18 @@ "use strict";
 const code_gen_1 = require("@volar/code-gen");
-const templateGen = require("@volar/vue-code-gen/out/generators/template");
 const reactivity_1 = require("@vue/reactivity");
 const sourceMaps_1 = require("../utils/sourceMaps");
 const string_1 = require("../utils/string");
+const vue_code_gen_1 = require("@volar/vue-code-gen");
 const SourceMaps = require("@volar/source-map");
 const path = require("path");
 const transform_1 = require("@volar/vue-code-gen/out/transform");
-const localTypes_1 = require("../utils/localTypes");
-function useSfcTemplateScript(ts, fileName, template, script, scriptSetup, scriptSetupRanges, styles, styleFiles, styleEmbeddeds, templateData, sfcTemplateCompileResult, sfcStyles, scriptLang, compilerOptions, baseCssModuleType, getCssVBindRanges, getCssClasses, isVue2, disableTemplateScript) {
+function useSfcTemplateScript(ts, fileName, 
+// @ts-expect-error
+cssModuleClasses, 
+// @ts-expect-error
+cssScopedClasses, 
+// @ts-expect-error
+templateCodeGens, 
+// @ts-expect-error
+cssVars, sfc, scriptSetupRanges, scriptLang, compilerOptions, disableTemplateScript) {
     const baseFileName = path.basename(fileName);
@@ -20,7 +27,7 @@ const scriptLeadingComment = (0, reactivity_1.computed)(() => {
         if ((_a = compilerOptions.experimentalUseScriptLeadingCommentInTemplate) !== null && _a !== void 0 ? _a : true) {
-            for (const _script of [script, scriptSetup]) {
-                if (_script.value) {
-                    const commentRanges = ts.getLeadingCommentRanges(_script.value.content, 0);
+            for (const _script of [sfc.script, sfc.scriptSetup]) {
+                if (_script) {
+                    const commentRanges = ts.getLeadingCommentRanges(_script.content, 0);
                     if (commentRanges) {
-                        comments = commentRanges.map(range => _script.value.content.substring(range.pos, range.end));
+                        comments = commentRanges.map(range => _script.content.substring(range.pos, range.end));
                     }
@@ -32,38 +39,8 @@ }
     });
-    const cssModuleClasses = (0, reactivity_1.computed)(() => styleFiles.value.reduce((obj, style) => {
-        if (style.data.module) {
-            const classes = getCssClasses(style);
-            obj[style.data.module] = { [style.fileName]: classes };
-        }
-        return obj;
-    }, {}));
-    const cssScopedClasses = (0, reactivity_1.computed)(() => {
-        var _a;
-        const obj = {};
-        const setting = (_a = compilerOptions.experimentalResolveStyleCssClasses) !== null && _a !== void 0 ? _a : 'scoped';
-        for (const style of styleFiles.value) {
-            if ((setting === 'scoped' && style.data.scoped) || setting === 'always') {
-                const classes = getCssClasses(style);
-                obj[style.fileName] = classes;
-            }
-        }
-        return obj;
-    });
-    const templateCodeGens = (0, reactivity_1.computed)(() => {
+    const tsxCodeGen = (0, reactivity_1.computed)(() => {
         var _a, _b;
-        if (!templateData.value)
-            return;
-        if (!((_a = sfcTemplateCompileResult.value) === null || _a === void 0 ? void 0 : _a.ast))
-            return;
-        return templateGen.generate(ts, templateData.value.lang, sfcTemplateCompileResult.value.ast, (_b = compilerOptions.experimentalCompatMode) !== null && _b !== void 0 ? _b : 3, compilerOptions.experimentalRuntimeMode, !!compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers, Object.values(cssScopedClasses.value).map(map => Object.keys(map)).flat(), templateData.value.htmlToTemplate, {
-            getEmitCompletion: string_1.SearchTexts.EmitCompletion,
-            getPropsCompletion: string_1.SearchTexts.PropsCompletion,
-        });
-    });
-    const data = (0, reactivity_1.computed)(() => {
-        var _a;
         const codeGen = new code_gen_1.CodeGen();
         codeGen.addText(scriptLeadingComment.value + '\n');
         codeGen.addText(`import * as __VLS_types from './__VLS_types';\n`);
-        if (script.value || scriptSetup.value) {
+        if (sfc.script || sfc.scriptSetup) {
             codeGen.addText(`import { __VLS_options, __VLS_name } from './${baseFileName}.__VLS_script';\n`);
@@ -75,3 +52,3 @@ codeGen.addText(`import __VLS_component from './${baseFileName}.__VLS_script';\n`);
             codeGen.addText(`var __VLS_options = {};\n`);
-            codeGen.addText(`var __VLS_component = (await import('${(0, localTypes_1.getVueLibraryName)((_a = compilerOptions.experimentalCompatMode) !== null && _a !== void 0 ? _a : 3)}')).defineComponent({});\n`);
+            codeGen.addText(`var __VLS_component = (await import('${(0, vue_code_gen_1.getVueLibraryName)((_a = compilerOptions.experimentalCompatMode) !== null && _a !== void 0 ? _a : 3)}')).defineComponent({});\n`);
         }
@@ -81,8 +58,8 @@ writeImportTypes();
         /* CSS Module */
-        const cssModuleMappingsArr = [];
-        for (const moduleName in cssModuleClasses.value) {
-            const moduleClasses = cssModuleClasses.value[moduleName];
-            codeGen.addText(`${moduleName}: ${baseCssModuleType} & {\n`);
-            cssModuleMappingsArr.push(writeCssClassProperties(moduleClasses, true, 'string', false));
-            codeGen.addText('};\n');
+        for (const cssModule of cssModuleClasses.value) {
+            codeGen.addText(`${cssModule.style.module}: Record<string, string>`);
+            for (const classNameRange of cssModule.classNameRanges) {
+                writeCssClassProperty(cssModule.index, cssModule.style.content.substring(classNameRange.start + 1, classNameRange.end), classNameRange, 'string', false);
+            }
+            codeGen.addText(';\n');
         }
@@ -93,13 +70,16 @@ codeGen.addText(`};\n`);
         codeGen.addText('/* Components */\n');
-        codeGen.addText('declare var __VLS_otherComponents: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & __VLS_types.PickComponents<typeof __VLS_ctx>;\n');
-        codeGen.addText('declare var __VLS_ownComponent: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component>;\n');
-        codeGen.addText('declare var __VLS_allComponents: typeof __VLS_otherComponents & Omit<typeof __VLS_ownComponent, keyof typeof __VLS_otherComponents>;\n');
-        codeGen.addText('declare var __VLS_rawComponents: __VLS_types.ConvertInvalidComponents<typeof __VLS_allComponents> & JSX.IntrinsicElements;\n'); // sort by priority
-        codeGen.addText(`__VLS_allComponents.${string_1.SearchTexts.Components};\n`);
+        codeGen.addText('declare var __VLS_otherComponents: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & typeof __VLS_ctx;\n');
+        codeGen.addText(`declare var __VLS_selfComponent: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component & (new () => { ${(0, vue_code_gen_1.getSlotsPropertyName)((_b = compilerOptions.experimentalCompatMode) !== null && _b !== void 0 ? _b : 3)}: typeof __VLS_slots })>;\n`);
+        codeGen.addText('declare var __VLS_components: typeof __VLS_otherComponents & Omit<typeof __VLS_selfComponent, keyof typeof __VLS_otherComponents>;\n');
+        codeGen.addText(`__VLS_components.${string_1.SearchTexts.Components};\n`);
         codeGen.addText(`({} as __VLS_types.GlobalAttrs).${string_1.SearchTexts.GlobalAttrs};\n`);
         /* Style Scoped */
         codeGen.addText('/* Style Scoped */\n');
-        codeGen.addText('type __VLS_StyleScopedClasses = {\n');
-        const cssScopedMappings = writeCssClassProperties(cssScopedClasses.value, true, 'boolean', true);
-        codeGen.addText('};\n');
+        codeGen.addText('type __VLS_StyleScopedClasses = {}');
+        for (const scopedCss of cssScopedClasses.value) {
+            for (const classNameRange of scopedCss.classNameRanges) {
+                writeCssClassProperty(scopedCss.index, scopedCss.style.content.substring(classNameRange.start + 1, classNameRange.end), classNameRange, 'boolean', true);
+            }
+        }
+        codeGen.addText(';\n');
         codeGen.addText('declare var __VLS_styleScopedClasses: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];\n');
@@ -112,13 +92,9 @@ codeGen.addText(`/* CSS variable injection */\n`);
         codeGen.addText(`export default __VLS_slots;\n`);
-        return {
-            codeGen,
-            cssModuleMappingsArr,
-            cssScopedMappings,
-        };
+        return codeGen;
         function writeImportTypes() {
             const bindingsArr = [];
-            if (scriptSetupRanges.value && scriptSetup.value) {
+            if (scriptSetupRanges.value && sfc.scriptSetup) {
                 bindingsArr.push({
                     typeBindings: scriptSetupRanges.value.typeBindings,
-                    content: scriptSetup.value.content,
+                    content: sfc.scriptSetup.content,
                 });
@@ -141,33 +117,33 @@ }
         }
-        function writeCssClassProperties(data, patchRename, propertyType, optional) {
-            const mappings = new Map();
-            for (const uri in data) {
-                const classes = data[uri];
-                if (!mappings.has(uri)) {
-                    mappings.set(uri, []);
-                }
-                for (const className in classes) {
-                    const ranges = classes[className];
-                    mappings.get(uri).push({
-                        tsRange: {
+        function writeCssClassProperty(styleIndex, className, classRange, propertyType, optional) {
+            codeGen.addText(`\n & { `);
+            codeGen.addMapping2({
+                mappedRange: {
+                    start: codeGen.getText().length,
+                    end: codeGen.getText().length + className.length + 2,
+                },
+                sourceRange: classRange,
+                mode: SourceMaps.Mode.Totally,
+                additional: [{
+                        mappedRange: {
                             start: codeGen.getText().length + 1,
                             end: codeGen.getText().length + 1 + className.length,
                         },
-                        cssRanges: ranges,
+                        sourceRange: classRange,
                         mode: SourceMaps.Mode.Offset,
-                        patchRename,
-                    });
-                    mappings.get(uri).push({
-                        tsRange: {
-                            start: codeGen.getText().length,
-                            end: codeGen.getText().length + className.length + 2,
-                        },
-                        cssRanges: ranges,
-                        mode: SourceMaps.Mode.Totally,
-                        patchRename,
-                    });
-                    codeGen.addText(`'${className}'${optional ? '?' : ''}: ${propertyType},\n`);
-                }
-            }
-            return mappings;
+                    }],
+                data: {
+                    vueTag: 'style',
+                    vueTagIndex: styleIndex,
+                    capabilities: {
+                        references: true,
+                        rename: true,
+                        referencesCodeLens: true,
+                    },
+                    normalizeNewName: beforeCssRename,
+                    applyNewName: doCssRename,
+                },
+            });
+            codeGen.addText(`'${className}'${optional ? '?' : ''}: ${propertyType}`);
+            codeGen.addText(` }`);
         }
@@ -177,8 +153,5 @@ function writeCssVars() {
             const identifiers = new Set();
-            for (let i = 0; i < sfcStyles.value.length; i++) {
-                const style = sfcStyles.value[i];
-                const binds = getCssVBindRanges(style);
-                for (const cssBind of binds) {
-                    const bindText = style.content.substring(cssBind.start, cssBind.end);
-                    (0, transform_1.walkInterpolationFragment)(ts, bindText, (frag, fragOffset, isJustForErrorMapping) => {
+            for (const cssVar of cssVars.value) {
+                for (const cssBind of cssVar.ranges) {
+                    (0, transform_1.walkInterpolationFragment)(ts, cssVar.style.content.substring(cssBind.start, cssBind.end), (frag, fragOffset, isJustForErrorMapping) => {
                         if (fragOffset === undefined) {
@@ -193,3 +166,3 @@ codeGen.addText(frag);
                                 vueTag: 'style',
-                                vueTagIndex: i,
+                                vueTagIndex: cssVar.index,
                                 capabilities: isJustForErrorMapping ? {
@@ -215,36 +188,4 @@ diagnostic: true,
     const embedded = (0, reactivity_1.computed)(() => {
-        var _a, _b;
         if (!disableTemplateScript && file.value) {
-            const sourceMap = new SourceMaps.SourceMapBase(data.value.codeGen.getMappings(parseMappingSourceRange));
-            for (const [fileName, mappings] of [
-                ...data.value.cssModuleMappingsArr.flatMap(m => [...m]),
-                ...data.value.cssScopedMappings,
-            ]) {
-                const cssSourceMap = (_a = styleEmbeddeds.value.find(embedded => embedded.file.fileName === fileName)) === null || _a === void 0 ? void 0 : _a.sourceMap;
-                if (!cssSourceMap)
-                    continue;
-                for (const mapped of mappings) {
-                    const tsRange = mapped.tsRange;
-                    for (const cssRange of mapped.cssRanges) {
-                        const vueRange = (_b = cssSourceMap.getSourceRange(cssRange.start, cssRange.end)) === null || _b === void 0 ? void 0 : _b[0];
-                        if (!vueRange)
-                            continue;
-                        sourceMap.mappings.push({
-                            data: {
-                                vueTag: 'style',
-                                capabilities: {
-                                    references: true,
-                                    rename: true,
-                                    referencesCodeLens: mapped.mode === SourceMaps.Mode.Totally, // has 2 modes
-                                },
-                                normalizeNewName: mapped.patchRename ? beforeCssRename : undefined,
-                                applyNewName: mapped.patchRename ? doCssRename : undefined,
-                            },
-                            mode: mapped.mode,
-                            sourceRange: vueRange,
-                            mappedRange: tsRange,
-                        });
-                    }
-                }
-            }
+            const sourceMap = new SourceMaps.SourceMapBase(tsxCodeGen.value.getMappings(parseMappingSourceRange));
             return {
@@ -280,6 +221,2 @@ file: file.value,
                 data: undefined,
-                // data: {
-                // 	module: false,
-                // 	scoped: false,
-                // },
                 isTsHostFile: false,
@@ -300,3 +237,3 @@ };
     const file = (0, reactivity_1.computed)(() => {
-        if (data.value) {
+        if (tsxCodeGen.value) {
             const lang = scriptLang.value === 'js' ? 'jsx' : scriptLang.value === 'ts' ? 'tsx' : scriptLang.value;
@@ -306,3 +243,3 @@ const embeddedFile = {
                 lang: lang,
-                content: data.value.codeGen.getText(),
+                content: tsxCodeGen.value.getText(),
                 capabilities: {
@@ -344,8 +281,5 @@ diagnostics: true,
     return {
-        templateCodeGens,
         embedded,
         file,
-        formatFile,
         formatEmbedded,
-        inlineCssFile,
         inlineCssEmbedded,
@@ -357,7 +291,7 @@ };
             return {
-                start: styles.value[data.vueTagIndex].startTagEnd + range.start,
-                end: styles.value[data.vueTagIndex].startTagEnd + range.end,
+                start: sfc.styles[data.vueTagIndex].startTagEnd + range.start,
+                end: sfc.styles[data.vueTagIndex].startTagEnd + range.end,
             };
         }
-        const templateOffset = (_b = (_a = template.value) === null || _a === void 0 ? void 0 : _a.startTagEnd) !== null && _b !== void 0 ? _b : 0;
+        const templateOffset = (_b = (_a = sfc.template) === null || _a === void 0 ? void 0 : _a.startTagEnd) !== null && _b !== void 0 ? _b : 0;
         return {
@@ -364,0 +298,0 @@ start: templateOffset + range.start,

out/utils/localTypes.d.ts

@@ -1,5 +0,3 @@
-export declare function getVueLibraryName(vueVersion: number): "@vue/runtime-dom" | "vue";
-export declare function getSlotsPropertyName(vueVersion: number): "$scopedSlots" | "$slots";
 export declare const typesFileName = "__VLS_types.ts";
 export declare function getTypesCode(vueVersion: number): string;
 export declare function genConstructorOverloads(name?: string, nums?: number): string;

out/utils/localTypes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genConstructorOverloads = exports.getTypesCode = exports.typesFileName = exports.getSlotsPropertyName = exports.getVueLibraryName = void 0;
+exports.genConstructorOverloads = exports.getTypesCode = exports.typesFileName = void 0;
+const vue_code_gen_1 = require("@volar/vue-code-gen");
 const camelCaseText = [
@@ -11,14 +12,6 @@ 'type CamelCase<S extends string> = S extends `${infer First}-${infer Right}`',
 ].join('\n');
-function getVueLibraryName(vueVersion) {
-    return vueVersion < 2.7 ? '@vue/runtime-dom' : 'vue';
-}
-exports.getVueLibraryName = getVueLibraryName;
-function getSlotsPropertyName(vueVersion) {
-    return vueVersion < 3 ? '$scopedSlots' : '$slots';
-}
-exports.getSlotsPropertyName = getSlotsPropertyName;
 exports.typesFileName = '__VLS_types.ts';
 function getTypesCode(vueVersion) {
-    const libName = getVueLibraryName(vueVersion);
-    const slots = getSlotsPropertyName(vueVersion);
+    const libName = (0, vue_code_gen_1.getVueLibraryName)(vueVersion);
+    const slots = (0, vue_code_gen_1.getSlotsPropertyName)(vueVersion);
     return `
@@ -36,7 +29,2 @@ import * as vue from '${libName}';
 type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
-type IsFunctionalComponent<T> = T extends (...args: any) => JSX.Element ? true : false;
-type IsConstructorComponent<T> = T extends new (...args: any) => JSX.ElementClass ? true : false;
-type IsComponent_Loose<T> = IsConstructorComponent<T> extends false ? IsFunctionalComponent<T> extends false ? false : true : true; // allow any type
-type IsComponent_Strict<T> = IsConstructorComponent<T> extends true ? true : IsFunctionalComponent<T> extends true ? true : false; // don't allow any type
-type ComponentKeys<T> = keyof { [K in keyof T as IsComponent_Loose<T[K]> extends true ? K : never]: any };
 export type PickNotAny<A, B> = IsAny<A> extends true ? B : A;
@@ -69,12 +57,10 @@ type AnyArray<T = any> = T[] | readonly T[];
 
-export type HasScriptSlotsType<T> = T extends new (...args: any) => { ${slots}?: infer _ } ? true : false;
-export type DefaultSlots<C> = HasScriptSlotsType<C> extends true ? {} : Record<string, any>;
-export type WithSlots<T> = T extends new (...args: any) => { ${slots}?: infer S } ? T : new (...args: any) => { ${slots}: {} };
-export type ScriptSlots<T> = T extends { ${slots}?: infer S }
-	? { [K in keyof S]-?: S[K] extends ((obj: infer O) => any) | undefined ? O : S[K] }
-	: {};
+export type ExtractComponentSlots<T> =
+	IsAny<T> extends true ? Record<string, any>
+	: T extends { ${slots}?: infer S } ? { [K in keyof S]-?: S[K] extends ((obj: infer O) => any) | undefined ? O : S[K] }
+	: Record<string, any>;
 
 export type GetComponentName<T, K extends string> = K extends keyof T ? IsAny<T[K]> extends false ? K : GetComponentName_CamelCase<T, CamelCase<K>> : GetComponentName_CamelCase<T, CamelCase<K>>;
-export type GetComponentName_CamelCase<T, K extends string> = K extends keyof T ? IsAny<T[K]> extends false ? K : GetComponentName_CapitalCase<T, Capitalize<K>> : GetComponentName_CapitalCase<T, Capitalize<K>>;
-export type GetComponentName_CapitalCase<T, K> = K extends keyof T ? K : never;
+type GetComponentName_CamelCase<T, K extends string> = K extends keyof T ? IsAny<T[K]> extends false ? K : GetComponentName_CapitalCase<T, Capitalize<K>, K> : GetComponentName_CapitalCase<T, Capitalize<K>, K>;
+type GetComponentName_CapitalCase<T, K, O> = K extends keyof T ? K : O;
 
@@ -131,4 +117,2 @@ export type FillingEventArg_ParametersLength<E extends (...args: any) => any> = IsAny<Parameters<E>> extends true ? -1 : Parameters<E>['length'];
 export type GlobalAttrs = JSX.IntrinsicElements['div'];
-export type PickComponents<T> = ComponentKeys<T> extends keyof T ? Pick<T, ComponentKeys<T>> : T;
-export type ConvertInvalidComponents<T> = { [K in keyof T]: IsComponent_Strict<T[K]> extends true ? T[K] : any };
 export type SelfComponent<N, C> = string extends N ? {} : N extends string ? { [P in N]: C } : {};
@@ -135,0 +119,0 @@ `;

out/utils/parseCssVars.d.ts

@@ -5,1 +5,2 @@ export declare function parseCssVars(styleContent: string): Generator<{
 }, void, unknown>;
+export declare function clearComments(css: string): string;

out/utils/parseCssVars.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseCssVars = void 0;
+exports.clearComments = exports.parseCssVars = void 0;
 // https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/cssVars.ts#L47-L61
 function* parseCssVars(styleContent) {
     var _a, _b;
+    styleContent = clearComments(styleContent);
     const reg = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
@@ -20,2 +21,8 @@ const matchs = styleContent.matchAll(reg);
 exports.parseCssVars = parseCssVars;
+function clearComments(css) {
+    return css
+        .replace(/\/\*([\s\S]*?)\*\//g, match => `/*${' '.repeat(match.length - 4)}*/`)
+        .replace(/\/\/([\s\S]*?)\n/g, match => `//${' '.repeat(match.length - 3)}\n`);
+}
+exports.clearComments = clearComments;
 //# sourceMappingURL=parseCssVars.js.map

out/utils/ts.d.ts

 import type * as ts from 'typescript/lib/tsserverlibrary';
+import type { VueCompilerOptions } from '../types';
 export declare function injectCacheLogicToLanguageServiceHost(ts: typeof import('typescript/lib/tsserverlibrary'), host: ts.LanguageServiceHost, service: ts.LanguageService): void;
 export declare function createParsedCommandLine(ts: typeof import('typescript/lib/tsserverlibrary'), parseConfigHost: ts.ParseConfigHost, tsConfig: string, extendsSet?: Set<string>): ts.ParsedCommandLine & {
-    vueOptions: {
-        experimentalCompatMode?: 2 | 3;
-        experimentalTemplateCompilerOptions?: any;
-        experimentalTemplateCompilerOptionsRequirePath?: string;
-    };
+    vueOptions: VueCompilerOptions;
 };

out/utils/ts.js

@@ -11,3 +11,3 @@ "use strict";
     if (!greaterThan47) {
-        console.log('TypeScript auto-import cache only working for TypeScript version < 4.7 on v0.35.0 later, please downgrade to v0.34.17 or lower for TypeScript version:', ts.version);
+        console.warn('TypeScript auto-import cache only working for TypeScript version < 4.7 on v0.35.0 later, please downgrade to v0.34.17 or lower for TypeScript version:', ts.version);
         return;
@@ -14,0 +14,0 @@ }

out/vueFile.d.ts

 import { TextRange } from '@volar/vue-code-gen';
-import { EmbeddedFileSourceMap } from '@volar/vue-typescript';
+import { ComputedRef } from '@vue/reactivity';
 import { ITemplateScriptData, VueCompilerOptions } from './types';
-import { VueLanguagePlugin } from './typescriptRuntime';
-import { Teleport } from './utils/sourceMaps';
+import { EmbeddedFileSourceMap, Teleport } from './utils/sourceMaps';
 import type * as _0 from 'typescript/lib/tsserverlibrary';
+import { SourceMapBase } from '@volar/source-map';
+export interface VueLanguagePlugin {
+    compileFileToVue?(fileName: string, content: string): {
+        vue: string;
+        mapping(vueRange: {
+            start: number;
+            end: number;
+        }): {
+            start: number;
+            end: number;
+        } | undefined;
+        sourceMap?: SourceMapBase;
+    } | undefined;
+    compileTemplateToHtml?(lang: string, tmplate: string): {
+        html: string;
+        mapping(htmlRange: {
+            start: number;
+            end: number;
+        }): {
+            start: number;
+            end: number;
+        } | undefined;
+    } | undefined;
+    getEmbeddedFilesCount?(sfc: Sfc): number;
+    getEmbeddedFile?(fileName: string, sfc: Sfc, i: number): Embedded | undefined;
+}
 export interface VueFile extends ReturnType<typeof createVueFile> {
@@ -15,6 +40,9 @@ }
 export interface Embedded {
+    parentFileName?: string;
     file: EmbeddedFile;
     sourceMap: EmbeddedFileSourceMap;
+    teleport?: Teleport;
 }
 export interface SfcBlock {
+    tag: 'script' | 'scriptSetup' | 'template' | 'style' | 'customBlock';
     start: number;
@@ -41,3 +69,3 @@ end: number;
 }
-export interface EmbeddedFile<T = unknown> {
+export interface EmbeddedFile {
     fileName: string;
@@ -55,13 +83,25 @@ lang: string;
     };
-    data: T;
 }
-export declare function createVueFile(fileName: string, _content: string, _version: string, plugins: VueLanguagePlugin[], compilerOptions: VueCompilerOptions, ts: typeof import('typescript/lib/tsserverlibrary'), baseCssModuleType: string, getCssClasses: (cssEmbeddeFile: EmbeddedFile) => Record<string, TextRange[]>, tsLs: ts.LanguageService | undefined, tsHost: ts.LanguageServiceHost | undefined): {
+export declare function createVueFile(fileName: string, _content: string, _version: string, compilerOptions: VueCompilerOptions, ts: typeof import('typescript/lib/tsserverlibrary'), tsLs: ts.LanguageService | undefined, tsHost: ts.LanguageServiceHost | undefined): {
     fileName: string;
     getContent: () => string;
+    getCompiledVue: () => {
+        vue: string;
+        mapping(vueRange: {
+            start: number;
+            end: number;
+        }): {
+            start: number;
+            end: number;
+        } | undefined;
+        sourceMap?: SourceMapBase<undefined> | undefined;
+    } | undefined;
     getSfcTemplateLanguageCompiled: () => {
-        lang: string;
-        htmlText: string;
-        htmlToTemplate: (start: number, end: number) => {
+        html: string;
+        mapping(htmlRange: {
             start: number;
             end: number;
+        }): {
+            start: number;
+            end: number;
         } | undefined;
@@ -75,10 +115,2 @@ } | undefined;
     getVersion: () => string;
-    getTemplateTagNames: () => Record<string, {
-        rawComponent: string;
-        slotsComponent: string;
-        emit: string;
-        slots: string;
-        offsets: number[];
-    }> | undefined;
-    getTemplateAttrNames: () => Set<string> | undefined;
     update: (newContent: string, newVersion: string) => {
@@ -88,8 +120,6 @@ scriptUpdated: boolean;
     getTemplateData: () => ITemplateScriptData;
-    getScriptTsFile: () => EmbeddedFile<undefined>;
-    getEmbeddedTemplate: () => Embedded | undefined;
+    getScriptFileName: () => string;
     getDescriptor: () => Sfc;
     getScriptAst: () => _0.SourceFile | undefined;
     getScriptSetupAst: () => _0.SourceFile | undefined;
-    getTemplateFormattingScript: () => Embedded | undefined;
     getSfcRefSugarRanges: () => {
@@ -108,7 +138,2 @@ refs: {
     getAllEmbeddeds: () => Embedded[];
-    getLastUpdated: () => {
-        template: boolean;
-        script: boolean;
-        scriptSetup: boolean;
-    };
     getScriptSetupRanges: () => {
@@ -130,40 +155,26 @@ importSectionEndOffset: number;
     } | undefined;
-    getSfcTemplateDocument: () => EmbeddedFile<unknown> | undefined;
     isJsxMissing: () => boolean;
     refs: {
         content: import("@vue/reactivity").Ref<string>;
-        allEmbeddeds: import("@vue/reactivity").ComputedRef<Embedded[]>;
-        teleports: import("@vue/reactivity").ComputedRef<{
+        allEmbeddeds: ComputedRef<Embedded[]>;
+        teleports: ComputedRef<{
             file: EmbeddedFile;
             teleport: Teleport;
         }[]>;
-        sfcTemplateScript: {
-            templateCodeGens: import("@vue/reactivity").ComputedRef<{
-                codeGen: import("@volar/code-gen").CodeGen<import("@volar/vue-code-gen").EmbeddedFileMappingData>;
-                formatCodeGen: import("@volar/code-gen").CodeGen<import("@volar/vue-code-gen").EmbeddedFileMappingData>;
-                cssCodeGen: import("@volar/code-gen").CodeGen<import("@volar/vue-code-gen").EmbeddedFileMappingData>;
-                tagNames: Record<string, {
-                    rawComponent: string;
-                    slotsComponent: string;
-                    emit: string;
-                    slots: string;
-                    offsets: number[];
-                }>;
-                attrNames: Set<string>;
-                identifiers: Set<string>;
-            } | undefined>;
-            embedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
-            file: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
-            formatFile: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
-            formatEmbedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
-            inlineCssFile: import("@vue/reactivity").ComputedRef<EmbeddedFile<unknown> | undefined>;
-            inlineCssEmbedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
-        };
-        sfcScriptForScriptLs: {
-            lang: import("@vue/reactivity").Ref<string>;
-            file: import("@vue/reactivity").ComputedRef<EmbeddedFile<undefined>>;
-            embedded: import("@vue/reactivity").ComputedRef<Embedded | undefined>;
-            teleport: import("@vue/reactivity").ComputedRef<Teleport>;
-        };
     };
 };
+export declare function useCssModuleClasses(sfc: Sfc): ComputedRef<{
+    style: (typeof sfc.styles)[number];
+    index: number;
+    classNameRanges: TextRange[];
+}[]>;
+export declare function useCssScopedClasses(sfc: Sfc, compilerOptions: VueCompilerOptions): ComputedRef<{
+    style: (typeof sfc.styles)[number];
+    index: number;
+    classNameRanges: TextRange[];
+}[]>;
+export declare function useCssVars(sfc: Sfc): ComputedRef<{
+    style: (typeof sfc.styles)[number];
+    styleIndex: number;
+    ranges: TextRange[];
+}[]>;

out/vueFile.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createVueFile = void 0;
+exports.useCssVars = exports.useCssScopedClasses = exports.useCssModuleClasses = exports.createVueFile = void 0;
 const vue_code_gen_1 = require("@volar/vue-code-gen");
@@ -10,15 +10,24 @@ const refSugarRanges_1 = require("@volar/vue-code-gen/out/parsers/refSugarRanges");
 const reactivity_1 = require("@vue/reactivity");
-const useSfcCustomBlocks_1 = require("./use/useSfcCustomBlocks");
-const useSfcScript_1 = require("./use/useSfcScript");
-const useSfcScriptGen_1 = require("./use/useSfcScriptGen");
-const useSfcStyles_1 = require("./use/useSfcStyles");
-const useSfcTemplate_1 = require("./use/useSfcTemplate");
-const useSfcTemplateScript_1 = require("./use/useSfcTemplateScript");
-const parseCssVars_1 = require("./utils/parseCssVars");
+const sourceMaps_1 = require("./utils/sourceMaps");
 const string_1 = require("./utils/string");
 const untrack_1 = require("./utils/untrack");
+const templateGen = require("@volar/vue-code-gen/out/generators/template");
+const parseCssClassNames_1 = require("./utils/parseCssClassNames");
+const parseCssVars_1 = require("./utils/parseCssVars");
+const file_vue_1 = require("./plugins/file-vue");
+const file_md_1 = require("./plugins/file-md");
+const vue_template_html_1 = require("./plugins/vue-template-html");
+const vue_template_pug_1 = require("./plugins/vue-template-pug");
+const vue_sfc_styles_1 = require("./plugins/vue-sfc-styles");
+const vue_sfc_customblocks_1 = require("./plugins/vue-sfc-customblocks");
+const vue_sfc_scripts_1 = require("./plugins/vue-sfc-scripts");
+const vue_sfc_template_1 = require("./plugins/vue-sfc-template");
+const vue_typescript_scripts_1 = require("./plugins/vue-typescript-scripts");
+const vue_typescript_template_1 = require("./plugins/vue-typescript-template");
+const source_map_1 = require("@volar/source-map");
 ;
-function createVueFile(fileName, _content, _version, plugins, compilerOptions, ts, baseCssModuleType, getCssClasses, tsLs, tsHost) {
+function createVueFile(fileName, _content, _version, compilerOptions, ts, tsLs, tsHost) {
+    var _a;
     // refs
-    const content = (0, reactivity_1.ref)('');
+    const fileContent = (0, reactivity_1.ref)('');
     const version = (0, reactivity_1.ref)('');
@@ -32,7 +41,2 @@ const sfc = (0, reactivity_1.reactive)({
     }) /* avoid Sfc unwrap in .d.ts by reactive */;
-    const lastUpdated = {
-        template: false,
-        script: false,
-        scriptSetup: false,
-    };
     let templateScriptData = {
@@ -43,20 +47,26 @@ projectVersion: undefined,
     };
-    const cssVars = new WeakMap();
-    // computeds
-    const parsedSfc = (0, reactivity_1.computed)(() => (0, compiler_sfc_1.parse)(content.value, { sourceMap: false, ignoreEmpty: false }));
     // use
-    const sfcStyles = (0, useSfcStyles_1.useSfcStyles)(fileName, (0, reactivity_1.computed)(() => sfc.styles));
-    const sfcCustomBlocks = (0, useSfcCustomBlocks_1.useSfcCustomBlocks)(fileName, (0, reactivity_1.computed)(() => sfc.customBlocks));
-    const sfcTemplate = (0, useSfcTemplate_1.useSfcTemplate)(fileName, (0, reactivity_1.computed)(() => sfc.template));
-    const sfcTemplateCompiled = (0, reactivity_1.computed)(() => {
+    const compiledVue = (0, reactivity_1.computed)(() => {
         var _a;
+        for (const plugin of plugins) {
+            const compiled = (_a = plugin.compileFileToVue) === null || _a === void 0 ? void 0 : _a.call(plugin, fileName, fileContent.value);
+            if (compiled) {
+                return compiled;
+            }
+        }
+        // given dummy result to avoid language server throw
+        return {
+            vue: '<template></template>',
+            mapping: vueRange => vueRange,
+        };
+    });
+    const vueContent = (0, reactivity_1.computed)(() => { var _a; return (_a = compiledVue.value) === null || _a === void 0 ? void 0 : _a.vue; });
+    const parsedSfc = (0, reactivity_1.computed)(() => vueContent.value !== undefined ? (0, compiler_sfc_1.parse)(vueContent.value, { sourceMap: false, ignoreEmpty: false }) : undefined);
+    const computedHtmlTemplate = (0, reactivity_1.computed)(() => {
+        var _a;
         if (sfc.template) {
             for (const plugin of plugins) {
-                const compiledHtml = (_a = plugin.compileTemplate) === null || _a === void 0 ? void 0 : _a.call(plugin, sfc.template.content, sfc.template.lang);
+                const compiledHtml = (_a = plugin.compileTemplateToHtml) === null || _a === void 0 ? void 0 : _a.call(plugin, sfc.template.lang, sfc.template.content);
                 if (compiledHtml) {
-                    return {
-                        lang: sfc.template.lang,
-                        htmlText: compiledHtml.html,
-                        htmlToTemplate: compiledHtml.mapping,
-                    };
+                    return compiledHtml;
                 }
@@ -67,8 +77,31 @@ ;
     });
-    const sfcTemplateCompileResult = (0, reactivity_1.computed)(() => {
+    const templateAstCompiled = (0, reactivity_1.computed)(() => {
         var _a;
-        if (sfcTemplateCompiled.value) {
-            return (0, vue_code_gen_1.compileSFCTemplate)(sfcTemplateCompiled.value.htmlText, compilerOptions.experimentalTemplateCompilerOptions, (_a = compilerOptions.experimentalCompatMode) !== null && _a !== void 0 ? _a : 3);
+        if (computedHtmlTemplate.value) {
+            return (0, vue_code_gen_1.compileSFCTemplate)(computedHtmlTemplate.value.html, compilerOptions.experimentalTemplateCompilerOptions, (_a = compilerOptions.target) !== null && _a !== void 0 ? _a : 3);
         }
     });
+    const cssModuleClasses = useCssModuleClasses(sfc);
+    const cssScopedClasses = useCssScopedClasses(sfc, compilerOptions);
+    const templateCodeGens = (0, reactivity_1.computed)(() => {
+        var _a, _b, _c, _d;
+        if (!computedHtmlTemplate.value)
+            return;
+        if (!((_a = templateAstCompiled.value) === null || _a === void 0 ? void 0 : _a.ast))
+            return;
+        return templateGen.generate(ts, (_c = (_b = sfc.template) === null || _b === void 0 ? void 0 : _b.lang) !== null && _c !== void 0 ? _c : 'html', templateAstCompiled.value.ast, (_d = compilerOptions.target) !== null && _d !== void 0 ? _d : 3, compilerOptions.experimentalRuntimeMode, !!compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers, !!sfc.scriptSetup, Object.values(cssScopedClasses.value).map(map => Object.keys(map)).flat(), computedHtmlTemplate.value.mapping, {
+            getEmitCompletion: string_1.SearchTexts.EmitCompletion,
+            getPropsCompletion: string_1.SearchTexts.PropsCompletion,
+        });
+    });
+    const cssVars = useCssVars(sfc);
+    const cssVarTexts = (0, reactivity_1.computed)(() => {
+        const result = [];
+        for (const { style, ranges } of cssVars.value) {
+            for (const range of ranges) {
+                result.push(style.content.substring(range.start, range.end));
+            }
+        }
+        return result;
+    });
     const scriptAst = (0, reactivity_1.computed)(() => {
@@ -84,4 +117,2 @@ if (sfc.script) {
     });
-    const sfcScript = (0, useSfcScript_1.useSfcScript)(fileName, (0, reactivity_1.computed)(() => sfc.script));
-    const sfcScriptSetup = (0, useSfcScript_1.useSfcScript)(fileName, (0, reactivity_1.computed)(() => sfc.scriptSetup));
     const scriptRanges = (0, reactivity_1.computed)(() => scriptAst.value
@@ -99,5 +130,2 @@ ? (0, scriptRanges_1.parseScriptRanges)(ts, scriptAst.value, !!sfc.scriptSetup, false, false)
     });
-    const sfcTemplateScript = (0, useSfcTemplateScript_1.useSfcTemplateScript)(ts, fileName, (0, reactivity_1.computed)(() => sfc.template), (0, reactivity_1.computed)(() => sfc.script), (0, reactivity_1.computed)(() => sfc.scriptSetup), (0, reactivity_1.computed)(() => scriptSetupRanges.value), (0, reactivity_1.computed)(() => sfc.styles), sfcStyles.files, sfcStyles.embeddeds, sfcTemplateCompiled, sfcTemplateCompileResult, sfcStyles.files, scriptLang, compilerOptions, baseCssModuleType, getCssVBindRanges, getCssClasses, compilerOptions.experimentalCompatMode === 2, !!compilerOptions.experimentalDisableTemplateSupport || !((tsHost === null || tsHost === void 0 ? void 0 : tsHost.getCompilationSettings().jsx) === ts.JsxEmit.Preserve));
-    const sfcScriptForTemplateLs = (0, useSfcScriptGen_1.useSfcScriptGen)('template', fileName, content, scriptLang, (0, reactivity_1.computed)(() => sfc.script), (0, reactivity_1.computed)(() => sfc.scriptSetup), (0, reactivity_1.computed)(() => scriptRanges.value), (0, reactivity_1.computed)(() => scriptSetupRanges.value), sfcTemplateScript.templateCodeGens, (0, reactivity_1.computed)(() => sfcStyles.files.value), compilerOptions, getCssVBindRanges);
-    const sfcScriptForScriptLs = (0, useSfcScriptGen_1.useSfcScriptGen)('script', fileName, content, scriptLang, (0, reactivity_1.computed)(() => sfc.script), (0, reactivity_1.computed)(() => sfc.scriptSetup), (0, reactivity_1.computed)(() => scriptRanges.value), (0, reactivity_1.computed)(() => scriptSetupRanges.value), sfcTemplateScript.templateCodeGens, (0, reactivity_1.computed)(() => sfcStyles.files.value), compilerOptions, getCssVBindRanges);
     const sfcRefSugarRanges = (0, reactivity_1.computed)(() => (scriptSetupAst.value ? {
@@ -107,10 +135,136 @@ refs: (0, refSugarRanges_1.parseRefSugarDeclarationRanges)(ts, scriptSetupAst.value, ['$ref', '$computed', '$shallowRef', '$fromRefs']),
     } : undefined));
-    // getters
+    const plugins = [
+        (0, file_vue_1.default)(),
+        (0, file_md_1.default)(),
+        (0, vue_template_html_1.default)(),
+        (0, vue_template_pug_1.default)(),
+        (0, vue_sfc_styles_1.default)(),
+        (0, vue_sfc_customblocks_1.default)(),
+        (0, vue_sfc_scripts_1.default)(),
+        (0, vue_sfc_template_1.default)(),
+        (0, vue_typescript_scripts_1.default)(scriptLang, scriptRanges, scriptSetupRanges, templateCodeGens, compilerOptions, cssVarTexts),
+        (0, vue_typescript_template_1.default)(ts, cssModuleClasses, cssScopedClasses, templateCodeGens, cssVars, scriptSetupRanges, scriptLang, compilerOptions, !!compilerOptions.experimentalDisableTemplateSupport || ((_a = tsHost === null || tsHost === void 0 ? void 0 : tsHost.getCompilationSettings().jsx) !== null && _a !== void 0 ? _a : ts.JsxEmit.Preserve) !== ts.JsxEmit.Preserve),
+    ];
+    // computeds
+    const pluginEmbeddeds = plugins.map(plugin => {
+        if (plugin.getEmbeddedFilesCount && plugin.getEmbeddedFile) {
+            const embeddedsCount = (0, reactivity_1.computed)(() => plugin.getEmbeddedFilesCount(sfc));
+            const embeddeds = (0, reactivity_1.computed)(() => {
+                const computeds = [];
+                for (let i = 0; i < embeddedsCount.value; i++) {
+                    const _i = i;
+                    const raw = (0, reactivity_1.computed)(() => plugin.getEmbeddedFile(fileName, sfc, _i));
+                    const transformed = (0, reactivity_1.computed)(() => {
+                        var _a;
+                        if (!raw.value)
+                            return;
+                        const sourceMap = raw.value.sourceMap;
+                        const newMappings = [];
+                        for (const mapping of sourceMap.mappings) {
+                            const vueRange = embeddedRangeToVueRange(mapping.data, mapping.sourceRange);
+                            const fileRange = compiledVue.value.mapping(vueRange);
+                            if (fileRange) {
+                                let additional;
+                                if (mapping.additional) {
+                                    additional = [];
+                                    for (const add of mapping.additional) {
+                                        const addVueRange = embeddedRangeToVueRange(mapping.data, add.sourceRange);
+                                        const addFileRange = compiledVue.value.mapping(addVueRange);
+                                        if (addFileRange) {
+                                            additional.push(Object.assign(Object.assign({}, add), { sourceRange: addFileRange }));
+                                        }
+                                    }
+                                }
+                                newMappings.push(Object.assign(Object.assign({}, mapping), { sourceRange: fileRange, additional }));
+                            }
+                            else if (((_a = compiledVue.value) === null || _a === void 0 ? void 0 : _a.sourceMap) && mapping.mode === source_map_1.Mode.Offset) {
+                                // fix markdown template mapping failed
+                                const inRangeMappings = compiledVue.value.sourceMap.mappings.filter(mapping => mapping.mappedRange.start >= vueRange.start && mapping.mappedRange.end <= vueRange.end);
+                                for (const inRangeMapping of inRangeMappings) {
+                                    const _vueRange = inRangeMapping.mappedRange;
+                                    const embedded = vueRangeToEmbeddedRange(mapping.data, _vueRange);
+                                    newMappings.push(Object.assign(Object.assign({}, mapping), { sourceRange: inRangeMapping.sourceRange, mappedRange: embedded }));
+                                }
+                            }
+                        }
+                        const newSourceMap = new sourceMaps_1.EmbeddedFileSourceMap(newMappings);
+                        const newEmbedded = Object.assign(Object.assign({}, raw.value), { sourceMap: newSourceMap });
+                        return newEmbedded;
+                    });
+                    computeds.push(transformed);
+                }
+                return computeds;
+            });
+            return embeddeds;
+        }
+    }).filter(notEmpty);
+    const embeddedVue = (0, reactivity_1.computed)(() => {
+        var _a;
+        if (!fileName.endsWith('.vue') && ((_a = compiledVue.value) === null || _a === void 0 ? void 0 : _a.sourceMap)) {
+            const newSourceMap = new sourceMaps_1.EmbeddedFileSourceMap();
+            for (const mapping of compiledVue.value.sourceMap.mappings) {
+                newSourceMap.mappings.push(Object.assign(Object.assign({}, mapping), { data: {
+                        vueTag: undefined,
+                        capabilities: {
+                            basic: true,
+                            references: true,
+                            definitions: true,
+                            diagnostic: true,
+                            rename: true,
+                            completion: true,
+                            semanticTokens: true,
+                            referencesCodeLens: false,
+                            displayWithLink: false,
+                        },
+                    } }));
+            }
+            const embeddedFile = {
+                fileName: fileName + '.vue',
+                lang: 'vue',
+                content: compiledVue.value.vue,
+                capabilities: {
+                    diagnostics: true,
+                    foldingRanges: false,
+                    formatting: false,
+                    documentSymbol: false,
+                    codeActions: true,
+                    inlayHints: true,
+                },
+                isTsHostFile: false,
+            };
+            const embedded = {
+                file: embeddedFile,
+                sourceMap: newSourceMap,
+            };
+            return embedded;
+        }
+    });
+    const allEmbeddeds = (0, reactivity_1.computed)(() => {
+        const all = [];
+        if (embeddedVue.value) {
+            all.push(embeddedVue.value);
+        }
+        for (const getEmbeddeds of pluginEmbeddeds) {
+            for (const embedded of getEmbeddeds.value) {
+                if (embedded.value) {
+                    if (embeddedVue.value && !embedded.value.parentFileName) {
+                        all.push(Object.assign(Object.assign({}, embedded.value), { parentFileName: embeddedVue.value.file.fileName }));
+                    }
+                    else {
+                        all.push(embedded.value);
+                    }
+                }
+            }
+        }
+        return all;
+    });
     const teleports = (0, reactivity_1.computed)(() => {
         const _all = [];
-        if (sfcScriptForTemplateLs.file.value && sfcScriptForTemplateLs.teleport.value) {
-            _all.push({
-                file: sfcScriptForTemplateLs.file.value,
-                teleport: sfcScriptForTemplateLs.teleport.value,
-            });
+        for (const embedded of allEmbeddeds.value) {
+            if (embedded.teleport) {
+                _all.push({
+                    file: embedded.file,
+                    teleport: embedded.teleport,
+                });
+            }
         }
@@ -121,70 +275,53 @@ return _all;
         const embeddeds = [];
-        // template
-        embeddeds.push({
-            self: sfcTemplate.embedded.value,
-            embeddeds: [
-                {
-                    self: sfcTemplateScript.embedded.value,
-                    inheritParentIndent: true,
-                    embeddeds: [],
-                },
-                {
-                    self: sfcTemplateScript.formatEmbedded.value,
-                    inheritParentIndent: true,
-                    embeddeds: [],
-                },
-                {
-                    self: sfcTemplateScript.inlineCssEmbedded.value,
-                    inheritParentIndent: true,
-                    embeddeds: [],
-                },
-            ],
-        });
-        // scripts - format
-        embeddeds.push({
-            self: sfcScript.embedded.value,
-            embeddeds: [],
-        });
-        embeddeds.push({
-            self: sfcScriptSetup.embedded.value,
-            embeddeds: [],
-        });
-        // scripts - script ls
-        embeddeds.push({
-            self: sfcScriptForScriptLs.embedded.value,
-            embeddeds: [],
-        });
-        // scripts - template ls
-        embeddeds.push({
-            self: sfcScriptForTemplateLs.embedded.value,
-            embeddeds: [],
-        });
-        // styles
-        for (const style of sfcStyles.embeddeds.value) {
-            embeddeds.push({
-                self: style,
-                embeddeds: [],
-            });
+        let remain = [...allEmbeddeds.value];
+        while (remain.length) {
+            const beforeLength = remain.length;
+            consumeRemain();
+            if (beforeLength === remain.length) {
+                break;
+            }
         }
-        // customBlocks
-        for (const customBlock of sfcCustomBlocks.embeddeds.value) {
+        for (const e of remain) {
             embeddeds.push({
-                self: customBlock,
+                self: e,
                 embeddeds: [],
             });
+            // 	throw 'Unable to resolve embeddeds: ' + remain[0].parentFileName + ' -> ' + remain[0].file.fileName;
         }
         return embeddeds;
-    });
-    const allEmbeddeds = (0, reactivity_1.computed)(() => {
-        const all = [];
-        visitEmbedded(embeddeds.value, embedded => all.push(embedded));
-        return all;
-        function visitEmbedded(embeddeds, cb) {
-            for (const embedded of embeddeds) {
-                visitEmbedded(embedded.embeddeds, cb);
-                if (embedded.self) {
-                    cb(embedded.self);
+        function consumeRemain() {
+            for (let i = remain.length - 1; i >= 0; i--) {
+                const embedded = remain[i];
+                if (!embedded.parentFileName) {
+                    embeddeds.push({
+                        self: embedded,
+                        embeddeds: [],
+                    });
+                    remain.splice(i, 1);
                 }
+                else {
+                    const parent = findParentStructure(embedded.parentFileName, embeddeds);
+                    if (parent) {
+                        parent.embeddeds.push({
+                            self: embedded,
+                            inheritParentIndent: true,
+                            embeddeds: [],
+                        });
+                        remain.splice(i, 1);
+                    }
+                }
             }
         }
+        function findParentStructure(fileName, strus) {
+            var _a;
+            for (const stru of strus) {
+                if (((_a = stru.self) === null || _a === void 0 ? void 0 : _a.file.fileName) === fileName) {
+                    return stru;
+                }
+                let _stru = findParentStructure(fileName, stru.embeddeds);
+                if (_stru) {
+                    return _stru;
+                }
+            }
+        }
     });
@@ -194,52 +331,156 @@ update(_content, _version);
         fileName,
-        getContent: (0, untrack_1.untrack)(() => content.value),
-        getSfcTemplateLanguageCompiled: (0, untrack_1.untrack)(() => sfcTemplateCompiled.value),
-        getSfcVueTemplateCompiled: (0, untrack_1.untrack)(() => sfcTemplateCompileResult.value),
+        getContent: (0, untrack_1.untrack)(() => fileContent.value),
+        getCompiledVue: (0, untrack_1.untrack)(() => compiledVue.value),
+        getSfcTemplateLanguageCompiled: (0, untrack_1.untrack)(() => computedHtmlTemplate.value),
+        getSfcVueTemplateCompiled: (0, untrack_1.untrack)(() => templateAstCompiled.value),
         getVersion: (0, untrack_1.untrack)(() => version.value),
-        getTemplateTagNames: (0, untrack_1.untrack)(() => { var _a; return (_a = sfcTemplateScript.templateCodeGens.value) === null || _a === void 0 ? void 0 : _a.tagNames; }),
-        getTemplateAttrNames: (0, untrack_1.untrack)(() => { var _a; return (_a = sfcTemplateScript.templateCodeGens.value) === null || _a === void 0 ? void 0 : _a.attrNames; }),
         update: (0, untrack_1.untrack)(update),
         getTemplateData: (0, untrack_1.untrack)(getTemplateData),
-        getScriptTsFile: (0, untrack_1.untrack)(() => sfcScriptForScriptLs.file.value),
-        getEmbeddedTemplate: (0, untrack_1.untrack)(() => sfcTemplate.embedded.value),
+        getScriptFileName: (0, untrack_1.untrack)(() => fileName + '.' + scriptLang.value),
         getDescriptor: (0, untrack_1.untrack)(() => (0, reactivity_1.unref)(sfc)),
         getScriptAst: (0, untrack_1.untrack)(() => scriptAst.value),
         getScriptSetupAst: (0, untrack_1.untrack)(() => scriptSetupAst.value),
-        getTemplateFormattingScript: (0, untrack_1.untrack)(() => sfcTemplateScript.formatEmbedded.value),
         getSfcRefSugarRanges: (0, untrack_1.untrack)(() => sfcRefSugarRanges.value),
         getEmbeddeds: (0, untrack_1.untrack)(() => embeddeds.value),
         getAllEmbeddeds: (0, untrack_1.untrack)(() => allEmbeddeds.value),
-        getLastUpdated: (0, untrack_1.untrack)(() => (0, reactivity_1.unref)(lastUpdated)),
         getScriptSetupRanges: (0, untrack_1.untrack)(() => scriptSetupRanges.value),
-        getSfcTemplateDocument: (0, untrack_1.untrack)(() => sfcTemplate.file.value),
-        isJsxMissing: () => !compilerOptions.experimentalDisableTemplateSupport && !((tsHost === null || tsHost === void 0 ? void 0 : tsHost.getCompilationSettings().jsx) === ts.JsxEmit.Preserve),
+        isJsxMissing: () => { var _a; return !compilerOptions.experimentalDisableTemplateSupport && ((_a = tsHost === null || tsHost === void 0 ? void 0 : tsHost.getCompilationSettings().jsx) !== null && _a !== void 0 ? _a : ts.JsxEmit.Preserve) !== ts.JsxEmit.Preserve; },
         refs: {
-            content,
+            content: fileContent,
             allEmbeddeds,
             teleports,
-            sfcTemplateScript,
-            sfcScriptForScriptLs,
         },
     };
+    function embeddedRangeToVueRange(data, range) {
+        var _a;
+        if (vueContent.value === undefined)
+            throw 'vueContent.value === undefined';
+        if (data.vueTag === 'scriptSrc') {
+            if (!((_a = sfc.script) === null || _a === void 0 ? void 0 : _a.src))
+                throw '!sfc.script?.src';
+            const vueStart = vueContent.value.substring(0, sfc.script.startTagEnd).lastIndexOf(sfc.script.src);
+            const vueEnd = vueStart + sfc.script.src.length;
+            return {
+                start: vueStart - 1,
+                end: vueEnd + 1,
+            };
+        }
+        else if (data.vueTag === 'script') {
+            if (!sfc.script)
+                throw '!sfc.script';
+            return {
+                start: range.start + sfc.script.startTagEnd,
+                end: range.end + sfc.script.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'scriptSetup') {
+            if (!sfc.scriptSetup)
+                throw '!sfc.scriptSetup';
+            return {
+                start: range.start + sfc.scriptSetup.startTagEnd,
+                end: range.end + sfc.scriptSetup.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'template') {
+            if (!sfc.template)
+                throw '!sfc.template';
+            return {
+                start: range.start + sfc.template.startTagEnd,
+                end: range.end + sfc.template.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'style') {
+            if (data.vueTagIndex === undefined)
+                throw 'data.vueTagIndex === undefined';
+            return {
+                start: range.start + sfc.styles[data.vueTagIndex].startTagEnd,
+                end: range.end + sfc.styles[data.vueTagIndex].startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'customBlock') {
+            if (data.vueTagIndex === undefined)
+                throw 'data.vueTagIndex === undefined';
+            return {
+                start: range.start + sfc.customBlocks[data.vueTagIndex].startTagEnd,
+                end: range.end + sfc.customBlocks[data.vueTagIndex].startTagEnd,
+            };
+        }
+        return range;
+    }
+    function vueRangeToEmbeddedRange(data, range) {
+        if (vueContent.value === undefined)
+            throw 'vueContent.value === undefined';
+        if (data.vueTag === 'script') {
+            if (!sfc.script)
+                throw '!sfc.script';
+            return {
+                start: range.start - sfc.script.startTagEnd,
+                end: range.end - sfc.script.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'scriptSetup') {
+            if (!sfc.scriptSetup)
+                throw '!sfc.scriptSetup';
+            return {
+                start: range.start - sfc.scriptSetup.startTagEnd,
+                end: range.end - sfc.scriptSetup.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'template') {
+            if (!sfc.template)
+                throw '!sfc.template';
+            return {
+                start: range.start - sfc.template.startTagEnd,
+                end: range.end - sfc.template.startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'style') {
+            if (data.vueTagIndex === undefined)
+                throw 'data.vueTagIndex === undefined';
+            return {
+                start: range.start - sfc.styles[data.vueTagIndex].startTagEnd,
+                end: range.end - sfc.styles[data.vueTagIndex].startTagEnd,
+            };
+        }
+        else if (data.vueTag === 'customBlock') {
+            if (data.vueTagIndex === undefined)
+                throw 'data.vueTagIndex === undefined';
+            return {
+                start: range.start - sfc.customBlocks[data.vueTagIndex].startTagEnd,
+                end: range.end - sfc.customBlocks[data.vueTagIndex].startTagEnd,
+            };
+        }
+        return range;
+    }
     function update(newContent, newVersion) {
-        var _a, _b;
-        const scriptLang_1 = sfcScriptForScriptLs.file.value.lang;
-        const scriptText_1 = sfcScriptForScriptLs.file.value.content;
-        const templateScriptContent = (_a = sfcTemplateScript.file.value) === null || _a === void 0 ? void 0 : _a.content;
-        content.value = newContent;
+        const oldScripts = {};
+        for (const embedded of allEmbeddeds.value) {
+            if (embedded.file.isTsHostFile) {
+                oldScripts[embedded.file.fileName] = embedded.file.content;
+            }
+        }
+        fileContent.value = newContent;
         version.value = newVersion;
-        updateTemplate(parsedSfc.value.descriptor.template);
-        updateScript(parsedSfc.value.descriptor.script);
-        updateScriptSetup(parsedSfc.value.descriptor.scriptSetup);
-        updateStyles(parsedSfc.value.descriptor.styles);
-        updateCustomBlocks(parsedSfc.value.descriptor.customBlocks);
-        const scriptLang_2 = sfcScriptForScriptLs.file.value.lang;
-        const scriptText_2 = sfcScriptForScriptLs.file.value.content;
-        const templateScriptContent_2 = (_b = sfcTemplateScript.file.value) === null || _b === void 0 ? void 0 : _b.content;
+        // TODO: wait for https://github.com/vuejs/core/pull/5912
+        if (parsedSfc.value) {
+            updateTemplate(parsedSfc.value.descriptor.template);
+            updateScript(parsedSfc.value.descriptor.script);
+            updateScriptSetup(parsedSfc.value.descriptor.scriptSetup);
+            updateStyles(parsedSfc.value.descriptor.styles);
+            updateCustomBlocks(parsedSfc.value.descriptor.customBlocks);
+        }
+        const newScripts = {};
+        for (const embedded of allEmbeddeds.value) {
+            if (embedded.file.isTsHostFile) {
+                newScripts[embedded.file.fileName] = embedded.file.content;
+            }
+        }
         return {
-            scriptUpdated: scriptLang_1 !== scriptLang_2 || scriptText_1 !== scriptText_2 || templateScriptContent !== templateScriptContent_2, // TODO
+            scriptUpdated: Object.keys(oldScripts).length !== Object.keys(newScripts).length
+                || Object.keys(oldScripts).some(fileName => oldScripts[fileName] !== newScripts[fileName]),
         };
         function updateTemplate(block) {
-            var _a, _b, _c;
+            var _a;
             const newData = block ? {
+                tag: 'template',
                 start: newContent.substring(0, block.loc.start.offset).lastIndexOf('<'),
@@ -252,4 +493,2 @@ end: block.loc.end.offset + newContent.substring(block.loc.end.offset).indexOf('>') + 1,
             } : null;
-            lastUpdated.template = ((_b = sfc.template) === null || _b === void 0 ? void 0 : _b.lang) !== (newData === null || newData === void 0 ? void 0 : newData.lang)
-                || ((_c = sfc.template) === null || _c === void 0 ? void 0 : _c.content) !== (newData === null || newData === void 0 ? void 0 : newData.content);
             if (sfc.template && newData) {
@@ -263,4 +502,5 @@ updateBlock(sfc.template, newData);
         function updateScript(block) {
-            var _a, _b, _c;
+            var _a;
             const newData = block ? {
+                tag: 'script',
                 start: newContent.substring(0, block.loc.start.offset).lastIndexOf('<'),
@@ -274,4 +514,2 @@ end: block.loc.end.offset + newContent.substring(block.loc.end.offset).indexOf('>') + 1,
             } : null;
-            lastUpdated.script = ((_b = sfc.script) === null || _b === void 0 ? void 0 : _b.lang) !== (newData === null || newData === void 0 ? void 0 : newData.lang)
-                || ((_c = sfc.script) === null || _c === void 0 ? void 0 : _c.content) !== (newData === null || newData === void 0 ? void 0 : newData.content);
             if (sfc.script && newData) {
@@ -285,4 +523,5 @@ updateBlock(sfc.script, newData);
         function updateScriptSetup(block) {
-            var _a, _b, _c;
+            var _a;
             const newData = block ? {
+                tag: 'scriptSetup',
                 start: newContent.substring(0, block.loc.start.offset).lastIndexOf('<'),
@@ -295,4 +534,2 @@ end: block.loc.end.offset + newContent.substring(block.loc.end.offset).indexOf('>') + 1,
             } : null;
-            lastUpdated.scriptSetup = ((_b = sfc.scriptSetup) === null || _b === void 0 ? void 0 : _b.lang) !== (newData === null || newData === void 0 ? void 0 : newData.lang)
-                || ((_c = sfc.scriptSetup) === null || _c === void 0 ? void 0 : _c.content) !== (newData === null || newData === void 0 ? void 0 : newData.content);
             if (sfc.scriptSetup && newData) {
@@ -310,2 +547,3 @@ updateBlock(sfc.scriptSetup, newData);
                 const newData = {
+                    tag: 'style',
                     start: newContent.substring(0, block.loc.start.offset).lastIndexOf('<'),
@@ -336,2 +574,3 @@ end: block.loc.end.offset + newContent.substring(block.loc.end.offset).indexOf('>') + 1,
                 const newData = {
+                    tag: 'customBlock',
                     start: newContent.substring(0, block.loc.start.offset).lastIndexOf('<'),
@@ -363,3 +602,3 @@ end: block.loc.end.offset + newContent.substring(block.loc.end.offset).indexOf('>') + 1,
     function getTemplateData() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!tsHost)
@@ -377,8 +616,8 @@ return templateScriptData;
         };
-        const file = sfcTemplateScript.file.value;
+        const file = (_b = allEmbeddeds.value.find(e => e.file.fileName.indexOf('.__VLS_template.') >= 0)) === null || _b === void 0 ? void 0 : _b.file;
         const hasFile = file &&
             file.content.indexOf(string_1.SearchTexts.Components) >= 0 &&
             // getSourceFile return undefined for lang=js with allowJs=false;
-            !!((_b = tsLs.getProgram()) === null || _b === void 0 ? void 0 : _b.getSourceFile(file.fileName));
-        let components = hasFile ? (_d = (_c = tsLs.getCompletionsAtPosition(file.fileName, file.content.indexOf(string_1.SearchTexts.Components), options)) === null || _c === void 0 ? void 0 : _c.entries.filter(entry => entry.kind !== ts.ScriptElementKind.warning)) !== null && _d !== void 0 ? _d : [] : [];
+            !!((_c = tsLs.getProgram()) === null || _c === void 0 ? void 0 : _c.getSourceFile(file.fileName));
+        let components = hasFile ? (_e = (_d = tsLs.getCompletionsAtPosition(file.fileName, file.content.indexOf(string_1.SearchTexts.Components), options)) === null || _d === void 0 ? void 0 : _d.entries.filter(entry => entry.kind !== ts.ScriptElementKind.warning)) !== null && _e !== void 0 ? _e : [] : [];
         components = components.filter(entry => {
@@ -395,12 +634,55 @@ return entry.name.indexOf('$') === -1 && !entry.name.startsWith('_');
     }
-    function getCssVBindRanges(embeddedFile) {
-        let binds = cssVars.get(embeddedFile);
-        if (!binds) {
-            binds = [...(0, parseCssVars_1.parseCssVars)(embeddedFile.content)];
-            cssVars.set(embeddedFile, binds);
+}
+exports.createVueFile = createVueFile;
+function useCssModuleClasses(sfc) {
+    return (0, reactivity_1.computed)(() => {
+        const result = [];
+        for (let i = 0; i < sfc.styles.length; i++) {
+            const style = sfc.styles[i];
+            if (style.module) {
+                result.push({
+                    style: style,
+                    index: i,
+                    classNameRanges: [...(0, parseCssClassNames_1.parseCssClassNames)(style.content)],
+                });
+            }
         }
-        return binds;
-    }
+        return result;
+    });
 }
-exports.createVueFile = createVueFile;
+exports.useCssModuleClasses = useCssModuleClasses;
+function useCssScopedClasses(sfc, compilerOptions) {
+    return (0, reactivity_1.computed)(() => {
+        var _a;
+        const result = [];
+        const setting = (_a = compilerOptions.experimentalResolveStyleCssClasses) !== null && _a !== void 0 ? _a : 'scoped';
+        for (let i = 0; i < sfc.styles.length; i++) {
+            const style = sfc.styles[i];
+            if ((setting === 'scoped' && style.scoped) || setting === 'always') {
+                result.push({
+                    style: style,
+                    index: i,
+                    classNameRanges: [...(0, parseCssClassNames_1.parseCssClassNames)(style.content)],
+                });
+            }
+        }
+        return result;
+    });
+}
+exports.useCssScopedClasses = useCssScopedClasses;
+function useCssVars(sfc) {
+    return (0, reactivity_1.computed)(() => {
+        const result = [];
+        for (let i = 0; i < sfc.styles.length; i++) {
+            const style = sfc.styles[i];
+            result.push({
+                style: style,
+                styleIndex: i,
+                ranges: [...(0, parseCssVars_1.parseCssVars)(style.content)],
+            });
+        }
+        return result;
+    });
+}
+exports.useCssVars = useCssVars;
 const validScriptSyntaxs = ['js', 'jsx', 'ts', 'tsx'];
@@ -413,2 +695,5 @@ function getValidScriptSyntax(syntax) {
 }
+function notEmpty(value) {
+    return value !== null && value !== undefined;
+}
 //# sourceMappingURL=vueFile.js.map

package.json

 {
 	"name": "@volar/vue-typescript",
-	"version": "0.36.1",
+	"version": "0.37.0",
 	"main": "out/index.js",
@@ -16,16 +16,19 @@ "license": "MIT",
 	"devDependencies": {
-		"@volar/pug-language-service": "0.36.1",
+		"@types/markdown-it": "^12.2.3",
+		"@volar/pug-language-service": "0.37.0",
 		"typescript": "latest"
 	},
 	"dependencies": {
-		"@volar/code-gen": "0.36.1",
-		"@volar/source-map": "0.36.1",
-		"@volar/vue-code-gen": "0.36.1",
-		"@vue/compiler-sfc": "^3.2.36",
-		"@vue/reactivity": "^3.2.36"
+		"@volar/code-gen": "0.37.0",
+		"@volar/source-map": "0.37.0",
+		"@volar/vue-code-gen": "0.37.0",
+		"@vue/compiler-sfc": "^3.2.37",
+		"@vue/reactivity": "^3.2.37",
+		"markdown-it": "^13.0.1",
+		"markdown-it-ast": "^0.0.1"
 	},
 	"browser": {
-		"./out/plugins/pug.js": "./out/plugins/empty.js"
+		"./out/plugins/vue-template-pug.js": "./out/plugins/empty.js"
 	},
-	"gitHead": "d0e4dbd21d1c0f28d0015c96390cca535c85bf24"
+	"gitHead": "e72a5db00ee63b1ebe239b22733cfc93e304fae6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162009

increased by32.28%

Number of package files

74

increased by60.87%

Lines of code

3488

increased by34.98%

Worsened metrics

Dependency count

7

increased by40%

Dev dependency count

3

increased by50%

Dependency changes

• + Addedmarkdown-it@^13.0.1

• + Addedmarkdown-it-ast@^0.0.1

• + Added@volar/code-gen@0.37.0(transitive)

• + Added@volar/source-map@0.37.0(transitive)

• + Added@volar/vue-code-gen@0.37.0(transitive)

• + Addedargparse@2.0.1(transitive)

• + Addedentities@3.0.1(transitive)

• + Addedlinkify-it@4.0.1(transitive)

• + Addedmarkdown-it@13.0.2(transitive)

• + Addedmarkdown-it-ast@0.0.1(transitive)

• + Addedmdurl@1.0.1(transitive)

• + Addeduc.micro@1.0.6(transitive)

• - Removed@volar/code-gen@0.36.1(transitive)

• - Removed@volar/source-map@0.36.1(transitive)

• - Removed@volar/vue-code-gen@0.36.1(transitive)

• Updated@volar/code-gen@0.37.0

• Updated@volar/source-map@0.37.0

• Updated@volar/vue-code-gen@0.37.0

• Updated@vue/compiler-sfc@^3.2.37

• Updated@vue/reactivity@^3.2.37