@vue/language-core 2.1.8 → 2.2.0

package/lib/codegen/template/elementEvents.js

@@ -6,11 +6,10 @@ exports.generateEventExpression = generateEventExpression;
 exports.isCompoundExpression = isCompoundExpression;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
-const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, emitVar, eventsVar) {
+function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar) {
     let usedComponentEventsVar = false;
     let propsVar;
     for (const prop of node.props) {
@@ -22,71 +21,39 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             usedComponentEventsVar = true;
             if (!propsVar) {
                 propsVar = ctx.getInternalVariable();
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${common_1.endOfLine}`;
+                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${utils_1.endOfLine}`;
             }
-            const originalPropName = (0, shared_1.camelize)('on-' + prop.arg.loc.source);
-            const originalPropNameObjectKey = common_1.variableNameRegex.test(originalPropName)
-                ? originalPropName
-                : `'${originalPropName}'`;
-            yield `const ${ctx.getInternalVariable()}: `;
-            if (!options.vueCompilerOptions.strictTemplates) {
-                yield `Record<string, unknown> & `;
+            let source = prop.arg.loc.source;
+            let start = prop.arg.loc.start.offset;
+            let propPrefix = 'on';
+            let emitPrefix = '';
+            if (source.startsWith('vue:')) {
+                source = source.slice('vue:'.length);
+                start = start + 'vue:'.length;
+                propPrefix = 'onVnode';
+                emitPrefix = 'vnode-';
             }
-            yield `(${common_1.newLine}`;
-            yield `__VLS_IsFunction<typeof ${propsVar}, '${originalPropName}'> extends true${common_1.newLine}`;
-            yield `? typeof ${propsVar}${common_1.newLine}`;
-            yield `: __VLS_IsFunction<typeof ${eventsVar}, '${prop.arg.loc.source}'> extends true${common_1.newLine}`;
-            yield `? {${common_1.newLine}`;
-            yield `/**__VLS_emit,${emitVar},${prop.arg.loc.source}*/${common_1.newLine}`;
-            yield `${originalPropNameObjectKey}?: typeof ${eventsVar}['${prop.arg.loc.source}']${common_1.newLine}`;
-            yield `}${common_1.newLine}`;
-            if (prop.arg.loc.source !== (0, shared_1.camelize)(prop.arg.loc.source)) {
-                yield `: __VLS_IsFunction<typeof ${eventsVar}, '${(0, shared_1.camelize)(prop.arg.loc.source)}'> extends true${common_1.newLine}`;
-                yield `? {${common_1.newLine}`;
-                yield `/**__VLS_emit,${emitVar},${(0, shared_1.camelize)(prop.arg.loc.source)}*/${common_1.newLine}`;
-                yield `${originalPropNameObjectKey}?: typeof ${eventsVar}['${(0, shared_1.camelize)(prop.arg.loc.source)}']${common_1.newLine}`;
-                yield `}${common_1.newLine}`;
-            }
-            yield `: typeof ${propsVar}${common_1.newLine}`;
-            yield `) = {${common_1.newLine}`;
-            yield* generateEventArg(ctx, prop.arg, true);
+            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${(0, shared_1.camelize)(propPrefix + '-' + source)}', '${emitPrefix}${source}', '${(0, shared_1.camelize)(emitPrefix + source)}'> = {${utils_1.newLine}`;
+            yield* generateEventArg(ctx, source, start, propPrefix);
             yield `: `;
             yield* generateEventExpression(options, ctx, prop);
-            yield `}${common_1.endOfLine}`;
+            yield `}${utils_1.endOfLine}`;
         }
     }
     return usedComponentEventsVar;
 }
