refactor(frontend): Migrate the frontend application from Vue.js 2 to 3 (#2119)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

Author: Azurewarth0920

.eslintrc.js

@@ -39,6 +39,9 @@ module.exports = {
         },
       },
     ],
+    'func-call-spacing': 'off',
+    'vue/component-definition-name-casing': 'off',
+    'vue/multi-word-component-names': 'off',
     '@typescript-eslint/ban-ts-comment': 'warn',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -76,6 +79,14 @@ module.exports = {
       files: ['packages/shell-dev-vue3/**'],
       rules: {
         'vue/valid-template-root': 'off',
+        'vue/one-component-per-file': 'off',
+        'vue/no-v-model-argument': 'off',
+      },
+    },
+    {
+      files: ['packages/app-frontend/**'],
+      rules: {
+        'vue/no-v-model-argument': 'off',
       },
     },
     {
@@ -99,6 +110,7 @@ module.exports = {
       },
       rules: {
         'no-console': 'off',
+        'vue/no-multiple-template-root': 'off',
       },
     },
     {

package.json

@@ -61,7 +61,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^6.0.0",
+    "eslint-plugin-vue": "^9.17.0",
     "execa": "^4.0.3",
     "inquirer": "^6.2.0",
     "lerna": "^4.0.0",
@@ -70,8 +70,9 @@
     "semver": "^5.5.1",
     "start-server-and-test": "^1.7.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "vue-loader": "^15.9.0",
-    "webpack-dev-server": "^4.0.0-beta.0"
+    "vue-loader": "^17.2.2",
+    "webpack-dev-server": "^4.0.0-beta.0",
+    "svg-inline-loader": "^0.8.2"
   },
   "resolutions": {
     "cypress": "=3.4.1",

packages/app-backend-vue2/package.json

@@ -17,6 +17,8 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "vue": "^2.7.10",
+    "vue-loader": "^15.7.1",
     "@types/node": "^13.9.1",
     "@types/webpack-env": "^1.15.1",
     "core-js": "^3.20.2",

packages/app-frontend/package.json

@@ -10,18 +10,23 @@
     "@vue/ui": "^0.12.5",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.16.0",
+    "floating-vue": "^5.2.2",
     "lodash": "^4.17.15",
     "lru-cache": "^5.1.1",
     "monaco-editor": "^0.24.0",
     "pixi.js-legacy": "^6.2.0",
-    "portal-vue": "^2.1.7",
     "scroll-into-view-if-needed": "^2.2.28",
     "semver": "^7.3.5",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "tinycolor2": "^1.4.2",
-    "vue": "^2.7.10",
-    "vue-router": "^3.6.5",
-    "vue-virtual-scroller": "^1.0.10"
+    "vue": "^3.3.4",
+    "vue-resize": "^2.0.0-alpha.1",
+    "vue-router": "^4.2.5",
+    "vue-safe-teleport": "^0.1.2",
+    "vue-virtual-scroller": "^2.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@akryum/md-icons-svg": "^1.0.1"
   }
 }

packages/app-frontend/src/app.ts

@@ -1,8 +1,7 @@
 import App from './features/App.vue'
-
-import Vue from 'vue'
+import { App as VueApp, createApp as createVueApp } from 'vue'
 import { isChrome, initEnv, SharedData, initSharedData, destroySharedData, BridgeEvents } from '@vue-devtools/shared-utils'
-import { createRouter } from './router'
+import { createRouterInstance } from './router'
 import { getBridge, setBridge } from './features/bridge'
 import { setAppConnected, setAppInitializing } from './features/connection'
 import { setupAppsBridgeEvents } from './features/apps'
@@ -12,37 +11,25 @@ import { setupCustomInspectorBridgeEvents } from './features/inspector/custom/co
 import { setupPluginsBridgeEvents } from './features/plugin'
 import { setupPlugins } from './plugins'
 
-setupPlugins()
-
 // Capture and log devtool errors when running as actual extension
 // so that we can debug it by inspecting the background page.
 // We do want the errors to be thrown in the dev shell though.
