@vue/language-core 3.0.7-alpha.1 → 3.1.0-alpha.0

package/lib/codegen/script/scriptSetup.js

@@ -8,7 +8,6 @@ const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const wrapWith_1 = require("../utils/wrapWith");
 const component_1 = require("./component");
-const componentSelf_1 = require("./componentSelf");
 const index_1 = require("./index");
 const template_1 = require("./template");
 function* generateScriptSetupImports(scriptSetup, scriptSetupRanges) {
@@ -21,11 +20,7 @@ function* generateScriptSetupImports(scriptSetup, scriptSetupRanges) {
 }
 function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
     if (scriptSetup.generic) {
-        if (!options.scriptRanges?.exportDefault) {
-            // #4569
-            yield ['', 'scriptSetup', 0, codeFeatures_1.codeFeatures.verification];
-            yield `export default `;
-        }
+        yield* (0, index_1.generateConstExport)(options, scriptSetup);
         yield `(`;
         if (typeof scriptSetup.generic === 'object') {
             yield `<`;
@@ -46,6 +41,22 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
             + `	__VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'],${utils_1.newLine}`
             + `	__VLS_setup = (async () => {${utils_1.newLine}`;
         yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, undefined);
+        const propTypes = [];
+        if (ctx.generatedPropsType) {
+            propTypes.push(`__VLS_PublicProps`);
+        }
+        if (scriptSetupRanges.defineProps?.arg) {
+            yield `const __VLS_propsOption = `;
+            yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.defineProps.arg.start, scriptSetupRanges.defineProps.arg.end, codeFeatures_1.codeFeatures.navigation);
+            yield utils_1.endOfLine;
+            propTypes.push(`import('${options.vueCompilerOptions.lib}').${options.vueCompilerOptions.target >= 3.3 ? `ExtractPublicPropTypes` : `ExtractPropTypes`}<typeof __VLS_propsOption>`);
+        }
+        if (scriptSetupRanges.defineEmits || scriptSetupRanges.defineModel.length) {
+            propTypes.push(`__VLS_EmitProps`);
+        }
+        if (options.templateCodegen?.inheritedAttrVars.size) {
+            propTypes.push(`__VLS_InheritedAttrs`);
+        }
         const emitTypes = [];
         if (scriptSetupRanges.defineEmits) {
             emitTypes.push(`typeof ${scriptSetupRanges.defineEmits.name ?? '__VLS_emit'}`);
@@ -54,26 +65,32 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
             emitTypes.push(`typeof __VLS_modelEmit`);
         }
         yield `return {} as {${utils_1.newLine}`
-            + `	props: ${ctx.localTypes.PrettifyLocal}<__VLS_OwnProps & __VLS_PublicProps & __VLS_InheritedAttrs> & __VLS_BuiltInPublicProps,${utils_1.newLine}`
-            + `	expose(exposed: import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<${scriptSetupRanges.defineExpose ? 'typeof __VLS_exposed' : '{}'}>): void,${utils_1.newLine}`
-            + `	attrs: any,${utils_1.newLine}`
-            + `	slots: __VLS_Slots,${utils_1.newLine}`
-            + `	emit: ${emitTypes.length ? emitTypes.join(' & ') : `{}`},${utils_1.newLine}`
+            + `	props: ${ctx.localTypes.PrettifyLocal}<${propTypes.join(` & `)}> & ${options.vueCompilerOptions.target >= 3.4
+                ? `import('${options.vueCompilerOptions.lib}').PublicProps`
+                : options.vueCompilerOptions.target >= 3
+                    ? `import('${options.vueCompilerOptions.lib}').VNodeProps`
+                        + ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
+                        + ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
+                    : `globalThis.JSX.IntrinsicAttributes`}${utils_1.endOfLine}`
+            + `	expose: (exposed: ${scriptSetupRanges.defineExpose
+                ? `import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<typeof __VLS_exposed>`
+                : `{}`}) => void${utils_1.endOfLine}`
+            + `	attrs: any${utils_1.endOfLine}`
+            + `	slots: __VLS_Slots${utils_1.endOfLine}`
+            + `	emit: ${emitTypes.length ? emitTypes.join(` & `) : `{}`}${utils_1.endOfLine}`
             + `}${utils_1.endOfLine}`;
         yield `})(),${utils_1.newLine}`; // __VLS_setup = (async () => {
-        yield `) => ({} as import('${options.vueCompilerOptions.lib}').VNode & { __ctx?: Awaited<typeof __VLS_setup> }))`;
+        yield `) => ({} as import('${options.vueCompilerOptions.lib}').VNode & { __ctx?: Awaited<typeof __VLS_setup> }))${utils_1.endOfLine}`;
     }
     else if (!options.sfc.script) {
         // no script block, generate script setup code at root
         yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'export default');
     }
     else {
-        if (!options.scriptRanges?.exportDefault) {
-            yield `export default `;
-        }
+        yield* (0, index_1.generateConstExport)(options, scriptSetup);
         yield `await (async () => {${utils_1.newLine}`;
         yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'return');
