Skip to content

Commit d3c436a

Browse files
dolymooddolymood
authored
feat(types): mixins/extends support in TypeScript (#626)
1 parent 97dedeb commit d3c436a

File tree

11 files changed

+656
-56
lines changed

11 files changed

+656
-56
lines changed

‎packages/reactivity/__tests__/collections/Set.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -412,13 +412,13 @@ describe('reactivity/collections', () => {
412412
`Reactive Set contains both the raw and reactive`
413413
).toHaveBeenWarned()
414414
})
415-
415+
416416
it('thisArg', () => {
417-
const raw = new Set([ 'value' ])
417+
const raw = new Set(['value'])
418418
const proxy = reactive(raw)
419419
const thisArg = {}
420420
let count = 0
421-
proxy.forEach(function (this :{}, value, _, set) {
421+
proxy.forEach(function(this: {}, value, _, set) {
422422
++count
423423
expect(this).toBe(thisArg)
424424
expect(value).toBe('value')

‎packages/reactivity/src/baseHandlers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function createGetter(isReadonly = false, shallow = false) {
4949
}
5050
const res = Reflect.get(target, key, receiver)
5151

52-
if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {
52+
if ((isSymbol(key) && builtInSymbols.has(key)) || key === '__proto__') {
5353
return res
5454
}
5555

‎packages/runtime-core/__tests__/apiOptions.spec.ts

+97-11
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,11 @@ describe('api: options', () => {
443443
}
444444
}
445445
const mixinB = {
446+
props: {
447+
bP: {
448+
type: String
449+
}
450+
},
446451
data() {
447452
return {
448453
b: 2
@@ -452,40 +457,65 @@ describe('api: options', () => {
452457
calls.push('mixinB created')
453458
expect(this.a).toBe(1)
454459
expect(this.b).toBe(2)
460+
expect(this.bP).toBeUndefined()
455461
expect(this.c).toBe(3)
462+
expect(this.cP1).toBeUndefined()
456463
},
457464
mounted() {
458465
calls.push('mixinB mounted')
459466
}
460467
}
461-
const Comp = {
462-
mixins: [mixinA, mixinB],
468+
const mixinC = defineComponent({
469+
props: ['cP1', 'cP2'],
463470
data() {
464471
return {
465472
c: 3
466473
}
467474
},
468-
created(this: any) {
475+
created() {
476+
calls.push('mixinC created')
477+
expect(this.c).toBe(3)
478+
expect(this.cP1).toBeUndefined()
479+
},
480+
mounted() {
481+
calls.push('mixinC mounted')
482+
}
483+
})
484+
const Comp = defineComponent({
485+
props: {
486+
aaa: String
487+
},
488+
mixins: [defineComponent(mixinA), defineComponent(mixinB), mixinC],
489+
data() {
490+
return {
491+
z: 4
492+
}
493+
},
494+
created() {
469495
calls.push('comp created')
470496
expect(this.a).toBe(1)
471497
expect(this.b).toBe(2)
498+
expect(this.bP).toBeUndefined()
472499
expect(this.c).toBe(3)
500+
expect(this.cP2).toBeUndefined()
501+
expect(this.z).toBe(4)
473502
},
474503
mounted() {
475504
calls.push('comp mounted')
476505
},
477-
render(this: any) {
506+
render() {
478507
return `${this.a}${this.b}${this.c}`
479508
}
480-
}
481-
509+
})
482510
expect(renderToString(h(Comp))).toBe(`123`)
483511
expect(calls).toEqual([
484512
'mixinA created',
485513
'mixinB created',
514+
'mixinC created',
486515
'comp created',
487516
'mixinA mounted',
488517
'mixinB mounted',
518+
'mixinC mounted',
489519
'comp mounted'
490520
])
491521
})
@@ -498,12 +528,17 @@ describe('api: options', () => {
498528
a: 1
499529
}
500530
},
501-
mounted() {
531+
methods: {
532+
sayA() {}
533+
},
534+
mounted(this: any) {
535+
expect(this.a).toBe(1)
536+
expect(this.b).toBe(2)
502537
calls.push('base')
503538
}
504539
}
505-
const Comp = {
506-
extends: Base,
540+
const Comp = defineComponent({
541+
extends: defineComponent(Base),
507542
data() {
508543
return {
509544
b: 2
@@ -512,15 +547,66 @@ describe('api: options', () => {
512547
mounted() {
513548
calls.push('comp')
514549
},
515-
render(this: any) {
550+
render() {
516551
return `${this.a}${this.b}`
517552
}
518-
}
553+
})
519554

520555
expect(renderToString(h(Comp))).toBe(`12`)
521556
expect(calls).toEqual(['base', 'comp'])
522557
})
523558

559+
test('extends with mixins', () => {
560+
const calls: string[] = []
561+
const Base = {
562+
data() {
563+
return {
564+
a: 1
565+
}
566+
},
567+
methods: {
568+
sayA() {}
569+
},
570+
mounted(this: any) {
571+
expect(this.a).toBe(1)
572+
expect(this.b).toBeTruthy()
573+
expect(this.c).toBe(2)
574+
calls.push('base')
575+
}
576+
}
577+
const Base2 = {
578+
data() {
579+
return {
580+
b: true
581+
}
582+
},
583+
mounted(this: any) {
584+
expect(this.a).toBe(1)
585+
expect(this.b).toBeTruthy()
586+
expect(this.c).toBe(2)
587+
calls.push('base2')
588+
}
589+
}
590+
const Comp = defineComponent({
591+
extends: defineComponent(Base),
592+
mixins: [defineComponent(Base2)],
593+
data() {
594+
return {
595+
c: 2
596+
}
597+
},
598+
mounted() {
599+
calls.push('comp')
600+
},
601+
render() {
602+
return `${this.a}${this.b}${this.c}`
603+
}
604+
})
605+
606+
expect(renderToString(h(Comp))).toBe(`1true2`)
607+
expect(calls).toEqual(['base', 'base2', 'comp'])
608+
})
609+
524610
test('accessing setup() state from options', async () => {
525611
const Comp = defineComponent({
526612
setup() {

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

+90-15
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import {
44
ComponentOptionsWithoutProps,
55
ComponentOptionsWithArrayProps,
66
ComponentOptionsWithObjectProps,
7+
ComponentOptionsMixin,
78
RenderFunction
89
} from './componentOptions'
910
import { SetupContext, FunctionalComponent } from './component'
10-
import { ComponentPublicInstance } from './componentProxy'
11+
import {
12+
CreateComponentPublicInstance,
13+
ComponentPublicInstanceConstructor
14+
} from './componentProxy'
1115
import { ExtractPropTypes, ComponentPropsOptions } from './componentProps'
1216
import { EmitsOptions } from './componentEmits'
1317
import { isFunction } from '@vue/shared'
@@ -25,17 +29,21 @@ export function defineComponent<Props, RawBindings = object>(
2529
props: Readonly<Props>,
2630
ctx: SetupContext
2731
) => RawBindings | RenderFunction
28-
): {
29-
new (): ComponentPublicInstance<
32+
): ComponentPublicInstanceConstructor<
33+
CreateComponentPublicInstance<
3034
Props,
3135
RawBindings,
3236
{},
3337
{},
3438
{},
39+
{},
40+
{},
41+
{},
3542
// public props
3643
VNodeProps & Props
3744
>
38-
} & FunctionalComponent<Props>
45+
> &
46+
FunctionalComponent<Props>
3947

4048
// overload 2: object format with no props
4149
// (uses user defined props interface)
@@ -46,21 +54,46 @@ export function defineComponent<
4654
D = {},
4755
C extends ComputedOptions = {},
4856
M extends MethodOptions = {},
57+
Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
58+
Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
4959
E extends EmitsOptions = Record<string, any>,
5060
EE extends string = string
5161
>(
52-
options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
53-
): {
54-
new (): ComponentPublicInstance<
62+
options: ComponentOptionsWithoutProps<
5563
Props,
5664
RawBindings,
5765
D,
5866
C,
5967
M,
68+
Mixin,
69+
Extends,
70+
E,
71+
EE
72+
>
73+
): ComponentPublicInstanceConstructor<
74+
CreateComponentPublicInstance<
75+
Props,
76+
RawBindings,
77+
D,
78+
C,
79+
M,
80+
Mixin,
81+
Extends,
6082
E,
6183
VNodeProps & Props
6284
>
63-
} & ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, E, EE>
85+
> &
86+
ComponentOptionsWithoutProps<
87+
Props,
88+
RawBindings,
89+
D,
90+
C,
91+
M,
92+
Mixin,
93+
Extends,
94+
E,
95+
EE
96+
>
6497

6598
// overload 3: object format with array props declaration
6699
// props inferred as { [key in PropNames]?: any }
@@ -71,6 +104,8 @@ export function defineComponent<
71104
D,
72105
C extends ComputedOptions = {},
73106
M extends MethodOptions = {},
107+
Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
108+
Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
74109
E extends EmitsOptions = Record<string, any>,
75110
EE extends string = string
76111
>(
@@ -80,13 +115,36 @@ export function defineComponent<
80115
D,
81116
C,
82117
M,
118+
Mixin,
119+
Extends,
120+
E,
121+
EE
122+
>
123+
): ComponentPublicInstanceConstructor<
124+
// array props technically doesn't place any contraints on props in TSX before,
125+
// but now we can export array props in TSX
126+
CreateComponentPublicInstance<
127+
Readonly<{ [key in PropNames]?: any }>,
128+
RawBindings,
129+
D,
130+
C,
131+
M,
132+
Mixin,
133+
Extends,
134+
E
135+
>
136+
> &
137+
ComponentOptionsWithArrayProps<
138+
PropNames,
139+
RawBindings,
140+
D,
141+
C,
142+
M,
143+
Mixin,
144+
Extends,
83145
E,
84146
EE
85147
>
86-
): {
87-
// array props technically doesn't place any constraints on props in TSX
88-
new (): ComponentPublicInstance<VNodeProps, RawBindings, D, C, M, E>
89-
} & ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, E, EE>
90148

91149
// overload 4: object format with object props declaration
92150
// see `ExtractPropTypes` in ./componentProps.ts
@@ -98,6 +156,8 @@ export function defineComponent<
98156
D,
99157
C extends ComputedOptions = {},
100158
M extends MethodOptions = {},
159+
Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
160+
Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
101161
E extends EmitsOptions = Record<string, any>,
102162
EE extends string = string
103163
>(
@@ -107,20 +167,35 @@ export function defineComponent<
107167
D,
108168
C,
109169
M,
170+
Mixin,
171+
Extends,
110172
E,
111173
EE
112174
>
113-
): {
114-
new (): ComponentPublicInstance<
175+
): ComponentPublicInstanceConstructor<
176+
CreateComponentPublicInstance<
115177
ExtractPropTypes<PropsOptions>,
116178
RawBindings,
117179
D,
118180
C,
119181
M,
182+
Mixin,
183+
Extends,
120184
E,
121185
VNodeProps & ExtractPropTypes<PropsOptions, false>
122186
>
123-
} & ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, E, EE>
187+
> &
188+
ComponentOptionsWithObjectProps<
189+
PropsOptions,
190+
RawBindings,
191+
D,
192+
C,
193+
M,
194+
Mixin,
195+
Extends,
196+
E,
197+
EE
198+
>
124199

125200
// implementation, close to no-op
126201
export function defineComponent(options: unknown) {

0 commit comments

Comments
 (0)