vuejs · KazariEX · Feb 24, 2025 · Feb 24, 2025 · Feb 24, 2025
diff --git a/packages/component-meta/lib/base.ts b/packages/component-meta/lib/base.ts
@@ -416,7 +416,7 @@ ${commandLine.vueOptions.target < 3 ? vue2TypeHelpersCode : typeHelpersCode}
 				const type = typeChecker.getTypeOfSymbolAtLocation($exposed, symbolNode);
 				const properties = type.getProperties().filter(prop =>
 					// only exposed props will not have a valueDeclaration
-					!(prop as any).valueDeclaration
+					!prop.valueDeclaration
 				);
 
 				return properties.map(prop => {
@@ -728,10 +728,10 @@ function readVueComponentDefaultProps(
 
 	function scriptSetupWorker() {
 
-		const ast = sfc.scriptSetup?.ast;
-		if (!ast) {
+		if (!sfc.scriptSetup) {
 			return;
 		}
+		const { ast } = sfc.scriptSetup;
 
 		const codegen = vue.tsCodegen.get(sfc);
 		const scriptSetupRanges = codegen?.getScriptSetupRanges();
@@ -762,10 +762,22 @@ function readVueComponentDefaultProps(
 			}
 		}
 		else if (scriptSetupRanges?.defineProps?.destructured) {
-			for (const [prop, initializer] of scriptSetupRanges.defineProps.destructured) {
+			for (const [name, initializer] of scriptSetupRanges.defineProps.destructured) {
 				if (initializer) {
 					const expText = printer?.printNode(ts.EmitHint.Expression, initializer, ast) ?? initializer.getText(ast);
-					result[prop] = { default: expText };
+					result[name] = {
+						default: expText
+					};
+				}
+			}
+		}
+
+		if (scriptSetupRanges?.defineProp) {
+			for (const defineProp of scriptSetupRanges.defineProp) {
+				const obj = defineProp.argNode ? findObjectLiteralExpression(defineProp.argNode) : undefined;
+				if (obj) {
+					const name = defineProp.name ? sfc.scriptSetup.content.slice(defineProp.name.start, defineProp.name.end).slice(1, -1) : 'modelValue';
+					result[name] = resolveModelOption(ast, obj, printer, ts);
 				}
 			}
 		}
@@ -786,10 +798,10 @@ function readVueComponentDefaultProps(
 
 	function scriptWorker() {
 
-		const ast = sfc.script?.ast;
-		if (!ast) {
+		if (!sfc.script) {
 			return;
 		}
+		const { ast } = sfc.script;
 
 		const scriptResult = readTsComponentDefaultProps(ast, 'default', printer, ts);
 		for (const [key, value] of Object.entries(scriptResult)) {
@@ -899,7 +911,7 @@ function resolvePropsOption(
 					result[name].required = exp === 'true';
 				}
 				if (defaultProp) {
-					const expNode = resolveDefaultOptionExpression((defaultProp as any).initializer, ts);
+					const expNode = resolveDefaultOptionExpression(defaultProp.initializer, ts);
 					const expText = printer?.printNode(ts.EmitHint.Expression, expNode, ast) ?? expNode.getText(ast);
 					result[name].default = expText;
 				}
@@ -910,6 +922,28 @@ function resolvePropsOption(
 	return result;
 }
 
+function resolveModelOption(
+	ast: ts.SourceFile,
+	options: ts.ObjectLiteralExpression,
+	printer: ts.Printer | undefined,
+	ts: typeof import('typescript')
+) {
+	const result: { default?: string } = {};
+
+	for (const prop of options.properties) {
+		if (ts.isPropertyAssignment(prop)) {
+			const name = prop.name.getText(ast);
+			if (name === 'default') {
+				const expNode = resolveDefaultOptionExpression(prop.initializer, ts);
+				const expText = printer?.printNode(ts.EmitHint.Expression, expNode, ast) ?? expNode.getText(ast);
+				result.default = expText;
+			}
+		}
+	}
+
+	return result;
+}
+
 function resolveDefaultOptionExpression(
 	_default: ts.Expression,
 	ts: typeof import('typescript')

diff --git a/packages/component-meta/tests/index.spec.ts b/packages/component-meta/tests/index.spec.ts
@@ -25,23 +25,55 @@ const worker = (checker: ComponentMetaChecker, withTsconfig: boolean) => describ
 
 		// expect(meta.type).toEqual(TypeMeta.Class);
 
+		const modelValue = meta.props.find(prop => prop.name === 'modelValue');
+		const onUpdateModelValue = meta.events.find(event => event.name === 'update:modelValue');
+
 		const foo = meta.props.find(prop => prop.name === 'foo');
 		const onUpdateFoo = meta.events.find(event => event.name === 'update:foo');
 
 		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');
+		const baz = meta.props.find(prop => prop.name === 'baz');
+		const bazModifiers = meta.props.find(prop => prop.name === 'bazModifiers');
+		const onUpdateBaz = meta.events.find(event => event.name === 'update:baz');
+
+		expect(modelValue).toBeDefined();
+		expect(modelValue?.default).toBeUndefined();
+		expect(modelValue?.required).toBeFalsy();
+		expect(modelValue?.type).toEqual('number | undefined');
+		expect(modelValue?.schema).toEqual({
+			kind: 'enum',
+			type: 'number | undefined',
+			schema: ['undefined', 'number'],
+		});
+		expect(onUpdateModelValue).toBeDefined();
 
 		expect(foo).toBeDefined();
-		expect(bar).toBeDefined();
-		expect(qux).toBeDefined();
-		expect(quxModifiers).toBeDefined();
+		expect(foo?.default).toBeUndefined();
+		expect(foo?.required).toBeTruthy();
+		expect(foo?.type).toEqual('string[]');
+		expect(foo?.schema).toEqual({
+			kind: 'array',
+			type: 'string[]',
+			schema: ['string'],
+		});
 		expect(onUpdateFoo).toBeDefined();
+
+		expect(bar).toBeDefined();
+		expect(bar?.default).toBe('false');
+		expect(bar?.required).toBeFalsy();
+		expect(bar?.type).toEqual('boolean | undefined');
+		expect(bar?.schema).toEqual({
+			kind: 'enum',
+			type: 'boolean | undefined',
+			schema: ['undefined', 'false', 'true'],
+		});
 		expect(onUpdateBar).toBeDefined();
-		expect(onUpdateQux).toBeDefined();
+
+		expect(baz).toBeDefined();
+		expect(bazModifiers).toBeDefined();
+		expect(onUpdateBaz).toBeDefined();
 	});
 
 	test('reference-type-props', () => {

diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -20,6 +20,8 @@ type DefineProp = {
 	defaultValue?: TextRange;
 	required?: boolean;
 	isModel?: boolean;
+	// used by component-meta
+	argNode?: ts.Expression;
 };
 
 type DefineProps = CallExpressionRange & {
@@ -153,7 +155,7 @@ export function parseScriptSetupRanges(
 			if (vueCompilerOptions.macros.defineModel.includes(callText)) {
 				let localName: TextRange | undefined;
 				let propName: TextRange | undefined;
-				let options: ts.Node | undefined;
+				let options: ts.Expression | undefined;
 
 				if (
 					ts.isVariableDeclaration(parent) &&
@@ -204,12 +206,13 @@ export function parseScriptSetupRanges(
 					defaultValue,
 					required,
 					isModel: true,
+					argNode: options,
 				});
 			}
 			else if (callText === 'defineProp') {
 				let localName: TextRange | undefined;
 				let propName: TextRange | undefined;
-				let options: ts.Node | undefined;
+				let options: ts.Expression | undefined;
 
 				if (
 					ts.isVariableDeclaration(parent) &&
@@ -280,6 +283,7 @@ export function parseScriptSetupRanges(
 					runtimeType,
 					defaultValue,
 					required,
+					argNode: options,
 				});
 			}
 			else if (vueCompilerOptions.macros.defineProps.includes(callText)) {

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -299,20 +299,23 @@ export default _default;
 
 exports[`vue-tsc-dts > Input: reference-type-model/component.vue, Output: reference-type-model/component.vue.d.ts 1`] = `
 "type __VLS_PublicProps = {
-    "foo"?: number;
-    "bar"?: string[];
-    "qux"?: string;
-    'quxModifiers'?: Partial<Record<'lazy' | 'trim', true>>;
+    modelValue?: number;
+    'foo': string[];
+    'bar'?: boolean;
+    'baz'?: string;
+    'bazModifiers'?: Partial<Record<'lazy' | 'trim', true>>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:foo": (value: number) => any;
-    "update:bar": (value: string[]) => any;
-    "update:qux": (value: string) => any;
+    "update:modelValue": (value: number) => any;
+    "update:foo": (value: string[]) => any;
+    "update:bar": (value: boolean) => any;
+    "update:baz": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:foo"?: (value: number) => any;
-    "onUpdate:bar"?: (value: string[]) => any;
-    "onUpdate:qux"?: (value: string) => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    "onUpdate:modelValue"?: (value: number) => any;
+    "onUpdate:foo"?: (value: string[]) => any;
+    "onUpdate:bar"?: (value: boolean) => any;
+    "onUpdate:baz"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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,5 +1,10 @@
 <script setup lang="ts">
-const bar = defineModel<number>("foo")
-const baz = defineModel<string[]>("bar")
-const [qux, modifiers] = defineModel<string, 'lazy' | 'trim'>("qux")
+defineModel<number>();
+defineModel<string[]>('foo', {
+	required: true,
+});
+defineModel<boolean>('bar', {
+	default: false,
+});
+defineModel<string, 'lazy' | 'trim'>('baz');
 </script>