unknown attributes doesn't get error even if strictTemplate: true is set (regression from 1.4.0)

[sapphi-red]

<template>
  <a unknown-attr="foo">bar</a>
</template>

unknown-attr attribute doesn't exist in <a> so I expect an error to happen. The error happened with vue-tsc pre-1.4.0.

Reproduction

Reproduction: https://github.com/sapphi-red-repros/vue-language-tools-strict-template-html-attribute-repro (stackblitz)

npm run tsc doesn't throw an error. (actual)
npm run tsc13 throws an error. (expected)

My thoughts

I dug down this a bit and tried to create a PR but failed. I'll describe my thoughts here.

The virtual file of the file above is like below.

let __VLS_templateComponents!: {} & __VLS_WithComponent<'a', typeof __VLS_components, "A", "a", "a">;
const __VLS_0 = __VLS_templateComponents['a'];
const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({...{ }, unknownAttr: ("foo"), }));
const __VLS_2 = __VLS_1({ ...{ }, unknownAttr: ("foo"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));

The type helpers are:

type __VLS_IntrinsicElements = __VLS_PickNotAny<import('vue/jsx-runtime').JSX.IntrinsicElements, __VLS_PickNotAny<JSX.IntrinsicElements, Record<string, any>>>;

type __VLS_WithComponent<N0 extends string, Components, N1 extends string, N2 extends string, N3 extends string> =
	__VLS_IsAny<__VLS_IntrinsicElements[N0]> extends true ? (
		N1 extends keyof Components ? N1 extends N0 ? Pick<Components, N0> : { [K in N0]: Components[N1] } :
		N2 extends keyof Components ? N2 extends N0 ? Pick<Components, N0> : { [K in N0]: Components[N2] } :
		N3 extends keyof Components ? N3 extends N0 ? Pick<Components, N0> : { [K in N0]: Components[N3] } :
		${vueCompilerOptions.strictTemplates ? '{}' : '{ [K in N0]: any }'}
	) : Pick<__VLS_IntrinsicElements, N0>;

// ---

interface IntrinsicElements extends NativeElements {
  [name: string]: any
}
type NativeElements = {
    [K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K] & ReservedProps;
};

So this is something like:

const __VLS_0: { href: string };
const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({...{ }, unknownAttr: ("foo"), }));
const __VLS_2 = __VLS_1({ ...{ }, unknownAttr: ("foo"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));

I guess changing __VLS_WithComponent to use { [K in keyof __VLS_IntrinsicElements]: { new (attrs: __VLS_IntrinsicElements[K]): unknown /* I don't know what this part should be */ } } instead of __VLS_IntrinsicElements would work.
I don't know what __VLS_asFunctionalComponent is used for.

Also I tried to create a test but I noticed that #2366 is required for that. But that issue would take much time to tackle for me.

[johnsoncodehk]

Thanks for the report, fixed by f255d1c.

__VLS_asFunctionalComponent was used for support generic without jsxTemplates, you can see the TS playground link from #2677.

#2366 is currently avoided on purpose, it's not technically correct behavior, if we support it it might make it the norm in the future, I'll look for a way to add a test for this.

[sapphi-red]

Thank you for the quick fix and the explanation! I see. That’s smart.
I also noticed that you implemented #3215. Awesome! Thanks for that too.