-        yield `})()`;
+        yield `})()${utils_1.endOfLine}`;
     }
 }
 function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, syntax) {
@@ -97,7 +114,7 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
                 [
                     `let __VLS_exposed!: `,
                     (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, codeFeatures_1.codeFeatures.all),
-                    `${utils_1.endOfLine}`,
+                    utils_1.endOfLine,
                 ],
                 callExp.start,
                 callExp.start,
@@ -112,7 +129,7 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
                 [
                     `const __VLS_exposed = `,
                     (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, codeFeatures_1.codeFeatures.all),
-                    `${utils_1.endOfLine}`,
+                    utils_1.endOfLine,
                 ],
                 callExp.start,
                 callExp.start,
@@ -235,30 +252,27 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
         nextStart = end;
     }
     yield (0, utils_1.generateSfcBlockSection)(scriptSetup, nextStart, scriptSetup.content.length, codeFeatures_1.codeFeatures.all);
-    yield* (0, index_1.generateScriptSectionPartiallyEnding)(scriptSetup.name, scriptSetup.content.length, '#3632/scriptSetup.vue');
+    yield* (0, utils_1.generatePartiallyEnding)(scriptSetup.name, scriptSetup.content.length, '#3632/scriptSetup.vue');
     yield* generateMacros(options, ctx);
-    if (scriptSetupRanges.defineProps?.typeArg && scriptSetupRanges.withDefaults?.arg) {
-        // fix https://github.com/vuejs/language-tools/issues/1187
-        yield `const __VLS_withDefaultsArg = (function <T>(t: T) { return t })(`;
-        yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.withDefaults.arg.start, scriptSetupRanges.withDefaults.arg.end, codeFeatures_1.codeFeatures.navigation);
-        yield `)${utils_1.endOfLine}`;
-    }
-    yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges);
-    yield* generateModelEmit(scriptSetup, scriptSetupRanges);
-    const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx);
-    yield* (0, componentSelf_1.generateComponentSelf)(options, ctx, templateCodegenCtx);
+    const hasSlots = !!(scriptSetupRanges.defineSlots
+        || options.templateCodegen?.slots.length
+        || options.templateCodegen?.dynamicSlots.length);
+    yield* generateModels(scriptSetup, scriptSetupRanges);
+    yield* generatePublicProps(options, ctx, scriptSetup, scriptSetupRanges, hasSlots);
+    yield* (0, template_1.generateTemplate)(options, ctx);
     if (syntax) {
-        if (scriptSetupRanges.defineSlots
-            || options.templateCodegen?.slots.length
-            || options.templateCodegen?.dynamicSlots.length) {
-            yield `const __VLS_component = `;
+        const prefix = syntax === 'return'
+            ? [`return `]
+            : (0, index_1.generateConstExport)(options, scriptSetup);
+        if (hasSlots) {
+            yield `const __VLS_base = `;
             yield* (0, component_1.generateComponent)(options, ctx, scriptSetup, scriptSetupRanges);
             yield utils_1.endOfLine;
-            yield `${syntax} `;
-            yield `{} as ${ctx.localTypes.WithSlots}<typeof __VLS_component, __VLS_Slots>${utils_1.endOfLine}`;
+            yield* prefix;
+            yield `{} as ${ctx.localTypes.WithSlots}<typeof __VLS_base, __VLS_Slots>${utils_1.endOfLine}`;
         }
         else {
-            yield `${syntax} `;
+            yield* prefix;
             yield* (0, component_1.generateComponent)(options, ctx, scriptSetup, scriptSetupRanges);
             yield utils_1.endOfLine;
         }
@@ -327,132 +341,117 @@ function* generateDefineWithType(scriptSetup, statement, callExp, typeArg, name,
             ];
         }
     }
