@vue/language-core 3.1.4 → 3.1.6

package/lib/codegen/template/context.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTemplateCodegenContext = createTemplateCodegenContext;
 const CompilerDOM = require("@vue/compiler-dom");
-const computedSfc_1 = require("../../virtualFile/computedSfc");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
-const wrapWith_1 = require("../utils/wrapWith");
+const boundary_1 = require("../utils/boundary");
 const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)-->$/;
 /**
  * Creates and returns a Context object used for generating type-checkable TS code
@@ -104,76 +103,37 @@ const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)
  * an error/diagnostic was encountered for a region of code covered by a `@vue-expect-error` directive,
  * and additionally how we use that to determine whether to propagate diagnostics back upward.
  */
-function createTemplateCodegenContext(options, templateAst) {
+function createTemplateCodegenContext() {
     let variableId = 0;
-    function resolveCodeFeatures(features) {
-        if (features.verification && stack.length) {
-            const data = stack[stack.length - 1];
-            if (data.ignoreError) {
-                // We are currently in a region of code covered by a @vue-ignore directive, so don't
-                // even bother performing any type-checking: set verification to false.
-                return {
-                    ...features,
-                    verification: false,
-                };
-            }
-            if (data.expectError !== undefined) {
-                // We are currently in a region of code covered by a @vue-expect-error directive. We need to
-                // keep track of the number of errors encountered within this region so that we can know whether
-                // we will need to propagate an "unused ts-expect-error" diagnostic back to the original
-                // .vue file or not.
-                return {
-                    ...features,
-                    verification: {
-                        shouldReport: (source, code) => {
-                            if (typeof features.verification !== 'object'
-                                || !features.verification.shouldReport
-                                || features.verification.shouldReport(source, code) === true) {
-                                data.expectError.token++;
-                            }
-                            return false;
-                        },
-                    },
-                };
-            }
-        }
-        return features;
-    }
+    const scopes = [];
     const hoistVars = new Map();
-    const localVars = new Map();
     const dollarVars = new Set();
-    const accessExternalVariables = new Map();
+    const componentAccessMap = new Map();
     const slots = [];
     const dynamicSlots = [];
     const blockConditions = [];
-    const scopedClasses = [];
-    const emptyClassOffsets = [];
     const inlayHints = [];
-    const bindingAttrLocs = [];
     const inheritedAttrVars = new Set();
     const templateRefs = new Map();
     const stack = [];
     const commentBuffer = [];
     return {
+        generatedTypes: new Set(),
         get currentInfo() {
             return stack[stack.length - 1];
         },
         resolveCodeFeatures,
-        inlineTsAsts: templateAst && computedSfc_1.templateInlineTsAsts.get(templateAst),
         inVFor: false,
         slots,
         dynamicSlots,
         dollarVars,
-        accessExternalVariables,
+        componentAccessMap,
         blockConditions,
-        scopedClasses,
-        emptyClassOffsets,
         inlayHints,
-        bindingAttrLocs,
         inheritedAttrVars,
         templateRefs,
         currentComponent: undefined,
-        singleRootElTypes: [],
+        singleRootElTypes: new Set(),
         singleRootNodes: new Set(),
         addTemplateRef(name, typeExp, offset) {
             let refs = templateRefs.get(name);
@@ -182,23 +142,33 @@ function createTemplateCodegenContext(options, templateAst) {
             }
             refs.push({ typeExp, offset });
         },
-        accessExternalVariable(name, offset) {
-            let arr = accessExternalVariables.get(name);
+        recordComponentAccess(source, name, offset) {
+            let map = componentAccessMap.get(name);
+            if (!map) {
+                componentAccessMap.set(name, map = new Map());
+            }
+            let arr = map.get(source);
             if (!arr) {
-                accessExternalVariables.set(name, arr = new Set());
+                map.set(source, arr = new Set());
             }
             if (offset !== undefined) {
                 arr.add(offset);
             }
         },
-        hasLocalVariable(name) {
-            return !!localVars.get(name);
-        },
-        addLocalVariable(name) {
-            localVars.set(name, (localVars.get(name) ?? 0) + 1);
+        scopes,
+        declare(...varNames) {
+            const scope = scopes.at(-1);
+            for (const varName of varNames) {
+                scope.add(varName);
+            }
         },
-        removeLocalVariable(name) {
-            localVars.set(name, localVars.get(name) - 1);
+        startScope() {
+            const scope = new Set();
+            scopes.push(scope);
+            return () => {
+                scopes.pop();
+                return generateAutoImport();
+            };
         },
         getInternalVariable() {
             return `__VLS_${variableId++}`;
@@ -226,41 +196,6 @@ function createTemplateCodegenContext(options, templateAst) {
                 yield `if (!${condition}) return${utils_1.endOfLine}`;
             }
         },
-        *generateAutoImportCompletion() {
-            const all = [...accessExternalVariables.entries()];
-            if (!all.some(([, offsets]) => offsets.size)) {
-                return;
-            }
-            yield `// @ts-ignore${utils_1.newLine}`; // #2304
-            yield `[`;
-            for (const [varName, offsets] of all) {
-                for (const offset of offsets) {
-                    if (options.scriptSetupBindingNames.has(varName)) {
-                        // #3409
-                        yield [
-                            varName,
-                            'template',
-                            offset,
-                            {
-                                ...codeFeatures_1.codeFeatures.additionalCompletion,
-                                ...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
-                            },
-                        ];
-                    }
-                    else {
-                        yield [
-                            varName,
-                            'template',
-                            offset,
-                            codeFeatures_1.codeFeatures.additionalCompletion,
-                        ];
-                    }
-                    yield `,`;
-                }
-                offsets.clear();
-            }
-            yield `]${utils_1.endOfLine}`;
-        },
         enter(node) {
             if (node.type === CompilerDOM.NodeTypes.COMMENT) {
                 commentBuffer.push(node);
@@ -308,17 +243,70 @@ function createTemplateCodegenContext(options, templateAst) {
             const data = stack.pop();
             commentBuffer.length = 0;
             if (data.expectError !== undefined) {
-                yield* (0, wrapWith_1.wrapWith)(data.expectError.node.loc.start.offset, data.expectError.node.loc.end.offset, {
+                const token = yield* (0, boundary_1.startBoundary)('template', data.expectError.node.loc.start.offset, {
                     verification: {
                         // If no errors/warnings/diagnostics were reported within the region of code covered
                         // by the @vue-expect-error directive, then we should allow any `unused @ts-expect-error`
                         // diagnostics to be reported upward.
                         shouldReport: () => data.expectError.token === 0,
                     },
-                }, `// @ts-expect-error`);
+                });
+                yield `// @ts-expect-error`;
+                yield (0, boundary_1.endBoundary)(token, data.expectError.node.loc.end.offset);
                 yield `${utils_1.newLine}${utils_1.endOfLine}`;
             }
         },
     };
+    function* generateAutoImport() {
+        const all = [...componentAccessMap.entries()];
+        if (!all.some(([, offsets]) => offsets.size)) {
+            return;
+        }
+        yield `// @ts-ignore${utils_1.newLine}`; // #2304
+        yield `[`;
+        for (const [varName, map] of all) {
+            for (const [source, offsets] of map) {
+                for (const offset of offsets) {
+                    yield [varName, source, offset, codeFeatures_1.codeFeatures.importCompletionOnly];
+                    yield `,`;
+                }
+                offsets.clear();
+            }
+        }
+        yield `]${utils_1.endOfLine}`;
+    }
+    function resolveCodeFeatures(features) {
+        if (features.verification && stack.length) {
+            const data = stack[stack.length - 1];
+            if (data.ignoreError) {
+                // We are currently in a region of code covered by a @vue-ignore directive, so don't
+                // even bother performing any type-checking: set verification to false.
+                return {
+                    ...features,
+                    verification: false,
+                };
+            }
+            if (data.expectError !== undefined) {
+                // We are currently in a region of code covered by a @vue-expect-error directive. We need to
+                // keep track of the number of errors encountered within this region so that we can know whether
+                // we will need to propagate an "unused ts-expect-error" diagnostic back to the original
+                // .vue file or not.
+                return {
+                    ...features,
+                    verification: {
+                        shouldReport: (source, code) => {
+                            if (typeof features.verification !== 'object'
+                                || !features.verification.shouldReport
+                                || features.verification.shouldReport(source, code) === true) {
+                                data.expectError.token++;
+                            }
+                            return false;
+                        },
+                    },
+                };
+            }
+        }
+        return features;
+    }
 }
 //# sourceMappingURL=context.js.map

package/lib/codegen/template/element.js

@@ -4,34 +4,45 @@ exports.generateComponent = generateComponent;
 exports.generateElement = generateElement;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
+const muggle_string_1 = require("muggle-string");
 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 wrapWith_1 = require("../utils/wrapWith");
-const elementChildren_1 = require("./elementChildren");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
+const templateChild_1 = require("./templateChild");
 const vSlot_1 = require("./vSlot");
 const colonReg = /:/g;
 function* generateComponent(options, ctx, node) {
     const tagOffsets = (0, shared_2.getElementTagOffsets)(node, options.template);
-    const failedPropExps = [];
+    const failGeneratedExpressions = [];
     const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
-    const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
-    const componentOriginalVar = matchImportName ?? ctx.getInternalVariable();
+    const matchConst = possibleOriginalNames.find(name => options.setupConsts.has(name));
+    const componentOriginalVar = matchConst ?? ctx.getInternalVariable();
     const componentFunctionalVar = ctx.getInternalVariable();
     const componentVNodeVar = ctx.getInternalVariable();
     const componentCtxVar = ctx.getInternalVariable();
+    const componentPropsVar = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
+    let isCtxVarUsed = false;
+    let isPropsVarUsed = false;
     ctx.currentComponent = {
-        ctxVar: componentCtxVar,
-        used: false,
+        get ctxVar() {
+            isCtxVarUsed = true;
+            return componentCtxVar;
+        },
+        get propsVar() {
+            isPropsVarUsed = true;
+            return componentPropsVar;
+        },
     };
     let props = node.props;
     let dynamicTagInfo;
@@ -60,7 +71,7 @@ function* generateComponent(options, ctx, node) {
             offsets: tagOffsets,
         };
     }
-    if (matchImportName) {
+    if (matchConst) {
         // navigation support
         yield `/** @type {[`;
         for (const tagOffset of tagOffsets) {
@@ -74,26 +85,30 @@ function* generateComponent(options, ctx, node) {
                 ];
             }
             else {
-                const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
+                const shouldCapitalize = matchConst[0].toUpperCase() === matchConst[0];
                 yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
             }
             yield `, `;
         }
         yield `]} */${utils_1.endOfLine}`;
+        // auto import support
+        yield `// @ts-ignore${utils_1.newLine}`; // #2304
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
+        yield utils_1.endOfLine;
     }
     else if (dynamicTagInfo) {
         yield `const ${componentOriginalVar} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], `(`, `)`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], `(`, `)`);
         if (dynamicTagInfo.offsets[1] !== undefined) {
             yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], `(`, `)`);
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], `(`, `)`);
         }
         yield `)${utils_1.endOfLine}`;
     }
     else {
         yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
         if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
-            yield `typeof __VLS_export, `;
+            yield `typeof ${names._export}, `;
         }
         else {
             yield `void, `;
@@ -115,7 +130,7 @@ function* generateComponent(options, ctx, node) {
             yield `/** @type {[`;
             for (const tagOffset of tagOffsets) {
                 for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
-                    yield `typeof __VLS_components.`;
+                    yield `typeof ${names.components}.`;
                     yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.navigation);
                     yield `, `;
                 }
@@ -123,99 +138,202 @@ function* generateComponent(options, ctx, node) {
             yield `]} */${utils_1.endOfLine}`;
             // auto import support
             yield `// @ts-ignore${utils_1.newLine}`; // #2304
-            yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], {
-                completion: {
-                    isAdditional: true,
-                    onlyImport: true,
-                },
-            });
+            yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
             yield utils_1.endOfLine;
         }
     }
+    const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failGeneratedExpressions)];
     yield `// @ts-ignore${utils_1.newLine}`;
     yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
