@vue/language-core 2.0.0 → 2.0.2

package/lib/generators/template.js

@@ -0,0 +1,1567 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eachElementNode = exports.generate = void 0;
+const language_core_1 = require("@volar/language-core");
+const CompilerDOM = require("@vue/compiler-dom");
+const shared_1 = require("@vue/shared");
+const minimatch_1 = require("minimatch");
+const shared_2 = require("../utils/shared");
+const transform_1 = require("../utils/transform");
+const utils_1 = require("./utils");
+const presetInfos = {
+    disabledAll: (0, utils_1.disableAllFeatures)({}),
+    all: (0, utils_1.enableAllFeatures)({}),
+    allWithHiddenParam: (0, utils_1.enableAllFeatures)({
+        __hint: {
+            setting: 'vue.inlayHints.inlineHandlerLeading',
+            label: '$event =>',
+            tooltip: [
+                '`$event` is a hidden parameter, you can use it in this callback.',
+                'To hide this hint, set `vue.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
+                '[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
+            ].join('\n\n'),
+            paddingRight: true,
+        }
+    }),
+    noDiagnostics: (0, utils_1.enableAllFeatures)({ verification: false }),
+    diagnosticOnly: (0, utils_1.disableAllFeatures)({ verification: true }),
+    tagHover: (0, utils_1.disableAllFeatures)({ semantic: { shouldHighlight: () => false } }),
+    event: (0, utils_1.disableAllFeatures)({ semantic: { shouldHighlight: () => false }, verification: true }),
+    tagReference: (0, utils_1.disableAllFeatures)({ navigation: { shouldRename: () => false } }),
+    attr: (0, utils_1.disableAllFeatures)({ semantic: { shouldHighlight: () => false }, verification: true, navigation: true }),
+    attrReference: (0, utils_1.disableAllFeatures)({ navigation: true }),
+    slotProp: (0, utils_1.disableAllFeatures)({ navigation: true, verification: true }),
+    scopedClassName: (0, utils_1.disableAllFeatures)({ navigation: true, completion: true }),
+    slotName: (0, utils_1.disableAllFeatures)({ semantic: { shouldHighlight: () => false }, verification: true, navigation: true, completion: true }),
+    slotNameExport: (0, utils_1.disableAllFeatures)({ semantic: { shouldHighlight: () => false }, verification: true, navigation: true, /* __navigationCodeLens: true */ }),
+    refAttr: (0, utils_1.disableAllFeatures)({ navigation: true }),
+};
+const formatBrackets = {
+    normal: ['`${', '}`;'],
+    // fix https://github.com/vuejs/language-tools/issues/3572
+    params: ['(', ') => {}'],
+    // fix https://github.com/vuejs/language-tools/issues/1210
+    // fix https://github.com/vuejs/language-tools/issues/2305
+    curly: ['0 +', '+ 0;'],
+    event: ['() => ', ';'],
+};
+const validTsVarReg = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+const colonReg = /:/g;
+// @ts-ignore
+const transformContext = {
+    onError: () => { },
+    helperString: str => str.toString(),
+    replaceNode: () => { },
+    cacheHandlers: false,
+    prefixIdentifiers: false,
+    scopes: {
+        vFor: 0,
+        vOnce: 0,
+        vPre: 0,
+        vSlot: 0,
+    },
+    expressionPlugins: ['typescript'],
+};
+function* generate(ts, compilerOptions, vueCompilerOptions, template, shouldGenerateScopedClasses, stylesScopedClasses, hasScriptSetupSlots, slotsAssignName, propsAssignName, codegenStack) {
+    const processDirectiveComment = (code) => {
+        if (ignoreError && typeof code !== 'string') {
+            const data = code[3];
+            if (data.verification) {
+                code[3] = {
+                    ...data,
+                    verification: false,
+                };
+            }
+        }
+        if (expectErrorToken && typeof code !== 'string') {
+            const token = expectErrorToken;
+            const data = code[3];
+            if (data.verification) {
+                code[3] = {
+                    ...data,
+                    verification: {
+                        shouldReport: () => {
+                            token.errors++;
+                            return false;
+                        },
+                    },
+                };
+            }
+        }
+        return code;
+    };
+    const _ts = codegenStack
+        ? (code) => ['ts', processDirectiveComment(code), (0, utils_1.getStack)()]
+        : (code) => ['ts', processDirectiveComment(code), ''];
+    const _tsFormat = codegenStack
+        ? (code) => ['tsFormat', code, (0, utils_1.getStack)()]
+        : (code) => ['tsFormat', code, ''];
+    const _inlineCss = codegenStack
+        ? (code) => ['inlineCss', code, (0, utils_1.getStack)()]
+        : (code) => ['inlineCss', code, ''];
+    const nativeTags = new Set(vueCompilerOptions.nativeTags);
+    const slots = new Map();
+    const slotExps = new Map();
+    const tagOffsetsMap = collectTagOffsets();
+    const localVars = new Map();
+    const tempVars = [];
+    const accessedGlobalVariables = new Set();
+    const scopedClasses = [];
+    const blockConditions = [];
+    const hasSlotElements = new Set();
+    const usedComponentCtxVars = new Set();
+    let hasSlot = false;
+    let ignoreError = false;
+    let expectErrorToken;
+    let expectedErrorNode;
+    let elementIndex = 0;
+    if (slotsAssignName) {
+        localVars.set(slotsAssignName, 1);
+    }
+    if (propsAssignName) {
+        localVars.set(propsAssignName, 1);
+    }
+    yield* generatePreResolveComponents();
+    if (template.ast) {
+        yield* generateAstNode(template.ast, undefined, undefined, undefined);
+    }
+    yield* generateStyleScopedClasses();
+    if (!hasScriptSetupSlots) {
+        yield _ts('var __VLS_slots!:');
+        yield* generateSlotsType();
+        yield _ts(';\n');
+    }
+    yield* generateExtraAutoImport();
+    return {
+        tagOffsetsMap,
+        accessedGlobalVariables,
+        hasSlot,
+    };
+    function collectTagOffsets() {
+        const tagOffsetsMap = new Map();
+        if (!template.ast) {
+            return tagOffsetsMap;
+        }
+        for (const node of eachElementNode(template.ast)) {
+            if (node.tag === 'slot') {
+                // ignore
+            }
+            else if (node.tag === 'component' || node.tag === 'Component') {
+                for (const prop of node.props) {
+                    if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'is' && prop.value) {
+                        const tag = prop.value.content;
+                        let offsets = tagOffsetsMap.get(tag);
+                        if (!offsets) {
+                            tagOffsetsMap.set(tag, offsets = []);
+                        }
+                        offsets.push(prop.value.loc.start.offset + prop.value.loc.source.lastIndexOf(tag));
+                        break;
+                    }
+                }
+            }
+            else {
+                let offsets = tagOffsetsMap.get(node.tag);
+                if (!offsets) {
+                    tagOffsetsMap.set(node.tag, offsets = []);
+                }
+                const source = template.content.substring(node.loc.start.offset);
+                const startTagOffset = node.loc.start.offset + source.indexOf(node.tag);
+                offsets.push(startTagOffset); // start tag
+                if (!node.isSelfClosing && template.lang === 'html') {
+                    const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+                    if (endTagOffset !== startTagOffset) {
+                        offsets.push(endTagOffset); // end tag
+                    }
+                }
+            }
+        }
+        return tagOffsetsMap;
+    }
+    function* generateExpectErrorComment() {
+        if (expectErrorToken && expectedErrorNode) {
+            const token = expectErrorToken;
+            yield _ts([
+                '',
+                'template',
+                expectedErrorNode.loc.start.offset,
+                (0, utils_1.disableAllFeatures)({
+                    verification: {
+                        shouldReport: () => token.errors === 0,
+                    },
+                }),
+            ]);
+            yield _ts('// @ts-expect-error __VLS_TS_EXPECT_ERROR');
+            yield _ts([
+                '',
+                'template',
+                expectedErrorNode.loc.end.offset,
+                (0, utils_1.disableAllFeatures)({ __combineLastMappping: true }),
+            ]);
+            yield _ts('\n;\n');
+        }
+        ignoreError = false;
+        expectErrorToken = undefined;
+        expectedErrorNode = undefined;
+    }
+    function* generateCanonicalComponentName(tagText, offset, info) {
+        if (validTsVarReg.test(tagText)) {
+            yield _ts([tagText, 'template', offset, info]);
+        }
+        else {
+            yield* generateCamelized((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), offset, info);
+        }
+    }
+    function* generateSlotsType() {
+        for (const [exp, slot] of slotExps) {
+            hasSlot = true;
+            yield _ts(`Partial<Record<NonNullable<typeof ${exp}>, (_: typeof ${slot.varName}) => any>> &\n`);
+        }
+        yield _ts(`{\n`);
+        for (const [_, slot] of slots) {
+            hasSlot = true;
+            if (slot.name && slot.loc !== undefined) {
+                yield* generateObjectProperty(slot.name, slot.loc, (0, utils_1.mergeFeatureSettings)(presetInfos.slotNameExport, (0, utils_1.disableAllFeatures)({ __referencesCodeLens: true })), slot.nodeLoc);
+            }
+            else {
+                yield _ts(['', 'template', slot.tagRange[0], (0, utils_1.mergeFeatureSettings)(presetInfos.slotNameExport, (0, utils_1.disableAllFeatures)({ __referencesCodeLens: true }))]);
+                yield _ts('default');
+                yield _ts(['', 'template', slot.tagRange[1], (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            }
+            yield _ts(`?(_: typeof ${slot.varName}): any,\n`);
+        }
+        yield _ts(`}`);
+    }
+    function* generateStyleScopedClasses() {
+        yield _ts(`if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {\n`);
+        for (const { className, offset } of scopedClasses) {
+            yield _ts(`__VLS_styleScopedClasses[`);
+            yield* generateStringLiteralKey(className, offset, (0, utils_1.mergeFeatureSettings)(presetInfos.scopedClassName, (0, utils_1.disableAllFeatures)({ __displayWithLink: stylesScopedClasses.has(className) })));
+            yield _ts(`];\n`);
+        }
+        yield _ts('}\n');
+    }
+    function* generatePreResolveComponents() {
+        yield _ts(`let __VLS_resolvedLocalAndGlobalComponents!: {}\n`);
+        for (const [tagName] of tagOffsetsMap) {
+            if (nativeTags.has(tagName))
+                continue;
+            const isNamespacedTag = tagName.indexOf('.') >= 0;
+            if (isNamespacedTag)
+                continue;
+            yield _ts(`& __VLS_WithComponent<'${getCanonicalComponentName(tagName)}', typeof __VLS_localComponents, `);
+            // order is important: https://github.com/vuejs/language-tools/issues/2010
+            yield _ts(`"${(0, shared_1.capitalize)((0, shared_1.camelize)(tagName))}", `);
+            yield _ts(`"${(0, shared_1.camelize)(tagName)}", `);
+            yield _ts(`"${tagName}"`);
+            yield _ts('>\n');
+        }
+        yield _ts(`;\n`);
+        for (const [tagName, tagOffsets] of tagOffsetsMap) {
+            for (const tagOffset of tagOffsets) {
+                if (nativeTags.has(tagName)) {
+                    yield _ts(`__VLS_intrinsicElements`);
+                    yield* generatePropertyAccess(tagName, tagOffset, (0, utils_1.mergeFeatureSettings)(presetInfos.tagReference, {
+                        navigation: true
+                    }, ...[
+                        presetInfos.tagHover,
+                        presetInfos.diagnosticOnly,
+                    ]));
+                    yield _ts(';');
+                }
+                else if (validTsVarReg.test((0, shared_1.camelize)(tagName))) {
+                    for (const shouldCapitalize of tagName[0] === tagName.toUpperCase() ? [false] : [true, false]) {
+                        const expectName = shouldCapitalize ? (0, shared_1.capitalize)((0, shared_1.camelize)(tagName)) : (0, shared_1.camelize)(tagName);
+                        yield _ts('__VLS_components.');
+                        yield* generateCamelized(shouldCapitalize ? (0, shared_1.capitalize)(tagName) : tagName, tagOffset, (0, utils_1.mergeFeatureSettings)(presetInfos.tagReference, {
+                            navigation: {
+                                resolveRenameNewName: tagName !== expectName ? camelizeComponentName : undefined,
+                                resolveRenameEditText: getTagRenameApply(tagName),
+                            }
+                        }));
+                        yield _ts(';');
+                    }
+                }
+            }
+            yield _ts('\n');
+            if (!nativeTags.has(tagName)
+                && validTsVarReg.test((0, shared_1.camelize)(tagName))) {
+                yield _ts('// @ts-ignore\n'); // #2304
+                yield _ts('[');
+                for (const tagOffset of tagOffsets) {
+                    yield* generateCamelized((0, shared_1.capitalize)(tagName), tagOffset, (0, utils_1.disableAllFeatures)({
+                        completion: {
+                            isAdditional: true,
+                            onlyImport: true,
+                        },
+                    }));
+                    yield _ts(',');
+                }
+                yield _ts(`];\n`);
+            }
+        }
+    }
+    function* generateAstNode(node, parentEl, prevNode, componentCtxVar) {
+        yield* generateExpectErrorComment();
+        if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
+            const commentText = prevNode.content.trim().split(' ')[0];
+            if (commentText.match(/^@vue-skip\b[\s\S]*/)) {
+                return;
+            }
+            else if (commentText.match(/^@vue-ignore\b[\s\S]*/)) {
+                ignoreError = true;
+            }
+            else if (commentText.match(/^@vue-expect-error\b[\s\S]*/)) {
+                expectErrorToken = { errors: 0 };
+                expectedErrorNode = prevNode;
+            }
+        }
+        if (node.type === CompilerDOM.NodeTypes.ROOT) {
+            let prev;
+            for (const childNode of node.children) {
+                yield* generateAstNode(childNode, parentEl, prev, componentCtxVar);
+                prev = childNode;
+            }
+            yield* generateExpectErrorComment();
+        }
+        else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+            const vForNode = getVForNode(node);
+            const vIfNode = getVIfNode(node);
+            if (vForNode) {
+                yield* generateVFor(vForNode, parentEl, componentCtxVar);
+            }
+            else if (vIfNode) {
+                yield* generateVIf(vIfNode, parentEl, componentCtxVar);
+            }
+            else {
+                yield* generateElement(node, parentEl, componentCtxVar);
+            }
+        }
+        else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {
+            // {{ var }}
+            yield* generateAstNode(node.content, parentEl, undefined, componentCtxVar);
+        }
+        else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
+            // {{ ... }} {{ ... }}
+            for (const childNode of node.children) {
+                if (typeof childNode === 'object') {
+                    yield* generateAstNode(childNode, parentEl, undefined, componentCtxVar);
+                }
+            }
+        }
+        else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
+            // {{ ... }}
+            let content = node.content.loc.source;
+            let start = node.content.loc.start.offset;
+            let leftCharacter;
+            let rightCharacter;
+            // fix https://github.com/vuejs/language-tools/issues/1787
+            while ((leftCharacter = template.content.substring(start - 1, start)).trim() === '' && leftCharacter.length) {
+                start--;
+                content = leftCharacter + content;
+            }
+            while ((rightCharacter = template.content.substring(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
+                content = content + rightCharacter;
+            }
+            yield* generateInterpolation(content, node.content.loc, start, presetInfos.all, '(', ');\n');
+            const lines = content.split('\n');
+            yield* generateTsFormat(content, start, lines.length <= 1 ? formatBrackets.curly : [
+                lines[0].trim() === '' ? '(' : formatBrackets.curly[0],
+                lines[lines.length - 1].trim() === '' ? ')' : formatBrackets.curly[1],
+            ]);
+        }
+        else if (node.type === CompilerDOM.NodeTypes.IF) {
+            // v-if / v-else-if / v-else
+            yield* generateVIf(node, parentEl, componentCtxVar);
+        }
+        else if (node.type === CompilerDOM.NodeTypes.FOR) {
+            // v-for
+            yield* generateVFor(node, parentEl, componentCtxVar);
+        }
+        else if (node.type === CompilerDOM.NodeTypes.TEXT) {
+            // not needed progress
+        }
+    }
+    function* generateVIf(node, parentEl, componentCtxVar) {
+        let originalBlockConditionsLength = blockConditions.length;
+        for (let i = 0; i < node.branches.length; i++) {
+            const branch = node.branches[i];
+            if (i === 0)
+                yield _ts('if');
+            else if (branch.condition)
+                yield _ts('else if');
+            else
+                yield _ts('else');
+            let addedBlockCondition = false;
+            if (branch.condition?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                yield _ts(` `);
+                yield* generateInterpolation(branch.condition.content, branch.condition.loc, branch.condition.loc.start.offset, presetInfos.all, '(', ')');
+                blockConditions.push((0, language_core_1.toString)([...generateInterpolation(branch.condition.content, branch.condition.loc, undefined, undefined, '(', ')')]
+                    .map(code => code[1])));
+                addedBlockCondition = true;
+                yield* generateTsFormat(branch.condition.content, branch.condition.loc.start.offset, formatBrackets.normal);
+            }
+            yield _ts(` {\n`);
+            let prev;
+            for (const childNode of branch.children) {
+                yield* generateAstNode(childNode, parentEl, prev, componentCtxVar);
+                prev = childNode;
+            }
+            yield* generateExpectErrorComment();
+            yield* generateExtraAutoImport();
+            yield _ts('}\n');
+            if (addedBlockCondition) {
+                blockConditions[blockConditions.length - 1] = `!(${blockConditions[blockConditions.length - 1]})`;
+            }
+        }
+        blockConditions.length = originalBlockConditionsLength;
+    }
+    function* generateVFor(node, parentEl, componentCtxVar) {
+        const { source, value, key, index } = node.parseResult;
+        const leftExpressionRange = value ? { start: (value ?? key ?? index).loc.start.offset, end: (index ?? key ?? value).loc.end.offset } : undefined;
+        const leftExpressionText = leftExpressionRange ? node.loc.source.substring(leftExpressionRange.start - node.loc.start.offset, leftExpressionRange.end - node.loc.start.offset) : undefined;
+        const forBlockVars = [];
+        yield _ts(`for (const [`);
+        if (leftExpressionRange && leftExpressionText) {
+            const collectAst = createTsAst(node.parseResult, `const [${leftExpressionText}]`);
+            (0, transform_1.collectVars)(ts, collectAst, collectAst, forBlockVars);
+            for (const varName of forBlockVars)
+                localVars.set(varName, (localVars.get(varName) ?? 0) + 1);
+            yield _ts([leftExpressionText, 'template', leftExpressionRange.start, presetInfos.all]);
+            yield* generateTsFormat(leftExpressionText, leftExpressionRange.start, formatBrackets.normal);
+        }
+        yield _ts(`] of __VLS_getVForSourceType`);
+        if (source.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+            yield _ts('(');
+            yield* generateInterpolation(source.content, source.loc, source.loc.start.offset, presetInfos.all, '(', ')');
+            yield _ts('!)'); // #3102
+            yield _ts(') {\n');
+            let prev;
+            for (const childNode of node.children) {
+                yield* generateAstNode(childNode, parentEl, prev, componentCtxVar);
+                prev = childNode;
+            }
+            yield* generateExpectErrorComment();
+            yield* generateExtraAutoImport();
+            yield _ts('}\n');
+            yield* generateTsFormat(source.content, source.loc.start.offset, formatBrackets.normal);
+        }
+        for (const varName of forBlockVars)
+            localVars.set(varName, localVars.get(varName) - 1);
+    }
+    function* generateElement(node, parentEl, componentCtxVar) {
+        yield _ts(`{\n`);
+        const startTagOffset = node.loc.start.offset + template.content.substring(node.loc.start.offset).indexOf(node.tag);
+        let endTagOffset = !node.isSelfClosing && template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
+        if (endTagOffset === startTagOffset) {
+            endTagOffset = undefined;
+        }
+        let tag = node.tag;
+        let tagOffsets = endTagOffset !== undefined ? [startTagOffset, endTagOffset] : [startTagOffset];
+        let props = node.props;
+        const propsFailedExps = [];
+        const isNamespacedTag = tag.indexOf('.') >= 0;
+        const var_originalComponent = `__VLS_${elementIndex++}`;
+        const var_functionalComponent = `__VLS_${elementIndex++}`;
+        const var_componentInstance = `__VLS_${elementIndex++}`;
+        let dynamicTagExp;
+        if (tag === 'slot') {
+            tagOffsets.length = 0;
+        }
+        else if (tag === 'component' || tag === 'Component') {
+            tagOffsets.length = 0;
+            for (const prop of node.props) {
+                if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'is' && prop.value) {
+                    tag = prop.value.content;
+                    tagOffsets = [prop.value.loc.start.offset + prop.value.loc.source.lastIndexOf(tag)];
+                    props = props.filter(p => p !== prop);
+                    break;
+                }
+                else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.arg?.loc.source === 'is' && prop.exp) {
+                    dynamicTagExp = prop.exp;
+                    props = props.filter(p => p !== prop);
+                    break;
+                }
+            }
+        }
+        const isIntrinsicElement = nativeTags.has(tag) && tagOffsets.length;
+        if (isIntrinsicElement) {
+            yield _ts('const ');
+            yield _ts(var_originalComponent);
+            yield _ts(` = __VLS_intrinsicElements[`);
+            yield* generateStringLiteralKey(tag, tagOffsets[0], presetInfos.diagnosticOnly);
+            yield _ts('];\n');
+        }
+        else if (isNamespacedTag) {
+            yield _ts(`const ${var_originalComponent} = `);
+            yield* generateInterpolation(tag, node.loc, startTagOffset, presetInfos.all, '', '');
+            yield _ts(';\n');
+        }
+        else if (dynamicTagExp) {
+            yield _ts(`const ${var_originalComponent} = `);
+            yield* generateInterpolation(dynamicTagExp.loc.source, dynamicTagExp.loc, dynamicTagExp.loc.start.offset, presetInfos.all, '(', ')');
+            yield _ts(';\n');
+        }
+        else {
+            yield _ts(`const ${var_originalComponent} = ({} as `);
+            for (const componentName of getPossibleOriginalComponentNames(tag)) {
+                yield _ts(`'${componentName}' extends keyof typeof __VLS_ctx ? `);
+                yield _ts(`{ '${getCanonicalComponentName(tag)}': typeof __VLS_ctx`);
+                yield* generatePropertyAccess(componentName);
+                yield _ts(` }: `);
+            }
+            yield _ts(`typeof __VLS_resolvedLocalAndGlobalComponents)`);
+            if (tagOffsets.length) {
+                yield* generatePropertyAccess(getCanonicalComponentName(tag), tagOffsets[0], presetInfos.diagnosticOnly);
+            }
+            else {
+                yield* generatePropertyAccess(getCanonicalComponentName(tag));
+            }
+            yield _ts(';\n');
+        }
+        if (isIntrinsicElement) {
+            yield _ts(`const ${var_functionalComponent} = __VLS_elementAsFunctionalComponent(${var_originalComponent});\n`);
+        }
+        else {
+            yield _ts(`const ${var_functionalComponent} = __VLS_asFunctionalComponent(`);
+            yield _ts(`${var_originalComponent}, `);
+            yield _ts(`new ${var_originalComponent}({`);
+            yield* generateProps(node, props, 'extraReferences');
+            yield _ts('})');
+            yield _ts(');\n');
+        }
+        for (const offset of tagOffsets) {
+            if (isNamespacedTag || dynamicTagExp || isIntrinsicElement) {
+                continue;
+            }
+            yield _ts(`({} as { ${getCanonicalComponentName(tag)}: typeof ${var_originalComponent} }).`);
+            yield* generateCanonicalComponentName(tag, offset, (0, utils_1.mergeFeatureSettings)(presetInfos.tagHover, presetInfos.diagnosticOnly));
+            yield _ts(';\n');
+        }
+        if (vueCompilerOptions.strictTemplates) {
+            // with strictTemplates, generate once for props type-checking + instance type
+            yield _ts(`const ${var_componentInstance} = ${var_functionalComponent}(`);
+            // diagnostic start
+            yield _ts(tagOffsets.length ? ['', 'template', tagOffsets[0], presetInfos.diagnosticOnly]
+                : dynamicTagExp ? ['', 'template', startTagOffset, presetInfos.diagnosticOnly]
+                    : '');
+            yield _ts('{ ');
+            yield* generateProps(node, props, 'normal', propsFailedExps);
+            yield _ts('}');
+            // diagnostic end
+            yield _ts(tagOffsets.length ? ['', 'template', tagOffsets[0] + tag.length, presetInfos.diagnosticOnly]
+                : dynamicTagExp ? ['', 'template', startTagOffset + tag.length, presetInfos.diagnosticOnly]
+                    : '');
+            yield _ts(`, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}));\n`);
+        }
+        else {
+            // without strictTemplates, this only for instacne type
+            yield _ts(`const ${var_componentInstance} = ${var_functionalComponent}(`);
+            yield _ts('{ ');
+            yield* generateProps(node, props, 'extraReferences');
+            yield _ts('}');
+            yield _ts(`, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}));\n`);
+            // and this for props type-checking
+            yield _ts(`({} as (props: __VLS_FunctionalComponentProps<typeof ${var_originalComponent}, typeof ${var_componentInstance}> & Record<string, unknown>) => void)(`);
+            // diagnostic start
+            yield _ts(tagOffsets.length ? ['', 'template', tagOffsets[0], presetInfos.diagnosticOnly]
+                : dynamicTagExp ? ['', 'template', startTagOffset, presetInfos.diagnosticOnly]
+                    : '');
+            yield _ts('{ ');
+            yield* generateProps(node, props, 'normal', propsFailedExps);
+            yield _ts('}');
+            // diagnostic end
+            yield _ts(tagOffsets.length ? ['', 'template', tagOffsets[0] + tag.length, presetInfos.diagnosticOnly]
+                : dynamicTagExp ? ['', 'template', startTagOffset + tag.length, presetInfos.diagnosticOnly]
+                    : '');
+            yield _ts(`);\n`);
+        }
+        let defineComponentCtxVar;
+        if (tag !== 'template' && tag !== 'slot') {
+            defineComponentCtxVar = `__VLS_${elementIndex++}`;
+            componentCtxVar = defineComponentCtxVar;
+            parentEl = node;
+        }
+        const componentEventsVar = `__VLS_${elementIndex++}`;
+        let usedComponentEventsVar = false;
+        //#region
+        // fix https://github.com/vuejs/language-tools/issues/1775
+        for (const failedExp of propsFailedExps) {
+            yield* generateInterpolation(failedExp.loc.source, failedExp.loc, failedExp.loc.start.offset, presetInfos.all, '(', ')');
+            yield _ts(';\n');
+            const fb = formatBrackets.normal;
+            if (fb) {
+                yield* generateTsFormat(failedExp.loc.source, failedExp.loc.start.offset, fb);
+            }
+        }
+        yield* generateInlineCss(props);
+        const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
+        let inScope = false;
+        let originalConditionsNum = blockConditions.length;
+        if (vScope?.type === CompilerDOM.NodeTypes.DIRECTIVE && vScope.exp) {
+            const scopeVar = `__VLS_${elementIndex++}`;
+            const condition = `__VLS_withScope(__VLS_ctx, ${scopeVar})`;
+            yield _ts(`const ${scopeVar} = `);
+            yield _ts([
+                vScope.exp.loc.source,
+                'template',
+                vScope.exp.loc.start.offset,
+                presetInfos.all,
+            ]);
+            yield _ts(';\n');
+            yield _ts(`if (${condition}) {\n`);
+            blockConditions.push(condition);
+            inScope = true;
+        }
+        yield* generateDirectives(node);
+        yield* generateReferencesForElements(node); // <el ref="foo" />
+        if (shouldGenerateScopedClasses) {
+            yield* generateReferencesForScopedCssClasses(node);
+        }
+        if (componentCtxVar) {
+            usedComponentCtxVars.add(componentCtxVar);
+            yield* generateEvents(node, var_functionalComponent, var_componentInstance, componentEventsVar, () => usedComponentEventsVar = true);
+        }
+        if (node.tag === 'slot') {
+            yield* generateSlot(node, startTagOffset);
+        }
+        if (inScope) {
+            yield _ts('}\n');
+            blockConditions.length = originalConditionsNum;
+        }
+        //#endregion
+        const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
+        if (slotDir && componentCtxVar) {
+            usedComponentCtxVars.add(componentCtxVar);
+            if (parentEl) {
+                hasSlotElements.add(parentEl);
+            }
+            const slotBlockVars = [];
+            yield _ts(`{\n`);
+            let hasProps = false;
+            if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                yield* generateTsFormat(slotDir.exp.content, slotDir.exp.loc.start.offset, formatBrackets.params);
+                const slotAst = createTsAst(slotDir, `(${slotDir.exp.content}) => {}`);
+                (0, transform_1.collectVars)(ts, slotAst, slotAst, slotBlockVars);
+                hasProps = true;
+                if (slotDir.exp.content.indexOf(':') === -1) {
+                    yield _ts('const [');
+                    yield _ts([
+                        slotDir.exp.content,
+                        'template',
+                        slotDir.exp.loc.start.offset,
+                        presetInfos.all,
+                    ]);
+                    yield _ts(`] = __VLS_getSlotParams(`);
+                }
+                else {
+                    yield _ts('const ');
+                    yield _ts([
+                        slotDir.exp.content,
+                        'template',
+                        slotDir.exp.loc.start.offset,
+                        presetInfos.all,
+                    ]);
+                    yield _ts(` = __VLS_getSlotParam(`);
+                }
+            }
+            yield _ts(['', 'template', (slotDir.arg ?? slotDir).loc.start.offset, presetInfos.diagnosticOnly]);
+            yield _ts(`(${componentCtxVar}.slots!)`);
+            if (slotDir?.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && slotDir.arg.content) {
+                yield* generatePropertyAccess(slotDir.arg.loc.source, slotDir.arg.loc.start.offset, slotDir.arg.isStatic ? presetInfos.slotName : presetInfos.all, slotDir.arg.loc);
+            }
+            else {
+                yield _ts('.');
+                yield _ts(['', 'template', slotDir.loc.start.offset, { ...presetInfos.slotName, completion: false }]);
+                yield _ts('default');
+                yield _ts(['', 'template', slotDir.loc.start.offset + (slotDir.loc.source.startsWith('#') ? '#'.length : slotDir.loc.source.startsWith('v-slot:') ? 'v-slot:'.length : 0), (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            }
+            yield _ts(['', 'template', (slotDir.arg ?? slotDir).loc.end.offset, presetInfos.diagnosticOnly]);
+            if (hasProps) {
+                yield _ts(')');
+            }
+            yield _ts(';\n');
+            slotBlockVars.forEach(varName => {
+                localVars.set(varName, (localVars.get(varName) ?? 0) + 1);
+            });
+            let prev;
+            for (const childNode of node.children) {
+                yield* generateAstNode(childNode, parentEl, prev, componentCtxVar);
+                prev = childNode;
+            }
+            yield* generateExpectErrorComment();
+            yield* generateExtraAutoImport();
+            slotBlockVars.forEach(varName => {
+                localVars.set(varName, localVars.get(varName) - 1);
+            });
+            let isStatic = true;
+            if (slotDir?.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                isStatic = slotDir.arg.isStatic;
+            }
+            if (isStatic && slotDir && !slotDir.arg) {
+                yield _ts(`${componentCtxVar}.slots!['`);
+                yield _ts([
+                    '',
+                    'template',
+                    slotDir.loc.start.offset + (slotDir.loc.source.startsWith('#')
+                        ? '#'.length : slotDir.loc.source.startsWith('v-slot:')
+                        ? 'v-slot:'.length
+                        : 0),
+                    (0, utils_1.disableAllFeatures)({ completion: true }),
+                ]);
+                yield _ts(`'/* empty slot name completion */]\n`);
+            }
+            yield _ts(`}\n`);
+        }
+        else {
+            let prev;
+            for (const childNode of node.children) {
+                yield* generateAstNode(childNode, parentEl, prev, componentCtxVar);
+                prev = childNode;
+            }
+            yield* generateExpectErrorComment();
+            // fix https://github.com/vuejs/language-tools/issues/932
+            if (!hasSlotElements.has(node) && node.children.length) {
+                yield _ts(`(${componentCtxVar}.slots!).`);
+                yield _ts(['', 'template', node.children[0].loc.start.offset, (0, utils_1.disableAllFeatures)({ navigation: true })]);
+                yield _ts('default');
+                yield _ts(['', 'template', node.children[node.children.length - 1].loc.end.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+                yield _ts(';\n');
+            }
+        }
+        if (defineComponentCtxVar && usedComponentCtxVars.has(defineComponentCtxVar)) {
+            yield _ts(`const ${componentCtxVar} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})!;\n`);
+        }
+        if (usedComponentEventsVar) {
+            yield _ts(`let ${componentEventsVar}!: __VLS_NormalizeEmits<typeof ${componentCtxVar}.emit>;\n`);
+        }
+        yield _ts(`}\n`);
+    }
+    function* generateEvents(node, componentVar, componentInstanceVar, eventsVar, used) {
+        for (const prop of node.props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'on'
+                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                used();
+                const eventVar = `__VLS_${elementIndex++}`;
+                yield _ts(`let ${eventVar} = { '${prop.arg.loc.source}': `);
+                yield _ts(`__VLS_pickEvent(`);
+                yield _ts(`${eventsVar}['${prop.arg.loc.source}'], `);
+                yield _ts(`({} as __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>)`);
+                const startCode = [
+                    '',
+                    'template',
+                    prop.arg.loc.start.offset,
+                    (0, utils_1.mergeFeatureSettings)(presetInfos.attrReference, {
+                        navigation: {
+                            // @click-outside -> onClickOutside
+                            resolveRenameNewName(newName) {
+                                return (0, shared_1.camelize)('on-' + newName);
+                            },
+                            // onClickOutside -> @click-outside
+                            resolveRenameEditText(newName) {
+                                const hName = (0, shared_2.hyphenateAttr)(newName);
+                                if ((0, shared_2.hyphenateAttr)(newName).startsWith('on-')) {
+                                    return (0, shared_1.camelize)(hName.slice('on-'.length));
+                                }
+                                return newName;
+                            },
+                        },
+                    }),
+                ];
+                if (validTsVarReg.test((0, shared_1.camelize)(prop.arg.loc.source))) {
+                    yield _ts(`.`);
+                    yield _ts(startCode);
+                    yield _ts(`on`);
+                    yield* generateCamelized((0, shared_1.capitalize)(prop.arg.loc.source), prop.arg.loc.start.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true }));
+                }
+                else {
+                    yield _ts(`[`);
+                    yield _ts(startCode);
+                    yield _ts(`'`);
+                    yield _ts(['', 'template', prop.arg.loc.start.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+                    yield _ts('on');
+                    yield* generateCamelized((0, shared_1.capitalize)(prop.arg.loc.source), prop.arg.loc.start.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true }));
+                    yield _ts(`'`);
+                    yield _ts(['', 'template', prop.arg.loc.end.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+                    yield _ts(`]`);
+                }
+                yield _ts(`) };\n`);
+                yield _ts(`${eventVar} = { `);
+                if (prop.arg.loc.source.startsWith('[') && prop.arg.loc.source.endsWith(']')) {
+                    yield _ts('[(');
+                    yield* generateInterpolation(prop.arg.loc.source.slice(1, -1), prop.arg.loc, prop.arg.loc.start.offset + 1, presetInfos.all, '', '');
+                    yield _ts(')!]');
+                }
+                else {
+                    yield* generateObjectProperty(prop.arg.loc.source, prop.arg.loc.start.offset, presetInfos.event, prop.arg.loc);
+                }
+                yield _ts(`: `);
+                yield* appendExpressionNode(prop);
+                yield _ts(` };\n`);
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'on'
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                // for vue 2 nameless event
+                // https://github.com/johnsoncodehk/vue-tsc/issues/67
+                yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, presetInfos.all, '$event => {(', ')}');
+                yield _ts(';\n');
+                yield* generateTsFormat(prop.exp.content, prop.exp.loc.start.offset, formatBrackets.normal);
+            }
+        }
+    }
+    function* appendExpressionNode(prop) {
+        if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+            const ast = createTsAst(prop.exp, prop.exp.content);
+            let isCompoundExpression = true;
+            if (ast.statements.length === 1) {
+                ts.forEachChild(ast, child_1 => {
+                    if (ts.isExpressionStatement(child_1)) {
+                        ts.forEachChild(child_1, child_2 => {
+                            if (ts.isArrowFunction(child_2)) {
+                                isCompoundExpression = false;
+                            }
+                            else if (ts.isIdentifier(child_2)) {
+                                isCompoundExpression = false;
+                            }
+                        });
+                    }
+                    else if (ts.isFunctionDeclaration(child_1)) {
+                        isCompoundExpression = false;
+                    }
+                });
+            }
+            let prefix = '(';
+            let suffix = ')';
+            let isFirstMapping = true;
+            if (isCompoundExpression) {
+                yield _ts('$event => {\n');
+                localVars.set('$event', (localVars.get('$event') ?? 0) + 1);
+                prefix = '';
+                suffix = '';
+                for (const blockCondition of blockConditions) {
+                    prefix += `if (!(${blockCondition})) return;\n`;
+                }
+            }
+            yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, () => {
+                if (isCompoundExpression && isFirstMapping) {
+                    isFirstMapping = false;
+                    return presetInfos.allWithHiddenParam;
+                }
+                return presetInfos.all;
+            }, prefix, suffix);
+            if (isCompoundExpression) {
+                localVars.set('$event', localVars.get('$event') - 1);
+                yield _ts(';\n');
+                yield* generateExtraAutoImport();
+                yield _ts('}\n');
+            }
+            yield* generateTsFormat(prop.exp.content, prop.exp.loc.start.offset, isCompoundExpression ? formatBrackets.event : formatBrackets.normal);
+        }
+        else {
+            yield _ts(`() => {}`);
+        }
+    }
+    function* generateProps(node, props, mode, propsFailedExps) {
+        let styleAttrNum = 0;
+        let classAttrNum = 0;
+        if (props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+            && prop.name === 'bind'
+            && !prop.arg
+            && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)) {
+            // fix https://github.com/vuejs/language-tools/issues/2166
+            styleAttrNum++;
+            classAttrNum++;
+        }
+        let caps_all = presetInfos.all;
+        let caps_diagnosticOnly = presetInfos.diagnosticOnly;
+        let caps_attr = presetInfos.attr;
+        if (mode === 'extraReferences') {
+            caps_all = (0, utils_1.disableAllFeatures)({ navigation: caps_all.navigation });
+            caps_diagnosticOnly = (0, utils_1.disableAllFeatures)({ navigation: caps_diagnosticOnly.navigation });
+            caps_attr = (0, utils_1.disableAllFeatures)({ navigation: caps_attr.navigation });
+        }
+        yield _ts(`...{ `);
+        for (const prop of props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'on'
+                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                yield _ts(`'${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any, `);
+            }
+        }
+        yield _ts(`}, `);
+        const canCamelize = !nativeTags.has(node.tag) || node.tagType === CompilerDOM.ElementTypes.COMPONENT;
+        for (const prop of props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && (prop.name === 'bind' || prop.name === 'model')
+                && (prop.name === 'model' || prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)
+                && (!prop.exp || prop.exp.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)) {
+                let propName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                    ? prop.arg.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
+                        ? prop.arg.content
+                        : prop.arg.loc.source
+                    : getModelValuePropName(node, vueCompilerOptions.target, vueCompilerOptions);
+                if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
+                    propName = propName?.substring(1);
+                }
+                if (propName === undefined
+                    || vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))
+                    || (propName === 'style' && ++styleAttrNum >= 2)
+                    || (propName === 'class' && ++classAttrNum >= 2)
+                    || (propName === 'name' && node.tag === 'slot') // #2308
+                ) {
+                    if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
+                        propsFailedExps?.push(prop.exp);
+                    }
+                    continue;
+                }
+                const shouldCamelize = canCamelize
+                    && (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
+                    && (0, shared_2.hyphenateAttr)(propName) === propName
+                    && !vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
+                yield _ts(['', 'template', prop.loc.start.offset, caps_diagnosticOnly]);
+                yield* generateObjectProperty(propName, prop.arg
+                    ? prop.arg.loc.start.offset
+                    : prop.loc.start.offset, prop.arg
+                    ? (0, utils_1.mergeFeatureSettings)(caps_attr, {
+                        navigation: caps_attr.navigation ? {
+                            resolveRenameNewName: shared_1.camelize,
+                            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
+                        } : undefined,
+                    })
+                    : caps_attr, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize);
+                yield _ts(': (');
+                if (prop.exp && !(prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY)) { // style='z-index: 2' will compile to {'z-index':'2'}
+                    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset; // vue 3.4+
+                    yield* generateInterpolation(prop.exp.loc.source, prop.exp.loc, prop.exp.loc.start.offset, 
+                    // disable completion for shorthand expression
+                    isShorthand ? caps_attr : caps_all, '(', ')');
+                    if (!isShorthand && mode === 'normal') {
+                        yield* generateTsFormat(prop.exp.loc.source, prop.exp.loc.start.offset, formatBrackets.normal);
+                    }
+                }
+                else {
+                    yield _ts('{}');
+                }
+                yield _ts(')');
+                yield _ts([
+                    '',
+                    'template',
+                    prop.loc.end.offset,
+                    caps_diagnosticOnly,
+                ]);
+                yield _ts(', ');
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
+                if (vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
+                    || (prop.name === 'style' && ++styleAttrNum >= 2)
+                    || (prop.name === 'class' && ++classAttrNum >= 2)
+                    || (prop.name === 'name' && node.tag === 'slot') // #2308
+                )
+                    continue;
+                if (vueCompilerOptions.target < 3
+                    && (node.tag === 'transition' || node.tag === 'Transition')
+                    && prop.name === 'persisted') {
+                    // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom always adds it (#3881)
+                    continue;
+                }
+                const shouldCamelize = canCamelize
+                    && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
+                    && !vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
+                yield _ts(['', 'template', prop.loc.start.offset, caps_diagnosticOnly]);
+                yield* generateObjectProperty(prop.name, prop.loc.start.offset, shouldCamelize
+                    ? (0, utils_1.mergeFeatureSettings)(caps_attr, {
+                        navigation: caps_attr.navigation ? {
+                            resolveRenameNewName: shared_1.camelize,
+                            resolveRenameEditText: shared_2.hyphenateAttr,
+                        } : undefined,
+                    })
+                    : caps_attr, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize);
+                yield _ts(': (');
+                if (prop.value) {
+                    yield* generateAttrValue(prop.value, caps_all);
+                }
+                else {
+                    yield _ts('true');
+                }
+                yield _ts(')');
+                yield _ts(['', 'template', prop.loc.end.offset, caps_diagnosticOnly]);
+                yield _ts(', ');
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'bind'
+                && !prop.arg
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                yield _ts(['', 'template', prop.exp.loc.start.offset, presetInfos.diagnosticOnly]);
+                yield _ts('...');
+                yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, caps_all, '(', ')');
+                yield _ts(['', 'template', prop.exp.loc.end.offset, presetInfos.diagnosticOnly]);
+                yield _ts(', ');
+                if (mode === 'normal') {
+                    yield* generateTsFormat(prop.exp.content, prop.exp.loc.start.offset, formatBrackets.normal);
+                }
+            }
+            else {
+                // comment this line to avoid affecting comments in prop expressions
+                // tsCodeGen.addText("/* " + [prop.type, prop.name, prop.arg?.loc.source, prop.exp?.loc.source, prop.loc.source].join(", ") + " */ ");
+            }
+        }
+    }
+    function* generateInlineCss(props) {
+        for (const prop of props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'bind'
+                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.arg.content === 'style'
+                && prop.exp.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
+                const endCrt = prop.arg.loc.source[prop.arg.loc.source.length - 1]; // " | '
+                const start = prop.arg.loc.source.indexOf(endCrt) + 1;
+                const end = prop.arg.loc.source.lastIndexOf(endCrt);
+                const content = prop.arg.loc.source.substring(start, end);
+                yield _inlineCss(`x { `);
+                yield _inlineCss([
+                    content,
+                    'template',
+                    prop.arg.loc.start.offset + start,
+                    (0, utils_1.enableAllFeatures)({
+                        format: false,
+                        structure: false,
+                    }),
+                ]);
+                yield _inlineCss(` }\n`);
+            }
+        }
+    }
+    function* generateDirectives(node) {
+        for (const prop of node.props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name !== 'slot'
+                && prop.name !== 'on'
+                && prop.name !== 'model'
+                && prop.name !== 'bind'
+                && (prop.name !== 'scope' && prop.name !== 'data')) {
+                accessedGlobalVariables.add((0, shared_1.camelize)('v-' + prop.name));
+                if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.isStatic) {
+                    yield* generateInterpolation(prop.arg.content, prop.arg.loc, prop.arg.loc.start.offset + prop.arg.loc.source.indexOf(prop.arg.content), presetInfos.all, '(', ')');
+                    yield _ts(';\n');
+                    yield* generateTsFormat(prop.arg.content, prop.arg.loc.start.offset, formatBrackets.normal);
+                }
+                yield _ts(['', 'template', prop.loc.start.offset, presetInfos.diagnosticOnly]);
+                yield _ts(`__VLS_directiveFunction(__VLS_ctx.`);
+                yield* generateCamelized('v-' + prop.name, prop.loc.start.offset, (0, utils_1.mergeFeatureSettings)(presetInfos.noDiagnostics, {
+                    completion: {
+                        // fix https://github.com/vuejs/language-tools/issues/1905
+                        isAdditional: true,
+                    },
+                    navigation: {
+                        resolveRenameNewName: shared_1.camelize,
+                        resolveRenameEditText: getPropRenameApply(prop.name),
+                    },
+                }));
+                yield _ts(')');
+                yield _ts('(');
+                if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                    yield _ts(['', 'template', prop.exp.loc.start.offset, presetInfos.diagnosticOnly]);
+                    yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, presetInfos.all, '(', ')');
+                    yield _ts(['', 'template', prop.exp.loc.end.offset, presetInfos.diagnosticOnly]);
+                    yield* generateTsFormat(prop.exp.content, prop.exp.loc.start.offset, formatBrackets.normal);
+                }
+                else {
+                    yield _ts('undefined');
+                }
+                yield _ts(')');
+                yield _ts(['', 'template', prop.loc.end.offset, presetInfos.diagnosticOnly]);
+                yield _ts(';\n');
+            }
+        }
+    }
+    function* generateReferencesForElements(node) {
+        for (const prop of node.props) {
+            if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
+                && prop.name === 'ref'
+                && prop.value) {
+                yield _ts('// @ts-ignore\n');
+                yield* generateInterpolation(prop.value.content, prop.value.loc, prop.value.loc.start.offset + 1, presetInfos.refAttr, '(', ')');
+                yield _ts(';\n');
+            }
+        }
+    }
+    function* generateReferencesForScopedCssClasses(node) {
+        for (const prop of node.props) {
+            if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
+                && prop.name === 'class'
+                && prop.value) {
+                let startOffset = prop.value.loc.start.offset;
+                let tempClassName = '';
+                for (const char of (prop.value.loc.source + ' ')) {
+                    if (char.trim() === '' || char === '"' || char === "'") {
+                        if (tempClassName !== '') {
+                            scopedClasses.push({ className: tempClassName, offset: startOffset });
+                            startOffset += tempClassName.length;
+                            tempClassName = '';
+                        }
+                        startOffset += char.length;
+                    }
+                    else {
+                        tempClassName += char;
+                    }
+                }
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.arg.content === 'class') {
+                yield _ts(`__VLS_styleScopedClasses = (`);
+                yield _ts([
+                    prop.exp.content,
+                    'template',
+                    prop.exp.loc.start.offset,
+                    presetInfos.scopedClassName,
+                ]);
+                yield _ts(`);\n`);
+            }
+        }
+    }
+    function* generateSlot(node, startTagOffset) {
+        const varSlot = `__VLS_${elementIndex++}`;
+        const slotNameExpNode = getSlotNameExpNode();
+        if (hasScriptSetupSlots) {
+            yield _ts('__VLS_normalizeSlot(');
+            yield _ts(['', 'template', node.loc.start.offset, presetInfos.diagnosticOnly]);
+            yield _ts(`${slotsAssignName ?? '__VLS_slots'}[`);
+            yield _ts(['', 'template', node.loc.start.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            yield _ts(slotNameExpNode?.content ?? `('${getSlotName()?.[0] ?? 'default'}' as const)`);
+            yield _ts(['', 'template', node.loc.end.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            yield _ts(']');
+            yield _ts(['', 'template', node.loc.end.offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            yield _ts(')?.(');
+            yield _ts(['', 'template', startTagOffset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            yield _ts('{\n');
+        }
+        else {
+            yield _ts(`var ${varSlot} = {\n`);
+        }
+        for (const prop of node.props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && !prop.arg
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                yield _ts('...');
+                yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, presetInfos.attrReference, '(', ')');
+                yield _ts(',\n');
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && prop.arg.content !== 'name') {
+                yield* generateObjectProperty(prop.arg.content, prop.arg.loc.start.offset, (0, utils_1.mergeFeatureSettings)(presetInfos.slotProp, {
+                    navigation: {
+                        resolveRenameNewName: shared_1.camelize,
+                        resolveRenameEditText: getPropRenameApply(prop.arg.content),
+                    },
+                }), prop.arg.loc);
+                yield _ts(': ');
+                yield* generateInterpolation(prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, presetInfos.attrReference, '(', ')');
+                yield _ts(',\n');
+            }
+            else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
+                && prop.name !== 'name' // slot name
+            ) {
+                yield* generateObjectProperty(prop.name, prop.loc.start.offset, (0, utils_1.mergeFeatureSettings)(presetInfos.attr, {
+                    navigation: {
+                        resolveRenameNewName: shared_1.camelize,
+                        resolveRenameEditText: getPropRenameApply(prop.name),
+                    },
+                }), prop.loc);
+                yield _ts(': (');
+                yield _ts(prop.value !== undefined
+                    ? `"${needToUnicode(prop.value.content) ? toUnicode(prop.value.content) : prop.value.content}"`
+                    : 'true');
+                yield _ts('),\n');
+            }
+        }
+        yield _ts('}');
+        if (hasScriptSetupSlots) {
+            yield _ts(['', 'template', startTagOffset + node.tag.length, presetInfos.diagnosticOnly]);
+            yield _ts(`)`);
+        }
+        yield _ts(`;\n`);
+        if (hasScriptSetupSlots) {
+            return;
+        }
+        if (slotNameExpNode) {
+            const varSlotExp = `__VLS_${elementIndex++}`;
+            yield _ts(`var ${varSlotExp} = `);
+            if (typeof slotNameExpNode === 'string') {
+                yield _ts(slotNameExpNode);
+            }
+            else {
+                yield* generateInterpolation(slotNameExpNode.content, slotNameExpNode, undefined, undefined, '(', ')');
+            }
+            yield _ts(` as const;\n`);
+            slotExps.set(varSlotExp, {
+                varName: varSlot,
+            });
+        }
+        else {
+            const slotName = getSlotName();
+            slots.set(slotName?.[0] ?? 'default', {
+                name: slotName?.[0],
+                loc: slotName?.[1],
+                tagRange: [startTagOffset, startTagOffset + node.tag.length],
+                varName: varSlot,
+                nodeLoc: node.loc,
+            });
+        }
+        function getSlotName() {
+            for (const prop2 of node.props) {
+                if (prop2.name === 'name' && prop2.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop2.value) {
+                    if (prop2.value.content) {
+                        return [
+                            prop2.value.content,
+                            prop2.loc.start.offset + prop2.loc.source.indexOf(prop2.value.content, prop2.name.length),
+                        ];
+                    }
+                }
+            }
+        }
+        function getSlotNameExpNode() {
+            for (const prop2 of node.props) {
+                if (prop2.type === CompilerDOM.NodeTypes.DIRECTIVE && prop2.name === 'bind' && prop2.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop2.arg.content === 'name') {
+                    if (prop2.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                        return prop2.exp;
+                    }
+                }
+            }
+        }
+    }
+    function* generateExtraAutoImport() {
+        if (!tempVars.length)
+            return;
+        yield _ts('// @ts-ignore\n'); // #2304
+        yield _ts('[');
+        for (const _vars of tempVars) {
+            for (const v of _vars) {
+                yield _ts([
+                    v.text,
+                    'template',
+                    v.offset,
+                    (0, utils_1.disableAllFeatures)({ completion: { isAdditional: true }, }),
+                ]);
+                yield _ts(',');
+            }
+        }
+        yield _ts('];\n');
+        tempVars.length = 0;
+    }
+    function* generateAttrValue(attrNode, info) {
+        const char = attrNode.loc.source.startsWith("'") ? "'" : '"';
+        yield _ts(char);
+        let start = attrNode.loc.start.offset;
+        let end = attrNode.loc.end.offset;
+        let content = attrNode.loc.source;
+        if ((content.startsWith('"') && content.endsWith('"'))
+            || (content.startsWith("'") && content.endsWith("'"))) {
+            start++;
+            end--;
+            content = content.slice(1, -1);
+        }
+        if (needToUnicode(content)) {
+            yield _ts(['', 'template', start, info]);
+            yield _ts(toUnicode(content));
+            yield _ts(['', 'template', end, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+        }
+        else {
+            yield _ts([content, 'template', start, info]);
+        }
+        yield _ts(char);
+    }
+    function* generateCamelized(code, offset, info) {
+        const parts = code.split('-');
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            if (part !== '') {
+                yield _ts([
+                    i === 0
+                        ? part
+                        : (0, shared_1.capitalize)(part),
+                    'template',
+                    offset,
+                    i === 0
+                        ? info
+                        : (0, utils_1.disableAllFeatures)({ __combineLastMappping: true }),
+                ]);
+            }
+            offset += part.length + 1;
+        }
+    }
+    function* generateTsFormat(code, offset, formatWrapper) {
+        yield _tsFormat(formatWrapper[0]);
+        yield _tsFormat([
+            code,
+            'template',
+            offset,
+            (0, utils_1.mergeFeatureSettings)(presetInfos.disabledAll, {
+                format: true,
+                // autoInserts: true, // TODO: support vue-autoinsert-parentheses
+            }),
+        ]);
+        yield _tsFormat(formatWrapper[1]);
+        yield _tsFormat('\n');
+    }
+    function* generateObjectProperty(code, offset, info, astHolder, shouldCamelize = false) {
+        if (code.startsWith('[') && code.endsWith(']') && astHolder) {
+            yield* generateInterpolation(code, astHolder, offset, info, '', '');
+        }
+        else if (shouldCamelize) {
+            if (validTsVarReg.test((0, shared_1.camelize)(code))) {
+                yield* generateCamelized(code, offset, info);
+            }
+            else {
+                yield _ts(['', 'template', offset, info]);
+                yield _ts('"');
+                yield* generateCamelized(code, offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true }));
+                yield _ts('"');
+                yield _ts(['', 'template', offset + code.length, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            }
+        }
+        else {
+            if (validTsVarReg.test(code)) {
+                yield _ts([code, 'template', offset, info]);
+            }
+            else {
+                yield* generateStringLiteralKey(code, offset, info);
+            }
+        }
+    }
+    function* generateInterpolation(_code, astHolder, start, data, prefix, suffix) {
+        const code = prefix + _code + suffix;
+        const ast = createTsAst(astHolder, code);
+        const vars = [];
+        for (let [section, offset, onlyError] of (0, transform_1.eachInterpolationSegment)(ts, code, ast, localVars, accessedGlobalVariables, vueCompilerOptions, vars)) {
+            if (offset === undefined) {
+                yield _ts(section);
+            }
+            else {
+                offset -= prefix.length;
+                let addSuffix = '';
+                const overLength = offset + section.length - _code.length;
+                if (overLength > 0) {
+                    addSuffix = section.substring(section.length - overLength);
+                    section = section.substring(0, section.length - overLength);
+                }
+                if (offset < 0) {
+                    yield _ts(section.substring(0, -offset));
+                    section = section.substring(-offset);
+                    offset = 0;
+                }
+                if (start !== undefined && data !== undefined) {
+                    yield _ts([
+                        section,
+                        'template',
+                        start + offset,
+                        onlyError
+                            ? presetInfos.diagnosticOnly
+                            : typeof data === 'function' ? data() : data,
+                    ]);
+                }
+                else {
+                    yield _ts(section);
+                }
+                yield _ts(addSuffix);
+            }
+        }
+        if (start !== undefined) {
+            for (const v of vars) {
+                v.offset = start + v.offset - prefix.length;
+            }
+            if (vars.length) {
+                tempVars.push(vars);
+            }
+        }
+    }
+    function* generatePropertyAccess(code, offset, info, astHolder) {
+        if (!compilerOptions.noPropertyAccessFromIndexSignature && validTsVarReg.test(code)) {
+            yield _ts('.');
+            yield _ts(offset !== undefined && info
+                ? [code, 'template', offset, info]
+                : code);
+        }
+        else if (code.startsWith('[') && code.endsWith(']')) {
+            yield* generateInterpolation(code, astHolder, offset, info, '', '');
+        }
+        else {
+            yield _ts('[');
+            yield* generateStringLiteralKey(code, offset, info);
+            yield _ts(']');
+        }
+    }
+    function* generateStringLiteralKey(code, offset, info) {
+        if (offset === undefined || !info) {
+            yield _ts(`"${code}"`);
+        }
+        else {
+            yield _ts(['', 'template', offset, info]);
+            yield _ts('"');
+            yield _ts([code, 'template', offset, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+            yield _ts('"');
+            yield _ts(['', 'template', offset + code.length, (0, utils_1.disableAllFeatures)({ __combineLastMappping: true })]);
+        }
+    }
+    function createTsAst(astHolder, text) {
+        if (astHolder.__volar_ast_text !== text) {
+            astHolder.__volar_ast_text = text;
+            astHolder.__volar_ast = ts.createSourceFile('/a.ts', text, 99);
+        }
+        return astHolder.__volar_ast;
+    }
+}
+exports.generate = generate;
+function getCanonicalComponentName(tagText) {
+    return validTsVarReg.test(tagText)
+        ? tagText
+        : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
+}
+function getPossibleOriginalComponentNames(tagText) {
+    return [...new Set([
+            // order is important: https://github.com/vuejs/language-tools/issues/2010
+            (0, shared_1.capitalize)((0, shared_1.camelize)(tagText)),
+            (0, shared_1.camelize)(tagText),
+            tagText,
+        ])];
+}
+function* eachElementNode(node) {
+    if (node.type === CompilerDOM.NodeTypes.ROOT) {
+        for (const child of node.children) {
+            yield* eachElementNode(child);
+        }
+    }
+    else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+        const patchForNode = getVForNode(node);
+        if (patchForNode) {
+            yield* eachElementNode(patchForNode);
+        }
+        else {
+            yield node;
+            for (const child of node.children) {
+                yield* eachElementNode(child);
+            }
+        }
+    }
+    else if (node.type === CompilerDOM.NodeTypes.IF) {
+        // v-if / v-else-if / v-else
+        for (let i = 0; i < node.branches.length; i++) {
+            const branch = node.branches[i];
+            for (const childNode of branch.children) {
+                yield* eachElementNode(childNode);
+            }
+        }
+    }
+    else if (node.type === CompilerDOM.NodeTypes.FOR) {
+        // v-for
+        for (const child of node.children) {
+            yield* eachElementNode(child);
+        }
+    }
+}
+exports.eachElementNode = eachElementNode;
+function needToUnicode(str) {
+    return str.indexOf('\\') >= 0 || str.indexOf('\n') >= 0;
+}
+function toUnicode(str) {
+    return str.split('').map(value => {
+        const temp = value.charCodeAt(0).toString(16).padStart(4, '0');
+        if (temp.length > 2) {
+            return '\\u' + temp;
+        }
+        return value;
+    }).join('');
+}
+function camelizeComponentName(newName) {
+    return (0, shared_1.camelize)('-' + newName);
+}
+function getTagRenameApply(oldName) {
+    return oldName === (0, shared_2.hyphenateTag)(oldName) ? shared_2.hyphenateTag : undefined;
+}
+function getPropRenameApply(oldName) {
+    return oldName === (0, shared_2.hyphenateAttr)(oldName) ? shared_2.hyphenateAttr : undefined;
+}
+function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
+    for (const modelName in vueCompilerOptions.experimentalModelPropName) {
+        const tags = vueCompilerOptions.experimentalModelPropName[modelName];
+        for (const tag in tags) {
+            if (node.tag === tag || node.tag === (0, shared_2.hyphenateTag)(tag)) {
+                const v = tags[tag];
+                if (typeof v === 'object') {
+                    const arr = Array.isArray(v) ? v : [v];
+                    for (const attrs of arr) {
+                        let failed = false;
+                        for (const attr in attrs) {
+                            const attrNode = node.props.find(prop => prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === attr);
+                            if (!attrNode || attrNode.value?.content !== attrs[attr]) {
+                                failed = true;
+                                break;
+                            }
+                        }
+                        if (!failed) {
+                            // all match
+                            return modelName || undefined;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    for (const modelName in vueCompilerOptions.experimentalModelPropName) {
+        const tags = vueCompilerOptions.experimentalModelPropName[modelName];
+        for (const tag in tags) {
+            if (node.tag === tag || node.tag === (0, shared_2.hyphenateTag)(tag)) {
+                const attrs = tags[tag];
+                if (attrs === true) {
+                    return modelName || undefined;
+                }
+            }
+        }
+    }
+    return vueVersion < 3 ? 'value' : 'modelValue';
+}
+// TODO: track https://github.com/vuejs/vue-next/issues/3498
+function getVForNode(node) {
+    const forDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+        && prop.name === 'for');
+    if (forDirective) {
+        let forNode;
+        CompilerDOM.processFor(node, forDirective, transformContext, _forNode => {
+            forNode = { ..._forNode };
+            return undefined;
+        });
+        if (forNode) {
+            forNode.children = [{
+                    ...node,
+                    props: node.props.filter(prop => prop !== forDirective),
+                }];
+            return forNode;
+        }
+    }
+}
+function getVIfNode(node) {
+    const forDirective = node.props.find((prop) => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+        && prop.name === 'if');
+    if (forDirective) {
+        let ifNode;
+        CompilerDOM.processIf(node, forDirective, transformContext, _ifNode => {
+            ifNode = { ..._ifNode };
+            return undefined;
+        });
+        if (ifNode) {
+            for (const branch of ifNode.branches) {
+                branch.children = [{
+                        ...node,
+                        props: node.props.filter(prop => prop !== forDirective),
+                    }];
+            }
+            return ifNode;
+        }
+    }
+}
+//# sourceMappingURL=template.js.map