@vue/language-core 3.2.8 → 3.3.0

package/README.md

@@ -111,6 +111,7 @@ Configure Vue compiler behavior through the `vueCompilerOptions` field in `tscon
 | `lib` | `string` | `'vue'` | Vue package name, used for generating import statements. |
 | `skipTemplateCodegen` | `boolean` | `false` | Skip virtual code generation for templates. |
 | `fallthroughAttributes` | `boolean` | `false` | Enable type inference for fallthrough attributes. |
+| `checkRequiredFallthroughAttributes` | `boolean` | `false` | Check required fallthrough attributes. |
 | `jsxSlots` | `boolean` | `false` | Use JSX-style slots types. |
 | `dataAttributes` | `string[]` | `[]` | Allowed data-* attribute patterns. |
 | `htmlAttributes` | `string[]` | `['aria-*']` | Allowed HTML attribute patterns. |

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './lib/languagePlugin';
 export * from './lib/parsers/scriptRanges';
 export * from './lib/parsers/scriptSetupRanges';
 export * from './lib/plugins';
+export * from './lib/template/compile';
 export * from './lib/types';
 export * from './lib/utils/collectBindings';
 export * from './lib/utils/forEachTemplateNode';

package/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./lib/languagePlugin"), exports);
 __exportStar(require("./lib/parsers/scriptRanges"), exports);
 __exportStar(require("./lib/parsers/scriptSetupRanges"), exports);
 __exportStar(require("./lib/plugins"), exports);
+__exportStar(require("./lib/template/compile"), exports);
 __exportStar(require("./lib/types"), exports);
 __exportStar(require("./lib/utils/collectBindings"), exports);
 __exportStar(require("./lib/utils/forEachTemplateNode"), exports);

package/lib/codegen/names.d.ts

@@ -43,6 +43,7 @@ declare const raw: {
     asFunctionalSlot: string;
     directiveBindingRestFields: string;
     functionalComponentArgsRest: string;
+    omit: string;
     tryAsConstant: string;
     vFor: string;
     vSlot: string;

package/lib/codegen/names.js

@@ -47,6 +47,7 @@ const raw = {
     asFunctionalSlot: '',
     directiveBindingRestFields: '',
     functionalComponentArgsRest: '',
+    omit: '',
     tryAsConstant: '',
     vFor: '',
     vSlot: '',

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

@@ -1,5 +1,5 @@
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
-import type { Code, Sfc } from '../../types';
+import type { Code, IRScriptSetup } from '../../types';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
-export declare function generateComponent(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
+export declare function generateComponent(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: IRScriptSetup, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;

package/lib/codegen/script/component.js

@@ -26,83 +26,89 @@ function* generateComponent(options, ctx, scriptSetup, scriptSetupRanges) {
     yield `})`;
 }
 function* generateEmitsOption(options, scriptSetupRanges) {
-    const optionCodes = [];
-    const typeOptionCodes = [];
+    const typeCodes = options.vueCompilerOptions.target >= 3.5 && !scriptSetupRanges.defineEmits?.hasUnionTypeArg
+        ? [...generateTypeEmitsOption(scriptSetupRanges)]
+        : [];
+    const runtimeCodes = !typeCodes.length
+        ? [...generateRuntimeEmitsOption(scriptSetupRanges)]
+        : [];
+    if (typeCodes.length) {
+        yield `__typeEmits: {} as `;
+        yield* (0, merge_1.generateIntersectMerge)(...typeCodes);
+        yield `,${utils_1.newLine}`;
+    }
+    else if (runtimeCodes.length) {
+        yield `emits: `;
+        yield* (0, merge_1.generateSpreadMerge)(...runtimeCodes);
+        yield `,${utils_1.newLine}`;
+    }
+}
+function* generateTypeEmitsOption(scriptSetupRanges) {
+    if (scriptSetupRanges.defineModel.length) {
+        yield names_1.names.ModelEmit;
+    }
+    if (scriptSetupRanges.defineEmits?.typeArg) {
+        yield names_1.names.Emit;
+    }
+}
+function* generateRuntimeEmitsOption(scriptSetupRanges) {
     if (scriptSetupRanges.defineModel.length) {
-        optionCodes.push([`{} as ${names_1.names.NormalizeEmits}<typeof ${names_1.names.modelEmit}>`]);
-        typeOptionCodes.push([names_1.names.ModelEmit]);
+        yield `{} as ${names_1.names.NormalizeEmits}<typeof ${names_1.names.modelEmit}>`;
     }
     if (scriptSetupRanges.defineEmits) {
-        const { name, typeArg, hasUnionTypeArg } = scriptSetupRanges.defineEmits;
-        optionCodes.push([`{} as ${names_1.names.NormalizeEmits}<typeof ${name ?? names_1.names.emit}>`]);
-        if (typeArg && !hasUnionTypeArg) {
-            typeOptionCodes.push([names_1.names.Emit]);
-        }
-        else {
-            typeOptionCodes.length = 0;
-        }
+        yield `{} as ${names_1.names.NormalizeEmits}<typeof ${scriptSetupRanges.defineEmits.name ?? names_1.names.emit}>`;
     }
-    if (options.vueCompilerOptions.target >= 3.5 && typeOptionCodes.length) {
-        yield `__typeEmits: {} as `;
-        yield* (0, merge_1.generateIntersectMerge)(typeOptionCodes);
+}
+function* generatePropsOption(options, ctx, scriptSetup, scriptSetupRanges, hasEmitsOption) {
+    const typeCodes = options.vueCompilerOptions.target >= 3.5 && !scriptSetupRanges.defineProps?.arg
+        ? [...generateTypePropsOption(options, ctx, hasEmitsOption)]
+        : [];
+    const runtimeCodes = scriptSetupRanges.withDefaults || !typeCodes.length
+        ? [...generateRuntimePropsOption(options, ctx, scriptSetup, scriptSetupRanges, hasEmitsOption)]
+        : [];
+    if (typeCodes.length) {
+        if (options.vueCompilerOptions.target >= 3.6 && scriptSetupRanges.withDefaults?.arg) {
+            yield `__defaults: ${names_1.names.defaults},${utils_1.newLine}`;
+        }
+        yield `__typeProps: `;
+        yield* (0, merge_1.generateSpreadMerge)(...typeCodes);
         yield `,${utils_1.newLine}`;
     }
-    else if (optionCodes.length) {
-        yield `emits: `;
-        yield* (0, merge_1.generateSpreadMerge)(optionCodes);
+    if (runtimeCodes.length) {
+        yield `props: `;
+        yield* (0, merge_1.generateSpreadMerge)(...runtimeCodes);
         yield `,${utils_1.newLine}`;
     }
 }
-function* generatePropsOption(options, ctx, scriptSetup, scriptSetupRanges, hasEmitsOption) {
-    const optionGenerates = [];
-    const typeOptionGenerates = [];
+function* generateTypePropsOption(options, ctx, hasEmitsOption) {
     if (options.templateAndStyleTypes.has(names_1.names.InheritedAttrs)) {
         const attrsType = hasEmitsOption
             ? `Omit<${names_1.names.InheritedAttrs}, keyof ${names_1.names.EmitProps}>`
             : names_1.names.InheritedAttrs;
-        optionGenerates.push(function* () {
-            const propsType = `${names_1.names.PickNotAny}<${ctx.localTypes.OmitIndexSignature}<${attrsType}>, {}>`;
-            const optionType = `${ctx.localTypes.TypePropsToOption}<${propsType}>`;
-            yield `{} as ${optionType}`;
-        });
-        typeOptionGenerates.push(function* () {
-            yield `{} as ${attrsType}`;
-        });
+        yield `{} as ${attrsType}`;
     }
     if (ctx.generatedTypes.has(names_1.names.PublicProps)) {
-        if (options.vueCompilerOptions.target < 3.6) {
-            optionGenerates.push(function* () {
-                let propsType = `${ctx.localTypes.TypePropsToOption}<${names_1.names.PublicProps}>`;
-                if (scriptSetupRanges.withDefaults?.arg) {
-                    propsType = `${ctx.localTypes.WithDefaults}<${propsType}, typeof ${names_1.names.defaults}>`;
-                }
-                yield `{} as ${propsType}`;
-            });
+        yield `{} as ${names_1.names.PublicProps}`;
+    }
+}
+function* generateRuntimePropsOption(options, ctx, scriptSetup, scriptSetupRanges, hasEmitsOption) {
+    if (options.templateAndStyleTypes.has(names_1.names.InheritedAttrs)) {
+        const attrsType = hasEmitsOption
+            ? `Omit<${names_1.names.InheritedAttrs}, keyof ${names_1.names.EmitProps}>`
+            : names_1.names.InheritedAttrs;
+        const propsType = `${ctx.localTypes.TypePropsToOption}<${names_1.names.PickNotAny}<${ctx.localTypes.OmitIndexSignature}<${attrsType}>, {}>>`;
+        yield `{} as ${propsType}`;
+    }
+    if (ctx.generatedTypes.has(names_1.names.PublicProps) && options.vueCompilerOptions.target < 3.6) {
+        let propsType = `${ctx.localTypes.TypePropsToOption}<${names_1.names.PublicProps}>`;
+        if (scriptSetupRanges.withDefaults?.arg) {
+            propsType = `${ctx.localTypes.WithDefaults}<${propsType}, typeof ${names_1.names.defaults}>`;
         }
-        typeOptionGenerates.push(function* () {
-            yield `{} as ${names_1.names.PublicProps}`;
-        });
+        yield `{} as ${propsType}`;
     }
     if (scriptSetupRanges.defineProps?.arg) {
         const { arg } = scriptSetupRanges.defineProps;
-        optionGenerates.push(() => (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, codeFeatures_1.codeFeatures.navigation));
-        typeOptionGenerates.length = 0;
-    }
-    const useTypeOption = options.vueCompilerOptions.target >= 3.5 && typeOptionGenerates.length;
-    const useOption = (!useTypeOption || scriptSetupRanges.withDefaults) && optionGenerates.length;
-    if (useTypeOption) {
-        if (options.vueCompilerOptions.target >= 3.6
-            && scriptSetupRanges.withDefaults?.arg) {
-            yield `__defaults: ${names_1.names.defaults},${utils_1.newLine}`;
-        }
-        yield `__typeProps: `;
-        yield* (0, merge_1.generateSpreadMerge)(typeOptionGenerates.map(g => g()));
-        yield `,${utils_1.newLine}`;
-    }
-    if (useOption) {
-        yield `props: `;
-        yield* (0, merge_1.generateSpreadMerge)(optionGenerates.map(g => g()));
-        yield `,${utils_1.newLine}`;
+        yield* (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, codeFeatures_1.codeFeatures.navigation);
     }
 }
 //# sourceMappingURL=component.js.map

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

@@ -1,10 +1,10 @@
 import type { ScriptRanges } from '../../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
-import type { Code, Sfc, VueCompilerOptions } from '../../types';
+import type { Code, IRScript, IRScriptSetup, VueCompilerOptions } from '../../types';
 export interface ScriptCodegenOptions {
     vueCompilerOptions: VueCompilerOptions;
-    script: Sfc['script'];
-    scriptSetup: Sfc['scriptSetup'];
+    script: IRScript | undefined;
+    scriptSetup: IRScriptSetup | undefined;
     fileName: string;
     scriptRanges: ScriptRanges | undefined;
     scriptSetupRanges: ScriptSetupRanges | undefined;

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

@@ -1,7 +1,7 @@
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
-import type { Code, Sfc } from '../../types';
+import type { Code, IRScriptSetup } from '../../types';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
-export declare function generateScriptSetupImports(scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
-export declare function generateGeneric(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges, generic: NonNullable<NonNullable<Sfc['scriptSetup']>['generic']>, body: Iterable<Code>): Generator<Code>;
-export declare function generateSetupFunction(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: NonNullable<Sfc['scriptSetup']>, scriptSetupRanges: ScriptSetupRanges, body: Iterable<Code>, output?: Iterable<Code>): Generator<Code>;
+export declare function generateScriptSetupImports(scriptSetup: IRScriptSetup, scriptSetupRanges: ScriptSetupRanges): Generator<Code>;
+export declare function generateGeneric(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: IRScriptSetup, scriptSetupRanges: ScriptSetupRanges, generic: NonNullable<IRScriptSetup['generic']>, body: Iterable<Code>): Generator<Code>;
+export declare function generateSetupFunction(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, scriptSetup: IRScriptSetup, scriptSetupRanges: ScriptSetupRanges, body: Iterable<Code>, output?: Iterable<Code>): Generator<Code>;

package/lib/codegen/script/template.js

@@ -19,16 +19,16 @@ function* generateTemplateCtx({ vueCompilerOptions, templateAndStyleTypes, scrip
     const emitTypes = [];
     const propTypes = [];
     if (vueCompilerOptions.petiteVueExtensions.some(ext => fileName.endsWith(ext))) {
-        exps.push([`globalThis`]);
+        exps.push(`globalThis`);
     }
     if (selfType) {
-        exps.push([`{} as InstanceType<${names_1.names.PickNotAny}<typeof ${selfType}, new () => {}>>`]);
+        exps.push(`{} as InstanceType<${names_1.names.PickNotAny}<typeof ${selfType}, new () => {}>>`);
     }
     else {
-        exps.push([`{} as import('${vueCompilerOptions.lib}').ComponentPublicInstance`]);
+        exps.push(`{} as import('${vueCompilerOptions.lib}').ComponentPublicInstance`);
     }
     if (templateAndStyleTypes.has(names_1.names.StyleModules)) {
-        exps.push([`{} as ${names_1.names.StyleModules}`]);
+        exps.push(`{} as ${names_1.names.StyleModules}`);
     }
     if (scriptSetupRanges?.defineEmits) {
         emitTypes.push(`typeof ${scriptSetupRanges.defineEmits.name ?? names_1.names.emit}`);
@@ -38,7 +38,7 @@ function* generateTemplateCtx({ vueCompilerOptions, templateAndStyleTypes, scrip
     }
     if (emitTypes.length) {
         yield `type ${names_1.names.EmitProps} = ${names_1.names.EmitsToProps}<${names_1.names.NormalizeEmits}<${emitTypes.join(` & `)}>>${utils_1.endOfLine}`;
-        exps.push([`{} as { $emit: ${emitTypes.join(` & `)} }`]);
+        exps.push(`{} as { $emit: ${emitTypes.join(` & `)} }`);
     }
     if (scriptSetupRanges?.defineProps) {
         propTypes.push(`typeof ${scriptSetupRanges.defineProps.name ?? names_1.names.props}`);
@@ -50,14 +50,14 @@ function* generateTemplateCtx({ vueCompilerOptions, templateAndStyleTypes, scrip
         propTypes.push(names_1.names.EmitProps);
     }
     if (propTypes.length) {
-        exps.push([`{} as { $props: ${propTypes.join(` & `)} }`]);
-        exps.push([`{} as ${propTypes.join(` & `)}`]);
+        exps.push(`{} as { $props: ${propTypes.join(` & `)} }`);
+        exps.push(`{} as ${propTypes.join(` & `)}`);
     }
     if (ctx.generatedTypes.has(names_1.names.SetupExposed)) {
-        exps.push([`{} as ${names_1.names.SetupExposed}`]);
+        exps.push(`{} as ${names_1.names.SetupExposed}`);
     }
     yield `const ${names_1.names.ctx} = `;
-    yield* (0, merge_1.generateSpreadMerge)(exps);
+    yield* (0, merge_1.generateSpreadMerge)(...exps);
     yield utils_1.endOfLine;
 }
 function* generateTemplateComponents({ vueCompilerOptions, script, scriptRanges }, ctx) {

package/lib/codegen/style/common.d.ts

@@ -1,3 +1,3 @@
-import type { Code, Sfc } from '../../types';
+import type { Code, IRStyle } from '../../types';
 export declare function generateClassProperty(source: string, classNameWithDot: string, offset: number, propertyType: string): Generator<Code>;
-export declare function generateStyleImports(style: Sfc['styles'][number]): Generator<Code>;
+export declare function generateStyleImports(style: IRStyle): Generator<Code>;

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

@@ -1,8 +1,8 @@
-import type { Code, Sfc, VueCompilerOptions } from '../../types';
+import type { Code, IRStyle, VueCompilerOptions } from '../../types';
 export interface StyleCodegenOptions {
     typescript: typeof import('typescript');
     vueCompilerOptions: VueCompilerOptions;
-    styles: Sfc['styles'];
+    styles: readonly IRStyle[];
     setupRefs: Set<string>;
     setupConsts: Set<string>;
 }

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

@@ -4,3 +4,4 @@ import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
 export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateFragment(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

package/lib/codegen/template/element.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateComponent = generateComponent;
 exports.generateElement = generateElement;
+exports.generateFragment = generateFragment;
 const CompilerDOM = __importStar(require("@vue/compiler-dom"));
 const shared_1 = require("@vue/shared");
 const muggle_string_1 = require("muggle-string");
@@ -155,23 +156,21 @@ function* generateComponent(options, ctx, node) {
             }
         }
     }
-    yield* generateComponentBody(options, ctx, node, tag, startTagOffset, props, componentVar);
-}
-function* generateComponentBody(options, ctx, node, tag, tagOffset, props, componentVar) {
     let isCtxVarUsed = false;
     let isPropsVarUsed = false;
     const getCtxVar = () => (isCtxVarUsed = true, ctxVar);
     const getPropsVar = () => (isPropsVarUsed = true, propsVar);
     ctx.components.push(getCtxVar);
-    const failGeneratedExpressions = [];
-    const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failGeneratedExpressions)];
     const functionalVar = ctx.getInternalVariable();
     const vnodeVar = ctx.getInternalVariable();
     const ctxVar = ctx.getInternalVariable();
     const propsVar = ctx.getInternalVariable();
+    const failedPropExps = [];
+    const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failedPropExps)];
+    const propsStr = (0, muggle_string_1.toString)(propCodes);
     yield `// @ts-ignore${utils_1.newLine}`;
     yield `const ${functionalVar} = ${options.vueCompilerOptions.checkUnknownProps ? names_1.names.asFunctionalComponent0 : names_1.names.asFunctionalComponent1}(${componentVar}, new ${componentVar}({${utils_1.newLine}`;
