@vue/language-core 3.1.5 → 3.1.7

package/lib/codegen/template/elementDirectives.js

@@ -5,10 +5,11 @@ exports.generateModifiers = generateModifiers;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
+const names = require("../names");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
-const wrapWith_1 = require("../utils/wrapWith");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
@@ -29,19 +30,32 @@ function* generateElementDirectives(options, ctx, node) {
             || prop.name === 'bind') {
             continue;
         }
-        if (!builtInDirectives.has(prop.name)) {
-            ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        }
-        yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+        yield `__VLS_asFunctionalDirective(`;
+        yield* generateIdentifier(options, ctx, prop);
+        yield `)(null!, { ...__VLS_directiveBindingRestFields, `;
+        yield* generateArg(options, ctx, prop);
+        yield* generateModifiers(options, ctx, prop);
+        yield* generateValue(options, ctx, prop);
+        yield ` }, null!, null!)`;
+        yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
         yield utils_1.endOfLine;
     }
 }
-function* generateIdentifier(options, prop) {
+function* generateIdentifier(options, ctx, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.start.offset + rawName.length, codeFeatures_1.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, {
+    const startOffset = prop.loc.start.offset;
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield names.directives;
+    yield `.`;
+    yield* (0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, {
         ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
         verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
-    }));
+    });
+    if (!builtInDirectives.has(prop.name)) {
+        ctx.recordComponentAccess('template', (0, shared_1.camelize)(rawName), prop.loc.start.offset);
+    }
+    yield (0, boundary_1.endBoundary)(token, startOffset + rawName.length);
 }
 function* generateArg(options, ctx, prop) {
     const { arg } = prop;
@@ -49,13 +63,15 @@ function* generateArg(options, ctx, prop) {
         return;
     }
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, wrapWith_1.wrapWith)('template', startOffset, startOffset + arg.content.length, codeFeatures_1.codeFeatures.verification, `arg`);
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield `arg`;
+    yield (0, boundary_1.endBoundary)(token, startOffset + arg.content.length);
     yield `: `;
     if (arg.isStatic) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, codeFeatures_1.codeFeatures.all);
     }
     else {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, arg.content, startOffset, `(`, `)`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, arg.content, startOffset, `(`, `)`);
     }
     yield `, `;
 }
@@ -66,7 +82,9 @@ function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
     }
     const startOffset = modifiers[0].loc.start.offset - 1;
     const endOffset = modifiers.at(-1).loc.end.offset;
-    yield* (0, wrapWith_1.wrapWith)('template', startOffset, endOffset, codeFeatures_1.codeFeatures.verification, propertyName);
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield propertyName;
+    yield (0, boundary_1.endBoundary)(token, endOffset);
     yield `: { `;
     for (const mod of modifiers) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlight);
@@ -79,7 +97,9 @@ function* generateValue(options, ctx, prop) {
     if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, wrapWith_1.wrapWith)('template', exp.loc.start.offset, exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `value`);
+    const token = yield* (0, boundary_1.startBoundary)('template', exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+    yield `value`;
+    yield (0, boundary_1.endBoundary)(token, exp.loc.end.offset);
     yield `: `;
     yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp);
 }

package/lib/codegen/template/elementEvents.js

