@vue/language-core 2.0.13 → 2.0.14

package/lib/codegen/template/interpolation.d.ts

@@ -0,0 +1,6 @@
+import type * as ts from 'typescript';
+import type { Code, VueCodeInformation, VueCompilerOptions } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateInterpolation(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, _code: string, astHolder: any, start: number | undefined, data: VueCodeInformation | (() => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
+export declare function forEachInterpolationSegment(ts: typeof import('typescript'), vueOptions: VueCompilerOptions, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, isJustForErrorMapping?: boolean]>;

package/lib/{utils/transform.js → codegen/template/interpolation.js}

@@ -1,12 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectVars = exports.eachInterpolationSegment = void 0;
+exports.forEachInterpolationSegment = exports.generateInterpolation = void 0;
 const shared_1 = require("@vue/shared");
-const scriptSetupRanges_1 = require("../parsers/scriptSetupRanges");
-function* eachInterpolationSegment(ts, code, ast, localVars, identifiers, vueOptions, ctxVars = []) {
+const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
+const common_1 = require("../common");
+function* generateInterpolation(options, ctx, _code, astHolder, start, data, prefix, suffix) {
+    const code = prefix + _code + suffix;
+    const ast = (0, common_1.createTsAst)(options.ts, astHolder, code);
+    const vars = [];
+    for (let [section, offset, onlyError] of forEachInterpolationSegment(options.ts, options.vueCompilerOptions, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
+        if (offset === undefined) {
+            yield 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 section.substring(0, -offset);
+                section = section.substring(-offset);
+                offset = 0;
+            }
+            if (start !== undefined && data !== undefined) {
+                yield [
+                    section,
+                    'template',
+                    start + offset,
+                    onlyError
+                        ? ctx.codeFeatures.verification
+                        : typeof data === 'function' ? data() : data,
+                ];
+            }
+            else {
+                yield section;
+            }
+            yield addSuffix;
+        }
+    }
+    if (start !== undefined) {
+        for (const v of vars) {
+            v.offset = start + v.offset - prefix.length;
+        }
+    }
+}
+exports.generateInterpolation = generateInterpolation;
+function* forEachInterpolationSegment(ts, vueOptions, ctx, code, offset, ast) {
+    let ctxVars = [];
     const varCb = (id, isShorthand) => {
         const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
-        if (localVars.get(text) ||
+        if (ctx.hasLocalVariable(text) ||
             // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
             (0, shared_1.isGloballyWhitelisted)(text) ||
             text === 'require' ||
@@ -19,10 +65,15 @@ function* eachInterpolationSegment(ts, code, ast, localVars, identifiers, vueOpt
                 isShorthand: isShorthand,
                 offset: (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start,
             });
-            identifiers.add(text);
+            if (offset !== undefined) {
+                ctx.accessGlobalVariable(text, offset + (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start);
+            }
+            else {
+                ctx.accessGlobalVariable(text);
+            }
         }
     };
-    ts.forEachChild(ast, node => walkIdentifiers(ts, node, ast, varCb, localVars));
+    ts.forEachChild(ast, node => walkIdentifiers(ts, node, ast, varCb, ctx));
     ctxVars = ctxVars.sort((a, b) => a.offset - b.offset);
     if (ctxVars.length) {
         if (ctxVars[0].isShorthand) {
@@ -87,8 +138,8 @@ function* eachInterpolationSegment(ts, code, ast, localVars, identifiers, vueOpt
         yield [code, 0];
     }
 }
-exports.eachInterpolationSegment = eachInterpolationSegment;
-function walkIdentifiers(ts, node, ast, cb, localVars, blockVars = [], isRoot = true) {
+exports.forEachInterpolationSegment = forEachInterpolationSegment;
+function walkIdentifiers(ts, node, ast, cb, ctx, blockVars = [], isRoot = true) {
     if (ts.isIdentifier(node)) {
         cb(node, false);
     }
@@ -96,31 +147,31 @@ function walkIdentifiers(ts, node, ast, cb, localVars, blockVars = [], isRoot =
         cb(node.name, true);
     }
     else if (ts.isPropertyAccessExpression(node)) {
-        walkIdentifiers(ts, node.expression, ast, cb, localVars, blockVars, false);
+        walkIdentifiers(ts, node.expression, ast, cb, ctx, blockVars, false);
     }
     else if (ts.isVariableDeclaration(node)) {
-        collectVars(ts, node.name, ast, blockVars);
+        (0, common_1.collectVars)(ts, node.name, ast, blockVars);
         for (const varName of blockVars) {
-            localVars.set(varName, (localVars.get(varName) ?? 0) + 1);
+            ctx.addLocalVariable(varName);
         }
         if (node.initializer) {
-            walkIdentifiers(ts, node.initializer, ast, cb, localVars, blockVars, false);
+            walkIdentifiers(ts, node.initializer, ast, cb, ctx, blockVars, false);
         }
     }
     else if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
         const functionArgs = [];
         for (const param of node.parameters) {
-            collectVars(ts, param.name, ast, functionArgs);
+            (0, common_1.collectVars)(ts, param.name, ast, functionArgs);
             if (param.type) {
-                walkIdentifiers(ts, param.type, ast, cb, localVars, blockVars, false);
+                walkIdentifiers(ts, param.type, ast, cb, ctx, blockVars, false);
             }
         }
         for (const varName of functionArgs) {
-            localVars.set(varName, (localVars.get(varName) ?? 0) + 1);
+            ctx.addLocalVariable(varName);
         }
-        walkIdentifiers(ts, node.body, ast, cb, localVars, blockVars, false);
+        walkIdentifiers(ts, node.body, ast, cb, ctx, blockVars, false);
         for (const varName of functionArgs) {
-            localVars.set(varName, localVars.get(varName) - 1);
+            ctx.removeLocalVariable(varName);
         }
     }
     else if (ts.isObjectLiteralExpression(node)) {
@@ -128,18 +179,18 @@ function walkIdentifiers(ts, node, ast, cb, localVars, blockVars = [], isRoot =
             if (ts.isPropertyAssignment(prop)) {
                 // fix https://github.com/vuejs/language-tools/issues/1176
                 if (ts.isComputedPropertyName(prop.name)) {
-                    walkIdentifiers(ts, prop.name.expression, ast, cb, localVars, blockVars, false);
+                    walkIdentifiers(ts, prop.name.expression, ast, cb, ctx, blockVars, false);
                 }
-                walkIdentifiers(ts, prop.initializer, ast, cb, localVars, blockVars, false);
+                walkIdentifiers(ts, prop.initializer, ast, cb, ctx, blockVars, false);
             }
             // fix https://github.com/vuejs/language-tools/issues/1156
             else if (ts.isShorthandPropertyAssignment(prop)) {
-                walkIdentifiers(ts, prop, ast, cb, localVars, blockVars, false);
+                walkIdentifiers(ts, prop, ast, cb, ctx, blockVars, false);
             }
             // fix https://github.com/vuejs/language-tools/issues/1148#issuecomment-1094378126
             else if (ts.isSpreadAssignment(prop)) {
                 // TODO: cannot report "Spread types may only be created from object types.ts(2698)"
-                walkIdentifiers(ts, prop.expression, ast, cb, localVars, blockVars, false);
+                walkIdentifiers(ts, prop.expression, ast, cb, ctx, blockVars, false);
             }
         }
     }
@@ -152,17 +203,17 @@ function walkIdentifiers(ts, node, ast, cb, localVars, blockVars = [], isRoot =
         if (ts.isBlock(node)) {
             blockVars = [];
         }
-        ts.forEachChild(node, node => walkIdentifiers(ts, node, ast, cb, localVars, blockVars, false));
+        ts.forEachChild(node, node => walkIdentifiers(ts, node, ast, cb, ctx, blockVars, false));
         if (ts.isBlock(node)) {
             for (const varName of blockVars) {
-                localVars.set(varName, localVars.get(varName) - 1);
+                ctx.removeLocalVariable(varName);
             }
         }
         blockVars = _blockVars;
     }
     if (isRoot) {
         for (const varName of blockVars) {
-            localVars.set(varName, localVars.get(varName) - 1);
+            ctx.removeLocalVariable(varName);
         }
     }
 }
@@ -174,25 +225,4 @@ function walkIdentifiersInTypeReference(ts, node, cb) {
         ts.forEachChild(node, node => walkIdentifiersInTypeReference(ts, node, cb));
     }
 }
-function collectVars(ts, node, ast, result) {
-    if (ts.isIdentifier(node)) {
-        result.push((0, scriptSetupRanges_1.getNodeText)(ts, node, ast));
-    }
-    else if (ts.isObjectBindingPattern(node)) {
-        for (const el of node.elements) {
-            collectVars(ts, el.name, ast, result);
-        }
-    }
-    else if (ts.isArrayBindingPattern(node)) {
-        for (const el of node.elements) {
-            if (ts.isBindingElement(el)) {
-                collectVars(ts, el.name, ast, result);
-            }
-        }
-    }
-    else {
-        ts.forEachChild(node, node => collectVars(ts, node, ast, result));
-    }
-}
-exports.collectVars = collectVars;
-//# sourceMappingURL=transform.js.map
+//# sourceMappingURL=interpolation.js.map

package/lib/codegen/template/objectProperty.d.ts

@@ -0,0 +1,4 @@
+import type { Code, VueCodeInformation } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateObjectProperty(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, code: string, offset: number, features: VueCodeInformation, astHolder?: any, shouldCamelize?: boolean): Generator<Code>;

package/lib/codegen/template/objectProperty.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateObjectProperty = void 0;
+const shared_1 = require("@vue/shared");
+const common_1 = require("../common");
+const camelized_1 = require("./camelized");
+const interpolation_1 = require("./interpolation");
+const stringLiteralKey_1 = require("./stringLiteralKey");
+function* generateObjectProperty(options, ctx, code, offset, features, astHolder, shouldCamelize = false) {
+    if (code.startsWith('[') && code.endsWith(']') && astHolder) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+    }
+    else if (shouldCamelize) {
+        if (common_1.variableNameRegex.test((0, shared_1.camelize)(code))) {
+            yield* (0, camelized_1.generateCamelized)(code, offset, features);
+        }
+        else {
+            yield* (0, common_1.wrapWith)(offset, offset + code.length, features, `"`, ...(0, camelized_1.generateCamelized)(code, offset, common_1.combineLastMapping), `"`);
+        }
+    }
+    else {
+        if (common_1.variableNameRegex.test(code)) {
+            yield [code, 'template', offset, features];
+        }
+        else {
+            yield* (0, stringLiteralKey_1.generateStringLiteralKey)(code, offset, features);
+        }
+    }
+}
+exports.generateObjectProperty = generateObjectProperty;
+//# sourceMappingURL=objectProperty.js.map

package/lib/codegen/template/propertyAccess.d.ts

@@ -0,0 +1,4 @@
+import type { Code, VueCodeInformation } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generatePropertyAccess(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, code: string, offset?: number, features?: VueCodeInformation, astHolder?: any): Generator<Code>;

package/lib/codegen/template/propertyAccess.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePropertyAccess = void 0;
+const common_1 = require("../common");
+const interpolation_1 = require("./interpolation");
+const stringLiteralKey_1 = require("./stringLiteralKey");
+function* generatePropertyAccess(options, ctx, code, offset, features, astHolder) {
+    if (!options.compilerOptions.noPropertyAccessFromIndexSignature && common_1.variableNameRegex.test(code)) {
+        yield `.`;
+        yield offset !== undefined && features
+            ? [code, 'template', offset, features]
+            : code;
+    }
+    else if (code.startsWith('[') && code.endsWith(']')) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+    }
+    else {
+        yield `[`;
+        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(code, offset, features);
+        yield `]`;
+    }
+}
+exports.generatePropertyAccess = generatePropertyAccess;
+//# sourceMappingURL=propertyAccess.js.map

package/lib/codegen/template/slotOutlet.d.ts

@@ -0,0 +1,5 @@
+import * as CompilerDOM from '@vue/compiler-dom';
+import type { Code } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateSlotOutlet(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.SlotOutletNode, currentElement: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;

package/lib/codegen/template/slotOutlet.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSlotOutlet = void 0;
+const CompilerDOM = require("@vue/compiler-dom");
+const common_1 = require("../common");
+const elementChildren_1 = require("./elementChildren");
+const elementProps_1 = require("./elementProps");
+const interpolation_1 = require("./interpolation");
+function* generateSlotOutlet(options, ctx, node, currentElement, componentCtxVar) {
+    const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+    const varSlot = ctx.getInternalVariable();
+    const nameProp = node.props.find(prop => {
+        if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
+            return prop.name === 'name';
+        }
+        if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+            && prop.name === 'bind'
+            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+            return prop.arg.content === 'name';
+        }
+    });
+    if (options.hasDefineSlots) {
+        yield `__VLS_normalizeSlot(`;
+        yield* (0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value
+            ? `'${nameProp.value.content}'`
+            : nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                ? nameProp.exp.content
+                : `('default' as const)`), `]`);
+        yield `)?.(`;
+        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${common_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true), `}`);
+        yield `)${common_1.endOfLine}`;
+        return;
+    }
+    else {
+        yield `var ${varSlot} = {${common_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
+        yield `}${common_1.endOfLine}`;
+    }
+    if (nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
+        && nameProp.value) {
+        ctx.slots.push({
+            name: nameProp.value.content,
+            loc: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
+            tagRange: [startTagOffset, startTagOffset + node.tag.length],
+            varName: varSlot,
+            nodeLoc: node.loc,
+        });
+    }
+    else if (nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
+        && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+        const slotExpVar = ctx.getInternalVariable();
+        yield `var ${slotExpVar} = `;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, nameProp.exp.content, nameProp.exp, nameProp.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
+        yield ` as const${common_1.endOfLine}`;
+        ctx.dynamicSlots.push({
+            expVar: slotExpVar,
+            varName: varSlot,
+        });
+    }
+    else {
+        ctx.slots.push({
+            name: 'default',
+            tagRange: [startTagOffset, startTagOffset + node.tag.length],
+            varName: varSlot,
+            nodeLoc: node.loc,
+        });
+    }
+    yield* ctx.generateAutoImportCompletion();
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentElement, componentCtxVar);
+}
+exports.generateSlotOutlet = generateSlotOutlet;
+//# sourceMappingURL=slotOutlet.js.map

package/lib/codegen/template/stringLiteralKey.d.ts

@@ -0,0 +1,2 @@
+import type { Code, VueCodeInformation } from '../../types';
+export declare function generateStringLiteralKey(code: string, offset?: number, info?: VueCodeInformation): Generator<Code>;

package/lib/codegen/template/stringLiteralKey.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStringLiteralKey = void 0;
+const common_1 = require("../common");
+function* generateStringLiteralKey(code, offset, info) {
+    if (offset === undefined || !info) {
+        yield `"${code}"`;
+    }
+    else {
+        yield* (0, common_1.wrapWith)(offset, offset + code.length, info, `"`, [code, 'template', offset, common_1.combineLastMapping], `"`);
+    }
+}
+exports.generateStringLiteralKey = generateStringLiteralKey;
+//# sourceMappingURL=stringLiteralKey.js.map

package/lib/codegen/template/templateChild.d.ts

@@ -0,0 +1,7 @@
+import * as CompilerDOM from '@vue/compiler-dom';
+import type { Code } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, currentElement: CompilerDOM.ElementNode | undefined, prevNode: CompilerDOM.TemplateChildNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function getVForNode(node: CompilerDOM.ElementNode): CompilerDOM.ForNode | undefined;
+export declare function parseInterpolationNode(node: CompilerDOM.InterpolationNode, template: string): readonly [string, number];

package/lib/codegen/template/templateChild.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseInterpolationNode = exports.getVForNode = exports.generateTemplateChild = void 0;
+const CompilerDOM = require("@vue/compiler-dom");
+const common_1 = require("../common");
+const element_1 = require("./element");
+const interpolation_1 = require("./interpolation");
+const slotOutlet_1 = require("./slotOutlet");
+const vFor_1 = require("./vFor");
+const vIf_1 = require("./vIf");
+// @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* generateTemplateChild(options, ctx, node, currentElement, prevNode, componentCtxVar) {
+    if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
+        const commentText = prevNode.content.trim().split(' ')[0];
+        if (commentText.match(/^@vue-skip\b[\s\S]*/)) {
+            yield `// @vue-skip${common_1.newLine}`;
+            return;
+        }
+        else if (commentText.match(/^@vue-ignore\b[\s\S]*/)) {
+            yield* ctx.ignoreError();
+        }
+        else if (commentText.match(/^@vue-expect-error\b[\s\S]*/)) {
+            yield* ctx.expectError(prevNode);
+        }
+    }
+    if (node.type === CompilerDOM.NodeTypes.ROOT) {
+        let prev;
+        for (const childNode of node.children) {
+            yield* generateTemplateChild(options, ctx, childNode, currentElement, prev, componentCtxVar);
+            prev = childNode;
+        }
+        yield* ctx.resetDirectiveComments('end of root');
+    }
+    else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+        const vForNode = getVForNode(node);
+        const vIfNode = getVIfNode(node);
+        if (vForNode) {
+            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode, currentElement, componentCtxVar);
+        }
+        else if (vIfNode) {
+            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode, currentElement, componentCtxVar);
+        }
+        else {
+            if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
+                yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node, currentElement, componentCtxVar);
+            }
+            else {
+                yield* (0, element_1.generateElement)(options, ctx, node, currentElement, componentCtxVar);
+            }
+        }
+    }
+    else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {
+        // {{ var }}
+        yield* generateTemplateChild(options, ctx, node.content, currentElement, undefined, componentCtxVar);
+    }
+    else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
+        // {{ ... }} {{ ... }}
+        for (const childNode of node.children) {
+            if (typeof childNode === 'object') {
+                yield* generateTemplateChild(options, ctx, childNode, currentElement, undefined, componentCtxVar);
+            }
+        }
+    }
+    else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
+        // {{ ... }}
+        const [content, start] = parseInterpolationNode(node, options.template.content);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, content, node.content.loc, start, ctx.codeFeatures.all, `(`, `)${common_1.endOfLine}`);
+        yield* ctx.resetDirectiveComments('end of INTERPOLATION');
+    }
+    else if (node.type === CompilerDOM.NodeTypes.IF) {
+        // v-if / v-else-if / v-else
+        yield* (0, vIf_1.generateVIf)(options, ctx, node, currentElement, componentCtxVar);
+    }
+    else if (node.type === CompilerDOM.NodeTypes.FOR) {
+        // v-for
+        yield* (0, vFor_1.generateVFor)(options, ctx, node, currentElement, componentCtxVar);
+    }
+    else if (node.type === CompilerDOM.NodeTypes.TEXT) {
+        // not needed progress
+    }
+}
+exports.generateTemplateChild = generateTemplateChild;
+// 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;
+        }
+    }
+}
+exports.getVForNode = getVForNode;
+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;
+        }
+    }
+}
+function parseInterpolationNode(node, template) {
+    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.substring(start - 1, start)).trim() === '' && leftCharacter.length) {
+        start--;
+        content = leftCharacter + content;
+    }
+    while ((rightCharacter = template.substring(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
+        content = content + rightCharacter;
+    }
+    return [
+        content,
+        start,
+    ];
+}
+exports.parseInterpolationNode = parseInterpolationNode;
+//# sourceMappingURL=templateChild.js.map

package/lib/codegen/template/vFor.d.ts

@@ -0,0 +1,12 @@
+import * as CompilerDOM from '@vue/compiler-dom';
+import type { Code } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateVFor(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ForNode, currentElement: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function parseVForNode(node: CompilerDOM.ForNode): {
+    leftExpressionRange: {
+        start: number;
+        end: number;
+    } | undefined;
+    leftExpressionText: string | undefined;
+};

package/lib/codegen/template/vFor.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseVForNode = exports.generateVFor = void 0;
+const CompilerDOM = require("@vue/compiler-dom");
+const common_1 = require("../common");
+const index_1 = require("./index");
+const interpolation_1 = require("./interpolation");
+const templateChild_1 = require("./templateChild");
+function* generateVFor(options, ctx, node, currentElement, componentCtxVar) {
+    const { source } = node.parseResult;
+    const { leftExpressionRange, leftExpressionText } = parseVForNode(node);
+    const forBlockVars = [];
+    yield `for (const [`;
+    if (leftExpressionRange && leftExpressionText) {
+        const collectAst = (0, common_1.createTsAst)(options.ts, node.parseResult, `const [${leftExpressionText}]`);
+        (0, common_1.collectVars)(options.ts, collectAst, collectAst, forBlockVars);
+        yield [
+            leftExpressionText,
+            'template',
+            leftExpressionRange.start,
+            ctx.codeFeatures.all,
+        ];
+    }
+    yield `] of `;
+    if (source.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+        yield `__VLS_getVForSourceType(`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, source.content, source.loc, source.loc.start.offset, ctx.codeFeatures.all, '(', ')');
+        yield `!)`; // #3102
+    }
+    else {
+        yield `{} as any`;
+    }
+    yield `) {${common_1.newLine}`;
+    if ((0, index_1.isFragment)(node)) {
+        yield* ctx.resetDirectiveComments('end of v-for start');
+    }
+    for (const varName of forBlockVars) {
+        ctx.addLocalVariable(varName);
+    }
+    let prev;
+    for (const childNode of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentElement, prev, componentCtxVar);
+        prev = childNode;
+    }
+    for (const varName of forBlockVars) {
+        ctx.removeLocalVariable(varName);
+    }
+    yield* ctx.generateAutoImportCompletion();
+    yield `}${common_1.newLine}`;
+}
+exports.generateVFor = generateVFor;
+function parseVForNode(node) {
+    const { value, key, index } = node.parseResult;
+    const leftExpressionRange = (value || key || index)
+        ? {
+            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;
+    return {
+        leftExpressionRange,
+        leftExpressionText,
+    };
+}
+exports.parseVForNode = parseVForNode;
+//# sourceMappingURL=vFor.js.map

package/lib/codegen/template/vIf.d.ts

@@ -0,0 +1,5 @@
+import * as CompilerDOM from '@vue/compiler-dom';
+import type { Code } from '../../types';
+import type { TemplateCodegenContext } from './context';
+import type { TemplateCodegenOptions } from './index';
+export declare function generateVIf(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.IfNode, currentElement: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;