-    yield (0, muggle_string_1.toString)(propCodes);
+    yield propsStr;
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
     const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.doNotReportTs6133);
@@ -186,39 +185,46 @@ function* generateComponentBody(options, ctx, node, tag, tagOffset, props, compo
         yield `>`;
         yield (0, boundary_1.endBoundary)(token, offset + content.length);
     }
+    const shouldInheritAttrs = hasVBindAttrs(options, ctx, node);
     yield `(`;
-    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffset, codeFeatures_1.codeFeatures.verification);
-    yield `{${utils_1.newLine}`;
+    const token2 = yield* (0, boundary_1.startBoundary)('template', startTagOffset, shouldInheritAttrs && options.vueCompilerOptions.checkRequiredFallthroughAttributes
+        ? {}
+        : codeFeatures_1.codeFeatures.verification);
+    yield `{`;
+    yield [``, 'template', node.loc.start.offset, { __propsCompletion: true }];
+    yield utils_1.newLine;
     yield* propCodes;
     yield `}`;
-    yield (0, boundary_1.endBoundary)(token2, tagOffset + tag.length);
+    yield (0, boundary_1.endBoundary)(token2, startTagOffset + tag.length);
     yield `, ...${names_1.names.functionalComponentArgsRest}(${functionalVar}))${utils_1.endOfLine}`;
