Add vue 3 and compat

front/babel.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-  ],
-  plugins: [
-    '@babel/plugin-transform-runtime',
-    function () {
-      return {
-        visitor: {
-          MetaProperty(path) {
-            path.replaceWithSourceString('process')
-          },
-        },
-      }
-    },
-  ],
-}

front/package.json

@@ -17,8 +17,8 @@
     "postinstall": "yarn run fix-fomantic-css"
   },
   "dependencies": {
-    "@vue/composition-api": "1.4.9",
+    "@vue/compat": "3.2.33",
-    "@vueuse/core": "8.2.5",
+    "@vueuse/core": "8.2.6",
     "axios": "0.26.1",
     "axios-auth-refresh": "3.2.2",
     "diff": "5.0.0",
@@ -35,12 +35,13 @@
     "sass": "1.49.11",
     "showdown": "2.0.3",
     "text-clipper": "2.2.0",
-    "vue": "2.6.14",
+    "vue": "3.2.33",
     "vue-gettext": "2.1.12",
     "vue-lazyload": "1.3.4",
     "vue-plyr": "7.0.0",
     "vue-router": "3.5.4",
     "vue-upload-component": "2.8.22",
+    "vue3-gettext": "2.2.0-alpha.1",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",
     "vuex-persistedstate": "4.1.0",
@@ -54,6 +55,7 @@
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
     "@typescript-eslint/eslint-plugin": "5.19.0",
+    "@vitejs/plugin-vue": "2.3.1",
     "@vue/eslint-config-standard": "6.1.0",
     "@vue/eslint-config-typescript": "10.0.0",
     "@vue/test-utils": "1.3.0",
@@ -73,12 +75,10 @@
     "jest-cli": "27.5.1",
     "moxios": "0.4.0",
     "sinon": "13.0.2",
+    "typescript": "^4.6.3",
     "ts-jest": "27.1.4",
-    "typescript": "4.6.3",
-    "unplugin-vue2-script-setup": "0.10.2",
     "vite": "2.8.6",
     "vite-plugin-pwa": "0.12.0",
-    "vite-plugin-vue2": "1.9.3",
     "vue-jest": "3.0.7",
     "vue-template-compiler": "2.6.14",
     "workbox-core": "6.5.3",
@@ -89,33 +89,6 @@
   "resolutions": {
     "vue-plyr/plyr": "3.6.12"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "browser": true,
-      "node": true
-    },
-    "plugins": [
-      "html"
-    ],
-    "rules": {
-      "no-console": 0,
-      "no-unused-vars": [
-        2,
-        {
-          "vars": "all",
-          "args": "none"
-        }
-      ]
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
   "postcss": {
     "plugins": {
       "autoprefixer": {}

front/src/App.vue

@@ -12,7 +12,7 @@ import ReportModal from '~/components/moderation/ReportModal.vue'
 import { useIntervalFn, useWindowSize } from '@vueuse/core'
 import GlobalEvents from '~/components/utils/global-events.vue'
 
-import { computed, nextTick, onMounted, ref, watchEffect } from '@vue/composition-api'
+import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import store from '~/store'
 import {
   ListenWSEvent,

front/src/components/common/Message.vue

@@ -1,27 +1,34 @@
+<script setup lang="ts">
+import $ from 'jquery'
+import { onMounted } from 'vue'
+import store from '~/store'
+
+interface Message {
+  content: string
+  key: string
+}
+
+const props = defineProps<{ message: Message }>()
+
+onMounted(() => {
+  const params = {
+    context: '#app',
+    message: props.message.content,
+    showProgress: 'top',
+    position: 'bottom right',
+    progressUp: true,
+    onRemove () {
+      store.commit('ui/removeMessage', props.message.key)
+    },
+    ...props.message
+  }
+
+  // @ts-ignore
+  $('body').toast(params)
+  $('.ui.toast.visible').last().attr('role', 'alert')
+})
+</script>
+
 <template>
   <div />
 </template>
-<script>
-import $ from 'jquery'
-
-export default {
-  props: { message: { type: Object, required: true } },
-  mounted () {
-    const self = this
-    const params = {
-      context: '#app',
-      message: this.message.content,
-      showProgress: 'top',
-      position: 'bottom right',
-      progressUp: true,
-      onRemove () {
-        self.$store.commit('ui/removeMessage', self.message.key)
-      },
-      ...this.message
-    }
-    $('body').toast(params)
-
-    $('.ui.toast.visible').last().attr('role', 'alert')
-  }
-}
-</script>

front/src/composables/useThemeList.ts

@@ -1,7 +1,7 @@
 import type { ThemeEntry } from '~/types'
-import Vue from 'vue'
+import { gettext } from '~/init/locale'
 
-const { $pgettext } = Vue.prototype
+const { $pgettext } = gettext
 
 const themeList: ThemeEntry[] = [
   {

front/src/init/instance.ts

@@ -1,5 +1,5 @@
-import { InitModule } from '~/types'
+import { AppModule } from '~/types'
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import axios from 'axios'
 
 export const install: InitModule = async ({ store, router }) => {

front/src/init/locale.ts

@@ -1,36 +1,24 @@
-import Vue from 'vue'
+import { watch } from 'vue'
-import GetText from 'vue-gettext'
+import { locales } from '~/locales'
-import locales from '~/locales.json'
 import { usePreferredLanguages } from '@vueuse/core'
-import { watch } from '@vue/composition-api'
+import { createGettext } from 'vue3-gettext'
 import { InitModule } from '~/types'
+import store from '~/store'
+
+const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
+const availableLanguages = locales.reduce((map: { [key: string]: string }, locale) => {
+  map[locale.code] = locale.label
+  return map
+}, {})
+
+export const gettext = createGettext({
+  availableLanguages,
+  defaultLanguage,
+  silent: true
+})
 
 export const install: InitModule = ({ store, app }) => {
-  const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
+  app.use(gettext)
-  const availableLanguages = locales.reduce((map: { [key: string]: string }, locale) => {
-    map[locale.code] = locale.label
-    return map
-  }, {})
-
-  app.use(GetText, {
-    availableLanguages,
-    defaultLanguage,
-
-    // cf https://github.com/Polyconseil/vue-gettext#configuration
-    // not recommended but this is fixing weird bugs with translation nodes
-    // not being updated when in v-if/v-else clauses
-    autoAddKeyAttributes: true,
-    languageVmMixin: {
-      computed: {
-        currentKebabCase (): string {
-          // @ts-ignore
-          return this.current.toLowerCase().replace('_', '-')
-        }
-      }
-    },
-    translations: {},
-    silent: true
-  })
 
   // Set default language
   if (!store.state.ui.selectedLanguage) {
@@ -58,7 +46,7 @@ export const install: InitModule = ({ store, app }) => {
     document.documentElement.setAttribute('lang', htmlLocale)
 
     if (locale === 'en_US') {
-      Vue.config.language = locale
+      gettext.current = locale
       store.commit('ui/momentLocale', 'en')
     }
   }, { immediate: true })

front/src/init/webSocket.ts

@@ -1,5 +1,5 @@
 import { InitModule } from '~/types'
-import { watchEffect, watch } from '@vue/composition-api'
+import { watchEffect, watch } from 'vue'
 import { useWebSocket, whenever } from '@vueuse/core'
 
 export const install: InitModule = ({ store }) => {

front/src/init/window.ts

@@ -1,6 +1,6 @@
 import { InitModule } from '~/types'
 import { useWindowSize } from '@vueuse/core'
-import { watchEffect } from '@vue/composition-api'
+import { watchEffect } from 'vue'
 
 export const install: InitModule = ({ store }) => {
   // NOTE: Due to Vuex 3, when using store in watchEffect, it results in an infinite loop after committing

front/src/main.ts

@@ -3,8 +3,7 @@ import router from '~/router'
 import VueLazyload from 'vue-lazyload'
 import store from '~/store'
 import { sync } from 'vuex-router-sync'
-import VueCompositionAPI, { createApp } from '@vue/composition-api'
+import Vue, { createApp } from 'vue'
-import Vue, { CreateElement } from 'vue'
 import useTheme from '~/composables/useTheme'
 useTheme()
 
@@ -25,16 +24,16 @@ const app = createApp({
   async mounted () {
     this.isMounted = true
   },
-  render (h: CreateElement) {
+  render (h) {
     if (this.isMounted) {
       return h('app')
     }
 
+    // TODO (wvffle): Import fake app component
     return h()
   }
 })
 
-app.use(VueCompositionAPI)
 app.use(VueLazyload)
 
 const modules: Promise<unknown>[] = []

front/src/shims-vue2.d.ts

@@ -0,0 +1,8 @@
+declare module 'vue' {
+  import { CompatVue } from '@vue/runtime-dom'
+  const Vue: CompatVue
+  export default Vue
+  export * from '@vue/runtime-dom'
+  const { configureCompat } = Vue
+  export { configureCompat }
+}

front/src/store/ui.js

@@ -268,19 +268,16 @@ export default {
         key: String(new Date()),
         ...message
       }
+
       const key = finalMessage.key
-      state.messages = state.messages.filter((m) => {
+      state.messages.splice(state.messages.findIndex(message => message.key === key), 1)
-        return m.key !== key
-      })
       state.messages.push(finalMessage)
       if (state.messages.length > state.maxMessages) {
         state.messages.shift()
       }
     },
     removeMessage (state, key) {
-      state.messages = state.messages.filter((m) => {
+      state.messages.splice(state.messages.findIndex(message => message.key === key), 1)
-        return m.key !== key
-      })
     },
     notifications (state, { type, count }) {
       state.notifications[type] = count

front/src/types.ts

@@ -1,4 +1,4 @@
-import type { App } from '@vue/composition-api'
+import type { App } from 'vue'
 import type { Store } from 'vuex'
 import type VueRouter from 'vue-router'
 

front/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, HmrOptions } from 'vite'
-import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
+import Vue from '@vitejs/plugin-vue'
-import ScriptSetup from 'unplugin-vue2-script-setup/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import { resolve } from 'path'
 
@@ -23,10 +22,15 @@ export default defineConfig(() => ({
   envPrefix: 'VUE_',
   plugins: [
     // https://github.com/underfin/vite-plugin-vue2
-    Vue2(),
+    Vue({
-
+      template: {
-    // https://github.com/antfu/unplugin-vue2-script-setup
+        compilerOptions: {
-    ScriptSetup(),
+          compatConfig: {
+            MODE: 2
+          }
+        }
+      }
+    }),
 
     // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
@@ -52,6 +56,7 @@ export default defineConfig(() => ({
   server: { port, hmr },
   resolve: {
     alias: {
+      vue: '@vue/compat',
       '~': resolve(__dirname, './src')
     }
   },