fix: remove app on unmount, fixes #1455

Author: Akryum

packages/app-backend-core/src/app.ts

@@ -131,6 +131,15 @@ export async function sendApps (ctx: BackendContext) {
   })
 }
 
+export function removeApp (app: any, ctx: BackendContext) {
+  const appRecord = getAppRecord(app, ctx)
+  if (appRecord) {
+    const index = ctx.appRecords.indexOf(appRecord)
+    if (index !== -1) ctx.appRecords.splice(index, 1)
+    ctx.bridge.send(BridgeEvents.TO_FRONT_APP_REMOVE, { id: appRecord.id })
+  }
+}
+
 // eslint-disable-next-line camelcase
 export async function _legacy_getAndRegisterApps (Vue: any, ctx: BackendContext) {
   const apps = scan()

packages/app-backend-core/src/index.ts

@@ -30,7 +30,7 @@ import {
 } from './component'
 import { addQueuedPlugins, addPlugin, sendPluginList, addPreviouslyRegisteredPlugins } from './plugin'
 import { PluginDescriptor, SetupFunction, TimelineLayerOptions, TimelineEventOptions, CustomInspectorOptions } from '@vue/devtools-api'
-import { registerApp, selectApp, waitForAppsRegistration, sendApps, _legacy_getAndRegisterApps, getAppRecord } from './app'
+import { registerApp, selectApp, waitForAppsRegistration, sendApps, _legacy_getAndRegisterApps, getAppRecord, removeApp } from './app'
 import { sendInspectorTree, getInspector, getInspectorWithAppId, sendInspectorState, editInspectorState, sendCustomInspectors } from './inspector'
 import { showScreenshot } from './timeline-screenshot'
 import { handleAddPerformanceTag, performanceMarkEnd, performanceMarkStart } from './perf'
@@ -121,6 +121,10 @@ async function connect () {
     }
   })
 
+  hook.on(HookEvents.APP_UNMOUNT, app => {
+    removeApp(app, ctx)
+  })
+
   // Components
 
   ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_TREE, ({ instanceId, filter }) => {

packages/shell-dev-vue3/src/main.js

@@ -32,14 +32,17 @@ app.use(store)
 app.use(TestPlugin)
 app.mount('#app')
 
-createApp({
+const app2 = createApp({
   render: () => h('h1', 'App 2')
-}).mount('#app2')
+})
+app2.mount('#app2')
 
 createApp(App3).mount('#app3')
 
 createApp({
-  render: () => h('h1', 'Ghost app'),
+  render: () => h('button', {
+    onClick: () => app2.unmount()
+  }, 'Remove app 2'),
   devtools: {
     hide: true
   }