feat(component-meta): add typing resolution for defineModel modifiers (…

…#4175)
vuejs · Mar 31, 2024 · df80d70 · df80d70
1 parent 139633f
commit df80d70
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/packages/component-meta/tests/index.spec.ts b/packages/component-meta/tests/index.spec.ts
@@ -31,10 +31,17 @@ const worker = (checker: ComponentMetaChecker, withTsconfig: boolean) => describ
 		const bar = meta.props.find(prop => prop.name === 'bar');
 		const onUpdateBar = meta.events.find(event => event.name === 'update:bar')
 
+		const qux = meta.props.find(prop => prop.name === 'qux');
+		const quxModifiers = meta.props.find(prop => prop.name === 'quxModifiers');
+		const onUpdateQux = meta.events.find(event => event.name === 'update:qux')
+
 		expect(foo).toBeDefined();
 		expect(bar).toBeDefined();
+		expect(qux).toBeDefined();
+		expect(quxModifiers).toBeDefined();
 		expect(onUpdateFoo).toBeDefined();
 		expect(onUpdateBar).toBeDefined();
+		expect(onUpdateQux).toBeDefined();
 	})
 
 	test('reference-type-props', () => {

diff --git a/packages/language-core/lib/generators/script.ts b/packages/language-core/lib/generators/script.ts
@@ -626,6 +626,7 @@ export function* generate(
 					const start = getGeneratedLength();
 					definePropMirrors.set(propName, start);
 					yield _(propName);
+
 				}
 				else {
 					yield _(propName);
@@ -646,6 +647,22 @@ export function* generate(
 				else {
 					yield _(`import('${vueCompilerOptions.lib}').PropType<${type}>,\n`);
 				}
+
+				if (defineProp.modifierType) {
+					let propModifierName = 'modelModifiers';
+
+					if (defineProp.name) {
+						propModifierName = `${scriptSetup.content.substring(defineProp.name.start + 1, defineProp.name.end - 1)}Modifiers`;
+					}
+
+					const modifierType = scriptSetup.content.substring(defineProp.modifierType.start, defineProp.modifierType.end);
+
+					const start = getGeneratedLength();
+					definePropMirrors.set(propModifierName, start);
+					yield _(propModifierName);
+					yield _(`: `);
+					yield _(`import('${vueCompilerOptions.lib}').PropType<Record<${modifierType}, true>>,\n`);
+				}
 			}
 			yield _(`};\n`);
 		}

diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -40,6 +40,7 @@ export function parseScriptSetupRanges(
 		name: TextRange | undefined;
 		nameIsString: boolean;
 		type: TextRange | undefined;
+		modifierType?: TextRange | undefined;
 		defaultValue: TextRange | undefined;
 		required: boolean;
 		isModel?: boolean;
@@ -132,6 +133,7 @@ export function parseScriptSetupRanges(
 					name,
 					nameIsString: true,
 					type: node.typeArguments?.length ? _getStartEnd(node.typeArguments[0]) : undefined,
+					modifierType: node.typeArguments && node.typeArguments?.length >= 2 ? _getStartEnd(node.typeArguments[1]) : undefined,
 					defaultValue: undefined,
 					required,
 					isModel: true,

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -317,15 +317,21 @@ exports[`vue-tsc-dts > Input: reference-type-model/component.vue, Output: refere
 "declare const _default: import("vue").DefineComponent<{
     foo: import("vue").PropType<number>;
     bar: import("vue").PropType<string[]>;
+    qux: import("vue").PropType<string>;
+    quxModifiers: import("vue").PropType<Record<"trim" | "lazy", true>>;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:foo": (foo: number) => void;
     "update:bar": (bar: string[]) => void;
+    "update:qux": (qux: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     foo: import("vue").PropType<number>;
     bar: import("vue").PropType<string[]>;
+    qux: import("vue").PropType<string>;
+    quxModifiers: import("vue").PropType<Record<"trim" | "lazy", true>>;
 }>> & {
     "onUpdate:foo"?: (foo: number) => any;
     "onUpdate:bar"?: (bar: string[]) => any;
+    "onUpdate:qux"?: (qux: string) => any;
 }, {}, {}>;
 export default _default;
 "

diff --git a/test-workspace/component-meta/reference-type-model/component.vue b/test-workspace/component-meta/reference-type-model/component.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
 const bar = defineModel<number>("foo")
 const baz = defineModel<string[]>("bar")
+const [qux, modifiers] = defineModel<string, 'lazy' | 'trim'>("qux")
 </script>