@vue/language-core 3.0.8 → 3.1.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) {
@@ -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, `;

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';
@@ -264,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;
 }

package/lib/codegen/template/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generate;
 exports.forEachElementNode = forEachElementNode;
 const CompilerDOM = require("@vue/compiler-dom");
-const shared_1 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const wrapWith_1 = require("../utils/wrapWith");
@@ -33,9 +32,8 @@ function* generateTemplate(options, ctx) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
-    const slotsPropertyName = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
     if (options.vueCompilerOptions.inferTemplateDollarSlots) {
-        ctx.dollarVars.add(slotsPropertyName);
+        ctx.dollarVars.add('$slots');
     }
     if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
         ctx.dollarVars.add('$attrs');
@@ -51,17 +49,19 @@ function* generateTemplate(options, ctx) {
     }
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
     yield* ctx.generateHoistVariables();
-    const speicalTypes = [
-        [slotsPropertyName, yield* generateSlots(options, ctx)],
+    const dollarTypes = [
+        ['$slots', yield* generateSlots(options, ctx)],
         ['$attrs', yield* generateInheritedAttrs(options, ctx)],
         ['$refs', yield* generateTemplateRefs(options, ctx)],
         ['$el', yield* generateRootEl(ctx)],
-    ];
-    yield `var __VLS_dollars!: {${utils_1.newLine}`;
-    for (const [name, type] of speicalTypes) {
-        yield `${name}: ${type}${utils_1.endOfLine}`;
+    ].filter(([name]) => ctx.dollarVars.has(name));
+    if (dollarTypes.length) {
+        yield `var __VLS_dollars!: {${utils_1.newLine}`;
+        for (const [name, type] of dollarTypes) {
+            yield `${name}: ${type}${utils_1.endOfLine}`;
+        }
+        yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
     }
-    yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
 }
 function* generateSlots(options, ctx) {
     if (!options.hasDefineSlots) {

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

@@ -8,3 +8,4 @@ export declare const identifierRegex: RegExp;
 export declare function normalizeAttributeValue(node: CompilerDOM.TextNode): [string, number];
 export declare function createTsAst(ts: typeof import('typescript'), inlineTsAsts: Map<string, ts.SourceFile> | undefined, text: string): ts.SourceFile;
 export declare function generateSfcBlockSection(block: SfcBlock, start: number, end: number, features: VueCodeInformation): Code;
+export declare function generatePartiallyEnding(source: string, end: number, mark: string, delimiter?: string): Generator<Code>;

package/lib/codegen/utils/index.js

@@ -4,6 +4,8 @@ exports.identifierRegex = exports.combineLastMapping = exports.endOfLine = expor
 exports.normalizeAttributeValue = normalizeAttributeValue;
 exports.createTsAst = createTsAst;
 exports.generateSfcBlockSection = generateSfcBlockSection;
+exports.generatePartiallyEnding = generatePartiallyEnding;
+const codeFeatures_1 = require("../codeFeatures");
 exports.newLine = `\n`;
 exports.endOfLine = `;${exports.newLine}`;
 exports.combineLastMapping = { __combineOffset: 1 };
@@ -35,4 +37,9 @@ function generateSfcBlockSection(block, start, end, features) {
         features,
     ];
 }
+function* generatePartiallyEnding(source, end, mark, delimiter = 'debugger') {
+    yield delimiter;
+    yield [``, source, end, codeFeatures_1.codeFeatures.verification];
+    yield `/* PartiallyEnd: ${mark} */${exports.newLine}`;
+}
 //# sourceMappingURL=index.js.map