feat: add option to ignore jsx element type errors

close #1404
vuejs · Jun 6, 2022 · bf7b023 · bf7b023
1 parent ae7ebe9
commit bf7b023
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 18 deletions.
diff --git a/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json b/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json
@@ -5,7 +5,7 @@
 			"properties": {
 				"target": {
 					"type": "number",
-					"default": 3,
+					"default": 2.7,
 					"anyOf": [
 						{
 							"enum": [
@@ -70,6 +70,10 @@
 					"type": "boolean",
 					"markdownDescription": "Suppress unknown property errors in JSX and template. (Default true)"
 				},
+				"experimentalSuppressInvalidJsxElementTypeErrors": {
+					"type": "boolean",
+					"markdownDescription": "Suppress invalid JSX element type errors in template. (Default false)"
+				},
 				"experimentalResolveStyleCssClasses": {
 					"enum": [
 						"scoped",

diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -58,11 +58,14 @@ export function isIntrinsicElement(runtimeMode: 'runtime-dom' | 'runtime-uni-app
 
 export function generate(
 	ts: typeof import('typescript/lib/tsserverlibrary'),
+	compilerOptions: {
+		target: number,
+		experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app' | undefined,
+		experimentalAllowTypeNarrowingInInlineHandlers: boolean,
+		experimentalSuppressInvalidJsxElementTypeErrors: boolean,
+	},
 	sourceLang: string,
 	templateAst: CompilerDOM.RootNode,
-	vueVersion: number,
-	experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app' | undefined,
-	allowTypeNarrowingInEventExpressions: boolean,
 	hasScriptSetup: boolean,
 	cssScopedClasses: string[] = [],
 	htmlToTemplate: (htmlRange: { start: number, end: number; }) => { start: number, end: number; } | undefined,
@@ -146,18 +149,20 @@ export function generate(
 		}
 		else {
 			tsCodeGen.addText(`declare const ${var_correctTagName}: __VLS_types.GetComponentName<typeof __VLS_components, '${tagName}'>;\n`);
-			tsCodeGen.addText(`declare const ${var_rawComponent}: __VLS_types.GetProperty<typeof __VLS_components, typeof ${var_correctTagName}, unknown>;\n`);
+			tsCodeGen.addText(`declare const ${var_rawComponent}: ${compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors ? '__VLS_types.ConvertInvalidJsxElement<' : ''
+				}__VLS_types.GetProperty<typeof __VLS_components, typeof ${var_correctTagName}, unknown>${compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors ? '>' : ''
+				};\n`);
 		}
 		tsCodeGen.addText(`declare const ${var_emit}: __VLS_types.ExtractEmit2<typeof ${var_rawComponent}>;\n`);
 
 		const name1 = tagName; // hello-world
-		const name2 = isIntrinsicElement(experimentalRuntimeMode, tagName) ? tagName : camelize(tagName); // helloWorld
-		const name3 = isIntrinsicElement(experimentalRuntimeMode, tagName) ? tagName : capitalize(name2); // HelloWorld
+		const name2 = isIntrinsicElement(compilerOptions.experimentalRuntimeMode, tagName) ? tagName : camelize(tagName); // helloWorld
+		const name3 = isIntrinsicElement(compilerOptions.experimentalRuntimeMode, tagName) ? tagName : capitalize(name2); // HelloWorld
 		const componentNames = new Set([name1, name2, name3]);
 
 		if (!isNamespacedTag) {
 			// split tagRanges to fix end tag definition original select range mapping to start tag
-			if (isIntrinsicElement(experimentalRuntimeMode, tagName)) {
+			if (isIntrinsicElement(compilerOptions.experimentalRuntimeMode, tagName)) {
 				for (const tagRange of tagRanges) {
 					tsCodeGen.addText(`(<`);
 					writeObjectProperty2(
@@ -222,7 +227,7 @@ export function generate(
 		tsCodeGen.addText('/* Completion: Props */\n');
 		for (const name of componentNames) {
 			tsCodeGen.addText('// @ts-ignore\n');
-			tsCodeGen.addText(`(<${isIntrinsicElement(experimentalRuntimeMode, tagName) ? tagName : var_rawComponent} ${searchTexts.getPropsCompletion(name)}/>);\n`);
+			tsCodeGen.addText(`(<${isIntrinsicElement(compilerOptions.experimentalRuntimeMode, tagName) ? tagName : var_rawComponent} ${searchTexts.getPropsCompletion(name)}/>);\n`);
 		}
 
 		tagResolves[tagName] = {
@@ -364,7 +369,7 @@ export function generate(
 						formatBrackets.round,
 					);
 
-					if (allowTypeNarrowingInEventExpressions) {
+					if (compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers) {
 						blockConditions.push(branch.condition.content);
 						addedBlockCondition = true;
 					}
@@ -467,7 +472,7 @@ export function generate(
 		tsCodeGen.addText(`{\n`);
 		{
 
-			const tagText = isIntrinsicElement(experimentalRuntimeMode, node.tag) ? node.tag : tagResolves[node.tag].component;
+			const tagText = isIntrinsicElement(compilerOptions.experimentalRuntimeMode, node.tag) ? node.tag : tagResolves[node.tag].component;
 			const fullTagStart = tsCodeGen.getText().length;
 
 			tsCodeGen.addText(`<`);
@@ -798,7 +803,7 @@ export function generate(
 						? prop.arg.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
 							? prop.arg.content
 							: prop.arg.loc.source
-						: getModelValuePropName(node, vueVersion);
+						: getModelValuePropName(node, compilerOptions.target);
 
 				if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
 					propName_1 = propName_1.substring(1);

diff --git a/packages/vue-typescript/src/types.ts b/packages/vue-typescript/src/types.ts
@@ -21,5 +21,6 @@ export interface VueCompilerOptions {
 	experimentalResolveStyleCssClasses?: 'scoped' | 'always' | 'never';
 	experimentalAllowTypeNarrowingInInlineHandlers?: boolean;
 	experimentalSuppressUnknownJsxPropertyErrors?: boolean;
+	experimentalSuppressInvalidJsxElementTypeErrors?: boolean;
 	experimentalUseScriptLeadingCommentInTemplate?: boolean;
 }
diff --git a/packages/vue-typescript/src/utils/localTypes.ts b/packages/vue-typescript/src/utils/localTypes.ts
@@ -64,9 +64,10 @@ type GetComponentName_CapitalCase<T, K, O> = K extends keyof T ? K : O;
 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 GetProperty<T, K, N = any> = K extends keyof T ? T[K] : N;
-export type ComponentContext<T> = T extends new (...args: any) => any ? InstanceType<T> : T extends (...args: any) => any ? ReturnType<T> : T;
-export type OptionsProps<T> = T extends { props: infer R } ? R : {};
-export type SelectComponent<T1, T2> = T1 extends (new (...args: any) => any) ? T1 : T1 extends ((...args: any) => any) ? T1 : T2;
+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']

diff --git a/packages/vue-typescript/src/vueFile.ts b/packages/vue-typescript/src/vueFile.ts
@@ -173,11 +173,14 @@ export function createVueFile(
 
 		return templateGen.generate(
 			ts,
+			{
+				target: compilerOptions.target ?? 3,
+				experimentalRuntimeMode: compilerOptions.experimentalRuntimeMode,
+				experimentalAllowTypeNarrowingInInlineHandlers: compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers ?? false,
+				experimentalSuppressInvalidJsxElementTypeErrors: compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors ?? false,
+			},
 			sfc.template?.lang ?? 'html',
 			templateAstCompiled.value.ast,
-			compilerOptions.target ?? 3,
-			compilerOptions.experimentalRuntimeMode,
-			!!compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers,
 			!!sfc.scriptSetup,
 			Object.values(cssScopedClasses.value).map(map => Object.keys(map)).flat(),
 			computedHtmlTemplate.value.mapping,