@@ -9,8 +9,8 @@ const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
-const wrapWith_1 = require("../utils/wrapWith");
 const interpolation_1 = require("./interpolation");
 function* generateElementEvents(options, ctx, node, componentOriginalVar) {
     let emitsVar;
@@ -74,46 +74,45 @@ function* generateEventArg(options, name, start, directive = 'on', features) {
         name = (0, shared_1.capitalize)(name);
     }
     if (utils_1.identifierRegex.test((0, shared_1.camelize)(name))) {
-        yield ['', 'template', start, features];
+        const token = yield* (0, boundary_1.startBoundary)('template', start, features);
         yield directive;
-        yield* (0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping);
+        yield* (0, camelized_1.generateCamelized)(name, 'template', start, { __combineToken: token });
     }
     else {
-        yield* (0, wrapWith_1.wrapWith)('template', start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
+        const token = yield* (0, boundary_1.startBoundary)('template', start, features);
+        yield `'`;
+        yield directive;
+        yield* (0, camelized_1.generateCamelized)(name, 'template', start, { __combineToken: token });
+        yield `'`;
+        yield (0, boundary_1.endBoundary)(token, start + name.length);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        let isFirstMapping = true;
-        const ast = (0, utils_1.createTsAst)(options.ts, ctx.inlineTsAsts, prop.exp.content);
+        const ast = (0, utils_1.getTypeScriptAST)(options.ts, options.template, prop.exp.content);
         const isCompound = isCompoundExpression(options.ts, ast);
-        const interpolation = (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
-            if (isCompound && isFirstMapping) {
-                isFirstMapping = false;
-                ctx.inlayHints.push({
-                    blockName: 'template',
-                    offset,
-                    setting: 'vue.inlayHints.inlineHandlerLeading',
-                    label: '$event =>',
-                    paddingRight: true,
-                    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'),
-                });
-            }
-            return codeFeatures_1.codeFeatures.all;
-        }, prop.exp.content, prop.exp.loc.start.offset, isCompound ? `` : `(`, isCompound ? `` : `)`);
+        const interpolation = (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, prop.exp.content, prop.exp.loc.start.offset, isCompound ? `` : `(`, isCompound ? `` : `)`);
         if (isCompound) {
             yield `(...[$event]) => {${utils_1.newLine}`;
-            ctx.addLocalVariable('$event');
+            const endScope = ctx.startScope();
+            ctx.declare('$event');
             yield* ctx.generateConditionGuards();
             yield* interpolation;
             yield utils_1.endOfLine;
-            ctx.removeLocalVariable('$event');
-            yield* ctx.generateAutoImportCompletion();
+            yield* endScope();
             yield `}`;
+            ctx.inlayHints.push({
+                blockName: 'template',
+                offset: prop.exp.loc.start.offset,
+                setting: 'vue.inlayHints.inlineHandlerLeading',
+                label: '$event =>',
+                paddingRight: true,
+                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'),
+            });
         }
         else {
             yield* interpolation;
@@ -127,7 +126,7 @@ function* generateModelEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         yield `(...[$event]) => {${utils_1.newLine}`;
         yield* ctx.generateConditionGuards();
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset);
         yield ` = $event${utils_1.endOfLine}`;
         yield `}`;
     }

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

@@ -2,10 +2,10 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export interface FailedPropExpression {
+export interface FailGeneratedExpression {
     node: CompilerDOM.SimpleExpressionNode;
     prefix: string;
     suffix: string;
 }
-export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, failedPropExps?: FailedPropExpression[]): Generator<Code>;
+export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, failGeneratedExpressions?: FailGeneratedExpression[]): Generator<Code>;
 export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -8,15 +8,16 @@ const picomatch_1 = require("picomatch");
 const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
+const names = require("../names");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const unicode_1 = require("../utils/unicode");
-const wrapWith_1 = require("../utils/wrapWith");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-function* generateElementProps(options, ctx, node, props, strictPropsCheck, failedPropExps) {
+function* generateElementProps(options, ctx, node, props, strictPropsCheck, failGeneratedExpressions) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -40,12 +41,12 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                failedPropExps?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
-                failedPropExps?.push({ node: prop.exp, prefix: `() => {`, suffix: `}` });
+                failGeneratedExpressions?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `() => {`, suffix: `}` });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
         }
     }
@@ -66,7 +67,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, picomatch_1.isMatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                    failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
                 }
                 continue;
             }
@@ -80,9 +81,21 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             if (shouldSpread) {
                 yield `...{ `;
             }
-            yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(prop.arg
-                ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, features, shouldCamelize)
-                : (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...(0, wrapWith_1.wrapWith)('template', prop.arg?.loc.start.offset ?? prop.loc.start.offset, prop.arg?.loc.end.offset ?? prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...generatePropExp(options, ctx, prop, prop.exp)));
+            const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+            if (prop.arg) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, features, shouldCamelize);
+            }
+            else {
+                const token2 = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
+                yield propName;
+                yield (0, boundary_1.endBoundary)(token2, prop.loc.start.offset + 'v-model'.length);
+            }
+            yield `: `;
+            const argLoc = prop.arg?.loc ?? prop.loc;
+            const token3 = yield* (0, boundary_1.startBoundary)('template', argLoc.start.offset, codeFeatures_1.codeFeatures.verification);
+            yield* generatePropExp(options, ctx, prop, prop.exp);
+            yield (0, boundary_1.endBoundary)(token3, argLoc.end.offset);
+            yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -107,9 +120,19 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             if (shouldSpread) {
                 yield `...{ `;
             }
