blessing-skin-server/resources/assets/src/index.tsx
2020-02-06 14:54:23 +08:00

45 lines
1.1 KiB
TypeScript

import Vue from 'vue'
import * as React from 'react'
import ReactDOM from 'react-dom'
import './scripts/app'
import routes from './scripts/route'
Vue.config.productionTip = false
loadModules()
function loadModules() {
const route = routes.find(
// eslint-disable-next-line no-shadow
route => new RegExp(`^${route.path}$`, 'i').test(blessing.route),
)
if (route) {
if (route.module) {
Promise.all(route.module.map(m => m()))
}
if (route.react) {
const Component = React.lazy(
route.react as (() => Promise<{ default: React.ComponentType }>)
)
const Root = () => (
<React.Suspense fallback={route.frame?.() ?? ''}>
<Component />
</React.Suspense>
)
if (typeof route.el === 'string') {
ReactDOM.render(<Root />, document.querySelector(route.el))
} else {
ReactDOM.render(<Root />, route.el)
}
}
if (route.component) {
Vue.prototype.$route = new RegExp(`^${route.path}$`, 'i').exec(blessing.route)
// eslint-disable-next-line no-new
new Vue({
el: route.el,
render: h => h(route.component),
})
}
}
}