fix: deduplicate app ids

Akryum · Akryum · commit 6bf699dbc4bd · 2021-09-21T19:24:01.000+02:00
diff --git a/packages/app-backend-core/src/app.ts b/packages/app-backend-core/src/app.ts
@@ -125,11 +125,24 @@ export function mapAppRecord (record: AppRecord): SimpleAppRecord {
   }
 }
 
+const appIds = new Set()
+
 export function getAppRecordId (app, defaultId?: string): string {
   if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null) {
     return app.__VUE_DEVTOOLS_APP_RECORD_ID__
   }
-  const id = defaultId ?? (recordId++).toString()
+  let id = defaultId ?? (recordId++).toString()
+
+  if (defaultId && appIds.has(id)) {
+    let count = 1
+    while (appIds.has(`${defaultId}:${count}`)) {
+      count++
+    }
+    id = `${defaultId}:${count}`
+  }
+
+  appIds.add(id)
+
   app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id
   return id
 }
@@ -181,6 +194,7 @@ export async function removeApp (app: App, ctx: BackendContext) {
   try {
     const appRecord = await getAppRecord(app, ctx)
     if (appRecord) {
+      appIds.delete(appRecord.id)
       const index = ctx.appRecords.indexOf(appRecord)
       if (index !== -1) ctx.appRecords.splice(index, 1)
       removeLayersForApp(app, ctx)
diff --git a/packages/shell-dev-vue3/public/target.html b/packages/shell-dev-vue3/public/target.html
@@ -12,6 +12,7 @@
   <body>
     <div id="app"></div>
     <div id="app2"></div>
+    <div id="app2bis"></div>
     <div id="app3"></div>
     <div id="delay-app"></div>
     <div id="ghost-app"></div>
diff --git a/packages/shell-dev-vue3/src/main.js b/packages/shell-dev-vue3/src/main.js
@@ -39,6 +39,12 @@ const app2 = createApp({
 })
 app2.mount('#app2')
 
+const app2bis = createApp({
+  name: 'App2',
+  render: () => h('h1', 'App 2 Bis')
+})
+app2bis.mount('#app2bis')
+
 createApp(App3).mount('#app3')
 
 createApp({