+    else if (!utils_1.identifierRegex.test(name)) {
+        yield [[`const ${defaultName} = `], statement.start, callExp.start];
+        yield [
+            [
+                utils_1.endOfLine,
+                (0, utils_1.generateSfcBlockSection)(scriptSetup, statement.start, callExp.start, codeFeatures_1.codeFeatures.all),
+                defaultName,
+            ],
+            statement.end,
+            statement.end,
+        ];
+    }
 }
-function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
-    if (scriptSetup.generic) {
-        yield `const __VLS_fnComponent = (await import('${options.vueCompilerOptions.lib}')).defineComponent({${utils_1.newLine}`;
-        if (scriptSetupRanges.defineProps?.arg) {
-            yield `props: `;
-            yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.defineProps.arg.start, scriptSetupRanges.defineProps.arg.end, codeFeatures_1.codeFeatures.navigation);
-            yield `,${utils_1.newLine}`;
-        }
-        yield* (0, component_1.generateEmitsOption)(options, scriptSetupRanges);
-        yield `})${utils_1.endOfLine}`;
-        yield `type __VLS_BuiltInPublicProps = ${options.vueCompilerOptions.target >= 3.4
-            ? `import('${options.vueCompilerOptions.lib}').PublicProps`
-            : options.vueCompilerOptions.target >= 3
-                ? `import('${options.vueCompilerOptions.lib}').VNodeProps`
-                    + ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
-                    + ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
-                : `globalThis.JSX.IntrinsicAttributes`}`;
-        yield utils_1.endOfLine;
-        yield `type __VLS_OwnProps = `;
-        yield `${ctx.localTypes.OmitKeepDiscriminatedUnion}<InstanceType<typeof __VLS_fnComponent>['$props'], keyof __VLS_BuiltInPublicProps>`;
+function* generatePublicProps(options, ctx, scriptSetup, scriptSetupRanges, hasSlots) {
+    if (scriptSetupRanges.defineProps?.typeArg && scriptSetupRanges.withDefaults?.arg) {
+        yield `const __VLS_defaults = `;
+        yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.withDefaults.arg.start, scriptSetupRanges.withDefaults.arg.end, codeFeatures_1.codeFeatures.navigation);
         yield utils_1.endOfLine;
     }