-const eventArgFeatures = {
-    navigation: {
-        // @click-outside -> onClickOutside
-        resolveRenameNewName(newName) {
-            return (0, shared_1.camelize)('on-' + newName);
-        },
-        // onClickOutside -> @click-outside
-        resolveRenameEditText(newName) {
-            const hName = (0, shared_2.hyphenateAttr)(newName);
-            if ((0, shared_2.hyphenateAttr)(newName).startsWith('on-')) {
-                return (0, shared_1.camelize)(hName.slice('on-'.length));
-            }
-            return newName;
-        },
-    },
-};
-function* generateEventArg(ctx, arg, enableHover) {
-    const features = enableHover
-        ? {
-            ...ctx.codeFeatures.withoutHighlightAndCompletion,
-            ...eventArgFeatures,
-        }
-        : eventArgFeatures;
-    if (common_1.variableNameRegex.test((0, shared_1.camelize)(arg.loc.source))) {
-        yield ['', 'template', arg.loc.start.offset, features];
-        yield `on`;
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping);
+function* generateEventArg(ctx, name, start, directive = 'on') {
+    const features = {
+        ...ctx.codeFeatures.withoutHighlightAndCompletion,
+        ...ctx.codeFeatures.navigationWithoutRename,
+    };
+    if (utils_1.variableNameRegex.test((0, shared_1.camelize)(name))) {
+        yield ['', 'template', start, features];
+        yield directive;
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping);
     }
     else {
-        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, features, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
+        yield* (0, utils_1.wrapWith)(start, start + name.length, features, `'`, ['', 'template', start, utils_1.combineLastMapping], directive, ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
@@ -94,18 +61,18 @@ function* generateEventExpression(options, ctx, prop) {
         let prefix = '(';
         let suffix = ')';
         let isFirstMapping = true;
-        const ast = (0, common_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
+        const ast = (0, utils_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
         const _isCompoundExpression = isCompoundExpression(options.ts, ast);
         if (_isCompoundExpression) {
-            yield `(...[$event]) => {${common_1.newLine}`;
+            yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
             prefix = '';
             suffix = '';
             for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!(${blockCondition})) return${common_1.endOfLine}`;
+                prefix += `if (!(${blockCondition})) return${utils_1.endOfLine}`;
             }
         }
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, offset => {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
             if (_isCompoundExpression && isFirstMapping) {
                 isFirstMapping = false;
                 ctx.inlayHints.push({
@@ -122,10 +89,10 @@ function* generateEventExpression(options, ctx, prop) {
                 });
             }
             return ctx.codeFeatures.all;
-        }, prefix, suffix);
+        }, prop.exp.content, prop.exp.loc.start.offset, prop.exp.loc, prefix, suffix);
         if (_isCompoundExpression) {
             ctx.removeLocalVariable('$event');
-            yield common_1.endOfLine;
+            yield utils_1.endOfLine;
             yield* ctx.generateAutoImportCompletion();
             yield `}`;
         }

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

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

package/lib/codegen/template/elementProps.js

@@ -6,13 +6,15 @@ const shared_1 = require("@vue/shared");
 const minimatch_1 = require("minimatch");
 const muggle_string_1 = require("muggle-string");
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const unicode_1 = require("../utils/unicode");
+const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-const inlayHints_1 = require("../inlayHints");
-function* generateElementProps(options, ctx, node, props, enableCodeFeatures, propsFailedExps) {
+function* generateElementProps(options, ctx, node, props, strictPropsCheck, enableCodeFeatures, failedPropExps) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -22,25 +24,26 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                 && !prop.arg.loc.source.endsWith(']')) {
                 if (!isComponent) {
                     yield `...{ `;
-                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg, true);
+                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg.loc.source, prop.arg.loc.start.offset);
                     yield `: `;
                     yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
-                    yield `}, `;
+                    yield `},`;
                 }
                 else {
-                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any }, `;
+                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any },`;
                 }
+                yield utils_1.newLine;
             }
             else if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                propsFailedExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
-                propsFailedExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
+                failedPropExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
             }
         }
     }
@@ -56,132 +59,101 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                     : prop.arg.loc.source;
             }
             else {
-                propName = getModelValuePropName(node, options.vueCompilerOptions.target, options.vueCompilerOptions);
+                propName = getModelPropName(node, options.vueCompilerOptions);
             }
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                    failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
                 }
                 continue;
             }
-            if (prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
-                propName = propName.substring(1);
+            if (prop.name === 'bind'
+                && prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
+                propName = propName.slice(1);
             }
             const shouldSpread = propName === 'style' || propName === 'class';
-            const shouldCamelize = isComponent
-                && (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
-                && (0, shared_2.hyphenateAttr)(propName) === propName
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, propName);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize);
             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, {
-                    ...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)), `: (`, ...generatePropExp(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]);
+            const codes = (0, utils_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, codeInfo, prop.loc.name_2 ??= {}, shouldCamelize)
+                : (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
             if (shouldSpread) {
                 yield ` }`;
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
+            if (prop.name === 'model' && prop.modifiers.length) {
+                const propertyName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                    ? !prop.arg.isStatic
+                        ? `[__VLS_tryAsConstant(\`$\{${prop.arg.content}\}Modifiers\`)]`
+                        : (0, shared_1.camelize)(propName) + `Modifiers`
+                    : `modelModifiers`;
+                const codes = (0, elementDirectives_1.generateModifiers)(options, ctx, prop, propertyName);
+                if (enableCodeFeatures) {
+                    yield* codes;
+                }
+                else {
+                    yield (0, muggle_string_1.toString)([...codes]);
+                }
+                yield utils_1.newLine;
+            }
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
             if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
-                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom always adds it (#3881)
+                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom` always adds it (#3881)
                 || (options.vueCompilerOptions.target < 3
                     && prop.name === 'persisted'
                     && node.tag.toLowerCase() === 'transition')) {
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
-            const shouldCamelize = isComponent
-                && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, prop.name);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, true);
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = shouldCamelize
-                ? {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
-                        ? {
-                            resolveRenameNewName: shared_1.camelize,
-                            resolveRenameEditText: shared_2.hyphenateAttr,
-                        }
-                        : false,
-                }
-                : {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                };
-            if (!options.vueCompilerOptions.strictTemplates) {
-                const verification = codeInfo.verification;
-                codeInfo.verification = {
-                    shouldReport(_source, code) {
-                        if (String(code) === '2353' || String(code) === '2561') {
-                            return false;
-                        }
-                        return typeof verification === 'object'
-                            ? verification.shouldReport?.(_source, code) ?? true
-                            : true;
-                    },
-                };
-            }
-            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, codeInfo, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
-                ? generateAttrValue(prop.value, ctx.codeFeatures.all)
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ??= {}, shouldCamelize), `: (`, ...(prop.value
+                ? generateAttrValue(prop.value, ctx.codeFeatures.withoutNavigation)
                 : [`true`]), `)`);
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
             if (shouldSpread) {
                 yield ` }`;
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'bind'
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, 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, '(', ')'));
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (prop.exp.loc.source === '$attrs') {
+                if (enableCodeFeatures) {
+                    ctx.bindingAttrLocs.push(prop.exp.loc);
+                }
             }
             else {
-                yield* codes;
+                const codes = (0, utils_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, false, enableCodeFeatures));
+                if (enableCodeFeatures) {
+                    yield* codes;
+                }
+                else {
+                    yield (0, muggle_string_1.toString)([...codes]);
+                }
+                yield `,${utils_1.newLine}`;
             }
-            yield `, `;
-        }
-        else {
-            // comment this line to avoid affecting comments in prop expressions
-            // tsCodeGen.addText("/* " + [prop.type, prop.name, prop.arg?.loc.source, prop.exp?.loc.source, prop.loc.source].join(", ") + " */ ");
         }
     }
 }
@@ -194,16 +166,29 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
     }
     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, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, '(', ')');
         }
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
-            if (common_1.variableNameRegex.test(propVariableName)) {
-                if (!ctx.hasLocalVariable(propVariableName)) {
+            if (utils_1.variableNameRegex.test(propVariableName)) {
+                const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
+                const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
+                const codes = (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
+                if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
+                    yield* codes;
+                }
+                else {
                     ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-                    yield `__VLS_ctx.`;
+                    if (isTemplateRef) {
+                        yield `__VLS_unref(`;
+                        yield* codes;
+                        yield `)`;
+                    }
+                    else {
+                        yield `__VLS_ctx.`;
+                        yield* codes;
+                    }
                 }
-                yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
                 if (enableCodeFeatures) {
                     ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
                 }
@@ -215,45 +200,57 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
     }
 }
 function* generateAttrValue(attrNode, features) {
-    const char = attrNode.loc.source.startsWith("'") ? "'" : '"';
-    yield char;
+    const quote = attrNode.loc.source.startsWith("'") ? "'" : '"';
+    yield quote;
     let start = attrNode.loc.start.offset;
-    let end = attrNode.loc.end.offset;
     let content = attrNode.loc.source;
     if ((content.startsWith('"') && content.endsWith('"'))
         || (content.startsWith("'") && content.endsWith("'"))) {
         start++;
-        end--;
         content = content.slice(1, -1);
     }
-    if (needToUnicode(content)) {
-        yield* (0, common_1.wrapWith)(start, end, features, toUnicode(content));
-    }
-    else {
-        yield [content, 'template', start, features];
-    }
-    yield char;
+    yield* (0, unicode_1.generateUnicode)(content, start, features);
+    yield quote;
 }
-function needToUnicode(str) {
-    return str.includes('\\') || str.includes('\n');
+function getShouldCamelize(options, prop, propName) {
+    return (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
+        || !prop.arg
+        || (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
+        && (0, shared_2.hyphenateAttr)(propName) === propName
+        && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
 }
-function toUnicode(str) {
-    return str.split('').map(value => {
-        const temp = value.charCodeAt(0).toString(16).padStart(4, '0');
-        if (temp.length > 2) {
-            return '\\u' + temp;
-        }
-        return value;
-    }).join('');
+function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
+    const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
+    return {
+        ...codeInfo,
+        navigation: codeInfo.navigation
+            ? {
+                resolveRenameNewName: shared_1.camelize,
+                resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
+            }
+            : false,
+        verification: strictPropsCheck
+            ? 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;
+                },
+            }
+    };
 }
-function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
+function getModelPropName(node, vueCompilerOptions) {
     for (const modelName in vueCompilerOptions.experimentalModelPropName) {
         const tags = vueCompilerOptions.experimentalModelPropName[modelName];
         for (const tag in tags) {
             if (node.tag === tag || node.tag === (0, shared_2.hyphenateTag)(tag)) {
-                const v = tags[tag];
-                if (typeof v === 'object') {
-                    const arr = Array.isArray(v) ? v : [v];
+                const val = tags[tag];
+                if (typeof val === 'object') {
+                    const arr = Array.isArray(val) ? val : [val];
                     for (const attrs of arr) {
                         let failed = false;
                         for (const attr in attrs) {
@@ -283,6 +280,6 @@ function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
             }
         }
     }
-    return vueVersion < 3 ? 'value' : 'modelValue';
+    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map