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

Co-authored-by: Guillaume Chau <[email protected]>

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 {

packages/app-frontend/src/features/apps/index.ts

@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { BridgeEvents, Bridge } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'
-import { useRoute, useRouter } from '@front/util/router'
+import { useRoute, useRouter } from 'vue-router'
 import { fetchLayers } from '../timeline/composable'
 
 export interface AppRecord {
@@ -15,7 +15,7 @@ const apps = ref<AppRecord[]>([])
 
 export function useCurrentApp () {
   const route = useRoute()
-  const currentAppId = computed(() => route.value.params.appId)
+  const currentAppId = computed(() => route.params.appId as string)
   const currentApp = computed(() => apps.value.find(a => currentAppId.value === a.id))
 
   return {
@@ -71,7 +71,7 @@ function fetchApps () {
   getBridge().send(BridgeEvents.TO_BACK_APP_LIST, {})
 }
 
-export const pendingSelectAppId = ref<string>(null)
+export const pendingSelectAppId = ref<string | null>(null)
 
 const pendingSelectPromises: (() => void)[] = []
 

packages/app-frontend/src/features/chrome/pane-visibility.ts

@@ -1,7 +1,7 @@
 import { isChrome } from '@vue-devtools/shared-utils'
 
 let panelShown = !isChrome
-let pendingAction = null
+let pendingAction: (() => void | Promise<void>) | null = null
 
 if (isChrome) {
   chrome.runtime.onMessage.addListener(request => {

packages/app-frontend/src/features/code/CodeEditor.vue

@@ -1,6 +1,5 @@
 <script>
 // Fork of https://github.com/egoist/vue-monaco/
-
 import * as monaco from 'monaco-editor'
 import assign from 'lodash/merge'
 
@@ -11,17 +10,12 @@ monaco.editor.defineTheme('github-dark', require('@front/assets/github-theme/dar
 
 export default {
   name: 'MonacoEditor',
-
-  model: {
-    event: 'change',
-  },
-
   props: {
     original: {
       type: String,
       default: null,
     },
-    value: {
+    modelValue: {
       type: String,
       required: true,
     },
@@ -42,7 +36,7 @@ export default {
       default: false,
     },
   },
-
+  emits: ['update:modelValue'],
   watch: {
     options: {
       deep: true,
@@ -54,7 +48,7 @@ export default {
       },
     },
 
-    value (newValue) {
+    modelValue (newValue) {
       if (this.editor) {
         const editor = this.getModifiedEditor()
         if (newValue !== editor.getValue()) {
@@ -93,7 +87,7 @@ export default {
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.editor && this.editor.dispose()
   },
 
@@ -103,37 +97,38 @@ export default {
 
       const options = assign(
         {
-          value: this.value,
+          value: this.modelValue,
           theme: this.theme,
           language: this.language,
         },
         this.options,
       )
+      const root = this.$refs.root
 
       if (this.diffEditor) {
-        this.editor = monaco.editor.createDiffEditor(this.$el, options)
+        this.editor = monaco.editor.createDiffEditor(root, options)
         const originalModel = monaco.editor.createModel(
           this.original,
           this.language,
         )
         const modifiedModel = monaco.editor.createModel(
-          this.value,
+          this.modelValue,
           this.language,
         )
         this.editor.setModel({
           original: originalModel,
           modified: modifiedModel,
         })
       } else {
-        this.editor = monaco.editor.create(this.$el, options)
+        this.editor = monaco.editor.create(root, options)
       }
 
       // @event `change`
       const editor = this.getModifiedEditor()
       editor.onDidChangeModelContent(event => {
         const value = editor.getValue()
-        if (this.value !== value) {
-          this.$emit('change', value, event)
+        if (this.modelValue !== value) {
+          this.$emit('update:modelValue', value, event)
         }
       })
 
@@ -165,5 +160,5 @@ export default {
 </script>
 
 <template>
-  <div />
+  <div ref="root" />
 </template>