optimize bundle size and resize/sharp image upload

fix #11

client/babel.config.js

@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/app' //, 'es2015', { 'modules': false }
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        'libraryName': 'element-ui',
+        'styleLibraryName': 'theme-chalk'
+      }
+    ]
   ]
 }

client/package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "babel-plugin-component": "^1.1.1",
     "bootstrap-vue": "^2.0.0-rc.13",
+    "dayjs": "^1.8.9",
     "element-ui": "^2.6.1",
     "mastodon-api": "^1.3.0",
-    "moment": "^2.23.0",
     "node-sass": "^4.11.0",
     "npm": "^6.8.0",
     "postcss-flexbugs-fixes": "^4.1.0",

client/src/App.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import moment from 'moment'
+import moment from 'dayjs'
 import api from '@/api'
 import { mapActions } from 'vuex';
 import Register from '@/components/Register'

client/src/components/Calendar.vue

@@ -9,7 +9,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import filters from '@/filters'
-import moment from 'moment'
+import moment from 'dayjs'
 import { intersection } from 'lodash'
 
 export default {

client/src/components/Home.vue

@@ -15,7 +15,7 @@ import filters from '@/filters.js'
 import Event from '@/components/Event'
 import Calendar from '@/components/Calendar'
 import {intersection} from 'lodash'
-import moment from 'moment'
+import moment from 'dayjs'
 import Search from '@/components/Search'
 
 export default {

client/src/components/newEvent.vue

@@ -57,7 +57,7 @@
 <script>
 import api from '@/api'
 import { mapActions, mapState } from 'vuex'
-import moment from 'moment'
+import moment from 'dayjs'
 import Calendar from './Calendar'
 export default {
   components: { Calendar },
@@ -158,10 +158,9 @@ export default {
         end_datetime = moment(this.date.end)
           .hour(end_hour).minute(end_minute)
       } else {
-        start_datetime = moment(this.date)
-          .hour(start_hour).minute(start_minute)
-        end_datetime = moment(this.date)
-          .hour(end_hour).minute(end_minute)
+        console.log(this.date)
+        start_datetime = moment(this.date).set('hour', start_hour).set('minute', start_minute)
+        end_datetime = moment(this.date).set('hour', end_hour).set('minute', end_minute)
       }
       const formData = new FormData()
 

client/src/filters.js

@@ -1,5 +1,5 @@
-import moment from 'moment'
-moment.locale('it')
+import moment from 'dayjs'
+// moment.locale('it')
 
 export default {
   datetime (value) {

client/src/main.js

@@ -3,7 +3,6 @@ import VueI18n from 'vue-i18n'
 import BootstrapVue from 'bootstrap-vue'
 import VCalendar from 'v-calendar'
 
-// import 'vue-awesome/icons'
 import 'vue-awesome/icons/lock'
 import 'vue-awesome/icons/plus'
 import 'vue-awesome/icons/cog'
@@ -25,9 +24,14 @@ import VueClipboard from 'vue-clipboard2'
 
 import 'v-calendar/lib/v-calendar.min.css'
 import 'bootstrap/dist/css/bootstrap.css'
-// import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import { Button, Select, Tag, Option, Table, FormItem,
+  Form, Tabs, TabPane, Switch, Input, Loading, TimeSelect,
+  TableColumn, ColorPicker, Pagination } from 'element-ui'
+import ElementLocale from 'element-ui/lib/locale'
+
 
-import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
 import itElementLocale from 'element-ui/lib/locale/lang/it'
@@ -42,6 +46,23 @@ import './assets/main.css'
 import itLocale from '@/locale/it'
 import enLocale from '@/locale/en'
 
+Vue.use(Button)
+Vue.use(Select)
+Vue.use(Tag)
+Vue.use(Input)
+Vue.use(Tabs)
+Vue.use(TabPane)
+Vue.use(Option)
+Vue.use(Switch)
+Vue.use(ColorPicker)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(Pagination)
+Vue.use(FormItem)
+Vue.use(Form)
+Vue.use(TimeSelect)
+Vue.use(Loading.directive)
+
 // Use v-calendar, v-date-picker & v-popover components
 Vue.use(VCalendar, {
   firstDayOfWeek: 2
@@ -50,7 +71,6 @@ Vue.use(BootstrapVue)
 Vue.use(VueI18n)
 Vue.use(VueClipboard)
 Vue.component('v-icon', Icon)
-
 const messages = {
   en: {
     ...enElementLocale,
@@ -68,13 +88,14 @@ const i18n = new VueI18n({
   messages // set locale messages
 })
 
-Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
+// Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
 
 Vue.config.productionTip = false
 Vue.config.lang = 'it'
+// Vue.locale('en', enLocale)
 Vue.config.devtools = true
 Vue.config.silent = false
-
+ElementLocale.i18n((key, value) => i18n.t(key, value))
 new Vue({
   i18n,
   router,

client/src/store.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import { intersection } from 'lodash'
 import api from './api'
-import moment from 'moment'
+import moment from 'dayjs'
 Vue.use(Vuex)
 
 const vuexLocal = new VuexPersistence({

client/vue.config.js

@@ -1,9 +1,16 @@
+const webpack = require('webpack')
+
 process.env.VUE_APP_API = process.env.NODE_ENV === 'production' ? process.env.BASE_URL || 'http://localhost:9000' : 'http://localhost:9000'
 process.env.VUE_APP_TITLE = process.env.TITLE || 'Gancio'
 process.env.VUE_APP_DESCRIPTION = process.env.DESCRIPTION || 'Event manager for radical movements'
 
 module.exports = {
   publicPath: process.env.BASE_URL,
+  configureWebpack: {
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+    ]
+  },
   devServer: {
     disableHostCheck: true
   },