-    if (scriptSetupRanges.defineModel.length) {
-        yield `const __VLS_defaults = {${utils_1.newLine}`;
-        for (const defineModel of scriptSetupRanges.defineModel) {
-            if (!defineModel.defaultValue) {
-                continue;
-            }
-            const [propName] = getPropAndLocalName(scriptSetup, defineModel);
-            yield `'${propName}': `;
-            yield getRangeText(scriptSetup, defineModel.defaultValue);
-            yield `,${utils_1.newLine}`;
-        }
-        yield `}${utils_1.endOfLine}`;
-    }
-    yield `type __VLS_PublicProps = `;
-    if (scriptSetupRanges.defineSlots && options.vueCompilerOptions.jsxSlots) {
-        if (ctx.generatedPropsType) {
-            yield ` & `;
-        }
-        ctx.generatedPropsType = true;
-        yield `${ctx.localTypes.PropsChildren}<__VLS_Slots>`;
+    const propTypes = [];
+    if (options.vueCompilerOptions.jsxSlots && hasSlots) {
+        propTypes.push(`${ctx.localTypes.PropsChildren}<__VLS_Slots>`);
     }
     if (scriptSetupRanges.defineProps?.typeArg) {
-        if (ctx.generatedPropsType) {
-            yield ` & `;
-        }
-        ctx.generatedPropsType = true;
-        yield `__VLS_Props`;
+        propTypes.push(`__VLS_Props`);
     }
     if (scriptSetupRanges.defineModel.length) {
-        if (ctx.generatedPropsType) {
-            yield ` & `;
-        }
-        ctx.generatedPropsType = true;
-        yield `{${utils_1.newLine}`;
-        for (const defineModel of scriptSetupRanges.defineModel) {
-            const [propName, localName] = getPropAndLocalName(scriptSetup, defineModel);
-            if (defineModel.comments) {
-                yield scriptSetup.content.slice(defineModel.comments.start, defineModel.comments.end);
-                yield utils_1.newLine;
-            }
-            if (defineModel.name) {
-                yield* (0, camelized_1.generateCamelized)(getRangeText(scriptSetup, defineModel.name), scriptSetup.name, defineModel.name.start, codeFeatures_1.codeFeatures.navigation);
-            }
-            else {
-                yield propName;
-            }
-            yield defineModel.required ? `: ` : `?: `;
-            yield* generateDefineModelType(scriptSetup, propName, localName, defineModel);
-            yield `,${utils_1.newLine}`;
-            if (defineModel.modifierType) {
-                const modifierName = `${propName === 'modelValue' ? 'model' : propName}Modifiers`;
-                const modifierType = getRangeText(scriptSetup, defineModel.modifierType);
-                yield `'${modifierName}'?: Partial<Record<${modifierType}, true>>,${utils_1.newLine}`;
-            }
-        }
-        yield `}`;
+        propTypes.push(`__VLS_ModelProps`);
     }
-    if (!ctx.generatedPropsType) {
-        yield `{}`;
+    if (propTypes.length) {
+        ctx.generatedPropsType = true;
+        yield `type __VLS_PublicProps = ${propTypes.join(` & `)}${utils_1.endOfLine}`;
     }
-    yield utils_1.endOfLine;
 }
-function* generateModelEmit(scriptSetup, scriptSetupRanges) {
-    if (scriptSetupRanges.defineModel.length) {
-        yield `type __VLS_ModelEmit = {${utils_1.newLine}`;
-        for (const defineModel of scriptSetupRanges.defineModel) {
-            const [propName, localName] = getPropAndLocalName(scriptSetup, defineModel);
-            yield `'update:${propName}': [value: `;
-            yield* generateDefineModelType(scriptSetup, propName, localName, defineModel);
-            if (!defineModel.required && !defineModel.defaultValue) {
-                yield ` | undefined`;
-            }
-            yield `]${utils_1.endOfLine}`;
+function* generateModels(scriptSetup, scriptSetupRanges) {
+    if (!scriptSetupRanges.defineModel.length) {
+        return;
+    }
+    const defaultCodes = [];
+    const propCodes = [];
+    const emitCodes = [];
+    for (const defineModel of scriptSetupRanges.defineModel) {
+        const propName = defineModel.name
+            ? (0, shared_1.camelize)(getRangeText(scriptSetup, defineModel.name).slice(1, -1))
+            : 'modelValue';
+        let modelType;
+        if (defineModel.type) {
+            // Infer from defineModel<T>
+            modelType = getRangeText(scriptSetup, defineModel.type);
+        }
+        else if (defineModel.runtimeType && defineModel.localName) {
+            // Infer from actual prop declaration code
+            modelType = `typeof ${getRangeText(scriptSetup, defineModel.localName)}['value']`;
+        }
+        else if (defineModel.defaultValue && propName) {
+            // Infer from defineModel({ default: T })
+            modelType = `typeof __VLS_defaultModels['${propName}']`;
         }
+        else {
+            modelType = `any`;
+        }
+        if (defineModel.defaultValue) {
+            defaultCodes.push(`'${propName}': ${getRangeText(scriptSetup, defineModel.defaultValue)},${utils_1.newLine}`);
+        }
+        propCodes.push(generateModelProp(scriptSetup, defineModel, propName, modelType));
+        emitCodes.push(generateModelEmit(defineModel, propName, modelType));
+    }
+    if (defaultCodes.length) {
+        yield `const __VLS_defaultModels = {${utils_1.newLine}`;
+        yield* defaultCodes;
         yield `}${utils_1.endOfLine}`;
-        yield `const __VLS_modelEmit = defineEmits<__VLS_ModelEmit>()${utils_1.endOfLine}`;
     }
-}
-function* generateDefineModelType(scriptSetup, propName, localName, defineModel) {
-    if (defineModel.type) {
-        // Infer from defineModel<T>
-        yield getRangeText(scriptSetup, defineModel.type);
+    yield `type __VLS_ModelProps = {${utils_1.newLine}`;
+    for (const codes of propCodes) {
+        yield* codes;
+    }
+    yield `}${utils_1.endOfLine}`;
+    yield `type __VLS_ModelEmit = {${utils_1.newLine}`;
+    for (const codes of emitCodes) {
+        yield* codes;
     }
-    else if (defineModel.runtimeType && localName) {
-        // Infer from actual prop declaration code
-        yield `typeof ${localName}['value']`;
+    yield `}${utils_1.endOfLine}`;
+    yield `const __VLS_modelEmit = defineEmits<__VLS_ModelEmit>()${utils_1.endOfLine}`;
+}
+function* generateModelProp(scriptSetup, defineModel, propName, modelType) {
+    if (defineModel.comments) {
+        yield scriptSetup.content.slice(defineModel.comments.start, defineModel.comments.end);
+        yield utils_1.newLine;
     }
-    else if (defineModel.defaultValue && propName) {
-        // Infer from defineModel({default: T})
-        yield `typeof __VLS_defaults['${propName}']`;
+    if (defineModel.name) {
+        yield* (0, camelized_1.generateCamelized)(getRangeText(scriptSetup, defineModel.name), scriptSetup.name, defineModel.name.start, codeFeatures_1.codeFeatures.navigation);
     }
     else {
-        yield `any`;
+        yield propName;
+    }
+    yield defineModel.required ? `: ` : `?: `;
+    yield modelType;
+    yield utils_1.endOfLine;
+    if (defineModel.modifierType) {
+        const modifierName = `${propName === 'modelValue' ? 'model' : propName}Modifiers`;
+        const modifierType = getRangeText(scriptSetup, defineModel.modifierType);
+        yield `'${modifierName}'?: Partial<Record<${modifierType}, true>>${utils_1.endOfLine}`;
     }
 }
-function getPropAndLocalName(scriptSetup, defineModel) {
-    const localName = defineModel.localName
-        ? getRangeText(scriptSetup, defineModel.localName)
-        : undefined;
-    const propName = defineModel.name
-        ? (0, shared_1.camelize)(getRangeText(scriptSetup, defineModel.name).slice(1, -1))
-        : 'modelValue';
-    return [propName, localName];
+function* generateModelEmit(defineModel, propName, modelType) {
+    yield `'update:${propName}': [value: `;
+    yield modelType;
+    if (!defineModel.required && !defineModel.defaultValue) {
+        yield ` | undefined`;
+    }
+    yield `]${utils_1.endOfLine}`;
 }
 function getRangeText(scriptSetup, range) {
     return scriptSetup.content.slice(range.start, range.end);

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

@@ -1,6 +1,4 @@
 import type { Code } from '../../types';
-import { type TemplateCodegenContext } from '../template/context';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
-export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code, TemplateCodegenContext>;
-export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
+export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code>;

package/lib/codegen/script/template.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generateTemplate;
-exports.generateTemplateDirectives = generateTemplateDirectives;
+const shared_1 = require("@vue/shared");
+const path = require("path-browserify");
 const codeFeatures_1 = require("../codeFeatures");
 const modules_1 = require("../style/modules");
 const scopedClasses_1 = require("../style/scopedClasses");
@@ -12,25 +13,76 @@ const utils_1 = require("../utils");
 const merge_1 = require("../utils/merge");
 function* generateTemplate(options, ctx) {
     ctx.generatedTemplate = true;
-    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
-        scriptSetupBindingNames: new Set(),
-    });
-    yield* generateTemplateCtx(options);
+    yield* generateSelf(options);
+    yield* generateTemplateCtx(options, ctx);
     yield* generateTemplateElements();
     yield* generateTemplateComponents(options);
     yield* generateTemplateDirectives(options);
-    yield* generateTemplateBody(options, templateCodegenCtx);
-    return templateCodegenCtx;
+    yield* generateTemplateBody(options, ctx);
 }
-function* generateTemplateCtx(options) {
+function* generateSelf(options) {
+    if (options.sfc.script && options.scriptRanges?.exportDefault) {
+        yield `const __VLS_self = (await import('${options.vueCompilerOptions.lib}')).defineComponent(`;
+        const { args } = options.scriptRanges.exportDefault;
+        yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, args.start, args.end, codeFeatures_1.codeFeatures.all);
+        yield `)${utils_1.endOfLine}`;
+    }
+    else if (options.sfc.script?.src) {
+        yield `let __VLS_self!: typeof import('./${path.basename(options.fileName)}').default${utils_1.endOfLine}`;
+    }
+}
+function* generateTemplateCtx(options, ctx) {
     const exps = [];
-    exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
     if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileName.endsWith(ext))) {
         exps.push(`globalThis`);
     }
+    if (options.sfc.script?.src || options.scriptRanges?.exportDefault) {
+        exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
+    }
+    else {
+        exps.push(`{} as import('${options.vueCompilerOptions.lib}').ComponentPublicInstance`);
+    }
     if (options.sfc.styles.some(style => style.module)) {
         exps.push(`{} as __VLS_StyleModules`);
     }
+    const emitTypes = [];
+    if (options.scriptSetupRanges?.defineEmits) {
+        const { defineEmits } = options.scriptSetupRanges;
+        emitTypes.push(`typeof ${defineEmits.name ?? `__VLS_emit`}`);
+    }
+    if (options.scriptSetupRanges?.defineModel.length) {
+        emitTypes.push(`typeof __VLS_modelEmit`);
+    }
+    if (emitTypes.length) {
+        yield `type __VLS_EmitProps = __VLS_EmitsToProps<__VLS_NormalizeEmits<${emitTypes.join(` & `)}>>${utils_1.endOfLine}`;
+        exps.push(`{} as { $emit: ${emitTypes.join(` & `)} }`);
+    }
+    const propTypes = [];
+    const { defineProps, withDefaults } = options.scriptSetupRanges ?? {};
+    const props = defineProps?.arg
+        ? `typeof ${defineProps.name ?? `__VLS_props`}`
+        : defineProps?.typeArg
+            ? withDefaults?.arg
+                ? `__VLS_WithDefaultsGlobal<__VLS_Props, typeof __VLS_defaults>`
+                : `__VLS_Props`
+            : undefined;
+    if (props) {
+        propTypes.push(props);
+    }
+    if (options.scriptSetupRanges?.defineModel.length) {
+        propTypes.push(`__VLS_ModelProps`);
+    }
+    if (emitTypes.length) {
+        propTypes.push(`__VLS_EmitProps`);
+    }
+    if (propTypes.length) {
+        yield `type __VLS_InternalProps = ${propTypes.join(` & `)}${utils_1.endOfLine}`;
+        exps.push(`{} as { $props: __VLS_InternalProps }`);
+        exps.push(`{} as __VLS_InternalProps`);
+    }
+    if (options.scriptSetupRanges && ctx.bindingNames.size) {
+        exps.push(`{} as __VLS_Bindings`);
+    }
     yield `const __VLS_ctx = `;
     yield* (0, merge_1.generateSpreadMerge)(exps);
     yield utils_1.endOfLine;
@@ -62,11 +114,15 @@ function* generateTemplateDirectives(options) {
     yield `type __VLS_LocalDirectives = ${types.join(` & `)}${utils_1.endOfLine}`;
     yield `let __VLS_directives!: __VLS_LocalDirectives & __VLS_GlobalDirectives${utils_1.endOfLine}`;
 }
-function* generateTemplateBody(options, templateCodegenCtx) {
+function* generateTemplateBody(options, ctx) {
+    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
+        scriptSetupBindingNames: new Set(),
+    });
     yield* (0, scopedClasses_1.generateStyleScopedClasses)(options, templateCodegenCtx);
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(templateCodegenCtx, true);
     yield* (0, modules_1.generateStyleModules)(options);
     yield* generateCssVars(options, templateCodegenCtx);
+    yield* generateBindings(options, ctx, templateCodegenCtx);
     if (options.templateCodegen) {
         yield* options.templateCodegen.codes;
     }
@@ -80,16 +136,34 @@ function* generateTemplateBody(options, templateCodegenCtx) {
     }
 }
 function* generateCssVars(options, ctx) {
-    if (!options.sfc.styles.length) {
-        return;
-    }
-    yield `// CSS variable injection ${utils_1.newLine}`;
     for (const style of options.sfc.styles) {
         for (const binding of style.bindings) {
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, style.name, codeFeatures_1.codeFeatures.all, binding.text, binding.offset);
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, style.name, codeFeatures_1.codeFeatures.all, binding.text, binding.offset, `(`, `)`);
             yield utils_1.endOfLine;
         }
     }
-    yield `// CSS variable injection end ${utils_1.newLine}`;
+}
+function* generateBindings(options, ctx, templateCodegenCtx) {
+    if (!options.sfc.scriptSetup || !ctx.bindingNames.size) {
+        return;
+    }
+    const usageVars = new Set([
+        ...options.sfc.template?.ast?.components.flatMap(c => [(0, shared_1.camelize)(c), (0, shared_1.capitalize)((0, shared_1.camelize)(c))]) ?? [],
+        ...options.templateCodegen?.accessExternalVariables.keys() ?? [],
+        ...templateCodegenCtx.accessExternalVariables.keys(),
+    ]);
+    yield `type __VLS_Bindings = __VLS_ProxyRefs<{${utils_1.newLine}`;
+    for (const varName of ctx.bindingNames) {
+        if (!usageVars.has(varName)) {
+            continue;
+        }
+        const token = Symbol(varName.length);
+        yield ['', undefined, 0, { __linkedToken: token }];
+        yield `${varName}: typeof `;
+        yield ['', undefined, 0, { __linkedToken: token }];
+        yield varName;
+        yield utils_1.endOfLine;
+    }
+    yield `}>${utils_1.endOfLine}`;
 }
 //# sourceMappingURL=template.js.map

package/lib/codegen/template/context.js

@@ -224,7 +224,7 @@ function createTemplateCodegenContext(options, templateAst) {
         },
         *generateAutoImportCompletion() {
             const all = [...accessExternalVariables.entries()];
-            if (!all.some(([_, offsets]) => offsets.size)) {
+            if (!all.some(([, offsets]) => offsets.size)) {
                 return;
             }
             yield `// @ts-ignore${utils_1.newLine}`; // #2304

package/lib/codegen/template/element.js

@@ -93,9 +93,7 @@ function* generateComponent(options, ctx, node) {
     else {
         yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
         if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
-            yield `typeof __VLS_self & (new () => { `
-                + (0, shared_2.getSlotsPropertyName)(options.vueCompilerOptions.target)
-                + `: __VLS_Slots }), `;
+            yield `typeof __VLS_export, `;
         }
         else {
             yield `void, `;
@@ -110,7 +108,7 @@ function* generateComponent(options, ctx, node) {
                 ? codeFeatures_1.codeFeatures.verification
                 : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551,
         });
-        yield `${utils_1.endOfLine}`;
+        yield utils_1.endOfLine;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
         if (utils_1.identifierRegex.test(camelizedTag)) {
             // navigation support
@@ -131,7 +129,7 @@ function* generateComponent(options, ctx, node) {
                     onlyImport: true,
                 },
             });
-            yield `${utils_1.endOfLine}`;
+            yield utils_1.endOfLine;
         }
     }
     yield `// @ts-ignore${utils_1.newLine}`;
@@ -159,7 +157,7 @@ function* generateComponent(options, ctx, node) {
         if (ctx.inVFor) {
             yield `[]`;
         }
-        yield `${utils_1.endOfLine}`;
+        yield utils_1.endOfLine;
         if (refName && offset) {
             ctx.addTemplateRef(refName, `typeof ${ctx.getHoistVariable(componentInstanceVar)}`, offset);
         }

package/lib/codegen/template/elementProps.js

@@ -111,11 +111,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
-            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, picomatch_1.isMatch)(prop.name, pattern))
-                // 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')) {
+            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, picomatch_1.isMatch)(prop.name, pattern))) {
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
@@ -138,8 +134,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             yield `,${utils_1.newLine}`;
         }
