@vue/language-core 2.0.29 → 2.1.0

package/lib/codegen/template/element.js

@@ -17,11 +17,12 @@ const interpolation_1 = require("./interpolation");
 const propertyAccess_1 = require("./propertyAccess");
 const templateChild_1 = require("./templateChild");
 const objectProperty_1 = require("./objectProperty");
+const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node, currentComponent, componentCtxVar) {
+function* generateComponent(options, ctx, node, currentComponent) {
     const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
     const endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
-    const tagOffsets = endTagOffset !== undefined
+    const tagOffsets = endTagOffset !== undefined && endTagOffset > startTagOffset
         ? [startTagOffset, endTagOffset]
         : [startTagOffset];
     const propsFailedExps = [];
@@ -41,7 +42,7 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
             if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.arg?.loc.source === 'is' && prop.exp) {
                 dynamicTagInfo = {
                     exp: prop.exp.loc.source,
-                    offset: prop.exp.loc.start.offset,
+                    offsets: [prop.exp.loc.start.offset, undefined],
                     astHolder: prop.exp.loc,
                 };
                 props = props.filter(p => p !== prop);
@@ -54,7 +55,7 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
         dynamicTagInfo = {
             exp: node.tag,
             astHolder: node.loc,
-            offset: startTagOffset,
+            offsets: [startTagOffset, endTagOffset],
         };
     }
     if (matchImportName) {
@@ -84,57 +85,54 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
         yield `]${common_1.endOfLine}`;
     }
     else if (dynamicTagInfo) {
-        yield `const ${var_originalComponent} = `;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offset, ctx.codeFeatures.all, '(', ')');
-        yield common_1.endOfLine;
+        yield `const ${var_originalComponent} = (`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')');
+        if (dynamicTagInfo.offsets[1] !== undefined) {
+            yield `,`;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], {
+                ...ctx.codeFeatures.all,
+                completion: false,
+            }, '(', ')');
+        }
+        yield `)${common_1.endOfLine}`;
     }
     else if (!isComponentTag) {
-        yield `// @ts-ignore${common_1.newLine}`;
-        yield `const ${var_originalComponent} = ({} as `;
-        for (const componentName of possibleOriginalNames) {
-            yield `'${componentName}' extends keyof typeof __VLS_ctx ? { '${getCanonicalComponentName(node.tag)}': typeof __VLS_ctx`;
-            yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, componentName);
-            yield ` }: `;
-        }
-        yield `typeof __VLS_resolvedLocalAndGlobalComponents)${common_1.newLine}`;
-        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, getCanonicalComponentName(node.tag), startTagOffset, ctx.codeFeatures.verification);
-        yield common_1.endOfLine;
-        // hover support
-        for (const offset of tagOffsets) {
-            yield `({} as { ${getCanonicalComponentName(node.tag)}: typeof ${var_originalComponent} }).`;
-            yield* generateCanonicalComponentName(node.tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
-            yield common_1.endOfLine;
-        }
+        yield `const ${var_originalComponent} = __VLS_resolvedLocalAndGlobalComponents.`;
+        yield* generateCanonicalComponentName(node.tag, startTagOffset, {
+            // with hover support
+            ...ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation,
+            ...ctx.codeFeatures.verification,
+        });
+        yield `${common_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
         if (common_1.variableNameRegex.test(camelizedTag)) {
             // renaming / find references support
+            yield `/** @type { [`;
             for (const tagOffset of tagOffsets) {
                 for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
                     const expectName = shouldCapitalize ? (0, shared_1.capitalize)(camelizedTag) : camelizedTag;
-                    yield `__VLS_components.`;
+                    yield `typeof __VLS_components.`;
                     yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
                         navigation: {
                             resolveRenameNewName: node.tag !== expectName ? camelizeComponentName : undefined,
                             resolveRenameEditText: getTagRenameApply(node.tag),
                         },
                     });
-                    yield `;`;
+                    yield `, `;
                 }
             }
-            yield `${common_1.newLine}`;
+            yield `] } */${common_1.newLine}`;
             // auto import support
-            yield `// @ts-ignore${common_1.newLine}`; // #2304
-            yield `[`;
-            for (const tagOffset of tagOffsets) {
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+            if (options.edited) {
+                yield `// @ts-ignore${common_1.newLine}`; // #2304
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), startTagOffset, {
                     completion: {
                         isAdditional: true,
                         onlyImport: true,
                     },
                 });
-                yield `,`;
+                yield `${common_1.endOfLine}`;
             }