-    yield* generateFailedExpressions(options, ctx, failGeneratedExpressions);
+    yield* generateFailedExpressions(options, ctx, failedPropExps);
     yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentVar, getCtxVar, getPropsVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     const templateRef = getTemplateRef(node);
-    const isRootNode = ctx.singleRootNodes.has(node)
+    const isSingleRoot = ctx.singleRootNodes.has(node)
         && !options.vueCompilerOptions.fallthroughComponentNames.includes((0, shared_2.hyphenateTag)(tag));
-    if (templateRef || isRootNode) {
+    if (templateRef || isSingleRoot) {
         const componentInstanceVar = ctx.getInternalVariable();
-        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${getCtxVar()}['expose']>>[0] | null)`;
-        if (ctx.inVFor) {
-            yield `[]`;
-        }
+        yield `var ${componentInstanceVar}!: Parameters<NonNullable<typeof ${getCtxVar()}['expose']>>[0]`;
         yield utils_1.endOfLine;
         if (templateRef) {
-            const typeExp = `typeof ${ctx.getHoistVariable(componentInstanceVar)}`;
+            let typeExp = `typeof ${ctx.getHoistVariable(componentInstanceVar)} | null`;
+            if (ctx.inVFor) {
+                typeExp = `(${typeExp})[]`;
+            }
             ctx.addTemplateRef(templateRef[0], typeExp, templateRef[1]);
         }
-        if (isRootNode) {
+        if (isSingleRoot) {
             ctx.singleRootElTypes.add(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
         }
     }
-    if (hasVBindAttrs(options, ctx, node)) {
-        ctx.inheritedAttrVars.add(getPropsVar());
+    if (shouldInheritAttrs) {
+        const restsVar = ctx.getInternalVariable();
+        yield `var ${restsVar} = ${names_1.names.omit}(${getPropsVar()}, {\n${propsStr}})${utils_1.endOfLine}`;
+        ctx.inheritedAttrVars.add(restsVar);
     }
     yield* generateStyleScopedClassReferences(options, node);
-    const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
+    const slotDir = node.props.find(CompilerDOM.isVSlot);
     if (slotDir || node.children.length) {
         yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, getCtxVar());
     }
@@ -268,6 +274,22 @@ function* generateElement(options, ctx, node) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
     }
 }
+function* generateFragment(options, ctx, node) {
+    const [startTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
+    // special case for <template v-for="..." :key="..." />
+    if (node.props.length) {
+        yield `__VLS_asFunctionalElement(__VLS_intrinsics.template)(`;
+        const token = yield* (0, boundary_1.startBoundary)('template', startTagOffset, codeFeatures_1.codeFeatures.verification);
+        yield `{${utils_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps);
+        yield `}`;
+        yield (0, boundary_1.endBoundary)(token, startTagOffset + node.tag.length);
+        yield `)${utils_1.endOfLine}`;
+    }
+    for (const child of node.children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
+    }
+}
 function* generateStyleScopedClassReferences({ template, typescript: ts }, node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
@@ -354,9 +376,9 @@ function* forEachClassName(content) {
         offset += className.length + 1;
     }
 }
-function* generateFailedExpressions(options, ctx, failGeneratedExpressions) {
-    for (const failedExp of failGeneratedExpressions) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, failedExp.node.loc.source, failedExp.node.loc.start.offset, failedExp.prefix, failedExp.suffix);
+function* generateFailedExpressions(options, ctx, failedPropExps) {
+    for (const { node, prefix, suffix } of failedPropExps) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, node.loc.source, node.loc.start.offset, prefix, suffix);
         yield utils_1.endOfLine;
     }
 }

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

