some bare minimum to get vue3 boot (no UI yet)

This commit is contained in:
Henry Jameson 2021-04-24 17:56:00 +03:00
parent 8b96ea9377
commit ced9c0fa7e
7 changed files with 585 additions and 316 deletions

View file

@ -1,5 +1,5 @@
{ {
"presets": ["@babel/preset-env"], "presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"], "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
"comments": false "comments": false
} }

View file

@ -3,6 +3,7 @@ var config = require('../config')
var utils = require('./utils') var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var { VueLoaderPlugin } = require('vue-loader')
var env = process.env.NODE_ENV var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -28,12 +29,12 @@ module.exports = {
} }
}, },
resolve: { resolve: {
extensions: ['.js', '.vue'], extensions: ['.js', '.vue', '.jsx'],
modules: [ modules: [
path.join(__dirname, '../node_modules') path.join(__dirname, '../node_modules')
], ],
alias: { alias: {
'vue$': 'vue/dist/vue.runtime.common', vue: "@vue/runtime-dom",
'static': path.resolve(__dirname, '../static'), 'static': path.resolve(__dirname, '../static'),
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'), 'assets': path.resolve(__dirname, '../src/assets'),
@ -93,6 +94,7 @@ module.exports = {
new ServiceWorkerWebpackPlugin({ new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, '..', 'src/sw.js'), entry: path.join(__dirname, '..', 'src/sw.js'),
filename: 'sw-pleroma.js' filename: 'sw-pleroma.js'
}) }),
new VueLoaderPlugin()
] ]
} }

View file

@ -17,11 +17,12 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.7.6", "@babel/runtime": "^7.7.6",
"@chenfengyuan/vue-qrcode": "^1.0.0", "@chenfengyuan/vue-qrcode": "^2.0.0-beta",
"@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/vue-fontawesome": "^2.0.0", "@fortawesome/vue-fontawesome": "^3.0.0-3",
"@vue/compiler-sfc": "^3.0.7",
"body-scroll-lock": "^2.6.4", "body-scroll-lock": "^2.6.4",
"chromatism": "^3.0.0", "chromatism": "^3.0.0",
"cropperjs": "^1.4.3", "cropperjs": "^1.4.3",
@ -30,15 +31,14 @@
"localforage": "^1.5.0", "localforage": "^1.5.0",
"parse-link-header": "^1.0.1", "parse-link-header": "^1.0.1",
"phoenix": "^1.3.0", "phoenix": "^1.3.0",
"portal-vue": "^2.1.4",
"punycode.js": "^2.1.0", "punycode.js": "^2.1.0",
"qrcode": "^1.4.4",
"v-click-outside": "^2.1.1", "v-click-outside": "^2.1.1",
"vue": "^2.6.11", "vue": "^3.0.7",
"vue-i18n": "^7.3.2", "vue-i18n": "^9.0.0-beta.18",
"vue-router": "^3.0.1", "vue-router": "^4.0.5",
"vue-template-compiler": "^2.6.11", "vuelidate": "^0.7.6",
"vuelidate": "^0.7.4", "vuex": "^4.0.0"
"vuex": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.7.5", "@babel/core": "^7.7.5",
@ -47,8 +47,9 @@
"@babel/register": "^7.7.4", "@babel/register": "^7.7.4",
"@ungap/event-target": "^0.1.0", "@ungap/event-target": "^0.1.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-plugin-jsx": "^1.0.3",
"@vue/babel-plugin-transform-vue-jsx": "^1.1.2", "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
"@vue/test-utils": "^1.0.0-beta.26", "@vue/test-utils": "^2.0.0-beta.8",
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
"babel-eslint": "^7.0.0", "babel-eslint": "^7.0.0",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
@ -109,7 +110,7 @@
"stylelint-config-standard": "^20.0.0", "stylelint-config-standard": "^20.0.0",
"stylelint-rscss": "^0.4.0", "stylelint-rscss": "^0.4.0",
"url-loader": "^1.1.2", "url-loader": "^1.1.2",
"vue-loader": "^14.0.0", "vue-loader": "^16.1.2",
"vue-style-loader": "^4.0.0", "vue-style-loader": "^4.0.0",
"webpack": "^4.0.0", "webpack": "^4.0.0",
"webpack-dev-middleware": "^3.6.0", "webpack-dev-middleware": "^3.6.0",

