1
1
mirror of https://github.com/aelve/guide.git synced 2024-12-23 21:02:13 +03:00
guide/front/client/entry.client.ts

75 lines
2.0 KiB
TypeScript

import _get from 'lodash/get'
import { createApp } from './app'
const { app, router, store } = createApp()
const STATE_KEY = '__INITIAL_STATE__'
if (window[STATE_KEY]) {
store.replaceState(window[STATE_KEY])
}
router.onReady(() => {
registerBeforeResolve()
app.$mount('#app')
})
function registerBeforeResolve () {
router.beforeEach(async (to, from, next) => {
// This case handles navigation to anchors on same page
if (to.path === from.path) {
next()
return
}
store.commit('tooglePageLoading')
if (!to.matched.length) {
store.commit('tooglePageLoading')
next()
return
}
const propsOption = to.matched[0].props.default
const props = propsOption
? typeof propsOption === 'function'
? propsOption(to)
: typeof propsOption === 'object'
? propsOption
: to.params
: {}
const routeComponent = to.matched[0].components.default
const matchedRootComponent = routeComponent.cid // Check if component already imported
? routeComponent
: (await routeComponent()).default
const matchedComponentsAndChildren = getComponentAndItsChildren(matchedRootComponent)
await Promise.all(matchedComponentsAndChildren.map(component => {
const serverPrefetch = component.options.serverPrefetch && component.options.serverPrefetch[0]
if (typeof serverPrefetch === 'function') {
return serverPrefetch.call({
$store: store,
$router: router,
...component.options.methods,
...props
})
}
}))
store.commit('tooglePageLoading')
next()
})
}
function getComponentAndItsChildren (component, result?) {
if (!result) {
result = []
}
if (!result.includes(component)) {
result.push(component)
}
const children = Object.values(component.options.components)
// Parent component is also presents in components object
.filter(x => x !== component)
children.forEach(x => getComponentAndItsChildren(x, result))
return result
}