-if (isChrome) {
-  Vue.config.errorHandler = (e, vm) => {
-    getBridge()?.send('ERROR', {
-      message: e.message,
-      stack: e.stack,
-      component: vm.$options.name || (vm.$options as any)._componentTag || 'anonymous',
-    })
-  }
-}
-
-// @ts-ignore
-Vue.options.renderError = (h, e) => {
-  return h('pre', {
-    class: 'text-white bg-red-500 p-2 rounded text-xs overflow-auto',
-  }, e.stack)
-}
-
 export function createApp () {
-  const router = createRouter()
-
-  const app = new Vue({
-    router,
-    render: h => h(App as any),
-  })
-
-  // @TODO [Vue 3] Setup plugins
+  const router = createRouterInstance()
+
+  const app = createVueApp(App)
+  app.use(router)
+  setupPlugins(app)
+
+  if (isChrome) {
+    app.config.errorHandler = (e, vm) => {
+      getBridge()?.send('ERROR', {
+        message: (e as Error).message,
+        stack: (e as Error).stack,
+        component: vm?.$options.name || (vm?.$options as any)._componentTag || 'anonymous',
+      })
+    }
+  }
 
   return app
 }
@@ -51,22 +38,22 @@ export function createApp () {
  * Connect then init the app. We need to reconnect on every reload, because a
  * new backend will be injected.
  */
-export function connectApp (app, shell) {
+export function connectApp (app: VueApp, shell) {
   shell.connect(async bridge => {
     setBridge(bridge)
     // @TODO remove
     // @ts-ignore
     window.bridge = bridge
 
-    if (Object.prototype.hasOwnProperty.call(Vue.prototype, '$shared')) {
+    if (app.config.globalProperties.$shared) {
       destroySharedData()
     } else {
-      Object.defineProperty(Vue.prototype, '$shared', {
+      Object.defineProperty(app.config.globalProperties, '$shared', {
         get: () => SharedData,
       })
     }
 
-    initEnv(Vue)
+    initEnv(app)
 
     bridge.on(BridgeEvents.TO_FRONT_TITLE, ({ title }: { title: string }) => {
       document.title = `${title} - Vue devtools`
@@ -75,7 +62,6 @@ export function connectApp (app, shell) {
     await initSharedData({
       bridge,
       persist: true,
-      Vue,
     })
 
     if (SharedData.logDetected) {

packages/app-frontend/src/assets/style/index.styl

@@ -30,6 +30,10 @@ html, body
 body
   overflow hidden
 
+#app
+  width: 100%
+  height: 100%
+
 button:focus
   outline none
 

packages/app-frontend/src/features/App.vue

@@ -122,7 +122,7 @@ export default defineComponent({
       </SplitPane>
     </template>
 
-    <portal-target name="root" />
+    <TeleportTarget id="root" />
 
     <ErrorOverlay />
   </div>

packages/app-frontend/src/features/apps/AppSelect.vue

@@ -6,7 +6,7 @@ import { watch, defineComponent, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
 import { useOrientation } from '@front/features/layout/orientation'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { useBridge } from '../bridge'
 import { useVueVersionCheck } from './vue-version-check'
 

packages/app-frontend/src/features/apps/AppSelectPane.vue

@@ -4,7 +4,7 @@ import AppSelectPaneItem from './AppSelectPaneItem.vue'
 import { watch, defineComponent, ref, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { useBridge } from '../bridge'
 
 export default defineComponent({

packages/app-frontend/src/features/apps/AppSelectPaneItem.vue

@@ -14,6 +14,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['select'],
 
   setup (props) {
     const { getLatestVersion } = useVueVersionCheck()
@@ -89,7 +90,7 @@ export default defineComponent({
 .app-button {
   @apply rounded-none text-left h-auto py-1.5;
 
-  > >>> .content {
+  > :deep(.content) {
     @apply min-w-full justify-start;
 
     > .default-slot {