feat: add vueCompilerOptions.strictTemplates

close #1418
vuejs · Jul 10, 2022 · f356cab · f356cab
1 parent 65838da
commit f356cab
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 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": 2.7,
+					"default": 3,
 					"anyOf": [
 						{
 							"enum": [
@@ -17,9 +17,10 @@
 					],
 					"markdownDescription": "Target version of Vue."
 				},
-				"experimentalCompatMode": {
-					"type": "number",
-					"deprecationMessage": "This property is deprecated at v0.37.0, please use `target` property instead of."
+				"strictTemplates": {
+					"type": "boolean",
+					"default": false,
+					"markdownDescription": "Strict props, component type-checking in templates."
 				},
 				"experimentalRuntimeMode": {
 					"type": "string",
@@ -70,14 +71,6 @@
 					"type": "boolean",
 					"markdownDescription": "https://github.com/johnsoncodehk/volar/issues/1369"
 				},
-				"experimentalSuppressUnknownJsxPropertyErrors": {
-					"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 true)"
-				},
 				"experimentalResolveStyleCssClasses": {
 					"enum": [
 						"scoped",

diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -61,9 +61,9 @@ export function generate(
 	ts: typeof import('typescript/lib/tsserverlibrary'),
 	compilerOptions: {
 		target: number,
+		strictTemplates: boolean,
 		experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app' | undefined,
 		experimentalAllowTypeNarrowingInInlineHandlers: boolean,
-		experimentalSuppressInvalidJsxElementTypeErrors: boolean,
 	},
 	sourceLang: string,
 	templateAst: CompilerDOM.RootNode,
@@ -160,7 +160,7 @@ export function generate(
 
 			tsCodeGen.addText(`declare const ${var_componentVar}: `);
 
-			if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
+			if (!compilerOptions.strictTemplates)
 				tsCodeGen.addText(`__VLS_types.ConvertInvalidJsxElement<`);
 
 			for (const name of names) {
@@ -172,7 +172,7 @@ export function generate(
 
 			tsCodeGen.addText(`unknown`);
 
-			if (compilerOptions.experimentalSuppressInvalidJsxElementTypeErrors)
+			if (!compilerOptions.strictTemplates)
 				tsCodeGen.addText(`>`);
 
 			tsCodeGen.addText(`;\n`);
@@ -895,6 +895,10 @@ export function generate(
 
 				const propName_2 = !isStatic ? propName_1 : hyphenate(propName_1) === propName_1 ? camelize(propName_1) : propName_1;
 
+				if (compilerOptions.strictTemplates) {
+					propName_1 = propName_2;
+				}
+
 				if (forRemainStyleOrClass && propName_2 !== 'style' && propName_2 !== 'class')
 					continue;
 
@@ -1033,7 +1037,11 @@ export function generate(
 			) {
 
 				const propName = hyphenate(prop.name) === prop.name ? camelize(prop.name) : prop.name;
-				const propName2 = prop.name;
+				let propName2 = prop.name;
+
+				if (compilerOptions.strictTemplates) {
+					propName2 = propName;
+				}
 
 				if (forRemainStyleOrClass && propName !== 'style' && propName !== 'class')
 					continue;

diff --git a/packages/vue-typescript/src/lsContext.ts b/packages/vue-typescript/src/lsContext.ts
@@ -307,7 +307,7 @@ export function createLanguageServiceContext(
 		}
 		let tsScript = host.getScriptSnapshot(fileName);
 		if (tsScript) {
-			if ((vueCompilerOptions.experimentalSuppressUnknownJsxPropertyErrors ?? true) && (
+			if (!(vueCompilerOptions.strictTemplates ?? false) && (
 				// for vue 2.6 and vue 3
 				basename === 'runtime-dom.d.ts' ||
 				// for vue 2.7

diff --git a/packages/vue-typescript/src/sourceFile.ts b/packages/vue-typescript/src/sourceFile.ts
@@ -175,9 +175,9 @@ export function createSourceFile(
 			ts,
 			{
 				target: vueCompilerOptions.target ?? 3,
+				strictTemplates: vueCompilerOptions.strictTemplates ?? false,
 				experimentalRuntimeMode: vueCompilerOptions.experimentalRuntimeMode,
 				experimentalAllowTypeNarrowingInInlineHandlers: vueCompilerOptions.experimentalAllowTypeNarrowingInInlineHandlers ?? false,
-				experimentalSuppressInvalidJsxElementTypeErrors: vueCompilerOptions.experimentalSuppressInvalidJsxElementTypeErrors ?? true,
 			},
 			sfc.template?.lang ?? 'html',
 			templateAstCompiled.value.ast,

diff --git a/packages/vue-typescript/src/types.ts b/packages/vue-typescript/src/types.ts
@@ -8,6 +8,9 @@ export type LanguageServiceHost = ts.LanguageServiceHost & {
 
 export interface VueCompilerOptions {
 	target?: 2 | 2.7 | 3;
+	strictTemplates?: boolean;
+
+	// experimental
 	experimentalRuntimeMode?: 'runtime-dom' | 'runtime-uni-app';
 	experimentalImplicitWrapComponentOptionsWithDefineComponent?: boolean | 'onlyJs';
 	experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup?: boolean | 'onlyJs';
@@ -16,7 +19,5 @@ export interface VueCompilerOptions {
 	experimentalDisableTemplateSupport?: boolean;
 	experimentalResolveStyleCssClasses?: 'scoped' | 'always' | 'never';
 	experimentalAllowTypeNarrowingInInlineHandlers?: boolean;
-	experimentalSuppressUnknownJsxPropertyErrors?: boolean;
-	experimentalSuppressInvalidJsxElementTypeErrors?: boolean;
 	experimentalUseScriptLeadingCommentInTemplate?: boolean;
 }