add createVueRoot helper function

Author: silverwind

web_src/js/features/contextpopup.js

@@ -1,5 +1,5 @@
-import {createApp} from 'vue';
 import ContextPopup from '../components/ContextPopup.vue';
+import {createVueRoot} from '../utils/vue.js';
 import {parseIssueHref} from '../utils.js';
 import {createTippy} from '../modules/tippy.js';
 import {GET} from '../modules/fetch.js';
@@ -20,19 +20,13 @@ async function show(e) {
   } catch {}
   if (!issue) return;
 
-  const popup = document.createElement('div');
-  const view = createApp(ContextPopup, {issue, labelsHtml});
-  try {
-    view.mount(popup);
-  } catch (err) {
-    console.error(err);
-    return;
-  }
+  const content = createVueRoot(ContextPopup, {issue, labelsHtml});
+  if (!content) return;
 
   const tippy = createTippy(link, {
     theme: 'default',
     trigger: 'mouseenter focus',
-    content: popup,
+    content,
     placement: 'top-start',
     interactive: true,
     role: 'dialog',

web_src/js/utils/dom.js

@@ -297,3 +297,16 @@ export function replaceTextareaSelection(textarea, text) {
     textarea.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true}));
   }
 }
+
+//
+function createVueElement(Component, rootProps) {
+  const container = document.createElement('div');
+  const view = createApp(Component, rootProps);
+  try {
+    view.mount(container);
+    return container;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+}

web_src/js/utils/vue.js

@@ -0,0 +1,14 @@
+import {createApp} from 'vue';
+
+// create a new vue root and container and mount a component into it
+export function createVueRoot(component, rootProps) {
+  const container = document.createElement('div');
+  const view = createApp(component, rootProps);
+  try {
+    view.mount(container);
+    return container;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+}