fix: kebab case component type incorrect in vue 2

close #1405
vuejs · Jun 7, 2022 · 1625776 · 1625776
1 parent 51bc658
commit 1625776
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -150,41 +150,50 @@ export function generate(
 			}
 		}
 		else {
+
 			const names = new Set([
 				tagName,
 				camelize(tagName),
 				capitalize(camelize(tagName)),
 			]);
 
-			for (let i = 0; i < tagRanges.length; i++) {
+			tsCodeGen.addText(`declare const ${var_componentVar}: `);
 
-				const tagRange = tagRanges[i];
+			if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
+				tsCodeGen.addText(`__VLS_types.ConvertInvalidJsxElement<`);
 
-				tsCodeGen.addText(`declare const ${var_componentVar + (i === 0 ? '' : '_')}: `);
+			for (const name of names) {
+				tsCodeGen.addText(`\n'${name}' extends keyof typeof __VLS_components ? typeof __VLS_components['${name}'] : `);
+			}
+			for (const name of names) {
+				tsCodeGen.addText(`\n'${name}' extends keyof typeof __VLS_ctx ? typeof __VLS_ctx['${name}'] : `);
+			}
 
-				if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
-					tsCodeGen.addText(`__VLS_types.ConvertInvalidJsxElement<`);
+			tsCodeGen.addText(`unknown`);
 
-				for (const name of names) {
-					tsCodeGen.addText(`\n'${name}' extends keyof typeof __VLS_components ? typeof __VLS_components`);
-					writePropertyAccess2(
-						name,
-						[tagRange],
-						{
-							vueTag: 'template',
-							capabilities: capabilitiesSet.tagReference,
-							normalizeNewName: tagName === name ? undefined : unHyphenatComponentName,
-							applyNewName: keepHyphenateName,
-						},
-					);
-					tsCodeGen.addText(` : `);
-				}
-				tsCodeGen.addText(`unknown`);
+			if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
+				tsCodeGen.addText(`>`);
 
-				if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
-					tsCodeGen.addText(`>`);
+			tsCodeGen.addText(`;\n`);
 
-				tsCodeGen.addText(`;\n`);
+			for (const vlsVar of ['__VLS_components', '__VLS_ctx']) {
+				for (const tagRange of tagRanges) {
+					for (const name of names) {
+						tsCodeGen.addText(vlsVar);
+						writePropertyAccess2(
+							name,
+							[tagRange],
+							{
+								vueTag: 'template',
+								capabilities: capabilitiesSet.tagReference,
+								normalizeNewName: tagName === name ? undefined : unHyphenatComponentName,
+								applyNewName: keepHyphenateName,
+							},
+						);
+						tsCodeGen.addText(';');
+					}
+					tsCodeGen.addText('\n');
+				}
 			}
 		}
 		tsCodeGen.addText(`declare const ${var_emit}: __VLS_types.ExtractEmit2<typeof ${var_componentVar}>;\n`);

diff --git a/packages/vue-typescript/src/plugins/vue-typescript-template.ts b/packages/vue-typescript/src/plugins/vue-typescript-template.ts
@@ -87,7 +87,7 @@ export default function (
 
 				/* Components */
 				tsxCodeGen.addText('/* Components */\n');
-				tsxCodeGen.addText('declare var __VLS_otherComponents: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & typeof __VLS_ctx;\n');
+				tsxCodeGen.addText('declare var __VLS_otherComponents: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & __VLS_types.PickComponents<typeof __VLS_ctx>;\n');
 				tsxCodeGen.addText(`declare var __VLS_selfComponent: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component & (new () => { ${getSlotsPropertyName(compilerOptions.target ?? 3)}: typeof __VLS_slots })>;\n`);
 				tsxCodeGen.addText('declare var __VLS_components: typeof __VLS_otherComponents & Omit<typeof __VLS_selfComponent, keyof typeof __VLS_otherComponents>;\n');
 

diff --git a/packages/vue-typescript/src/utils/localTypes.ts b/packages/vue-typescript/src/utils/localTypes.ts
@@ -50,10 +50,6 @@ export type ExtractComponentSlots<T> =
 
 export type FillingEventArg_ParametersLength<E extends (...args: any) => any> = IsAny<Parameters<E>> extends true ? -1 : Parameters<E>['length'];
 export type FillingEventArg<E> = E extends (...args: any) => any ? FillingEventArg_ParametersLength<E> extends 0 ? ($event?: undefined) => ReturnType<E> : E : E;
-export type ConvertInvalidJsxElement<T> =
-	T extends (...args: any) => JSX.Element ? T
-	: T extends new (...args: any) => JSX.ElementClass ? T
-	: any;
 
 export type ExtractEmit2<T> =
 	T extends FunctionalComponent<infer _, infer E> ? SetupContext<E>['emit']
@@ -99,6 +95,14 @@ export type FirstFunction<F0 = void, F1 = void, F2 = void, F3 = void, F4 = void>
 	unknown;
 export type GlobalAttrs = JSX.IntrinsicElements['div'];
 export type SelfComponent<N, C> = string extends N ? {} : N extends string ? { [P in N]: C } : {};
+export type PickComponents<T> = ComponentKeys<T> extends keyof T ? Pick<T, ComponentKeys<T>> : T;
+export type ConvertInvalidJsxElement<T> = IsComponent<T> extends true ? T : any;
+
+type IsComponent<T> =
+	T extends (...args: any) => JSX.Element ? true
+	: T extends new (...args: any) => JSX.ElementClass ? true
+	: false;
+type ComponentKeys<T> = keyof { [K in keyof T as IsComponent<T[K]> extends true ? K : never]: any };
 `;
 }