Skip to content

Commit b8d6793

Browse files
author
rudyxu
committed
chore: improve code
1 parent ba3b8b9 commit b8d6793

File tree

6 files changed

+96
-108
lines changed

6 files changed

+96
-108
lines changed

‎packages/dts-test/defineComponent.test-d.tsx‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1191,14 +1191,13 @@ describe('async setup', () => {
11911191

11921192
describe('define attrs', () => {
11931193
test('define attrs w/ object props', () => {
1194-
type CompAttrs = {
1195-
bar: number
1196-
}
11971194
const MyComp = defineComponent({
11981195
props: {
11991196
foo: String
12001197
},
1201-
attrs: Object as AttrsType<CompAttrs>,
1198+
attrs: Object as AttrsType<{
1199+
bar?: number
1200+
}>,
12021201
created() {
12031202
expectType<number | undefined>(this.$attrs.bar)
12041203
}
@@ -1207,12 +1206,11 @@ describe('define attrs', () => {
12071206
})
12081207

12091208
test('define attrs w/ array props', () => {
1210-
type CompAttrs = {
1211-
bar: number
1212-
}
12131209
const MyComp = defineComponent({
12141210
props: ['foo'],
1215-
attrs: Object as AttrsType<CompAttrs>,
1211+
attrs: Object as AttrsType<{
1212+
bar?: number
1213+
}>,
12161214
created() {
12171215
expectType<number | undefined>(this.$attrs.bar)
12181216
}
@@ -1221,11 +1219,10 @@ describe('define attrs', () => {
12211219
})
12221220

12231221
test('define attrs w/ no props', () => {
1224-
type CompAttrs = {
1225-
bar: number
1226-
}
12271222
const MyComp = defineComponent({
1228-
attrs: Object as AttrsType<CompAttrs>,
1223+
attrs: Object as AttrsType<{
1224+
bar?: number
1225+
}>,
12291226
created() {
12301227
expectType<number | undefined>(this.$attrs.bar)
12311228
}
@@ -1234,17 +1231,16 @@ describe('define attrs', () => {
12341231
})
12351232

12361233
test('define attrs w/ composition api', () => {
1237-
type CompAttrs = {
1238-
bar: number
1239-
}
12401234
const MyComp = defineComponent({
12411235
props: {
12421236
foo: {
12431237
type: String,
12441238
required: true
12451239
}
12461240
},
1247-
attrs: Object as AttrsType<CompAttrs>,
1241+
attrs: Object as AttrsType<{
1242+
bar?: number
1243+
}>,
12481244
setup(props, { attrs }) {
12491245
expectType<string>(props.foo)
12501246
expectType<number | undefined>(attrs.bar)
@@ -1254,9 +1250,6 @@ describe('define attrs', () => {
12541250
})
12551251

12561252
test('define attrs w/ functional component', () => {
1257-
type CompAttrs = {
1258-
bar: number
1259-
}
12601253
const MyComp = defineComponent(
12611254
(props: { foo: string }, ctx) => {
12621255
expectType<number | undefined>(ctx.attrs.bar)
@@ -1266,61 +1259,46 @@ describe('define attrs', () => {
12661259
)
12671260
},
12681261
{
1269-
attrs: Object as AttrsType<CompAttrs>
1262+
attrs: Object as AttrsType<{
1263+
bar?: number
1264+
}>
12701265
}
12711266
)
12721267
expectType<JSX.Element>(<MyComp foo={'1'} bar={1} />)
12731268
})
12741269

12751270
test('define attrs as low priority', () => {
1276-
type CompAttrs = {
1277-
foo: number
1278-
}
12791271
const MyComp = defineComponent({
12801272
props: {
12811273
foo: String
12821274
},
1283-
attrs: Object as AttrsType<CompAttrs>,
1275+
attrs: Object as AttrsType<{
1276+
foo?: number
1277+
}>,
12841278
created() {
12851279
// @ts-expect-error
12861280
this.$attrs.foo
1281+
1282+
expectType<string | undefined>(this.foo);
12871283
}
12881284
})
12891285
expectType<JSX.Element>(<MyComp foo="1" />)
12901286
})
12911287

1292-
test('attrs is always optional w/ object props', () => {
1293-
type CompAttrs = {
1294-
bar: number
1295-
}
1288+
test('define required attrs', () => {
12961289
const MyComp = defineComponent({
1297-
attrs: Object as AttrsType<CompAttrs>,
1290+
attrs: Object as AttrsType<{
1291+
bar: number
1292+
}>,
12981293
created() {
12991294
expectType<number | undefined>(this.$attrs.bar)
13001295
}
13011296
})
1297+
expectType<JSX.Element>(<MyComp bar={1}/>)
1298+
// @ts-expect-error
13021299
expectType<JSX.Element>(<MyComp />)
13031300
})
13041301

1305-
test('attrs is always optional w/ functional component', () => {
1306-
type CompAttrs = {
1307-
bar: number
1308-
}
1309-
const MyComp = defineComponent(
1310-
(props: { foo: string }, ctx) => {
1311-
expectType<number | undefined>(ctx.attrs.bar)
1312-
return () => (
1313-
// return a render function (both JSX and h() works)
1314-
<div>{props.foo}</div>
1315-
)
1316-
},
1317-
{
1318-
attrs: Object as AttrsType<CompAttrs>
1319-
}
1320-
)
1321-
expectType<JSX.Element>(<MyComp foo={'1'} />)
1322-
})
1323-
13241302
test('define attrs w/ no attrs', () => {
13251303
const MyComp = defineComponent({
13261304
props: {
@@ -1333,6 +1311,23 @@ describe('define attrs', () => {
13331311
// @ts-expect-error
13341312
expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
13351313
})
1314+
1315+
test('default attrs like class, style', () => {
1316+
const MyComp = defineComponent({
1317+
props: {
1318+
foo: String
1319+
},
1320+
attrs: Object as AttrsType<{
1321+
bar?: number
1322+
}>,
1323+
created() {
1324+
expectType<number | undefined>(this.$attrs.bar)
1325+
expectType<unknown>(this.$attrs.class)
1326+
expectType<unknown>(this.$attrs.style)
1327+
}
1328+
})
1329+
expectType<JSX.Element>(<MyComp class={'str'} style={'str'} foo="1" bar={1} />)
1330+
})
13361331
})
13371332

13381333
// #5948

‎packages/dts-test/defineCustomElement.test-d.ts‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -65,80 +65,54 @@ describe('inject', () => {
6565

6666
describe('define attrs', () => {
6767
test('define attrs w/ object props', () => {
68-
type CompAttrs = {
69-
bar: number
70-
baz?: string
71-
}
7268
defineCustomElement({
7369
props: {
7470
foo: String
7571
},
76-
attrs: Object as AttrsType<CompAttrs>,
72+
attrs: Object as AttrsType<{
73+
bar?: number
74+
}>,
7775
created() {
7876
expectType<number | undefined>(this.$attrs.bar)
79-
expectType<string | undefined>(this.$attrs.baz)
8077
}
8178
})
8279
})
8380

8481
test('define attrs w/ array props', () => {
85-
type CompAttrs = {
86-
bar: number
87-
baz?: string
88-
}
8982
defineCustomElement({
9083
props: ['foo'],
91-
attrs: Object as AttrsType<CompAttrs>,
84+
attrs: Object as AttrsType<{
85+
bar?: number
86+
}>,
9287
created() {
9388
expectType<number | undefined>(this.$attrs.bar)
94-
expectType<string | undefined>(this.$attrs.baz)
9589
}
9690
})
9791
})
9892

9993
test('define attrs w/ no props', () => {
100-
type CompAttrs = {
101-
bar: number
102-
baz?: string
103-
}
10494
defineCustomElement({
105-
attrs: Object as AttrsType<CompAttrs>,
95+
attrs: Object as AttrsType<{
96+
bar?: number
97+
}>,
10698
created() {
10799
expectType<number | undefined>(this.$attrs.bar)
108-
expectType<string | undefined>(this.$attrs.baz)
109100
}
110101
})
111102
})
112103

113-
test('define attrs w/ function component', () => {
114-
type CompAttrs = {
115-
bar: number
116-
baz?: string
117-
}
118-
defineCustomElement(
119-
(_props: { foo: string }, ctx) => {
120-
expectType<number | undefined>(ctx.attrs.bar)
121-
expectType<number | undefined>(ctx.attrs.bar)
122-
expectType<string | undefined>(ctx.attrs.baz)
123-
},
124-
{
125-
attrs: Object as AttrsType<CompAttrs>
126-
}
127-
)
128-
})
129-
130104
test('define attrs as low priority', () => {
131-
type CompAttrs = {
132-
foo: number
133-
}
134105
defineCustomElement({
135106
props: {
136-
foo: String
107+
foo: String,
137108
},
138-
attrs: Object as AttrsType<CompAttrs>,
109+
attrs: Object as AttrsType<{
110+
foo: number
111+
}>,
139112
created() {
140113
// @ts-expect-error
141114
this.$attrs.foo
115+
expectType<string | undefined>(this.foo)
142116
}
143117
})
144118
})
@@ -154,4 +128,30 @@ describe('define attrs', () => {
154128
}
155129
})
156130
})
131+
132+
test('default attrs like class, style', () => {
133+
defineCustomElement({
134+
props: {
135+
foo: String
136+
},
137+
created() {
138+
expectType<unknown>(this.$attrs.class)
139+
expectType<unknown>(this.$attrs.style)
140+
}
141+
})
142+
})
143+
144+
test('define required attrs', () => {
145+
defineCustomElement({
146+
props: {
147+
foo: String
148+
},
149+
attrs: Object as AttrsType<{
150+
bar: number
151+
}>,
152+
created() {
153+
expectType<number>(this.$attrs.bar)
154+
}
155+
})
156+
})
157157
})

‎packages/runtime-core/src/apiDefineComponent.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ export function defineComponent<
122122
props?: (keyof Props)[]
123123
emits?: E | EE[]
124124
slots?: S
125-
attrs?: Partial<Attrs>
125+
attrs?: Attrs
126126
}
127-
): (props: Props & EmitsToProps<E> & Partial<PropsAttrs>) => any
127+
): (props: Props & EmitsToProps<E> & PropsAttrs) => any
128128
export function defineComponent<
129129
Props extends Record<string, any>,
130130
E extends EmitsOptions = {},

‎packages/runtime-core/src/componentPublicInstance.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export type ComponentPublicInstance<
218218
Attrs extends AttrsType = {},
219219
PropsAttrs = IsSameType<UnwrapAttrsType<Attrs>, Data> extends true
220220
? {}
221-
: Partial<Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>>
221+
: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)>
222222
> = {
223223
$: ComponentInternalInstance
224224
$data: D
@@ -227,10 +227,8 @@ export type ComponentPublicInstance<
227227
? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults> & PropsAttrs
228228
: P & PublicProps & PropsAttrs
229229
>
230-
$attrs: Partial<
231-
Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
230+
$attrs: Omit<UnwrapAttrsType<Attrs>, keyof (P & PublicProps)> &
232231
AllowedComponentProps
233-
>
234232
$refs: Data
235233
$slots: UnwrapSlotsType<S>
236234
$root: ComponentPublicInstance | null

‎packages/runtime-core/src/vnode.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ import {
1818
ConcreteComponent,
1919
ClassComponent,
2020
Component,
21-
isClassComponent,
22-
AllowedComponentProps
21+
isClassComponent
2322
} from './component'
2423
import { RawSlots } from './componentSlots'
2524
import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity'
@@ -817,7 +816,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
817816
vnode.shapeFlag |= type
818817
}
819818

820-
export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
819+
export function mergeProps(...args: (Data & VNodeProps)[]) {
821820
const ret: Data = {}
822821
for (let i = 0; i < args.length; i++) {
823822
const toMerge = args[i]
@@ -830,7 +829,7 @@ export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
830829
ret.style = normalizeStyle([ret.style, toMerge.style])
831830
} else if (isOn(key)) {
832831
const existing = ret[key]
833-
const incoming = (toMerge as Data)[key]
832+
const incoming = toMerge[key]
834833
if (
835834
incoming &&
836835
existing !== incoming &&
@@ -841,7 +840,7 @@ export function mergeProps(...args: (AllowedComponentProps | Data)[]) {
841840
: incoming
842841
}
843842
} else if (key !== '') {
844-
ret[key] = (toMerge as Data)[key]
843+
ret[key] = toMerge[key]
845844
}
846845
}
847846
}

0 commit comments

Comments
 (0)