View file

@ -46,7 +46,7 @@ export default {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
destroyed () { unmounted () {
window.removeEventListener('resize', this.updateMobileState) window.removeEventListener('resize', this.updateMobileState)
}, },
computed: { computed: {

View file

@ -1,7 +1,13 @@
import Vue from 'vue' import { createApp } from 'vue'
import VueRouter from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes' import VueClickOutside from 'v-click-outside'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import App from '../App.vue' import App from '../App.vue'
import routes from './routes'
import VBodyScrollLock from 'src/directives/body_scroll_lock'
import { windowWidth } from '../services/window_utils/window_utils' import { windowWidth } from '../services/window_utils/window_utils'
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@ -366,25 +372,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
getTOS({ store }) getTOS({ store })
getStickers({ store }) getStickers({ store })
const router = new VueRouter({ const router = createRouter({
mode: 'history', history: createWebHistory(),
routes: routes(store), routes: routes(store),
scrollBehavior: (to, _from, savedPosition) => { scrollBehavior: (to, _from, savedPosition) => {
if (to.matched.some(m => m.meta.dontScroll)) { if (to.matched.some(m => m.meta.dontScroll)) {
return false return false
} }
return savedPosition || { x: 0, y: 0 } return savedPosition || { left: 0, top: 0 }
} }
}) })
/* eslint-disable no-new */ const app = createApp(App)
return new Vue({
router, app.use(router)
store, app.use(store)
i18n, app.use(i18n)
el: '#app',
render: h => h(App) app.use(VueClickOutside)
}) app.use(VBodyScrollLock)
app.component('FAIcon', FontAwesomeIcon)
app.component('FALayers', FontAwesomeLayers)
app.mount('#app')
return app
} }
export default afterStoreSetup export default afterStoreSetup

View file

@ -1,6 +1,4 @@
import Vue from 'vue' import { createStore } from 'vuex'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import 'custom-event-polyfill' import 'custom-event-polyfill'
import './lib/event_target_polyfill.js' import './lib/event_target_polyfill.js'
@ -21,34 +19,18 @@ import pollsModule from './modules/polls.js'
import postStatusModule from './modules/postStatus.js' import postStatusModule from './modules/postStatus.js'
import chatsModule from './modules/chats.js' import chatsModule from './modules/chats.js'
import VueI18n from 'vue-i18n' import { createI18n } from 'vue-i18n'
import createPersistedState from './lib/persisted_state.js' import createPersistedState from './lib/persisted_state.js'
import pushNotifications from './lib/push_notifications_plugin.js' import pushNotifications from './lib/push_notifications_plugin.js'
import messages from './i18n/messages.js' import messages from './i18n/messages.js'
import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue'
import VBodyScrollLock from './directives/body_scroll_lock'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import afterStoreSetup from './boot/after_store.js' import afterStoreSetup from './boot/after_store.js'
const currentLocale = (window.navigator.language || 'en').split('-')[0] const currentLocale = (window.navigator.language || 'en').split('-')[0]
Vue.use(Vuex) const i18n = createI18n({
Vue.use(VueRouter)
Vue.use(VueI18n)
Vue.use(VueClickOutside)
Vue.use(PortalVue)
Vue.use(VBodyScrollLock)
Vue.component('FAIcon', FontAwesomeIcon)
Vue.component('FALayers', FontAwesomeLayers)
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary // By default, use the browser locale, we will update it if neccessary
locale: 'en', locale: 'en',
fallbackLocale: 'en', fallbackLocale: 'en',
@ -75,7 +57,7 @@ const persistedStateOptions = {
console.error(e) console.error(e)
storageError = true storageError = true
} }
const store = new Vuex.Store({ const store = createStore({
modules: { modules: {
i18n: { i18n: {
getters: { getters: {

799
yarn.lock

File diff suppressed because it is too large Load diff