-    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, false);
+    yield* (0, muggle_string_1.toString)(propCodes);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
-    yield* (0, wrapWith_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, codeFeatures_1.codeFeatures.doNotReportTs6133, componentVNodeVar);
+    const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.doNotReportTs6133);
+    yield componentVNodeVar;
+    yield (0, boundary_1.endBoundary)(token, node.loc.end.offset);
     yield ` = ${componentFunctionalVar}`;
     yield* generateComponentGeneric(ctx);
     yield `(`;
-    yield* (0, wrapWith_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffsets[0], codeFeatures_1.codeFeatures.verification);
+    yield `{${utils_1.newLine}`;
+    yield* propCodes;
+    yield `}`;
+    yield (0, boundary_1.endBoundary)(token2, tagOffsets[0] + node.tag.length);
     yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
-    yield* generateFailedPropExps(options, ctx, failedPropExps);
-    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+    yield* generateFailedExpressions(options, ctx, failGeneratedExpressions);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
-    const reference = yield* generateElementReference(options, ctx, node);
+    const templateRef = getTemplateRef(node);
     const tag = (0, shared_2.hyphenateTag)(node.tag);
     const isRootNode = ctx.singleRootNodes.has(node)
         && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
-    if (reference || isRootNode) {
+    if (templateRef || isRootNode) {
         const componentInstanceVar = ctx.getInternalVariable();
-        ctx.currentComponent.used = true;
+        isCtxVarUsed = true;
         yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
         if (ctx.inVFor) {
             yield `[]`;
         }
         yield utils_1.endOfLine;
-        if (reference) {
+        if (templateRef) {
             const typeExp = `typeof ${ctx.getHoistVariable(componentInstanceVar)}`;
-            ctx.addTemplateRef(reference.name, typeExp, reference.offset);
+            ctx.addTemplateRef(templateRef[0], typeExp, templateRef[1]);
         }
         if (isRootNode) {
-            ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
+            ctx.singleRootElTypes.add(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
         }
     }
     if (hasVBindAttrs(options, ctx, node)) {
-        const attrsVar = ctx.getInternalVariable();
-        ctx.currentComponent.used = true;
-        yield `var ${attrsVar}!: NonNullable<typeof ${componentCtxVar}['props']>${utils_1.endOfLine}`;
-        ctx.inheritedAttrVars.add(attrsVar);
+        ctx.inheritedAttrVars.add(componentPropsVar);
+        isPropsVarUsed = true;
     }
-    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
+    yield* generateStyleScopedClassReferences(options, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
-    if (ctx.currentComponent.used) {
+    if (isCtxVarUsed) {
         yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
+    if (isPropsVarUsed) {
+        yield `var ${componentPropsVar}!: __VLS_FunctionalComponentProps<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+    }
 }
 function* generateElement(options, ctx, node) {
     const [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
     const failedPropExps = [];
-    yield `__VLS_asFunctionalElement(__VLS_intrinsics`;
+    yield `__VLS_asFunctionalElement(${names.intrinsics}`;
     yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
     if (endTagOffset !== undefined) {
-        yield `, __VLS_intrinsics`;
+        yield `, `;
+        yield names.intrinsics;
         yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
     }
     yield `)(`;
-    yield* (0, wrapWith_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    const token = yield* (0, boundary_1.startBoundary)('template', startTagOffset, codeFeatures_1.codeFeatures.verification);
+    yield `{${utils_1.newLine}`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps);
+    yield `}`;
+    yield (0, boundary_1.endBoundary)(token, startTagOffset + node.tag.length);
     yield `)${utils_1.endOfLine}`;
-    yield* generateFailedPropExps(options, ctx, failedPropExps);
+    yield* generateFailedExpressions(options, ctx, failedPropExps);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
-    const reference = yield* generateElementReference(options, ctx, node);
-    if (reference) {
+    const templateRef = getTemplateRef(node);
+    if (templateRef) {
         let typeExp = `__VLS_Elements['${node.tag}']`;
         if (ctx.inVFor) {
             typeExp += `[]`;
         }
-        ctx.addTemplateRef(reference.name, typeExp, reference.offset);
+        ctx.addTemplateRef(templateRef[0], typeExp, templateRef[1]);
     }
     if (ctx.singleRootNodes.has(node)) {
-        ctx.singleRootElTypes.push(`__VLS_Elements['${node.tag}']`);
+        ctx.singleRootElTypes.add(`__VLS_Elements['${node.tag}']`);
     }
     if (hasVBindAttrs(options, ctx, node)) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsics.${node.tag}`);
     }
-    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
+    yield* generateStyleScopedClassReferences(options, node);
     const { currentComponent } = ctx;
     ctx.currentComponent = undefined;
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
+    for (const child of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
+    }
     ctx.currentComponent = currentComponent;
 }
-function* generateFailedPropExps(options, ctx, failedPropExps) {
-    for (const failedExp of failedPropExps) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, failedExp.node.loc.source, failedExp.node.loc.start.offset, failedExp.prefix, failedExp.suffix);
+function* generateStyleScopedClassReferences({ template, ts }, node) {
+    for (const prop of node.props) {
+        if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
+            && prop.name === 'class'
+            && prop.value) {
+            if (template.lang === 'pug') {
+                const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset');
+                const content = prop.value.loc.source.slice(1, -1);
+                for (const [className, pos] of forEachClassName(content)) {
+                    yield* (0, styleScopedClasses_1.generateStyleScopedClassReference)(template, className, getClassOffset(pos + 1));
+                }
+            }
+            else {
+                const [text, start] = (0, shared_2.normalizeAttributeValue)(prop.value);
+                for (const [className, offset] of forEachClassName(text)) {
+                    yield* (0, styleScopedClasses_1.generateStyleScopedClassReference)(template, className, start + offset);
+                }
+            }
+        }
+        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') {
+            const content = '(' + prop.exp.content + ')';
+            const startOffset = prop.exp.loc.start.offset - 1;
+            const ast = (0, utils_1.getTypeScriptAST)(ts, template, content);
+            const literals = [];
+            for (const node of (0, utils_1.forEachNode)(ts, ast)) {
+                if (!ts.isExpressionStatement(node)
+                    || !ts.isParenthesizedExpression(node.expression)) {
+                    continue;
+                }
+                const { expression } = node.expression;
+                if (ts.isStringLiteralLike(expression)) {
+                    literals.push(expression);
+                }
+                else if (ts.isArrayLiteralExpression(expression)) {
+                    yield* walkArrayLiteral(expression);
+                }
+                else if (ts.isObjectLiteralExpression(expression)) {
+                    yield* walkObjectLiteral(expression);
+                }
+            }
+            for (const literal of literals) {
+                const start = literal.end - literal.text.length - 1 + startOffset;
+                for (const [className, offset] of forEachClassName(literal.text)) {
+                    yield* (0, styleScopedClasses_1.generateStyleScopedClassReference)(template, className, start + offset);
+                }
+            }
+            function* walkArrayLiteral(node) {
+                const { elements } = node;
+                for (const element of elements) {
+                    if (ts.isStringLiteralLike(element)) {
+                        literals.push(element);
+                    }
+                    else if (ts.isObjectLiteralExpression(element)) {
+                        yield* walkObjectLiteral(element);
+                    }
+                }
+            }
+            function* walkObjectLiteral(node) {
+                const { properties } = node;
+                for (const property of properties) {
+                    if (ts.isPropertyAssignment(property)) {
+                        const { name } = property;
+                        if (ts.isIdentifier(name)) {
+                            yield* (0, styleScopedClasses_1.generateStyleScopedClassReference)(template, name.text, name.end - name.text.length + startOffset);
+                        }
+                        else if (ts.isStringLiteral(name)) {
+                            literals.push(name);
+                        }
+                        else if (ts.isComputedPropertyName(name)) {
+                            const { expression } = name;
+                            if (ts.isStringLiteralLike(expression)) {
+                                literals.push(expression);
+                            }
+                        }
+                    }
+                    else if (ts.isShorthandPropertyAssignment(property)) {
+                        yield* (0, styleScopedClasses_1.generateStyleScopedClassReference)(template, property.name.text, property.name.end - property.name.text.length + startOffset);
+                    }
+                }
+            }
+        }
+    }
+}
+function* forEachClassName(content) {
+    let offset = 0;
+    for (const className of content.split(' ')) {
+        yield [className, offset];
+        offset += className.length + 1;
+    }
+}
+function* generateFailedExpressions(options, ctx, failGeneratedExpressions) {
+    for (const failedExp of failGeneratedExpressions) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, failedExp.node.loc.source, failedExp.node.loc.start.offset, failedExp.prefix, failedExp.suffix);
         yield utils_1.endOfLine;
     }
 }
@@ -248,28 +366,19 @@ function* generateCanonicalComponentName(tagText, offset, features) {
 function* generateComponentGeneric(ctx) {
     if (ctx.currentInfo.generic) {
         const { content, offset } = ctx.currentInfo.generic;
-        yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, codeFeatures_1.codeFeatures.verification, `<`, [
-            content,
-            'template',
-            offset,
-            codeFeatures_1.codeFeatures.all,
-        ], `>`);
+        const token = yield* (0, boundary_1.startBoundary)('template', offset, codeFeatures_1.codeFeatures.verification);
+        yield `<`;
+        yield [content, 'template', offset, codeFeatures_1.codeFeatures.all];
+        yield `>`;
+        yield (0, boundary_1.endBoundary)(token, offset + content.length);
     }
 }
-function* generateElementReference(options, ctx, node) {
+function getTemplateRef(node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'ref'
             && prop.value) {
-            const [name, offset] = (0, utils_1.normalizeAttributeValue)(prop.value);
-            // navigation support for `const foo = ref()`
-            yield `/** @type {typeof __VLS_ctx`;
-            yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, name, offset, codeFeatures_1.codeFeatures.navigation);
-            yield `} */${utils_1.endOfLine}`;
-            if (utils_1.identifierRegex.test(name) && !options.templateRefNames.has(name)) {
-                ctx.accessExternalVariable(name, offset);
-            }
-            return { name, offset };
+            return (0, shared_2.normalizeAttributeValue)(prop.value);
         }
     }
 }