get deck to build with vue3 with broken functionality

Signed-off-by: grnd-alt <git@belakkaf.net>

PLACEHOLDER_NPM_I.sh

@@ -0,0 +1,6 @@
+# PLACEHOLDER SCRIPT FOR GETTING DEPENDENCIES vue3 ready
+
+
+npm remove @vue/vue2-jest vue-template-compiler vue-at vuex-router-sync --force
+npm install vue@3 vuex@4.1.0 vue-router@4.5.0 @vue/vue3-jest ../../../../../webpack-vue-config/ ../../../../../nextcloud-dialogs @vue/compat @vue/compiler-sfc
+npm ci

package.json

@@ -35,7 +35,7 @@
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.1",
     "@nextcloud/capabilities": "^1.2.0",
-    "@nextcloud/dialogs": "^6.0.1",
+    "@nextcloud/dialogs": "file:../../../../../nextcloud-dialogs",
     "@nextcloud/event-bus": "^3.3.1",
     "@nextcloud/files": "^3.10.1",
     "@nextcloud/initial-state": "^2.2.0",
@@ -44,6 +44,9 @@
     "@nextcloud/notify_push": "^1.3.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.22.0",
+    "@vue/compat": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.13",
+    "@vue/vue3-jest": "^29.2.6",
     "blueimp-md5": "^2.19.0",
     "chroma-js": "^3.1.2",
     "dompurify": "^3.2.3",
@@ -54,16 +57,13 @@
     "moment": "^2.30.1",
     "p-queue": "^8.0.1",
     "url-search-params-polyfill": "^8.2.5",
-    "vue": "^2.7.15",
-    "vue-at": "^2.5.1",
+    "vue": "^3.5.13",
     "vue-click-outside": "^1.1.0",
     "vue-easymde": "^2.0.0",
-    "vue-infinite-loading": "^2.4.5",
     "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.5.0",
     "vue-smooth-dnd": "^0.8.1",
-    "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0"
+    "vuex": "^4.1.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
@@ -78,17 +78,15 @@
     "@nextcloud/cypress": "^1.0.0-beta.12",
     "@nextcloud/eslint-config": "^8.4.1",
     "@nextcloud/stylelint-config": "^3.0.1",
-    "@nextcloud/webpack-vue-config": "^6.2.0",
+    "@nextcloud/webpack-vue-config": "file:../../../../../webpack-vue-config",
     "@relative-ci/agent": "^4.2.14",
     "@vue/test-utils": "^2.4.6",
-    "@vue/vue2-jest": "^29.2.6",
     "cypress": "^13.17.0",
     "eslint-plugin-cypress": "^3.6.0",
     "eslint-webpack-plugin": "^4.2.0",
     "jest": "^29.7.0",
     "jest-serializer-vue": "^3.1.0",
-    "stylelint-webpack-plugin": "^5.0.1",
-    "vue-template-compiler": "^2.7.16"
+    "stylelint-webpack-plugin": "^5.0.1"
   },
   "jest": {
     "moduleFileExtensions": [

src/components/card/CommentForm.vue

@@ -2,8 +2,13 @@
   - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <template>
+	<div>
+		THIS HAS AT
+	</div>
+</template>
+
+<!-- <template>
 	<div class="comment-form">
 		<form @submit.prevent="submit">
 			<At ref="at"
@@ -191,4 +196,4 @@ export default {
 	.atwho-li--avatar {
 		margin-right: 10px;
 	}
-</style>
+</style> -->

src/main.js

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router.js'
 import store from './store/main.js'
@@ -20,21 +20,25 @@ document.body.setAttribute('data-snap-ignore', 'true')
 
 sync(store, router)
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(App)
 
-Vue.directive('click-outside', ClickOutside)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
 
-Vue.directive('focus', {
-	inserted(el) {
+app.directive('click-outside', ClickOutside)
+
+app.directive('focus', {
+	mounted(el) {
 		el.focus()
 	},
 })
 
-Vue.config.errorHandler = (err, vm, info) => {
+app.config.errorHandler = (err, vm, info) => {
 	if (err.response && err.response.data.message) {
-		const errorMessage = t('deck', 'Something went wrong')
-		showError(`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`)
+		const errorMessage = translate('deck', 'Something went wrong')
+		showError(
+			`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`,
+		)
 	}
 	console.error(err)
 }
@@ -47,16 +51,14 @@ window.addEventListener('DOMContentLoaded', () => {
 		window.OCA.Files = {}
 	}
 	// register unused client for the sidebar to have access to its parser methods
-	Object.assign(window.OCA.Files, { App: { fileList: { filesClient: OC.Files.getClient() } } }, window.OCA.Files)
+	Object.assign(
+		window.OCA.Files,
+		{ App: { fileList: { filesClient: OC.Files.getClient() } } },
+		window.OCA.Files,
+	)
 })
 
-/* eslint-disable-next-line no-new */
-new Vue({
-	el: '#content',
-	// eslint-disable-next-line vue/match-component-file-name
-	name: 'Deck',
-	router,
-	store,
+app.mixin({
 	data() {
 		return {
 			time: Date.now(),
@@ -75,7 +77,7 @@ new Vue({
 			this.time = Date.now()
 		}, 1000)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.interval)
 	},
 	methods: {
@@ -86,9 +88,12 @@ new Vue({
 			this.$store.commit('setSearchQuery', '')
 		},
 	},
-	render: h => h(App),
 })
 
+app.use(router)
+app.use(store)
+app.mount('#content')
+
 if (!window.OCA.Deck) {
 	window.OCA.Deck = {}
 }

src/router.js

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 import { BOARD_FILTERS } from './store/main.js'
 import Boards from './components/boards/Boards.vue'
@@ -14,11 +13,9 @@ import BoardSidebar from './components/board/BoardSidebar.vue'
 import CardSidebar from './components/card/CardSidebar.vue'
 import Overview from './components/overview/Overview.vue'
 
-Vue.use(Router)
 
-const router = new Router({
-	mode: 'history',
-	base: generateUrl('/apps/deck/'),
+const router = createRouter({
+	history: createWebHistory(generateUrl('/apps/deck/')),
 	linkActiveClass: 'active',
 	routes: [
 		{

src/store/main.js

@@ -7,7 +7,7 @@ import 'url-search-params-polyfill'
 
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
@@ -18,7 +18,6 @@ import comment from './comment.js'
 import trashbin from './trashbin.js'
 import attachment from './attachment.js'
 import overview from './overview.js'
-Vue.use(Vuex)
 
 const apiClient = new BoardApi()
 const debug = process.env.NODE_ENV !== 'production'
@@ -29,7 +28,8 @@ export const BOARD_FILTERS = {
 	SHARED: 'shared',
 }
 
-export default new Vuex.Store({
+
+const store = createStore({
 	modules: {
 		actions,
 		stack,
@@ -519,3 +519,5 @@ export default new Vuex.Store({
 		},
 	},
 })
+
+export default store

webpack.js

@@ -31,6 +31,6 @@ if (isDevServer) {
 	}
 }
 // Workaround for https://github.com/nextcloud/webpack-vue-config/pull/432 causing problems with nextcloud-vue-collections
-webpackConfig.resolve.alias = {}
+webpackConfig.resolve.alias = { vue: '@vue/compat' }
 
 module.exports = webpackConfig