Update dependencies, adapt project to Vue.js 2.7 (#689)

Some changes were necessary, see https://github.com/vuejs/vue/blob/main/CHANGELOG.md#270-2022-07-01=

package.json

@@ -41,8 +41,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^2.0.6",
-    "@vue/composition-api": "^1.6.2",
+    "@fortawesome/vue-fontawesome": "^2.0.8",
     "axios": "~0.26.1",
     "bootstrap-vue": "^2.22.0",
     "cocoda-sdk": "^3.2.1",
@@ -54,24 +53,23 @@
     "json-format-highlight": "^1.0.4",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "vue": "^2.6.14",
+    "vue": "^2.7.0",
     "vue-flexible-table": "^0.3.8",
-    "vue-i18n": "^8.27.1",
+    "vue-i18n": "^8.27.2",
     "vue-router": "^3.5.4",
     "vue-scrollto": "^2.20.0",
     "vue-virtual-scroll-list": "^2.3.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "eslint": "^8.17.0",
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "eslint": "^8.19.0",
     "eslint-config-gbv": "^1.0.3",
     "eslint-plugin-vue": "^8.7.1",
     "less": "^4.1.3",
     "less-loader": "^10.2.0",
     "lint-staged": "^12.5.0",
-    "vite": "^2.9.12",
-    "vite-plugin-vue2": "^2.0.1",
-    "vue-template-compiler": "^2.6.14",
+    "vite": "^2.9.13",
     "yorkie": "^2.0.0"
   },
   "engines": {

src/components/DateString.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "@/composition-api"
+import { computed, defineComponent } from "vue"
 
 export default defineComponent({
   props: {

src/components/ItemSuggest.vue

@@ -64,7 +64,7 @@ Note: This is a 90% copy of jskos-vue's ItemSuggest component, only slightly adj
 	 * - add drag and drop for concepts
 	 */
 
-import { defineComponent, nextTick, ref, watch } from "@/composition-api"
+import { defineComponent, nextTick, ref, watch } from "vue"
 import LoadingIndicator from "./LoadingIndicator.vue"
 import VueScrollTo from "vue-scrollto"
 import clickHandler from "../mixins/click-handler.js"

src/entry/app.js

@@ -1,4 +1,4 @@
-import { createApp, h } from "@/composition-api"
+import Vue from "vue"
 import App from "../App.vue"
 import store from "../store/index.js"
 import router from "../router.js"
@@ -7,14 +7,11 @@ import i18n from "../utils/i18n.js"
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-const app = createApp({
+import "../main.js"
+
+new Vue({
   store,
   router,
   i18n,
-  render: () => h(App),
-})
-
-import { supplementApp } from "../main.js"
-supplementApp(app)
-
-app.mount("#app")
+  render: (h) => h(App),
+}).$mount("#app")

src/entry/concordanceApp.js

@@ -1,4 +1,4 @@
-import { createApp, h } from "@/composition-api"
+import Vue from "vue"
 import ConcordanceApp from "../ConcordanceApp.vue"
 import store from "../store/index.js"
 import router from "../router.js"
@@ -7,14 +7,11 @@ import i18n from "../utils/i18n.js"
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-const app = createApp({
+import "../main.js"
+
+new Vue({
   store,
   router,
   i18n,
-  render: () => h(ConcordanceApp),
-})
-
-import { supplementApp } from "../main.js"
-supplementApp(app)
-
-app.mount("#concordanceApp")
+  render: (h) => h(ConcordanceApp),
+}).$mount("#concordanceApp")

src/items/index.js

@@ -4,7 +4,7 @@
  * TODO
  */
 
-import { reactive, set, del } from "@/composition-api"
+import { reactive, set, del } from "vue"
 import _ from "lodash"
 import * as jskos from "jskos-tools"
 import { cdk } from "cocoda-sdk"

src/main.js

@@ -13,111 +13,109 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import globalMixins from "./mixins/global.js"
 
-export function supplementApp(app) {
-  // Add all providers to cocoda-sdk
-  Object.keys(CocodaSDK).filter(key => key.endsWith("Provider")).forEach(key => {
-    CocodaSDK.cdk.addProvider(CocodaSDK[key])
-  })
+// Add all providers to cocoda-sdk
+Object.keys(CocodaSDK).filter(key => key.endsWith("Provider")).forEach(key => {
+  CocodaSDK.cdk.addProvider(CocodaSDK[key])
+})
 
-  CocodaSDK.cdk.addProvider(MeshApiProvider)
+CocodaSDK.cdk.addProvider(MeshApiProvider)
 
-  // Import BootstrapVue
-  app.use(BootstrapVue)
-  // Note: bootstrap css files are imported only for the app.js entry point.
+// Import BootstrapVue
+Vue.use(BootstrapVue)
+// Note: bootstrap css files are imported only for the app.js entry point.
 
-  // Add vue-scrollto
-  app.use(VueScrollTo)
+// Add vue-scrollto
+Vue.use(VueScrollTo)
 
-  // Add jskos-tools, use with this.$jskos in components
-  Vue.prototype.$jskos = jskos
-  // Add a `compareFast` method to jskos (only compares URI)
-  jskos.compareFast = (object1, object2) => {
-    if (!object1 && !object2) {
-      return true
-    }
-    if (!object1 || !object2) {
-      return false
-    }
-    return object1.uri === object2.uri
+// Add jskos-tools, use with this.$jskos in components
+Vue.prototype.$jskos = jskos
+// Add a `compareFast` method to jskos (only compares URI)
+jskos.compareFast = (object1, object2) => {
+  if (!object1 && !object2) {
+    return true
   }
+  if (!object1 || !object2) {
+    return false
+  }
+  return object1.uri === object2.uri
+}
 
-  // Add logger, use with this.$log.log/warn/error in components
-  Vue.prototype.$log = log
+// Add logger, use with this.$log.log/warn/error in components
+Vue.prototype.$log = log
 
-  // Set Vuex store and path on jskos-tools' languagePreference
-  const storePath = "getters.languages"
-  jskos.languagePreference.store = store
-  jskos.languagePreference.path = storePath
+// Set Vuex store and path on jskos-tools' languagePreference
+const storePath = "getters.languages"
+jskos.languagePreference.store = store
+jskos.languagePreference.path = storePath
 
-  // Add cocoda-vue-tabs
-  app.component("Tabs", Tabs)
-  app.component("Tab", Tab)
+// Add cocoda-vue-tabs
+Vue.component("Tabs", Tabs)
+Vue.component("Tab", Tab)
 
-  // Add fontawesome
-  library.add(faStar)
-  library.add(faPlusCircle)
-  library.add(faExchangeAlt)
-  library.add(faThumbsUp)
-  library.add(faThumbsDown)
-  library.add(faAngleDown)
-  library.add(faAngleRight)
-  library.add(faAngleLeft)
-  library.add(faLevelUpAlt)
-  library.add(faLevelDownAlt)
-  library.add(faEllipsisV)
-  library.add(faEllipsisH)
-  library.add(faSortUp)
-  library.add(faTimesCircle)
-  library.add(faLink)
-  library.add(faIdCard)
-  library.add(faUser)
-  library.add(faSearch)
-  library.add(faFilter)
-  library.add(faCode)
-  library.add(faCog)
-  library.add(faDownload)
-  library.add(faCaretDown)
-  library.add(faInfoCircle)
-  library.add(faComment)
-  library.add(faEdit)
-  library.add(faSave)
-  library.add(faTrashAlt)
-  library.add(faBan)
-  library.add(faWindowMinimize)
-  library.add(faPlusSquare)
-  library.add(faCheck)
-  library.add(faCheckSquare)
-  library.add(faLock)
-  library.add(faLockOpen)
-  library.add(faExternalLinkSquareAlt)
-  library.add(faLongArrowAltDown)
-  library.add(faLongArrowAltUp)
-  library.add(faExternalLinkAlt)
-  library.add(faGithub)
-  library.add(faPuzzlePiece)
-  library.add(faExclamation)
-  library.add(faShareAltSquare)
-  library.add(faRecycle)
-  library.add(faCaretSquareLeft)
-  library.add(faCaretSquareRight)
-  library.add(faClipboard)
-  library.add(faAngleDoubleRight)
-  library.add(faClone)
-  library.add(faExclamationCircle)
-  library.add(faQuestionCircle)
-  library.add(faChevronUp)
-  library.add(faChevronDown)
-  library.add(faPencilAlt)
-  library.add(faArrowRight)
-  library.add(faArrowLeft)
-  library.add(faArrowUp)
-  library.add(faArrowDown)
-  library.add(faSyncAlt)
-  library.add(faList)
-  library.add(faSitemap)
-  library.add(faSeedling)
-  app.component("FontAwesomeIcon", FontAwesomeIcon)
+// Add fontawesome
+library.add(faStar)
+library.add(faPlusCircle)
+library.add(faExchangeAlt)
+library.add(faThumbsUp)
+library.add(faThumbsDown)
+library.add(faAngleDown)
+library.add(faAngleRight)
+library.add(faAngleLeft)
+library.add(faLevelUpAlt)
+library.add(faLevelDownAlt)
+library.add(faEllipsisV)
+library.add(faEllipsisH)
+library.add(faSortUp)
+library.add(faTimesCircle)
+library.add(faLink)
+library.add(faIdCard)
+library.add(faUser)
+library.add(faSearch)
+library.add(faFilter)
+library.add(faCode)
+library.add(faCog)
+library.add(faDownload)
+library.add(faCaretDown)
+library.add(faInfoCircle)
+library.add(faComment)
+library.add(faEdit)
+library.add(faSave)
+library.add(faTrashAlt)
+library.add(faBan)
+library.add(faWindowMinimize)
+library.add(faPlusSquare)
+library.add(faCheck)
+library.add(faCheckSquare)
+library.add(faLock)
+library.add(faLockOpen)
+library.add(faExternalLinkSquareAlt)
+library.add(faLongArrowAltDown)
+library.add(faLongArrowAltUp)
+library.add(faExternalLinkAlt)
+library.add(faGithub)
+library.add(faPuzzlePiece)
+library.add(faExclamation)
+library.add(faShareAltSquare)
+library.add(faRecycle)
+library.add(faCaretSquareLeft)
+library.add(faCaretSquareRight)
+library.add(faClipboard)
+library.add(faAngleDoubleRight)
+library.add(faClone)
+library.add(faExclamationCircle)
+library.add(faQuestionCircle)
+library.add(faChevronUp)
+library.add(faChevronDown)
+library.add(faPencilAlt)
+library.add(faArrowRight)
+library.add(faArrowLeft)
+library.add(faArrowUp)
+library.add(faArrowDown)
+library.add(faSyncAlt)
+library.add(faList)
+library.add(faSitemap)
+library.add(faSeedling)
+Vue.component("FontAwesomeIcon", FontAwesomeIcon)
 
-  // Add objects mixin
-  app.mixin(globalMixins)
-}
+// Add objects mixin
+Vue.mixin(globalMixins)

vite.config.js

@@ -1,6 +1,6 @@
 import { defineConfig } from "vite"
 import { resolve } from "path"
-import { createVuePlugin as vue } from "vite-plugin-vue2"
+import vue from "@vitejs/plugin-vue2"
 
 // https://vitejs.dev/config/
 export default defineConfig({