fix(complex-types): disallow printing reserved properties

Author: so1ve

packages/complex-types/src/core/printer.ts

@@ -16,11 +16,14 @@ export class Printer {
 	private printUnionOrIntersection(
 		type: ts.UnionOrIntersectionType,
 		separator: string,
+		isPropertyBlacklisted: (prop: string) => boolean,
 		inner: boolean,
 	): string {
 		return [
 			...new Set(
-				type.types.map((t) => this.printType(t, inner)).filter(Boolean),
+				type.types
+					.map((t) => this.printType(t, isPropertyBlacklisted, inner))
+					.filter(Boolean),
 			),
 		].join(separator);
 	}
@@ -29,13 +32,17 @@ export class Printer {
 		return !!(symbol.flags & ts.SymbolFlags.Optional);
 	}
 
-	private printConditionType(type: ts.ConditionalType, inner: boolean): string {
+	private printConditionType(
+		type: ts.ConditionalType,
+		isPropertyBlacklisted: (prop: string) => boolean,
+		inner: boolean,
+	): string {
 		const decl = type.root.node;
 		const { trueType, falseType } = decl;
 		const trueTypeNode = this.checker.getTypeAtLocation(trueType);
 		const falseTypeNode = this.checker.getTypeAtLocation(falseType);
 
-		return `${this.printType(trueTypeNode, inner)} | ${this.printType(falseTypeNode, inner)}`;
+		return `${this.printType(trueTypeNode, isPropertyBlacklisted, inner)} | ${this.printType(falseTypeNode, isPropertyBlacklisted, inner)}`;
 	}
 
 	private printPrimitiveType(type: ts.Type): string {
@@ -58,11 +65,25 @@ export class Printer {
 		return "";
 	}
 
-	private printType(type: ts.Type, inner = false): string {
+	private printType(
+		type: ts.Type,
+		isPropertyBlacklisted: (prop: string) => boolean,
+		inner = false,
+	): string {
 		if (type.isUnion()) {
-			return this.printUnionOrIntersection(type, " | ", inner);
+			return this.printUnionOrIntersection(
+				type,
+				" | ",
+				isPropertyBlacklisted,
+				inner,
+			);
 		} else if (type.isIntersection()) {
-			return this.printUnionOrIntersection(type, " & ", inner);
+			return this.printUnionOrIntersection(
+				type,
+				" & ",
+				isPropertyBlacklisted,
+				inner,
+			);
 		}
 		if (this.checker.isArrayType(type)) {
 			return "Array";
@@ -86,8 +107,13 @@ export class Printer {
 			> = {};
 			for (const prop of properties) {
 				const propType = this.checker.getTypeOfSymbol(prop);
-				props[prop.getName()] = {
-					value: this.printType(propType, true),
+				const name = prop.getName();
+				if (isPropertyBlacklisted(name)) {
+					continue;
+				}
+
+				props[name] = {
+					value: this.printType(propType, isPropertyBlacklisted, true),
 					isOptional: this.isSymbolOptional(prop),
 				};
 			}
@@ -113,7 +139,11 @@ export class Printer {
 		} else if (type.flags & ts.TypeFlags.Undefined) {
 			return "";
 		} else if (type.flags & ts.TypeFlags.Conditional) {
-			return this.printConditionType(type as ts.ConditionalType, inner);
+			return this.printConditionType(
+				type as ts.ConditionalType,
+				isPropertyBlacklisted,
+				inner,
+			);
 		} else if (type.isTypeParameter()) {
 			const symbol = type.getSymbol();
 			const decl = symbol?.declarations?.[0];
@@ -126,16 +156,19 @@ export class Printer {
 			}
 			const refType = this.checker.getTypeAtLocation(ref);
 
-			return this.printType(refType, inner);
+			return this.printType(refType, isPropertyBlacklisted, inner);
 		}
 
 		return this.typeToString(type);
 	}
 
-	public printPropsTypeArg(node: ts.Node): string {
+	public printPropsTypeArg(
+		node: ts.Node,
+		isPropertyBlacklisted: (prop: string) => boolean,
+	): string {
 		const type = this.checker.getTypeAtLocation(node);
 
-		return this.printType(type);
+		return this.printType(type, isPropertyBlacklisted);
 	}
 
 	private printEventsByCallSignatures(

packages/complex-types/src/core/transformers/defineProps.ts

@@ -1,3 +1,4 @@
+import { isReservedProp } from "@vue/shared";
 import { getLanguage } from "@vue.ts/language";
 import { normalizePath } from "@vue.ts/shared";
 
@@ -23,7 +24,10 @@ export const transformDefineProps: Transformer = (printer, s, id) => {
 		return;
 	}
 
-	const printedType = printer.printPropsTypeArg(virtualFileDefinePropsTypeNode);
+	const printedType = printer.printPropsTypeArg(
+		virtualFileDefinePropsTypeNode,
+		isReservedProp,
+	);
 	const offset = scriptSetupBlock.startTagEnd;
 
 	s.overwrite(

packages/complex-types/test/__fixtures__/defineProps/basic.vue

@@ -30,6 +30,8 @@ defineProps<
 		'quotes"': string;
 		enum: SomeEnum;
 		anyQuestion?: any;
+		// Reserved Property
+		onVnodeUpdated: 1;
 	} & SomeInterface & {
 			[MappedString in "1-1" | "1-2"]: `${MappedString}MappedType`;
 		} & {

packages/complex-types/test/__snapshots__/fixtures-compiled.test.ts.snap

@@ -153,6 +153,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
 			type: [String, Number],
 			required: true
 		},
+		anyQuestion: { required: false },
 		emptyInterface: {
 			type: Object,
 			required: true
@@ -263,7 +264,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
-		class: { required: true },
+		class: { required: false },
 		style: {
 			type: [String, Boolean],
 			skipCheck: true,
@@ -341,7 +342,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
-		inlist: { required: true },
+		inlist: { required: false },
 		prefix: {
 			type: String,
 			required: false

packages/complex-types/test/__snapshots__/fixtures.test.ts.snap

@@ -63,6 +63,7 @@ defineProps<
 "symbol": symbol,
 "quotes\\"": string,
 "enum": string | number,
+"anyQuestion"?: any,
 } & {
 "emptyInterface": object,
 "conditionalNumber": number,
@@ -99,7 +100,7 @@ defineProps<{
 "type"?: string,
 "value"?: string | number | Array,
 "innerHTML"?: string,
-"class": any,
+"class"?: any,
 "style"?: null | string | boolean | object | Array,
 "accesskey"?: string,
 "contenteditable"?: boolean | string,
@@ -119,7 +120,7 @@ defineProps<{
 "role"?: string,
 "about"?: string,
 "datatype"?: string,
-"inlist": any,
+"inlist"?: any,
 "prefix"?: string,
 "property"?: string,
 "resource"?: string,