feat: vue3 upgrade

backend/package.json

@@ -175,7 +175,7 @@
 		"bufferutil": "^4.0.1",
 		"chai": "^4.2.0",
 		"copy-webpack-plugin": "^5.0.5",
-		"coveralls": "2.11.16",
+		"coveralls": "3.1.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "^7.21.0",
 		"eslint-config-prettier": "^8.1.0",

backend/src/panels/AbstractWebviewPanel.ts

@@ -114,9 +114,12 @@ export abstract class AbstractWebviewPanel {
 
 			// TODO: very fragile: assuming double quotes and src is first attribute
 			// specifically, doesn't work when building vue for development (vue-cli-service build --mode development)
-			indexHtml = indexHtml.replace(/<link href=/g, `<link href=${scriptUri.toString()}`);
 			indexHtml = indexHtml.replace(/<script src=/g, `<script src=${scriptUri.toString()}`);
 			indexHtml = indexHtml.replace(/<img src=/g, `<img src=${scriptUri.toString()}`);
+
+			indexHtml = indexHtml.replace(/<link href="/g, `<link href="${scriptUri.toString()}`);
+			indexHtml = indexHtml.replace(/<script defer="defer" src="/g, `<script defer="defer" src="${scriptUri.toString()}`);
+			indexHtml = indexHtml.replace(/<script defer="defer" type="module" src="/g, `<script defer="defer" type="module" src="${scriptUri.toString()}`);
 		}
 		this.webViewPanel.webview.html = indexHtml;
 	}

frontend/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     "@vue/app",
-    ["@babel/preset-env", { "modules": false }]
+    ["@babel/preset-env", { "modules": false }],
   ],
   env: {
     test: {

frontend/jest.config.js

@@ -1,46 +1,55 @@
 module.exports = {
   verbose: true,
-  testRegex: "(/tests/(.*).(test|spec)).[jt]sx?$",
   collectCoverage: true,
+
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!**/node_modules/**",
     "!<rootDir>/src/main.js",
     "!<rootDir>/src/plugins/**"
   ],
+
   coverageReporters: [
     "lcov",
     "html",
     "text-summary"
   ],
+
   moduleFileExtensions: [
     "js",
     "vue",
     "json"
   ],
+
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!(@sap-devx)/)"
+    "<rootDir>/node_modules/(?!(@sap-devx|vuetify)/)"
   ],
+
   modulePaths: [
     "<rootDir>/src",
     "<rootDir>/node_modules"
   ],
+
   transform: {
-    ".*\\.(vue)$": "vue-jest",
-    '^.+\\.vue$': 'vue-jest',
+    ".*\\.(vue)$": "@vue/vue3-jest",
+    '^.+\\.vue$': '@vue/vue3-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.tsx?$': 'ts-jest',
-    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    "^.+\\.mjs$": "<rootDir>/node_modules/babel-jest",
   },
+
   snapshotSerializers: [
     "<rootDir>/node_modules/jest-serializer-vue"
   ],
+
   coverageThreshold: {
     "global": {
       "branches": 17,
       "functions": 52,
       "lines": 32,
       "statements": 32
     }
-  }
+  },
+
+  preset: '@vue/cli-plugin-unit-jest'
 }

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "guided-development-frontend",
   "displayName": "Guided Development Frontend",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "publisher": "SAP",
   "license": "Apache 2.0",
   "description": "Frontend for the Guided Development framework",
@@ -16,41 +16,42 @@
   },
   "dependencies": {
     "@mdi/font": "^5.1.45",
-    "@sap-devx/inquirer-gui": "0.2.1",
-    "@sap-devx/inquirer-gui-file-browser-plugin": "0.0.5",
-    "@sap-devx/inquirer-gui-folder-browser-plugin": "0.0.3",
-    "@sap-devx/inquirer-gui-login-plugin": "0.0.4",
-    "@sap-devx/inquirer-gui-tiles-plugin": "0.0.8",
-    "core-js": "2.6.6",
+    "@sap-devx/inquirer-gui": "3.0.0",
+    "@sap-devx/inquirer-gui-file-browser-plugin": "3.0.0",
+    "@sap-devx/inquirer-gui-folder-browser-plugin": "3.0.0",
+    "@sap-devx/inquirer-gui-login-plugin": "3.0.0",
+    "@sap-devx/inquirer-gui-tiles-plugin": "3.0.0",
+    "core-js": "^3.18.3",
     "material-design-icons-iconfont": "^5.0.1",
-    "vue": "^2.6.10",
-    "vue-loading-overlay": "^3.3.0",
-    "vuetify": "^2.2.22"
+    "vue": "^3.3.4",
+    "vue-loading-overlay": "^6.0.3",
+    "vuetify": "^3.3.10"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "@babel/preset-env": "^7.9.5",
-    "@sap-devx/webview-rpc": "^0.2.2",
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-plugin-unit-jest": "^4.3.1",
-    "@vue/cli-service": "^3.11.0",
-    "@vue/test-utils": "^1.0.0-beta.33",
+    "@sap-devx/webview-rpc": "^0.3.1",
+    "@vue/cli-plugin-babel": "^5.0.0",
+    "@vue/cli-plugin-eslint": "^5.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-service": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.9.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "babel-jest": "^27.0.5",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
     "husky": "1.2.1",
-    "jest": "^24.9.0",
+    "jest": "^27.0.5",
     "jest-serializer-vue": "^2.0.2",
-    "lint-staged": "^8.1.5",
+    "lint-staged": "^15.0.2",
     "mock-socket": "^9.0.2",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-vuetify": "^2.0.5",
-    "vue-jest": "^3.0.5",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.3.0",
-    "webpack": "^4.42.1"
+    "webpack-plugin-vuetify": "^2.0.0",
+    "webpack": "^5.0.0"
   },
   "eslintConfig": {
     "root": true,
@@ -59,13 +60,35 @@
       "jest": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      },
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "postcss": {
     "plugins": {

frontend/src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app id="app" class="vld-parent">
     <loading
-      :active.sync="showBusyIndicator"
-      :is-full-page="true"
-      :height="64"
-      :width="64"
+      :active="showBusyIndicator"
+      :isFullPage="true"
+      :height=64
+      :width=64
       :color="isLoadingColor"
-      background-color="transparent"
+      backgroundColor="transparent"
       loader="spinner"
     ></loading>
     <div v-if="!messages.collectionadditionalinfo">
@@ -184,7 +184,7 @@ export default {
 };
 </script>
 <style scoped>
-@import "./../node_modules/vue-loading-overlay/dist/vue-loading.css";
+@import "./../node_modules/vue-loading-overlay/dist/css/index.css";
 .left-col {
   background-color: var(--vscode-editorWidget-background, #252526);
 }
@@ -205,14 +205,19 @@ export default {
 .bottom-buttons-col > .v-btn:not(:last-child) {
     margin-right: 10px !important;
 }
-.v-card__title {
+.v-card-title {
   color: var(--vscode-foreground, #cccccc);
   margin-bottom: 16px;
   font-size: 26px;
+  padding: 16px;
+  line-height: 2rem;
 }
-.v-card__subtitle {
+.v-card-subtitle {
   margin-left: 4px;
   border-bottom: 1px solid hsla(0,0%,53.3%,.45);
+  margin-top: -16px;
+  padding-bottom: 16px;
+  opacity: unset;
 }
 .vld-parent {
   overflow-y: auto;

frontend/src/components/Collections.vue

@@ -107,15 +107,15 @@ export default {
 </script>
 
 <style>
-.container {
+.v-container {
   margin-right: 0px !important;
   margin-left: 0px !important;
 }
-.v-card__title {
+.v-card-title {
   margin-bottom:8px;
   font-size:20px
 }
-.v-card__subtitle {
+.v-card-subtitle {
   margin-left:-16px;
   font-size:14px;
 }

frontend/src/components/Items.vue

@@ -3,12 +3,12 @@
     <v-expansion-panels dark focusable :multiple="mode === 'single'" v-model="expandedPanels">
       <template v-for="(contextualItem, index) in contextualItems">
         <v-expansion-panel v-if="isFiltered(contextualItem.item.fqid)" :key="index" v-bind:class="getExpansionPanelClass(contextualItem.item)">
-          <v-expansion-panel-header v-bind:class="{ 'pa-5':true, 'itemColor':bColorFlag, 'subItemColor':!bColorFlag}">
+          <v-expansion-panel-title v-bind:class="{ 'pa-5':true, 'itemColor':bColorFlag, 'subItemColor':!bColorFlag}">
               <a class="expansion-panel-title">{{contextualItem.item.title}}</a>
               <div hidden>Item ID: {{contextualItem.item.fqid}}</div>
               <div hidden v-if="contextualItem.context">Project: {{contextualItem.context.project}}</div>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content v-bind:class="{'headline':true, 'itemColor':bColorFlag, 'subItemColor':!bColorFlag}">
+          </v-expansion-panel-title>
+          <v-expansion-panel-text v-bind:class="{'headline':true, 'itemColor':bColorFlag, 'subItemColor':!bColorFlag}">
             <v-container>
               <v-row>
                 <v-col cols="12" sm="6" md="8" style="margin-left:20px">
@@ -39,13 +39,13 @@
                       @action="onAction"
                   />
                   <v-list-item-subtitle class="py-1" v-if="contextualItem.item.action1 && contextualItem.item.action1.title && !contextualItem.item.items">{{contextualItem.item.action1.title}}</v-list-item-subtitle>
-                  <v-btn small v-if="contextualItem.item.action1 && !contextualItem.item.items" @click="onAction(contextualItem, 1)">{{contextualItem.item.action1.name}}</v-btn>
+                  <v-btn size="small" v-if="contextualItem.item.action1 && !contextualItem.item.items" @click="onAction(contextualItem, 1)">{{contextualItem.item.action1.name}}</v-btn>
                   <v-list-item-subtitle class="py-1 mt-4" v-if="contextualItem.item.action2 && contextualItem.item.action2.title && !contextualItem.item.items">{{contextualItem.item.action2.title}}</v-list-item-subtitle>
-                  <v-btn small v-if="contextualItem.item.action2 && !contextualItem.item.items" @click="onAction(contextualItem, 2)">{{contextualItem.item.action2.name}}</v-btn>
+                  <v-btn size="small" v-if="contextualItem.item.action2 && !contextualItem.item.items" @click="onAction(contextualItem, 2)">{{contextualItem.item.action2.name}}</v-btn>
                 </v-col>
               </v-row>
             </v-container>
-          </v-expansion-panel-content>
+          </v-expansion-panel-text>
         </v-expansion-panel>
       </template>
     </v-expansion-panels>
@@ -146,11 +146,11 @@ export default {
 .v-expansion-panel {
   box-shadow: none;
 }
-.v-expansion-panel-header {
+.v-expansion-panel-title {
   text-transform: none;
 }
 
-.v-expansion-panel-header--active:before {
+.v-expansion-panel-title--active:before {
   opacity: 0 !important;
 }
 .v-application .expansion-panel-title {
@@ -166,24 +166,26 @@ export default {
 
 .itemColor {
   background-color: var(--vscode-sideBar-background, #1e1e1e);
+  color: var(--vscode-foreground,#ccc);
 }
 
 .itemColor .subItemColor {
   background-color: var(--vscode-activityBar-background, #1e1e1e);
+  color: var(--vscode-foreground,#ccc);
 }
 
 .itemColor .v-btn {
   margin-right: 0.5rem;
 }
 
-.v-expansion-panel-content__wrap {
+.v-expansion-panel-text__wrap {
   color: var(--vscode-foreground, #cccccc);
   text-transform: none;
 }
-.v-expansion-panel-header__icon {
+.v-expansion-panel-title__icon {
   position: absolute;
 }
-.v-expansion-panel-header__icon .v-icon {
+.v-expansion-panel-title__icon .v-icon {
   color: var(--vscode-foreground, #cccccc) !important;
 }
 .v-card.v-sheet {
@@ -198,7 +200,7 @@ export default {
 }
 
 
-.v-application .v-expansion-panel-header .expansion-panel-title {
+.v-application .v-expansion-panel-title .expansion-panel-title {
   padding-bottom: 0;
 }
 </style>

frontend/src/main.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import {createApp, h} from "vue";
 import App from './App'
 
 import vuetify from "./plugins/vuetify";
@@ -9,12 +9,15 @@ import "./assets/css/codicon.css";
 
 import Form from "@sap-devx/inquirer-gui";
 
-const options = { vuetify };
-Vue.use(Form, options);
-
-Vue.config.productionTip = false
-
-new Vue({
-  vuetify,
-  render: h => h(App), 
-}).$mount('#app')
+let options = {};
+const app = createApp({
+  render: () => 
+    h(App, {
+    ref: 'appRef',
+
+  }),
+});
+app.use(Form, options);
+app.use(options.vuetify ?? vuetify);
+app.config.productionTip = false;
+export default app.mount('#app');