-            yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, features, shouldCamelize), `: `, ...(prop.value
-                ? generateAttrValue(prop.value, codeFeatures_1.codeFeatures.withoutNavigation)
-                : [`true`]));
+            const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, features, shouldCamelize);
+            yield `: `;
+            if (prop.name === 'style') {
+                yield `{}`;
+            }
+            else if (prop.value) {
+                yield* generateAttrValue(prop.value, codeFeatures_1.codeFeatures.withoutNavigation);
+            }
+            else {
+                yield `true`;
+            }
+            yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -119,10 +142,13 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             if (prop.exp.loc.source === '$attrs') {
-                ctx.bindingAttrLocs.push(prop.exp.loc);
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
             else {
-                yield* (0, wrapWith_1.wrapWith)('template', prop.exp.loc.start.offset, prop.exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp));
+                const token = yield* (0, boundary_1.startBoundary)('template', prop.exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+                yield `...`;
+                yield* generatePropExp(options, ctx, prop, prop.exp);
+                yield (0, boundary_1.endBoundary)(token, prop.exp.loc.end.offset);
                 yield `,${utils_1.newLine}`;
             }
         }
@@ -133,23 +159,23 @@ function* generatePropExp(options, ctx, prop, exp) {
         yield `{}`;
     }
     else if (prop.arg?.loc.start.offset !== prop.exp?.loc.start.offset) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, exp.loc.source, exp.loc.start.offset, `(`, `)`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, exp.loc.source, exp.loc.start.offset, `(`, `)`);
     }
     else {
         const propVariableName = (0, shared_1.camelize)(exp.loc.source);
         if (utils_1.identifierRegex.test(propVariableName)) {
             const codes = (0, camelized_1.generateCamelized)(exp.loc.source, 'template', exp.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
-            if (options.destructuredPropNames.has(propVariableName) || ctx.hasLocalVariable(propVariableName)) {
+            if (ctx.scopes.some(scope => scope.has(propVariableName))) {
                 yield* codes;
             }
-            else if (options.templateRefNames.has(propVariableName)) {
-                yield `__VLS_unref(`;
+            else if (options.setupRefs.has(propVariableName)) {
                 yield* codes;
-                yield `)`;
+                yield `.value`;
             }
             else {
-                ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-                yield `__VLS_ctx.`;
+                ctx.recordComponentAccess('template', propVariableName, exp.loc.start.offset);
+                yield names.ctx;
+                yield `.`;
                 yield* codes;
             }
             ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
@@ -158,9 +184,9 @@ function* generatePropExp(options, ctx, prop, exp) {
 }
 function* generateAttrValue(node, features) {
     const quote = node.loc.source.startsWith("'") ? "'" : '"';
-    const offset = (0, shared_2.getAttributeValueOffset)(node);
+    const [content, offset] = (0, shared_2.normalizeAttributeValue)(node);
     yield quote;
-    yield* (0, unicode_1.generateUnicode)(node.content, offset, features);
+    yield* (0, unicode_1.generateUnicode)(content, offset, features);
     yield quote;
 }
 function getShouldCamelize(options, prop, propName) {

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

@@ -2,13 +2,10 @@ import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
-    compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
-    scriptSetupBindingNames: Set<string>;
-    scriptSetupImportComponentNames: Set<string>;
-    destructuredPropNames: Set<string>;
-    templateRefNames: Set<string>;
+    setupRefs: Set<string>;
+    setupConsts: Set<string>;
     hasDefineSlots?: boolean;
     propsAssignName?: string;
     slotsAssignName?: string;
@@ -18,6 +15,7 @@ export interface TemplateCodegenOptions {
 export { generate as generateTemplate };
 declare function generate(options: TemplateCodegenOptions): {
     codes: Code[];
+    generatedTypes: Set<string>;
     currentInfo: {
         ignoreError?: boolean;
         expectError?: {
@@ -30,7 +28,6 @@ declare function generate(options: TemplateCodegenOptions): {
         };
     };
     resolveCodeFeatures: (features: import("../../types").VueCodeInformation) => import("../../types").VueCodeInformation;
-    inlineTsAsts: Map<string, ts.SourceFile> | undefined;
     inVFor: boolean;
     slots: {
         name: string;
@@ -44,16 +41,9 @@ declare function generate(options: TemplateCodegenOptions): {
         propsVar: string;
     }[];
     dollarVars: Set<string>;
-    accessExternalVariables: Map<string, Set<number>>;
+    componentAccessMap: Map<string, Map<string, Set<number>>>;
     blockConditions: string[];
-    scopedClasses: {
-        source: string;
-        className: string;
-        offset: number;
-    }[];
-    emptyClassOffsets: number[];
     inlayHints: import("../inlayHints").InlayHintInfo[];
-    bindingAttrLocs: import("@vue/compiler-dom").SourceLocation[];
     inheritedAttrVars: Set<string>;
     templateRefs: Map<string, {
         typeExp: string;
@@ -66,15 +56,14 @@ declare function generate(options: TemplateCodegenOptions): {
     singleRootElTypes: Set<string>;
     singleRootNodes: Set<import("@vue/compiler-dom").ElementNode | null>;
     addTemplateRef(name: string, typeExp: string, offset: number): void;
-    accessExternalVariable(name: string, offset?: number): void;
-    hasLocalVariable(name: string): boolean;
-    addLocalVariable(name: string): void;
-    removeLocalVariable(name: string): void;
+    recordComponentAccess(source: string, name: string, offset?: number): void;
+    scopes: Set<string>[];
+    declare(...varNames: string[]): void;
+    startScope(): () => Generator<Code, any, any>;
     getInternalVariable(): string;
     getHoistVariable(originalVar: string): string;
     generateHoistVariables(): Generator<string, void, unknown>;
     generateConditionGuards(): Generator<string, void, unknown>;
-    generateAutoImportCompletion(): Generator<Code>;
     enter(node: import("@vue/compiler-dom").RootNode | import("@vue/compiler-dom").TemplateChildNode | import("@vue/compiler-dom").SimpleExpressionNode): boolean;
     exit(): Generator<Code>;
 };

package/lib/codegen/template/index.js

@@ -2,108 +2,116 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generate;
 const codeFeatures_1 = require("../codeFeatures");
+const names = require("../names");
 const utils_1 = require("../utils");
-const wrapWith_1 = require("../utils/wrapWith");
+const boundary_1 = require("../utils/boundary");
 const context_1 = require("./context");
 const objectProperty_1 = require("./objectProperty");
-const styleScopedClasses_1 = require("./styleScopedClasses");
 const templateChild_1 = require("./templateChild");
 function generate(options) {
-    const context = (0, context_1.createTemplateCodegenContext)(options, options.template.ast);
-    const codegen = generateTemplate(options, context);
+    const ctx = (0, context_1.createTemplateCodegenContext)();
+    const codeGenerator = generateWorker(options, ctx);
     const codes = [];
-    for (const code of codegen) {
+    for (const code of codeGenerator) {
         if (typeof code === 'object') {
-            code[3] = context.resolveCodeFeatures(code[3]);
+            code[3] = ctx.resolveCodeFeatures(code[3]);
         }
         codes.push(code);
     }
-    return {
-        ...context,
-        codes,
-    };
+    return { ...ctx, codes };
 }
-function* generateTemplate(options, ctx) {
-    if (options.slotsAssignName) {
-        ctx.addLocalVariable(options.slotsAssignName);
+function* generateWorker(options, ctx) {
+    const endScope = ctx.startScope();
+    ctx.declare(...options.setupConsts);
+    const { slotsAssignName, propsAssignName, vueCompilerOptions, template, } = options;
+    if (slotsAssignName) {
+        ctx.declare(slotsAssignName);
     }
-    if (options.propsAssignName) {
-        ctx.addLocalVariable(options.propsAssignName);
+    if (propsAssignName) {
+        ctx.declare(propsAssignName);
     }
-    if (options.vueCompilerOptions.inferTemplateDollarSlots) {
+    if (vueCompilerOptions.inferTemplateDollarSlots) {
         ctx.dollarVars.add('$slots');
     }
-    if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
+    if (vueCompilerOptions.inferTemplateDollarAttrs) {
         ctx.dollarVars.add('$attrs');
     }
-    if (options.vueCompilerOptions.inferTemplateDollarRefs) {
+    if (vueCompilerOptions.inferTemplateDollarRefs) {
         ctx.dollarVars.add('$refs');
     }
-    if (options.vueCompilerOptions.inferTemplateDollarEl) {
+    if (vueCompilerOptions.inferTemplateDollarEl) {
         ctx.dollarVars.add('$el');
     }
-    if (options.template.ast) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast);
+    if (template.ast) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, template.ast);
     }
-    yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
     yield* ctx.generateHoistVariables();
-    const dollarTypes = [
-        ['$slots', yield* generateSlots(options, ctx)],
-        ['$attrs', yield* generateInheritedAttrs(options, ctx)],
-        ['$refs', yield* generateTemplateRefs(options, ctx)],
-        ['$el', yield* generateRootEl(ctx)],
-    ].filter(([name]) => ctx.dollarVars.has(name));
-    if (dollarTypes.length) {
-        yield `var __VLS_dollars!: {${utils_1.newLine}`;
-        for (const [name, type] of dollarTypes) {
-            yield `${name}: ${type}${utils_1.endOfLine}`;
+    yield* generateSlotsType(options, ctx);
+    yield* generateInheritedAttrsType(ctx);
+    yield* generateTemplateRefsType(options, ctx);
+    yield* generateRootElType(ctx);
+    if (ctx.dollarVars.size) {
+        yield `var ${names.dollars}!: {${utils_1.newLine}`;
+        if (ctx.dollarVars.has('$slots')) {
+            const type = ctx.generatedTypes.has(names.Slots) ? names.Slots : `{}`;
+            yield `$slots: ${type}${utils_1.endOfLine}`;
         }
-        yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
+        if (ctx.dollarVars.has('$attrs')) {
+            yield `$attrs: import('${vueCompilerOptions.lib}').ComponentPublicInstance['$attrs']`;
+            if (ctx.generatedTypes.has(names.InheritedAttrs)) {
+                yield ` & ${names.InheritedAttrs}`;
+            }
+            yield utils_1.endOfLine;
+        }
+        if (ctx.dollarVars.has('$refs')) {
+            const type = ctx.generatedTypes.has(names.TemplateRefs) ? names.TemplateRefs : `{}`;
+            yield `$refs: ${type}${utils_1.endOfLine}`;
+        }
+        if (ctx.dollarVars.has('$el')) {
+            const type = ctx.generatedTypes.has(names.RootEl) ? names.RootEl : `any`;
+            yield `$el: ${type}${utils_1.endOfLine}`;
+        }
+        yield `} & { [K in keyof import('${vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
     }
+    yield* endScope();
 }
-function* generateSlots(options, ctx) {
-    if (!options.hasDefineSlots) {
-        yield `type __VLS_Slots = {}`;
-        for (const { expVar, propsVar } of ctx.dynamicSlots) {
-            yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
+function* generateSlotsType(options, ctx) {
+    if (options.hasDefineSlots || (!ctx.slots.length && !ctx.dynamicSlots.length)) {
+        return;
+    }
+    ctx.generatedTypes.add(names.Slots);
+    yield `type ${names.Slots} = {}`;
+    for (const { expVar, propsVar } of ctx.dynamicSlots) {
+        yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
+    }
+    for (const slot of ctx.slots) {
+        yield `${utils_1.newLine}& { `;
+        if (slot.name && slot.offset !== undefined) {
+            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, codeFeatures_1.codeFeatures.navigation);
         }
-        for (const slot of ctx.slots) {
-            yield `${utils_1.newLine}& { `;
-            if (slot.name && slot.offset !== undefined) {
-                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, codeFeatures_1.codeFeatures.navigation);
-            }
-            else {
-                yield* (0, wrapWith_1.wrapWith)('template', slot.tagRange[0], slot.tagRange[1], codeFeatures_1.codeFeatures.navigation, `default`);
-            }
-            yield `?: (props: typeof ${slot.propsVar}) => any }`;
+        else {
+            const token = yield* (0, boundary_1.startBoundary)('template', slot.tagRange[0], codeFeatures_1.codeFeatures.navigation);
+            yield `default`;
+            yield (0, boundary_1.endBoundary)(token, slot.tagRange[1]);
         }
-        yield utils_1.endOfLine;
+        yield `?: (props: typeof ${slot.propsVar}) => any }`;
     }
-    return `__VLS_Slots`;
-}
-function* generateInheritedAttrs(options, ctx) {
-    yield `type __VLS_InheritedAttrs = ${ctx.inheritedAttrVars.size
-        ? `Partial<${[...ctx.inheritedAttrVars].map(name => `typeof ${name}`).join(` & `)}>`
-        : `{}`}`;
     yield utils_1.endOfLine;
-    if (ctx.bindingAttrLocs.length) {
-        yield `[`;
-        for (const loc of ctx.bindingAttrLocs) {
-            yield `__VLS_dollars.`;
-            yield [
-                loc.source,
-                'template',
-                loc.start.offset,
-                codeFeatures_1.codeFeatures.all,
-            ];
-            yield `,`;
-        }
-        yield `]${utils_1.endOfLine}`;
+}
+function* generateInheritedAttrsType(ctx) {
+    if (!ctx.inheritedAttrVars.size) {
+        return;
     }
-    return `import('${options.vueCompilerOptions.lib}').ComponentPublicInstance['$attrs'] & __VLS_InheritedAttrs`;
+    ctx.generatedTypes.add(names.InheritedAttrs);
+    yield `type ${names.InheritedAttrs} = Partial<${[...ctx.inheritedAttrVars].map(name => `typeof ${name}`).join(` & `)}>`;
+    yield utils_1.endOfLine;
 }
-function* generateTemplateRefs(options, ctx) {
-    yield `type __VLS_TemplateRefs = {}`;
+function* generateTemplateRefsType(options, ctx) {
+    if (!ctx.templateRefs.size) {
+        return;
+    }
+    ctx.generatedTypes.add(names.TemplateRefs);
+    yield `type ${names.TemplateRefs} = {}`;
     for (const [name, refs] of ctx.templateRefs) {
         yield `${utils_1.newLine}& `;
         if (refs.length >= 2) {
@@ -123,19 +131,16 @@ function* generateTemplateRefs(options, ctx) {
         }
     }
     yield utils_1.endOfLine;
-    return `__VLS_TemplateRefs`;
 }
-function* generateRootEl(ctx) {
-    yield `type __VLS_RootEl = `;
-    if (ctx.singleRootElTypes.size && !ctx.singleRootNodes.has(null)) {
-        for (const type of ctx.singleRootElTypes) {
-            yield `${utils_1.newLine}| ${type}`;
-        }
+function* generateRootElType(ctx) {
+    if (!ctx.singleRootElTypes.size || ctx.singleRootNodes.has(null)) {
+        return;
     }
-    else {
-        yield `any`;
+    ctx.generatedTypes.add(names.RootEl);
+    yield `type ${names.RootEl} = `;
+    for (const type of ctx.singleRootElTypes) {
+        yield `${utils_1.newLine}| ${type}`;
     }
     yield utils_1.endOfLine;
-    return `__VLS_RootEl`;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
-import type { Code, VueCodeInformation } from '../../types';
-import type { ScriptCodegenOptions } from '../script';
+import type { Code, SfcBlock, VueCodeInformation } from '../../types';
+import type { StyleCodegenOptions } from '../style';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateInterpolation(options: TemplateCodegenOptions | ScriptCodegenOptions, ctx: TemplateCodegenContext, source: string, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, code: string, start: number | undefined, prefix?: string, suffix?: string): Generator<Code>;
+export declare function generateInterpolation(options: Pick<TemplateCodegenOptions | StyleCodegenOptions, 'ts' | 'setupRefs'>, ctx: TemplateCodegenContext, block: SfcBlock, data: VueCodeInformation, code: string, start: number, prefix?: string, suffix?: string): Generator<Code>;