-        else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-            && prop.name === 'bind'
+        else if (prop.name === 'bind'
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             if (prop.exp.loc.source === '$attrs') {
@@ -172,8 +167,8 @@ function* generatePropExp(options, ctx, prop, exp, enableCodeFeatures = true) {
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
             if (utils_1.identifierRegex.test(propVariableName)) {
-                const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
-                const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
+                const isDestructuredProp = options.destructuredPropNames.has(propVariableName);
+                const isTemplateRef = options.templateRefNames.has(propVariableName);
                 const codes = (0, camelized_1.generateCamelized)(exp.loc.source, 'template', exp.loc.start.offset, features);
                 if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
                     yield* codes;
@@ -216,7 +211,7 @@ function* generateAttrValue(attrNode, features) {
 function getShouldCamelize(options, prop, propName) {
     return (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
         || !prop.arg
-        || (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
+        || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
         && (0, shared_2.hyphenateAttr)(propName) === propName
         && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, picomatch_1.isMatch)(propName, pattern));
 }
@@ -265,6 +260,6 @@ function getModelPropName(node, vueCompilerOptions) {
             }
         }
     }
-    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
+    return 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map

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

@@ -11,8 +11,8 @@ export interface TemplateCodegenOptions {
     destructuredPropNames: Set<string>;
     templateRefNames: Set<string>;
     hasDefineSlots?: boolean;
-    slotsAssignName?: string;
     propsAssignName?: string;
+    slotsAssignName?: string;
     inheritAttrs: boolean;
     selfComponentName?: string;
 }