8000 fix: $el type · himself65/vue-next@94730f1 · GitHub
[go: up one dir, main page]
Skip to content

Commit 94730f1

Browse files
himself65himself65
committed
fix: $el type
Fixes: vuejs#7915
1 parent 650f5c2 commit 94730f1

File tree

10 files changed

+59
-57
lines changed

10 files changed

+59
-57
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { markAttrsAccessed } from './componentRenderUtils'
4444
import { currentRenderingInstance } from './componentRenderContext'
4545
import { warn } from './warning'
4646
import { installCompatInstanceProperties } from './compat/instance'
47+
import { VNode } from './vnode'
4748

4849
/**
4950
* Custom properties added to component instances in any way and can be accessed through `this`
@@ -194,7 +195,7 @@ export type ComponentPublicInstance<
194195
$root: ComponentPublicInstance | null
195196
$parent: ComponentPublicInstance | null
196197
$emit: EmitFn<E>
197-
$el: any
198+
$el: VNode['el']
198199
$options: Options & MergedComponentOptionsOverride
199200
$forceUpdate: () => void
200201
$nextTick: typeof nextTick

‎packages/vue-compat/__tests__/compiler.spec.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ test('COMPILER_IS_ON_ELEMENT', () => {
3232
}
3333
}).$mount()
3434

35-
expect(vm.$el.outerHTML).toBe(`<div>text</div>`)
35+
expect(vm.$el?.outerHTML).toBe(`<div>text</div>`)
3636
expect(CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT).toHaveBeenWarned()
3737
})
3838

@@ -48,7 +48,7 @@ test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
4848
}
4949
}).$mount()
5050

51-
expect(vm.$el.outerHTML).toBe(`<div>text</div>`)
51+
expect(vm.$el?.outerHTML).toBe(`<div>text</div>`)
5252
expect(CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT).toHaveBeenWarned()
5353
})
5454

@@ -70,11 +70,11 @@ test('COMPILER_V_BIND_SYNC', async () => {
7070
}
7171
}).$mount()
7272

73-
expect(vm.$el.textContent).toBe(`0`)
73+
expect(vm.$el?.textContent).toBe(`0`)
7474

75-
triggerEvent(vm.$el, 'click')
75+
triggerEvent(vm.$el as Element, 'click')
7676
await nextTick()
77-
expect(vm.$el.textContent).toBe(`1`)
77+
expect(vm.$el?.textContent).toBe(`1`)
7878

7979
expect(CompilerDeprecationTypes.COMPILER_V_BIND_SYNC).toHaveBeenWarned()
8080
})
@@ -83,16 +83,16 @@ test('COMPILER_V_BIND_PROP', () => {
8383
const vm = new Vue({
8484
template: `<div :id.prop="'foo'"/>`
8585
}).$mount()
86-
expect(vm.$el.id).toBe('foo')
86+
expect(vm.$el?.id).toBe('foo')
8787
expect(CompilerDeprecationTypes.COMPILER_V_BIND_PROP).toHaveBeenWarned()
8888
})
8989

9090
test('COMPILER_V_BIND_OBJECT_ORDER', () => {
9191
const vm = new Vue({
9292
template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`
9393
}).$mount()
94-
expect(vm.$el.id).toBe('foo')
95-
expect(vm.$el.className).toBe('baz')
94+
expect(vm.$el?.id).toBe('foo')
95+
expect(vm.$el?.className).toBe('baz')
9696
expect(
9797
CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER
9898
).toHaveBeenWarned()
@@ -112,7 +112,7 @@ test('COMPILER_V_ON_NATIVE', () => {
112112
}
113113
}).$mount()
114114

115-
triggerEvent(vm.$el, 'click')
115+
triggerEvent(vm.$el as Element, 'click')
116116
expect(spy).toHaveBeenCalledTimes(1)
117117
expect(CompilerDeprecationTypes.COMPILER_V_ON_NATIVE).toHaveBeenWarned()
118118
})
@@ -128,7 +128,7 @@ test('COMPILER_NATIVE_TEMPLATE', () => {
128128
const vm = new Vue({
129129
template: `<div><template><div/></template></div>`
130130
}).$mount()
131-
expect(vm.$el.innerHTML).toBe(`<div></div>`)
131+
expect(vm.$el?.innerHTML).toBe(`<div></div>`)
132132
expect(CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE).toHaveBeenWarned()
133133
})
134134

@@ -144,6 +144,6 @@ test('COMPILER_INLINE_TEMPLATE', () => {
144144
}
145145
}).$mount()
146146

147-
expect(vm.$el.outerHTML).toBe(`<div>123</div>`)
147+
expect(vm.$el?.outerHTML).toBe(`<div>123</div>`)
148148
expect(CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE).toHaveBeenWarned()
149149
})

‎packages/vue-compat/__tests__/componentAsync.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ describe('COMPONENT_ASYNC', () => {
3030
template: `<div><comp/></div>`,
3131
components: { comp }
3232
}).$mount()
33-
expect(vm.$el.innerHTML).toBe(`<!---->`)
33+
expect(vm.$el?.innerHTML).toBe(`<!---->`)
3434

3535
resolve({ template: 'foo' })
3636
await timeout(0)
37-
expect(vm.$el.innerHTML).toBe(`foo`)
37+
expect(vm.$el?.innerHTML).toBe(`foo`)
3838

3939
expect(
4040
(deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
@@ -49,9 +49,9 @@ describe('COMPONENT_ASYNC', () => {
4949
template: `<div><comp/></div>`,
5050
components: { comp }
5151
}).$mount()
52-
expect(vm.$el.innerHTML).toBe(`<!---->`)
52+
expect(vm.$el?.innerHTML).toBe(`<!---->`)
5353
await timeout(0)
54-
expect(vm.$el.innerHTML).toBe(`foo`)
54+
expect(vm.$el?.innerHTML).toBe(`foo`)
5555

5656
expect(
5757
(deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
@@ -69,9 +69,9 @@ describe('COMPONENT_ASYNC', () => {
6969
template: `<div><comp/></div>`,
7070
components: { comp }
7171
}).$mount()
72-
expect(vm.$el.innerHTML).toBe(`<!---->`)
72+
expect(vm.$el?.innerHTML).toBe(`<!---->`)
7373
await timeout(0)
74-
expect(vm.$el.innerHTML).toBe(`foo`)
74+
expect(vm.$el?.innerHTML).toBe(`foo`)
7575

7676
expect(
7777
(deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(

‎packages/vue-compat/__tests__/componentFunctional.spec.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
deprecationData,
55
toggleDeprecationWarning
66
} from '../../runtime-core/src/compat/compatConfig'
7+
import { expect } from 'vitest'
78

89
beforeEach(() => {
910
toggleDeprecationWarning(true)
@@ -47,11 +48,11 @@ describe('COMPONENT_FUNCTIONAL', () => {
4748
template: `<func class="foo" x="foo">hello</func>`
4849
}).$mount()
4950

50-
expect(vm.$el.id).toBe('foo')
51-
expect(vm.$el.className).toBe('foo')
52-
expect(vm.$el.querySelector('.inject').textContent).toBe('123')
53-
expect(vm.$el.querySelector('.slot').textContent).toBe('hello')
54-
expect(vm.$el.outerHTML).toMatchInlineSnapshot(
51+
expect(vm.$el?.id).toBe('foo')
52+
expect(vm.$el?.className).toBe('foo')
53+
expect(vm.$el?.querySelector('.inject').textContent).toBe('123')
54+
expect(vm.$el?.querySelector('.slot').textContent).toBe('hello')
55+
expect(vm.$el?.outerHTML).toMatchInlineSnapshot(
5556
'"<div id=\\"foo\\" class=\\"foo\\"><div class=\\"inject\\">123</div><div class=\\"slot\\">hello</div></div>"'
5657
)
5758

@@ -81,7 +82,7 @@ describe('COMPONENT_FUNCTIONAL', () => {
8182
template: `<func class="foo" x="foo">hello</func>`
8283
}).$mount()
8384

84-
expect(vm.$el.outerHTML).toMatchInlineSnapshot(`"<div></div>"`)
85+
expect(vm.$el?.outerHTML).toMatchInlineSnapshot(`"<div></div>"`)
8586
expect(
8687
(
8788
deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL]

‎packages/vue-compat/__tests__/filters.spec.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ describe('FILTERS', () => {
4343
msg: 'hi'
4444
})
4545
}).$mount()
46-
expect(vm.$el.textContent).toBe('HI')
46+
expect(vm.$el?.textContent).toBe('HI')
4747
expect(deprecationData[DeprecationTypes.FILTERS].message).toHaveBeenWarned()
4848
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
4949
Vue.filter('globalUpper', undefined)
@@ -59,7 +59,7 @@ describe('FILTERS', () => {
5959
upper
6060
}
6161
}).$mount()
62-
expect(vm.$el.textContent).toBe('HI')
62+
expect(vm.$el?.textContent).toBe('HI')
6363
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
6464
})
6565

@@ -74,7 +74,7 @@ describe('FILTERS', () => {
7474
reverse
7575
}
7676
}).$mount()
77-
expect(vm.$el.textContent).toBe('IH')
77+
expect(vm.$el?.textContent).toBe('IH')
7878
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
7979
})
8080

@@ -98,8 +98,8 @@ describe('FILTERS', () => {
9898
ref: 'BAR'
9999
})
100100
}).$mount()
101-
expect(vm.$el.id).toBe('CBA')
102-
expect(vm.$el.className).toBe('oof')
101+
expect(vm.$el?.id).toBe('CBA')
102+
expect(vm.$el?.className).toBe('oof')
103103
expect(vm.$refs.bar).toBe(vm.$el)
104104
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
105105
})
@@ -126,7 +126,7 @@ describe('FILTERS', () => {
126126
template: `<div>{{ 1/a / 4 | double }}</div>`,
127127
filters: { double }
128128
}).$mount()
129-
expect(vm.$el.textContent).toBe(String(1 / 4))
129+
expect(vm.$el?.textContent).toBe(String(1 / 4))
130130
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
131131
})
132132

@@ -136,7 +136,7 @@ describe('FILTERS', () => {
136136
template: `<div>{{ (a*2) / 5 | double }}</div>`,
137137
filters: { double }
138138
}).$mount()
139-
expect(vm.$el.textContent).toBe(String(16) 10000 )
139+
expect(vm.$el?.textContent).toBe(String(16))
140140
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
141141
})
142142

@@ -145,7 +145,7 @@ describe('FILTERS', () => {
145145
template: `<div>{{ 20. / 5 | double }}</div>`,
146146
filters: { double }
147147
}).$mount()
148-
expect(vm.$el.textContent).toBe(String(8))
148+
expect(vm.$el?.textContent).toBe(String(8))
149149
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
150150
})
151151

@@ -155,7 +155,7 @@ describe('FILTERS', () => {
155155
template: `<div>{{ a[0] / 5 | double }}</div>`,
156156
filters: { double }
157157
}).$mount()
158-
expect(vm.$el.textContent).toBe(String(8))
158+
expect(vm.$el?.textContent).toBe(String(8))
159159
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
160160
})
161161

@@ -165,7 +165,7 @@ describe('FILTERS', () => {
165165
template: `<div>{{ a['n'] / 5 | double }}</div>`,
166166
filters: { double }
167167
}).$mount()
168-
expect(vm.$el.textContent).toBe(String(8))
168+
expect(vm.$el?.textContent).toBe(String(8))
169169
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
170170
})
171171

@@ -175,7 +175,7 @@ describe('FILTERS', () => {
175175
template: `<div>{{ a_ / 2 | double }}</div>`,
176176
filters: { double }
177177
}).$mount()
178-
expect(vm.$el.textContent).toBe(String(8))
178+
expect(vm.$el?.textContent).toBe(String(8))
179179
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
180180
})
181181

@@ -190,7 +190,7 @@ describe('FILTERS', () => {
190190
add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2
191191
}
192192
}).$mount()
193-
expect(vm.$el.textContent).toBe('6')
193+
expect(vm.$el?.textContent).toBe('6')
194194
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
195195
})
196196

@@ -204,7 +204,7 @@ describe('FILTERS', () => {
204204
upper
205205
}
206206
}).$mount()
207-
expect(vm.$el.textContent).toBe('AB | CD')
207+
expect(vm.$el?.textContent).toBe('AB | CD')
208208
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
209209
})
210210

@@ -219,7 +219,7 @@ describe('FILTERS', () => {
219219
upper
220220
}
221221
}).$mount()
222-
expect(vm.$el.textContent).toBe('A')
222+
expect(vm.$el?.textContent).toBe('A')
223223
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
224224
})
225225

@@ -230,7 +230,7 @@ describe('FILTERS', () => {
230230
pick: (v: any, key: string) => v[key]
231231
}
232232
}).$mount()
233-
expect(vm.$el.textContent).toBe('123')
233+
expect(vm.$el?.textContent).toBe('123')
234234
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
235235
})
236236

@@ -241,14 +241,14 @@ describe('FILTERS', () => {
241241
reverse: (arr: any[]) => arr.reverse().join(',')
242242
}
243243
}).$mount()
244-
expect(vm.$el.textContent).toBe('3,2,1')
244+
expect(vm.$el?.textContent).toBe('3,2,1')
245245
expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
246246
})
247247

248248
it('bigint support', () => {
249249
const vm = new Vue({
250250
template: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`
251251
}).$mount()
252-
expect(vm.$el.textContent).toBe('6000000010000000')
252+
expect(vm.$el?.textContent).toBe('6000000010000000')
253253
})
254254
})

‎packages/vue-compat/__tests__/global.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ describe('GLOBAL_EXTEND', () => {
122122
template: '<div><foo></foo><bar></bar></div>',
123123
components: { foo, bar }
124124
}).$mount()
125-
expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
125+
expect(vm.$el?.innerHTML).toBe('<span>foo</span><span>bar</span>')
126126
})
127127

128128
it('should merge lifecycle hooks', () => {
@@ -221,7 +221,7 @@ describe('GLOBAL_EXTEND', () => {
221221
const b = new B({
222222
template: '<div><aa></aa><bb></bb></div>'
223223
}).$mount()
224-
expect(b.$el.innerHTML).toBe('<div>A</div><div>B</div>')
224+
expect(b.$el?.innerHTML).toBe('<div>A</div><div>B</div>')
225225
})
226226

227227
it('caching', () => {

‎packages/vue-compat/__tests__/instance.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ test('INSTANCE_ATTR_CLASS_STYLE', () => {
319319
}
320320
}).$mount()
321321

322-
expect(vm.$el.outerHTML).toBe(
322+
expect(vm.$el?.outerHTML).toBe(
323323
`<div class="foo" style="color: red;"><div id="ok"></div></div>`
324324
)
325325

‎packages/vue-compat/__tests__/misc.spec.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ test('mode as function', () => {
4444
template: `<div><foo/><bar/></div>`
4545
}).$mount()
4646

47-
expect(vm.$el.innerHTML).toBe(`<div>foo</div><div>bar</div>`)
47+
expect(vm.$el?.innerHTML).toBe(`<div>foo</div><div>bar</div>`)
4848
})
4949

5050
test('WATCH_ARRAY', async () => {
@@ -99,7 +99,7 @@ test('PROPS_DEFAULT_THIS', () => {
9999
template: `<child :foo="0" />`
100100
}).$mount()
101101

102-
expect(vm.$el.textContent).toBe('1')
102+
expect(vm.$el?.textContent).toBe('1')
103103
// other props
104104
expect(thisCtx.foo).toBe(0)
105105
// $options
@@ -120,7 +120,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
120120
template: `<input @keyup.1="spy">`,
121121
methods: { spy }
122122
}).$mount()
123-
triggerEvent(vm.$el, 'keyup', e => {
123+
triggerEvent(vm.$el as Element, 'keyup', e => {
124124
e.key = '_'
125125
e.keyCode = 1
126126
})
@@ -192,8 +192,8 @@ test('ATTR_FALSE_VALUE', () => {
192192
const vm = new Vue({
193193
template: `<div :id="false" :foo="false"/>`
194194
}).$mount()
195-
expect(vm.$el.hasAttribute('id')).toBe(false)
196-
expect(vm.$el.hasAttribute('foo')).toBe(false)
195+
expect(vm.$el?.hasAttribute('id')).toBe(false)
196+
expect(vm.$el?.hasAttribute('foo')).toBe(false)
197197
expect(
198198
(deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
199199
'id'
@@ -210,9 +210,9 @@ test('ATTR_ENUMERATED_COERCION', () => {
210210
const vm = new Vue({
211211
template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`
212212
}).$mount()
213-
expect(vm.$el.getAttribute('draggable')).toBe('false')
214-
expect(vm.$el.getAttribute('spellcheck')).toBe('true')
215-
expect(vm.$el.getAttribute('contenteditable')).toBe('true')
213+
expect(vm.$el?.getAttribute('draggable')).toBe('false')
214+
expect(vm.$el?.getAttribute('spellcheck')).toBe('true')
215+
expect(vm.$el?.getAttribute('contenteditable')).toBe('true')
216216
expect(
217217
(
218218
deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]

0 commit comments

Comments
 (0)
0