Skip to content

Commit 92fbebe

Browse files
yyx990803yyx990803
committed
fix $dispatch/$broadcast compat and identify event type in log
1 parent 097ee96 commit 92fbebe

File tree

5 files changed

+42
-56
lines changed

5 files changed

+42
-56
lines changed

‎src/backend/events.js

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,37 @@ export function initEventsBackend (Vue, bridge) {
88
recording = enabled
99
})
1010

11-
const vueEmit = Vue.prototype.$emit
12-
Vue.prototype.$emit = function () {
13-
const res = vueEmit.apply(this, arguments)
11+
function logEvent (vm, type, eventName, payload) {
12+
// The string check is important for compat with 1.x where the first
13+
// argument may be an object instead of a string.
14+
// this also ensures the event is only logged for direct $emit (source)
15+
// instead of by $dispatch/$broadcast
16+
if (typeof eventName === 'string' && !eventName.startsWith('hook:')) {
17+
bridge.send('event:triggered', stringify({
18+
eventName,
19+
type,
20+
payload,
21+
instanceId: vm._uid,
22+
instanceName: getInstanceName(vm._self || vm),
23+
timestamp: Date.now()
24+
}))
25+
}
26+
}
1427

15-
if (recording) {
16-
let eventName = String(arguments[0])
17-
if (Object.prototype.toString.call(arguments[0]) === '[object Object]' && arguments[0].name) {
18-
eventName = String(arguments[0].name)
19-
}
20-
if (!eventName.startsWith('hook:')) {
21-
bridge.send('event:emit', stringify({
22-
instanceId: this._uid,
23-
instanceName: getInstanceName(this._self || this),
24-
eventName: eventName,
25-
eventData: arguments[1],
26-
timestamp: Date.now()
27-
}))
28+
function wrap (method) {
29+
const original = Vue.prototype[method]
30+
if (original) {
31+
Vue.prototype[method] = function (...args) {
32+
const res = original.apply(this, args)
33+
if (recording) {
34+
logEvent(this, method, args[0], args.slice(1))
35+
}
36+
return res
2837
}
2938
}
30-
31-
return res
3239
}
40+
41+
wrap('$emit')
42+
wrap('$broadcast')
43+
wrap('$dispatch')
3344
}

‎src/devtools/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ function initApp (shell) {
7676
store.commit('vuex/RECEIVE_MUTATION', payload)
7777
})
7878

79-
bridge.on('event:emit', payload => {
80-
store.commit('events/EMIT', parse(payload))
79+
bridge.on('event:triggered', payload => {
80+
store.commit('events/RECEIVE_EVENT', parse(payload))
8181
if (store.state.tab !== 'events') {
8282
store.commit('events/INCREASE_NEW_EVENT_COUNT')
8383
}

‎src/devtools/views/events/EventInspector.vue

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,24 +33,13 @@ export default {
3333
if (!this.activeEvent) {
3434
return {}
3535
}
36-
const data = this.isComplex
37-
? this.getSortedEventData()
38-
: this.activeEvent.eventData
3936
return {
40-
type: this.activeEvent.eventName,
37+
name: this.activeEvent.eventName,
38+
type: this.activeEvent.type,
4139
source: '<' + this.activeEvent.instanceName + '>',
42-
payload: data
40+
payload: this.activeEvent.payload
4341
}
4442
}
45-
},
46-
methods: {
47-
getSortedEventData () {
48-
const ordered = {}
49-
Object.keys(this.activeEvent.eventData).sort().forEach(key => {
50-
ordered[key] = this.activeEvent.eventData[key]
51-
})
52-
return ordered
53-
}
5443
}
5544
}
5645
</script>

‎src/devtools/views/events/EventsHistory.vue

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
:class="{ active: inspectedIndex === events.indexOf(event) }"
2525
@click="inspect(events.indexOf(event))">
2626
<span class="event-name">{{ event.eventName }}</span>
27+
<span class="event-type">{{ event.type }}</span>
2728
<span class="event-source">
2829
by
2930
<span>&lt;</span>
@@ -96,40 +97,25 @@ export default {
9697
font-size 12px
9798
background-color #fff
9899
box-shadow 0 1px 5px rgba(0,0,0,.12)
100+
.event-name
101+
font-weight 600
99102
.event-source
100103
color #999
101104
.component-name
102105
color $component-color
106+
.event-type
107+
color #999
108+
margin-left 8px
103109
&.active
104110
color #fff
105111
background-color $active-color
106-
.time
112+
.time, .event-type, .component-name
107113
color lighten($active-color, 75%)
108114
.event-name
109115
color: #fff
110-
.component-name
111-
color lighten($active-color, 75%)
112116
.event-source
113117
color #ddd
114118
115-
.action-wrapper
116-
margin-top: 5px;
117-
118-
.action
119-
color lighten($active-color, 75%)
120-
font-size 11px
121-
dispatch inline-block
122-
vertical-align middle
123-
margin-left 8px
124-
white-space nowrap
125-
.material-icons
126-
font-size 14px
127-
margin-right -4px
128-
.material-icons, span
129-
vertical-align middle
130-
&:hover
131-
color #fff
132-
133119
.time
134120
font-size 11px
135121
color #999

‎src/devtools/views/events/module.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const state = {
1212
}
1313

1414
const mutations = {
15-
'EMIT' (state, payload) {
15+
'RECEIVE_EVENT' (state, payload) {
1616
state.events.push(payload)
1717
if (!state.filter) {
1818
state.inspectedIndex = state.events.length - 1

0 commit comments

Comments
 (0)