@@ -2,10 +2,10 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export interface FailGeneratedExpression {
+export interface FailedPropExpressions {
     node: CompilerDOM.SimpleExpressionNode;
     prefix: string;
     suffix: string;
 }
-export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, failGeneratedExpressions?: FailGeneratedExpression[]): Generator<Code>;
+export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], checkUnknownProps: boolean, failedPropExps?: FailedPropExpressions[]): Generator<Code>;
 export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -50,7 +50,7 @@ const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-function* generateElementProps(options, ctx, node, props, strictPropsCheck, failGeneratedExpressions) {
+function* generateElementProps(options, ctx, node, props, checkUnknownProps, failedPropExps) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -74,12 +74,12 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                failGeneratedExpressions?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
-                failGeneratedExpressions?.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) {
-                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
         }
     }
@@ -100,7 +100,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, picomatch_1.isMatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                    failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
                 }
                 continue;
             }
@@ -109,8 +109,8 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
                 propName = propName.slice(1);
             }
             const shouldSpread = propName === 'style' || propName === 'class';
-            const shouldCamelize = isComponent && getShouldCamelize(options, prop, propName);
-            const features = getPropsCodeFeatures(strictPropsCheck);
+            const shouldCamelize = getShouldCamelize(options, node, prop, propName);
+            const features = getPropsCodeFeatures(checkUnknownProps);
             if (shouldSpread) {
                 yield `...{ `;
             }
