wikijs-fork/client/client-app.js

215 lines
6.8 KiB
JavaScript
Raw Normal View History

/* global siteConfig */
2017-05-21 03:21:16 +00:00
import Vue from 'vue'
2018-02-28 05:54:09 +00:00
import VueRouter from 'vue-router'
2017-05-22 17:32:52 +00:00
import VueClipboards from 'vue-clipboards'
import VueSimpleBreakpoints from 'vue-simple-breakpoints'
import VeeValidate from 'vee-validate'
2017-10-28 18:17:14 +00:00
import { ApolloClient } from 'apollo-client'
import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
import { BatchHttpLink } from 'apollo-link-batch-http'
import { ApolloLink, split } from 'apollo-link'
// import { createHttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws'
import { ErrorLink } from 'apollo-link-error'
2017-10-28 18:17:14 +00:00
import { InMemoryCache } from 'apollo-cache-inmemory'
import { getMainDefinition } from 'apollo-utilities'
import VueApollo from 'vue-apollo'
2018-02-18 03:18:37 +00:00
import Vuetify from 'vuetify'
import Velocity from 'velocity-animate'
2018-02-03 21:48:25 +00:00
import Hammer from 'hammerjs'
2018-03-26 05:11:49 +00:00
import moment from 'moment'
import VueMoment from 'vue-moment'
2018-07-16 02:40:41 +00:00
import VueTour from 'vue-tour'
import VueTreeNavigation from 'vue-tree-navigation'
import store from './store'
import Cookies from 'js-cookie'
2017-12-24 05:34:47 +00:00
// ====================================
// Load Modules
// ====================================
2018-02-03 21:48:25 +00:00
import boot from './modules/boot'
import localization from './modules/localization'
// ====================================
// Load Helpers
// ====================================
import helpers from './helpers'
// ====================================
// Initialize Global Vars
// ====================================
window.WIKI = null
2018-02-03 21:48:25 +00:00
window.boot = boot
window.Hammer = Hammer
moment.locale(siteConfig.lang)
// ====================================
// Initialize Apollo Client (GraphQL)
// ====================================
const graphQLEndpoint = window.location.protocol + '//' + window.location.host + '/graphql'
const graphQLWSEndpoint = ((window.location.protocol === 'https:') ? 'wss:' : 'ws:') + '//' + window.location.host + '/graphql-subscriptions'
const graphQLLink = ApolloLink.from([
new ErrorLink(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.error(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
)
store.commit('showNotification', {
style: 'red',
message: `An expected error occured.`,
icon: 'warning'
})
}
if (networkError) {
console.error(networkError)
store.commit('showNotification', {
style: 'red',
message: `Network Error: ${networkError.message}`,
icon: 'error'
})
}
}),
createPersistedQueryLink(),
new BatchHttpLink({
2018-06-26 00:55:00 +00:00
includeExtensions: true,
uri: graphQLEndpoint,
credentials: 'include',
fetch: async (uri, options) => {
2018-06-26 00:55:00 +00:00
// Strip __typename fields from variables
let body = JSON.parse(options.body)
body = body.map(bd => {
return ({
...bd,
variables: JSON.parse(JSON.stringify(bd.variables), (key, value) => { return key === '__typename' ? undefined : value })
})
})
// body = {
// ...body,
// variables: JSON.parse(JSON.stringify(body.variables), (key, value) => { return key === '__typename' ? undefined : value })
// }
2018-06-26 00:55:00 +00:00
options.body = JSON.stringify(body)
// Inject authentication token
const jwtToken = Cookies.get('jwt')
if (jwtToken) {
options.headers.Authorization = `Bearer ${jwtToken}`
}
2018-06-26 00:55:00 +00:00
const resp = await fetch(uri, options)
// Handle renewed JWT
const newJWT = resp.headers.get('new-jwt')
if (newJWT) {
Cookies.set('jwt', newJWT, { expires: 365 })
}
return resp
2018-06-26 00:55:00 +00:00
}
})
])
const graphQLWSLink = new WebSocketLink({
uri: graphQLWSEndpoint,
options: {
reconnect: true,
lazy: true
}
})
window.graphQL = new ApolloClient({
link: split(({ query }) => {
const { kind, operation } = getMainDefinition(query)
return kind === 'OperationDefinition' && operation === 'subscription'
}, graphQLWSLink, graphQLLink),
2017-10-28 18:17:14 +00:00
cache: new InMemoryCache(),
connectToDevTools: (process.env.node_env === 'development')
})
2017-05-21 03:21:16 +00:00
// ====================================
// Initialize Vue Modules
2017-05-21 03:21:16 +00:00
// ====================================
2018-03-17 02:51:56 +00:00
Vue.config.productionTip = false
2018-02-28 05:54:09 +00:00
Vue.use(VueRouter)
Vue.use(VueApollo)
2017-05-22 17:32:52 +00:00
Vue.use(VueClipboards)
Vue.use(VueSimpleBreakpoints)
Vue.use(localization.VueI18Next)
Vue.use(helpers)
Vue.use(VeeValidate, { events: '' })
2018-02-18 03:18:37 +00:00
Vue.use(Vuetify)
2018-03-26 05:11:49 +00:00
Vue.use(VueMoment, { moment })
2018-07-16 02:40:41 +00:00
Vue.use(VueTour)
Vue.use(VueTreeNavigation)
2017-05-21 03:21:16 +00:00
Vue.prototype.Velocity = Velocity
2017-07-02 02:23:40 +00:00
// ====================================
// Register Vue Components
// ====================================
2018-02-28 05:54:09 +00:00
Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
2018-09-16 22:36:15 +00:00
Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
2018-10-29 02:09:58 +00:00
Vue.component('history', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
2018-09-16 22:36:15 +00:00
Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
2018-09-23 04:14:01 +00:00
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
Vue.component('nav-sidebar', () => import(/* webpackMode: "eager" */ './components/common/nav-sidebar.vue'))
2018-09-30 22:19:28 +00:00
Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
2018-05-21 03:27:06 +00:00
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
2018-09-16 22:36:15 +00:00
Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
2017-07-02 02:23:40 +00:00
2018-02-03 21:48:25 +00:00
let bootstrap = () => {
// ====================================
// Notifications
// ====================================
2016-08-28 15:27:05 +00:00
2017-09-10 05:41:22 +00:00
window.addEventListener('beforeunload', () => {
store.dispatch('startLoading')
2017-02-09 01:52:37 +00:00
})
const apolloProvider = new VueApollo({
defaultClient: window.graphQL
})
2017-05-21 03:21:16 +00:00
// ====================================
// Bootstrap Vue
// ====================================
const i18n = localization.init()
window.WIKI = new Vue({
el: '#root',
2017-07-02 02:23:40 +00:00
components: {},
mixins: [helpers],
apolloProvider,
2017-05-21 03:21:16 +00:00
store,
2018-02-03 21:48:25 +00:00
i18n
2017-05-21 03:21:16 +00:00
})
2018-02-03 21:48:25 +00:00
// ----------------------------------
// Dispatch boot ready
// ----------------------------------
window.boot.notify('vue')
// ====================================
// Load Icons
// ====================================
// import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
// document.body.insertAdjacentHTML('beforeend', icons.default)
// })
2018-02-03 21:48:25 +00:00
}
window.boot.onDOMReady(bootstrap)