-            yield `]${common_1.endOfLine}`;
         }
     }
     else {
@@ -144,44 +142,52 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
     yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
     yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
     yield `}))${common_1.endOfLine}`;
-    if (options.vueCompilerOptions.strictTemplates) {
-        // with strictTemplates, generate once for props type-checking + instance type
-        yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
-        yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
-    }
-    else {
-        // without strictTemplates, this only for instacne type
-        yield `const ${var_componentInstance} = ${var_functionalComponent}({`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
-        yield `}, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
-        // and this for props type-checking
-        yield `({} as (props: __VLS_FunctionalComponentProps<typeof ${var_originalComponent}, typeof ${var_componentInstance}> & Record<string, unknown>) => void)(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
-        yield `)${common_1.endOfLine}`;
-    }
-    componentCtxVar = var_defineComponentCtx;
+    yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
+    yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
+    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
     currentComponent = node;
     for (const failedExp of propsFailedExps) {
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
         yield common_1.endOfLine;
     }
-    yield* generateVScope(options, ctx, node, props);
-    ctx.usedComponentCtxVars.add(componentCtxVar);
-    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
-    if (var_defineComponentCtx && ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
-        yield `const ${componentCtxVar} = __VLS_nonNullable(__VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance}))${common_1.endOfLine}`;
+    const refName = yield* generateVScope(options, ctx, node, props);
+    if (refName) {
+        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
     }
+    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
     if (usedComponentEventsVar) {
-        yield `let ${var_componentEmit}!: typeof ${componentCtxVar}.emit${common_1.endOfLine}`;
+        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
+        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${common_1.endOfLine}`;
         yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${common_1.endOfLine}`;
     }
+    if (options.vueCompilerOptions.fallthroughAttributes
+        && (node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
+            || node === ctx.singleRootNode)) {
+        const varAttrs = ctx.getInternalVariable();
+        ctx.inheritedAttrVars.add(varAttrs);
+        yield `var ${varAttrs}!: Parameters<typeof ${var_functionalComponent}>[0];\n`;
+    }
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir) {
-        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
+        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, var_defineComponentCtx);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, var_defineComponentCtx);
+    }
+    if (ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
+        yield `const ${var_defineComponentCtx} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})${common_1.endOfLine}`;
+        if (refName) {
+            yield `// @ts-ignore${common_1.newLine}`;
+            if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
+                && node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
+                && node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')) {
+                yield `(${refName} ??= []).push(${var_defineComponentCtx})`;
+            }
+            else {
+                yield `${refName} = ${var_defineComponentCtx}`;
+            }
+            yield common_1.endOfLine;
+        }
     }
 }
 function* generateElement(options, ctx, node, currentComponent, componentCtxVar) {
@@ -203,7 +209,13 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar)
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
         yield common_1.endOfLine;
     }
-    yield* generateVScope(options, ctx, node, node.props);
+    const refName = yield* generateVScope(options, ctx, node, node.props);
+    if (refName) {
+        yield `// @ts-ignore${common_1.newLine}`;
+        yield `${refName} = __VLS_intrinsicElements`;
+        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag);
+        yield common_1.endOfLine;
+    }
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir && componentCtxVar) {
         yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
@@ -211,6 +223,11 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar)
     else {
         yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
     }