@@ -148,8 +148,8 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
-            const shouldCamelize = isComponent && getShouldCamelize(options, prop, prop.name);
-            const features = getPropsCodeFeatures(strictPropsCheck);
+            const shouldCamelize = getShouldCamelize(options, node, prop, prop.name);
+            const features = getPropsCodeFeatures(checkUnknownProps);
             if (shouldSpread) {
                 yield `...{ `;
             }
@@ -184,7 +184,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, fail
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             if (prop.exp.loc.source === '$attrs') {
-                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
             else {
                 const token = yield* (0, boundary_1.startBoundary)('template', prop.exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
@@ -234,19 +234,20 @@ function* generateAttrValue(node, features) {
     yield* (0, unicode_1.generateUnicode)(content, offset, features);
     yield quote;
 }
-function getShouldCamelize(options, prop, propName) {
-    return (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
-        || !prop.arg
-        || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
+function getShouldCamelize(options, node, prop, propName) {
+    return (node.tagType === CompilerDOM.ElementTypes.COMPONENT
+        || node.tagType === CompilerDOM.ElementTypes.SLOT) && (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
+        || 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));
 }
-function getPropsCodeFeatures(strictPropsCheck) {
+function getPropsCodeFeatures(checkUnknownProps) {
     return {
         ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
-        ...strictPropsCheck
+        ...checkUnknownProps
             ? codeFeatures_1.codeFeatures.verification
             : codeFeatures_1.codeFeatures.doNotReportTs2353AndTs2561,
+        __propsCompletion: true,
     };
 }
 function getModelPropName(node, vueCompilerOptions) {

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

@@ -1,9 +1,9 @@
 import type * as ts from 'typescript';
-import type { Code, Sfc, VueCompilerOptions } from '../../types';
+import type { Code, IRTemplate, VueCompilerOptions } from '../../types';
 export interface TemplateCodegenOptions {
     typescript: typeof ts;
     vueCompilerOptions: VueCompilerOptions;
-    template: NonNullable<Sfc['template']>;
+    template: IRTemplate;
     setupRefs: Set<string>;
     setupConsts: Set<string>;
     hasDefineSlots?: boolean;

package/lib/codegen/template/index.js

@@ -47,7 +47,7 @@ function* generateWorker(options, ctx) {
     }
     yield* ctx.generateHoistVariables();
     yield* generateSlotsType(options, ctx);
-    yield* generateInheritedAttrsType(ctx);
+    yield* generateInheritedAttrsType(options, ctx);
     yield* generateTemplateRefsType(options, ctx);
     yield* generateRootElType(ctx);
     if (ctx.dollarVars.size) {
@@ -102,12 +102,15 @@ function* generateSlotsType(options, ctx) {
     }
     yield utils_1.endOfLine;
 }
-function* generateInheritedAttrsType(ctx) {
+function* generateInheritedAttrsType(options, ctx) {
     if (!ctx.inheritedAttrVars.size) {
         return;
     }
     ctx.generatedTypes.add(names_1.names.InheritedAttrs);
-    yield `type ${names_1.names.InheritedAttrs} = Partial<${[...ctx.inheritedAttrVars].map(name => `typeof ${name}`).join(` & `)}>`;
+    const type = [...ctx.inheritedAttrVars].map(name => `typeof ${name}`).join(` & `);
+    yield `type ${names_1.names.InheritedAttrs} = ${options.vueCompilerOptions.checkRequiredFallthroughAttributes
+        ? type
+        : `Partial<${type}>`}`;
     yield utils_1.endOfLine;
 }
 function* generateTemplateRefsType(options, ctx) {

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

@@ -1,6 +1,6 @@
-import type { Code, SfcBlock, VueCodeInformation } from '../../types';
+import type { Code, IRBlock, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 export declare function generateInterpolation({ typescript, setupRefs }: {
     typescript: typeof import('typescript');
     setupRefs: Set<string>;
-}, ctx: TemplateCodegenContext, block: SfcBlock, data: VueCodeInformation, code: string, start: number, prefix?: string, suffix?: string): Generator<Code>;
+}, ctx: TemplateCodegenContext, block: IRBlock, data: VueCodeInformation, code: string, start: number, prefix?: string, suffix?: string): Generator<Code>;

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

@@ -1,3 +1,3 @@
-import type { Code, SfcBlock } from '../../types';
-export declare const references: WeakMap<SfcBlock, [version: string, [className: string, offset: number][]]>;
-export declare function generateStyleScopedClassReference(block: SfcBlock, className: string, offset: number, fullStart?: number): Generator<Code>;
+import type { Code, IRBlock } from '../../types';
+export declare const references: WeakMap<IRBlock, [version: string, [className: string, offset: number][]]>;
+export declare function generateStyleScopedClassReference(block: IRBlock, className: string, offset: number, fullStart?: number): Generator<Code>;

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

@@ -2,5 +2,5 @@ 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 generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, enterNode?: boolean): Generator<Code>;
+export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, enterNode?: boolean, treatTemplateAsFragment?: boolean): Generator<Code>;
 export declare function parseInterpolationNode(node: CompilerDOM.InterpolationNode, template: string): readonly [string, number];