veer/setup.js at main · MadCoderme/veer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { routes } from "./routes.config.js"

let createApp
window.onload = async() => {
    await window.prerender()
    import('vue')
        .then(component => {
            createApp = component.createApp
            Setup.serve('main')
        })
}

window.app = null
const Setup = {
    serve: (container) => {
        mountPath(window.location.hash, container, true)
        window.addEventListener('hashchange', () => {
            mountPath(window.location.hash, container)
        })
    },
    updateMetaInformation: (el) => {
        let metatags = {}
        el.meta.forEach(meta => {
            metatags[meta.name] = meta.content
        })

        document.title = metatags?.title
        document.querySelector('meta[name="description"]')?.setAttribute("content", metatags?.description)
    }
}

const mountPath = (route, container, isFirstTime) => {
    if (route) {
        const p = routes.find(el => el.path === route.replace('#', ''))
        Setup.updateMetaInformation(p)
        import('./bundles/' + p.component.replace('.vue', '.js'))
            .then((script) => {
                if (window.app) window.app.unmount()
                window.app = createApp(script.default)
                window.app.mount(container)
            })
    }
    else
    {
        let mainUrl = window.location.pathname
        const p = routes.find(el => el.path === mainUrl)
        Setup.updateMetaInformation(p)
        import('./bundles/' + p.component.replace('.vue', '.js'))
            .then((script) => {
                if (window.app) window.app.unmount()
                window.app = createApp(script.default)
                window.app.mount(container)
                window.history.replaceState(null, '', window.location.origin + '/#' + p.path)
            })
    }
}

export default Setup