+    if (options.vueCompilerOptions.fallthroughAttributes
+        && (node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
+            || node === ctx.singleRootNode)) {
+        ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
+    }
 }
 function* generateVScope(options, ctx, node, props) {
     const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
@@ -232,12 +249,13 @@ function* generateVScope(options, ctx, node, props) {
         inScope = true;
     }
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
-    yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-    yield* generateReferencesForScopedCssClasses(ctx, node);
+    const refName = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
+    yield* generateReferencesForScopedCssClasses(options, ctx, node);
     if (inScope) {
         yield `}${common_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
     }
+    return refName;
 }
 function getCanonicalComponentName(tagText) {
     return common_1.variableNameRegex.test(tagText)
@@ -274,7 +292,7 @@ function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, c
     const slotBlockVars = [];
     yield `const {`;
     if (slotDir?.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && slotDir.arg.content) {
-        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slotDir.arg.loc.source, slotDir.arg.loc.start.offset, slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all, slotDir.arg.loc);
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slotDir.arg.loc.source, slotDir.arg.loc.start.offset, slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all, slotDir.arg.loc, false, true);
         yield ': __VLS_thisSlot';
     }
     else {
@@ -347,56 +365,123 @@ function* generateReferencesForElements(options, ctx, node) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'ref'
             && prop.value) {
+            const [content, startOffset] = normalizeAttributeValue(prop.value);
             yield `// @ts-ignore${common_1.newLine}`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.value.content, prop.value.loc, prop.value.loc.start.offset + 1, ctx.codeFeatures.navigation, '(', ')');
+            yield `__VLS_ctx`;
+            yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
             yield common_1.endOfLine;
+            if (common_1.variableNameRegex.test(content)) {
+                ctx.accessExternalVariable(content, startOffset);
+            }
+            const refName = CompilerDOM.toValidAssetId(prop.value.content, '_VLS_refs');
+            options.templateRefNames.set(prop.value.content, refName);
+            return refName;
         }
     }
 }
