Skip to content

Commit 467c077

Browse files
Guillaume Chausp1ker
Guillaume Chau
authored and
sp1ker
committed
fix(SharedData): master/slave init, closes vuejs#1028 
1 parent 963e431 commit 467c077

File tree

3 files changed

+170
-143
lines changed

3 files changed

+170
-143
lines changed

‎packages/app-backend/src/index.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
getCustomRefDetails
2020
} from '@utils/util'
2121
import SharedData, { init as initSharedData } from '@utils/shared-data'
22-
import { init as initStorage } from '@utils/storage'
2322
import { isBrowser, target } from '@utils/env'
2423

2524
// hook should have been injected before this executes.
@@ -57,12 +56,10 @@ export function initBackend (_bridge) {
5756
}
5857

5958
function connect (Vue) {
60-
initStorage().then(() => {
61-
initSharedData({
62-
bridge,
63-
Vue
64-
})
65-
59+
initSharedData({
60+
bridge,
61+
Vue
62+
}).then(() => {
6663
hook.currentTab = 'components'
6764
bridge.on('switch-tab', tab => {
6865
hook.currentTab = tab

‎packages/app-frontend/src/index.js

Lines changed: 115 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -104,148 +104,148 @@ function initApp (shell) {
104104
bridge,
105105
Vue,
106106
persist: true
107-
})
108-
109-
if (SharedData.logDetected) {
110-
bridge.send('log-detected-vue')
111-
}
107+
}).then(() => {
108+
if (SharedData.logDetected) {
109+
bridge.send('log-detected-vue')
110+
}
112111

113-
const store = createStore()
112+
const store = createStore()
114113

115-
bridge.once('ready', version => {
116-
store.commit(
117-
'SHOW_MESSAGE',
118-
'Ready. Detected Vue ' + version + '.'
119-
)
120-
bridge.send('events:toggle-recording', store.state.events.enabled)
114+
bridge.once('ready', version => {
115+
store.commit(
116+
'SHOW_MESSAGE',
117+
'Ready. Detected Vue ' + version + '.'
118+
)
119+
bridge.send('events:toggle-recording', store.state.events.enabled)
121120

122-
if (isChrome) {
123-
chrome.runtime.sendMessage('vue-panel-load')
124-
}
125-
})
121+
if (isChrome) {
122+
chrome.runtime.sendMessage('vue-panel-load')
123+
}
124+
})
126125

127-
bridge.once('proxy-fail', () => {
128-
store.commit(
129-
'SHOW_MESSAGE',
130-
'Proxy injection failed.'
131-
)
132-
})
126+
bridge.once('proxy-fail', () => {
127+
store.commit(
128+
'SHOW_MESSAGE',
129+
'Proxy injection failed.'
130+
)
131+
})
133132

134-
bridge.on('flush', payload => {
135-
store.commit('components/FLUSH', parse(payload))
136-
})
133+
bridge.on('flush', payload => {
134+
store.commit('components/FLUSH', parse(payload))
135+
})
137136

138-
bridge.on('instance-details', details => {
139-
store.commit('components/RECEIVE_INSTANCE_DETAILS', parse(details))
140-
})
137+
bridge.on('instance-details', details => {
138+
store.commit('components/RECEIVE_INSTANCE_DETAILS', parse(details))
139+
})
141140

142-
bridge.on('toggle-instance', payload => {
143-
store.commit('components/TOGGLE_INSTANCE', parse(payload))
144-
})
141+
bridge.on('toggle-instance', payload => {
142+
store.commit('components/TOGGLE_INSTANCE', parse(payload))
143+
})
145144

146-
bridge.on('vuex:init', () => {
147-
store.commit('vuex/INIT')
148-
})
145+
bridge.on('vuex:init', () => {
146+
store.commit('vuex/INIT')
147+
})
149148

150-
bridge.on('vuex:mutation', payload => {
151-
store.commit('vuex/RECEIVE_MUTATION', payload)
152-
})
149+
bridge.on('vuex:mutation', payload => {
150+
store.commit('vuex/RECEIVE_MUTATION', payload)
151+
})
153152

154-
bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
155-
store.commit('vuex/RECEIVE_STATE', { index, snapshot })
153+
bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
154+
store.commit('vuex/RECEIVE_STATE', { index, snapshot })
156155

157-
if (index === -1) {
158-
store.commit('vuex/UPDATE_BASE_STATE', snapshot)
159-
} else if (store.getters['vuex/absoluteInspectedIndex'] === index) {
160-
store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
161-
}
156+
if (index === -1) {
157+
store.commit('vuex/UPDATE_BASE_STATE', snapshot)
158+
} else if (store.getters['vuex/absoluteInspectedIndex'] === index) {
159+
store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
160+
}
162161

163-
if (VuexResolve.travel) {
164-
VuexResolve.travel(snapshot)
165-
}
162+
if (VuexResolve.travel) {
163+
VuexResolve.travel(snapshot)
164+
}
166165

167-
requestAnimationFrame(() => {
168-
SharedData.snapshotLoading = false
166+
requestAnimationFrame(() => {
167+
SharedData.snapshotLoading = false
168+
})
169169
})
170-
})
171170

172-
bridge.on('event:triggered', payload => {
173-
store.commit('events/RECEIVE_EVENT', parse(payload))
174-
if (router.currentRoute.name !== 'events') {
175-
store.commit('events/INCREASE_NEW_EVENT_COUNT')
176-
}
177-
})
171+
bridge.on('event:triggered', payload => {
172+
store.commit('events/RECEIVE_EVENT', parse(payload))
173+
if (router.currentRoute.name !== 'events') {
174+
store.commit('events/INCREASE_NEW_EVENT_COUNT')
175+
}
176+
})
178177

179-
bridge.on('router:init', payload => {
180-
store.commit('router/INIT', parse(payload))
181-
})
178+
bridge.on('router:init', payload => {
179+
store.commit('router/INIT', parse(payload))
180+
})
182181

183-
bridge.on('router:changed', payload => {
184-
store.commit('router/CHANGED', parse(payload))
185-
})
182+
bridge.on('router:changed', payload => {
183+
store.commit('router/CHANGED', parse(payload))
184+
})
186185

187-
bridge.on('routes:init', payload => {
188-
store.commit('routes/INIT', parse(payload))
189-
})
186+
bridge.on('routes:init', payload => {
187+
store.commit('routes/INIT', parse(payload))
188+
})
190189

191-
bridge.on('routes:changed', payload => {
192-
store.commit('routes/CHANGED', parse(payload))
193-
})
190+
bridge.on('routes:changed', payload => {
191+
store.commit('routes/CHANGED', parse(payload))
192+
})
194193

195-
bridge.on('events:reset', () => {
196-
store.commit('events/RESET')
197-
})
194+
bridge.on('events:reset', () => {
195+
store.commit('events/RESET')
196+
})
198197

199-
bridge.on('inspect-instance', id => {
200-
ensurePaneShown(() => {
201-
bridge.send('select-instance', id)
202-
router.push({ name: 'components' })
203-
const instance = store.state.components.instancesMap[id]
204-
instance && store.dispatch('components/toggleInstance', {
205-
instance,
206-
expanded: true,
207-
parent: true
198+
bridge.on('inspect-instance', id => {
199+
ensurePaneShown(() => {
200+
bridge.send('select-instance', id)
201+
router.push({ name: 'components' })
202+
const instance = store.state.components.instancesMap[id]
203+
instance && store.dispatch('components/toggleInstance', {
204+
instance,
205+
expanded: true,
206+
parent: true
207+
})
208208
})
209209
})
210-
})
211210

212-
bridge.on('perf:add-metric', data => {
213-
store.commit('perf/ADD_METRIC', data)
214-
})
211+
bridge.on('perf:add-metric', data => {
212+
store.commit('perf/ADD_METRIC', data)
213+
})
215214

216-
bridge.on('perf:upsert-metric', ({ type, data }) => {
217-
store.commit('perf/UPSERT_METRIC', { type, data })
218-
})
215+
bridge.on('perf:upsert-metric', ({ type, data }) => {
216+
store.commit('perf/UPSERT_METRIC', { type, data })
217+
})
219218

220-
initEnv(Vue)
221-
222-
app = new Vue({
223-
extends: App,
224-
router,
225-
store,
226-
227-
data: {
228-
isBeta
229-
},
230-
231-
watch: {
232-
'$shared.theme': {
233-
handler (value) {
234-
if (value === 'dark' || value === 'high-contrast' || (value === 'auto' && chromeTheme === 'dark')) {
235-
document.body.classList.add('vue-ui-dark-mode')
236-
} else {
237-
document.body.classList.remove('vue-ui-dark-mode')
238-
}
239-
if (value === 'high-contrast') {
240-
document.body.classList.add('vue-ui-high-contrast')
241-
} else {
242-
document.body.classList.remove('vue-ui-high-contrast')
243-
}
244-
},
245-
immediate: true
219+
initEnv(Vue)
220+
221+
app = new Vue({
222+
extends: App,
223+
router,
224+
store,
225+
226+
data: {
227+
isBeta
228+
},
229+
230+
watch: {
231+
'$shared.theme': {
232+
handler (value) {
233+
if (value === 'dark' || value === 'high-contrast' || (value === 'auto' && chromeTheme === 'dark')) {
234+
document.body.classList.add('vue-ui-dark-mode')
235+
} else {
236+
document.body.classList.remove('vue-ui-dark-mode')
237+
}
238+
if (value === 'high-contrast') {
239+
document.body.classList.add('vue-ui-high-contrast')
240+
} else {
241+
document.body.classList.remove('vue-ui-high-contrast')
242+
}
243+
},
244+
immediate: true
245+
}
246246
}
247-
}
248-
}).$mount('#app')
247+
}).$mount('#app')
248+
})
249249
})
250250
}
251251

‎packages/shared-utils/src/shared-data.js

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -41,31 +41,61 @@ let persist = false
4141
let vm
4242

4343
export function init (params) {
44-
// Mandatory params
45-
bridge = params.bridge
46-
Vue = params.Vue
47-
persist = !!params.persist
44+
return new Promise((resolve, reject) => {
45+
// Mandatory params
46+
bridge = params.bridge
47+
Vue = params.Vue
48+
persist = !!params.persist
4849

49-
// Load persisted fields
50-
persisted.forEach(key => {
51-
const value = storage.get(`shared-data:${key}`)
52-
if (value !== null) {
53-
internalSharedData[key] = value
54-
// Send to other shared data clients
55-
if (persist) {
56-
sendValue(key, value)
57-
}
50+
if (persist) {
51+
if (process.env.NODE_ENV !== 'production') console.log('[shared data] Master init in progress...')
52+
// Load persisted fields
53+
persisted.forEach(key => {
54+
const value = storage.get(`shared-data:${key}`)
55+
if (value !== null) {
56+
internalSharedData[key] = value
57+
}
58+
})
59+
bridge.once('shared-data:load', () => {
60+
// Send all fields
61+
Object.keys(internalSharedData).forEach(key => {
62+
sendValue(key, internalSharedData[key])
63+
})
64+
bridge.send('shared-data:load-complete')
65+
})
66+
bridge.once('shared-data:init-complete', () => {
67+
if (process.env.NODE_ENV !== 'production') console.log('[shared data] Master init complete')
68+
resolve()
69+
})
70+
71+
bridge.send('shared-data:init-waiting')
72+
// In case backend init is executed after frontend
73+
bridge.once('shared-data:init-waiting', () => {
74+
bridge.send('shared-data:init-waiting')
75+
})
76+
} else {
77+
if (process.env.NODE_ENV !== 'production') console.log('[shared data] Slave init in progress...')
78+
bridge.once('shared-data:init-waiting', () => {
79+
// Load all persisted shared data
80+
bridge.send('shared-data:load')
81+
bridge.once('shared-data:load-complete', () => {
82+
if (process.env.NODE_ENV !== 'production') console.log('[shared data] Slave init complete')
83+
bridge.send('shared-data:init-complete')
84+
resolve()
85+
})
86+
})
87+
bridge.send('shared-data:init-waiting')
5888
}
59-
})
6089

61-
// Wrapper Vue instance
62-
vm = new Vue({
63-
data: internalSharedData
64-
})
90+
// Wrapper Vue instance
91+
vm = new Vue({
92+
data: internalSharedData
93+
})
6594

66-
// Update value from other shared data clients
67-
bridge.on('shared-data:set', ({ key, value }) => {
68-
setValue(key, value)
95+
// Update value from other shared data clients
96+
bridge.on('shared-data:set', ({ key, value }) => {
97+
setValue(key, value)
98+
})
6999
})
70100
}
71101

0 commit comments

Comments
 (0)