-function* generateReferencesForScopedCssClasses(ctx, node) {
+function* generateReferencesForScopedCssClasses(options, ctx, node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'class'
             && prop.value) {
-            let startOffset = prop.value.loc.start.offset;
-            let content = prop.value.loc.source;
-            if ((content.startsWith(`'`) && content.endsWith(`'`))
-                || (content.startsWith(`"`) && content.endsWith(`"`))) {
-                startOffset++;
-                content = content.slice(1, -1);
-            }
-            if (content) {
-                let currentClassName = '';
-                for (const char of (content + ' ')) {
-                    if (char.trim() === '') {
-                        if (currentClassName !== '') {
-                            ctx.scopedClasses.push({ className: currentClassName, offset: startOffset });
-                            startOffset += currentClassName.length;
-                            currentClassName = '';
-                        }
-                        startOffset += char.length;
-                    }
-                    else {
-                        currentClassName += char;
+            if (options.template.lang === 'pug') {
+                const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset');
+                const content = prop.value.loc.source.slice(1, -1);
+                let startOffset = 1;
+                for (const className of content.split(' ')) {
+                    if (className) {
+                        ctx.scopedClasses.push({
+                            source: 'template',
+                            className,
+                            offset: getClassOffset(startOffset),
+                        });
                     }
+                    startOffset += className.length + 1;
                 }
             }
             else {
-                ctx.emptyClassOffsets.push(startOffset);
+                let isWrapped = false;
+                const [content, startOffset] = normalizeAttributeValue(prop.value);
+                if (content) {
+                    const classes = collectClasses(content, startOffset + (isWrapped ? 1 : 0));
+                    ctx.scopedClasses.push(...classes);
+                }
+                else {
+                    ctx.emptyClassOffsets.push(startOffset);
+                }
             }
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
             && prop.arg.content === 'class') {
-            yield `__VLS_styleScopedClasses = (`;
-            yield [
-                prop.exp.content,
-                'template',
-                prop.exp.loc.start.offset,
-                ctx.codeFeatures.navigationAndCompletion,
-            ];
-            yield `)${common_1.endOfLine}`;
+            const content = '`${' + prop.exp.content + '}`';
+            const startOffset = prop.exp.loc.start.offset - 3;
+            const { ts } = options;
+            const ast = ts.createSourceFile('', content, 99);
+            const literals = [];
+            ts.forEachChild(ast, node => {
+                if (!ts.isExpressionStatement(node) ||
+                    !isTemplateExpression(node.expression)) {
+                    return;
+                }
+                const expression = node.expression.templateSpans[0].expression;
+                if (ts.isStringLiteralLike(expression)) {
+                    literals.push(expression);
+                }
+                if (ts.isArrayLiteralExpression(expression)) {
+                    walkArrayLiteral(expression);
+                }
+                if (ts.isObjectLiteralExpression(expression)) {
+                    walkObjectLiteral(expression);
+                }
+            });
+            for (const literal of literals) {
+                const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
+                ctx.scopedClasses.push(...classes);
+            }
+            function walkArrayLiteral(node) {
+                const { elements } = node;
+                for (const element of elements) {
+                    if (ts.isStringLiteralLike(element)) {
+                        literals.push(element);
+                    }
+                    else if (ts.isObjectLiteralExpression(element)) {
+                        walkObjectLiteral(element);
+                    }
+                }
+            }
+            function walkObjectLiteral(node) {
+                const { properties } = node;
+                for (const property of properties) {
+                    if (ts.isPropertyAssignment(property)) {
+                        const { name } = property;
+                        if (ts.isIdentifier(name)) {
+                            walkIdentifier(name);
+                        }
+                        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)) {
+                        walkIdentifier(property.name);
+                    }
+                }
+            }
+            function walkIdentifier(node) {
+                const text = (0, scriptSetupRanges_1.getNodeText)(ts, node, ast);
+                ctx.scopedClasses.push({
+                    source: 'template',
+                    className: text,
+                    offset: node.end - text.length + startOffset
+                });
+            }
         }
     }
 }
@@ -406,4 +491,41 @@ function camelizeComponentName(newName) {
 function getTagRenameApply(oldName) {
     return oldName === (0, shared_2.hyphenateTag)(oldName) ? shared_2.hyphenateTag : undefined;
 }
+function normalizeAttributeValue(node) {
+    let offset = node.loc.start.offset;
+    let content = node.loc.source;
+    if ((content.startsWith(`'`) && content.endsWith(`'`))
+        || (content.startsWith(`"`) && content.endsWith(`"`))) {
+        offset++;
+        content = content.slice(1, -1);
+    }
+    return [content, offset];
+}
+function collectClasses(content, startOffset = 0) {
+    const classes = [];
+    let currentClassName = '';
+    let offset = 0;
+    for (const char of (content + ' ')) {
+        if (char.trim() === '') {
+            if (currentClassName !== '') {
+                classes.push({
+                    source: 'template',
+                    className: currentClassName,
+                    offset: offset + startOffset
+                });
+                offset += currentClassName.length;
+                currentClassName = '';
+            }
+            offset += char.length;
+        }
+        else {
+            currentClassName += char;
+        }
+    }
+    return classes;
+}
+// isTemplateExpression is missing in tsc
+function isTemplateExpression(node) {
+    return node.kind === 228;
+}
 //# sourceMappingURL=element.js.map

package/lib/codegen/template/elementChildren.js

@@ -18,6 +18,7 @@ function* generateElementChildren(options, ctx, node, currentComponent, componen
         && node.children.length
         && node.tagType !== CompilerDOM.ElementTypes.ELEMENT
         && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {
+        ctx.usedComponentCtxVars.add(componentCtxVar);
         yield `__VLS_nonNullable(${componentCtxVar}.slots).`;
         yield* (0, common_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
         yield common_1.endOfLine;

package/lib/codegen/template/elementDirectives.js

@@ -21,7 +21,7 @@ function* generateElementDirectives(options, ctx, node) {
                 yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.arg.content, prop.arg.loc, prop.arg.loc.start.offset + prop.arg.loc.source.indexOf(prop.arg.content), ctx.codeFeatures.all, '(', ')');
                 yield common_1.endOfLine;
             }
-            yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_directiveFunction(__VLS_ctx.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
+            yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_directiveAsFunction(__VLS_ctx.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
                 ...ctx.codeFeatures.all,
                 verification: false,
                 completion: {
@@ -32,9 +32,13 @@ function* generateElementDirectives(options, ctx, node) {
                     resolveRenameNewName: shared_1.camelize,
                     resolveRenameEditText: getPropRenameApply(prop.name),
                 },
-            }), `)(`, ...(prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-                ? (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'))
-                : [`undefined`]), `)`);
+            }), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...(prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                ? [
+                    ...(0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, 'value'),
+                    ': ',
+                    ...(0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'))
+                ]
+                : [`undefined`]), `}, null!, null!)`);
             yield common_1.endOfLine;
         }
     }

package/lib/codegen/template/elementEvents.js

@@ -105,22 +105,21 @@ function* generateEventExpression(options, ctx, prop) {
                 prefix += `if (!(${blockCondition})) return${common_1.endOfLine}`;
             }
         }
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, () => {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, offset => {
             if (_isCompoundExpression && isFirstMapping) {
                 isFirstMapping = false;
-                return {
-                    ...ctx.codeFeatures.all,
-                    __hint: {
-                        setting: 'vue.inlayHints.inlineHandlerLeading',
-                        label: '$event =>',
-                        tooltip: [
-                            '`$event` is a hidden parameter, you can use it in this callback.',
-                            'To hide this hint, set `vue.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
-                            '[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
-                        ].join('\n\n'),
-                        paddingRight: true,
-                    },
-                };
+                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 ctx.codeFeatures.all;
         }, prefix, suffix);

package/lib/codegen/template/elementProps.js

@@ -76,17 +76,30 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             if (shouldSpread) {
                 yield `...{ `;
             }
+            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
             const codes = (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
                 ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
+                    ...codeInfo,
+                    verification: options.vueCompilerOptions.strictTemplates
+                        ? codeInfo.verification
+                        : {
+                            shouldReport(_source, code) {
+                                if (String(code) === '2353' || String(code) === '2561') {
+                                    return false;
+                                }
+                                return typeof codeInfo.verification === 'object'
+                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
+                                    : true;
+                            },
+                        },
+                    navigation: codeInfo.navigation
                         ? {
                             resolveRenameNewName: shared_1.camelize,
                             resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
                         }
                         : false,
                 }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
-                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...genereatePropExp(options, ctx, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...genereatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
             if (!enableCodeFeatures) {
                 yield (0, muggle_string_1.toString)([...codes]);
             }
@@ -113,9 +126,22 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             if (shouldSpread) {
                 yield `...{ `;
             }
+            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
             const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, shouldCamelize
                 ? {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+                    ...codeInfo,
+                    verification: options.vueCompilerOptions.strictTemplates
+                        ? codeInfo.verification
+                        : {
+                            shouldReport(_source, code) {
+                                if (String(code) === '2353' || String(code) === '2561') {
+                                    return false;
+                                }
+                                return typeof codeInfo.verification === 'object'
+                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
+                                    : true;
+                            },
+                        },
                     navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
                         ? {
                             resolveRenameNewName: shared_1.camelize,
@@ -156,7 +182,7 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
         }
     }
 }
-function* genereatePropExp(options, ctx, exp, features, isShorthand, inlayHints) {
+function* genereatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
     if (exp && exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) { // style='z-index: 2' will compile to {'z-index':'2'}
         if (!isShorthand) { // vue 3.4+
             yield* (0, interpolation_1.generateInterpolation)(options, ctx, exp.loc.source, exp.loc, exp.loc.start.offset, features, '(', ')');
@@ -169,23 +195,18 @@ function* genereatePropExp(options, ctx, exp, features, isShorthand, inlayHints)
                     yield `__VLS_ctx.`;
                 }
                 yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
-                if (inlayHints) {
-                    yield [
-                        '',
-                        'template',
-                        exp.loc.end.offset,
-                        {
-                            __hint: {
-                                setting: 'vue.inlayHints.vBindShorthand',
-                                label: `="${propVariableName}"`,
-                                tooltip: [
-                                    `This is a shorthand for \`${exp.loc.source}="${propVariableName}"\`.`,
-                                    'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.',
-                                    '[More info](https://github.com/vuejs/core/pull/9451)',
-                                ].join('\n\n'),
-                            },
-                        },
-                    ];
+                if (enableCodeFeatures) {
+                    ctx.inlayHints.push({
+                        blockName: 'template',
+                        offset: prop.loc.end.offset,
+                        setting: 'vue.inlayHints.vBindShorthand',
+                        label: `="${propVariableName}"`,
+                        tooltip: [
+                            `This is a shorthand for \`${prop.loc.source}="${propVariableName}"\`.`,
+                            'To hide this hint, set `vue.inlayHints.vBindShorthand` to `false` in IDE settings.',
+                            '[More info](https://github.com/vuejs/core/pull/9451)',
+                        ].join('\n\n'),
+                    });
                 }
             }
         }

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

@@ -9,9 +9,12 @@ export interface TemplateCodegenOptions {
     template: NonNullable<Sfc['template']>;
     scriptSetupBindingNames: Set<string>;
     scriptSetupImportComponentNames: Set<string>;
+    edited: boolean;
+    templateRefNames: Map<string, string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;
     propsAssignName?: string;
+    inheritAttrs: boolean;
 }
 export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, TemplateCodegenContext>;
 export declare function forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode>;