Refactor from Vue2 to Vue3 (#20044)

Close #19902 

4 files changed, 17 insertions, 30 deletions

diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index f4e660be3f..d29da6d951 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Vue from 'vue';
+import {createApp} from 'vue';
 import ContextPopup from '../components/ContextPopup.vue';
 import {parseIssueHref} from '../utils.js';
 import {createTippy} from '../modules/tippy.js';
@@ -17,17 +17,12 @@ export default function initContextPopups() {
     if (!owner) return;
 
     const el = document.createElement('div');
-    el.innerHTML = '<div></div>';
     this.parentNode.insertBefore(el, this.nextSibling);
 
-    const View = Vue.extend({
-      render: (createElement) => createElement(ContextPopup),
-    });
-
-    const view = new View();
+    const view = createApp(ContextPopup);
 
     try {
-      view.$mount(el.firstChild);
+      view.mount(el);
     } catch (err) {
       console.error(err);
       el.textContent = 'ContextPopup failed to load';
@@ -37,7 +32,7 @@ export default function initContextPopups() {
       content: el,
       interactive: true,
       onShow: () => {
-        view.$emit('load-context-popup', {owner, repo, index});
+        el.firstChild.dispatchEvent(new CustomEvent('us-load-context-popup', {detail: {owner, repo, index}}));
       }
     });
   });
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 363be5ca75..6e6202e866 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import {createApp} from 'vue';
 import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 
 export default function initHeatmap() {
@@ -17,11 +17,9 @@ export default function initHeatmap() {
       return {date: new Date(v), count: heatmap[v]};
     });
 
-    const View = Vue.extend({
-      render: (createElement) => createElement(ActivityHeatmap, {props: {values}}),
-    });
+    const View = createApp(ActivityHeatmap, {values});
 
-    new View().$mount(el);
+    View.mount(el);
   } catch (err) {
     console.error('Heatmap failed to load', err);
     el.textContent = 'Heatmap failed to load';
diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
index 9eba3cf887..6059dd82e7 100644
--- a/web_src/js/features/repo-diff-filetree.js
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -1,21 +1,17 @@
-import Vue from 'vue';
+import {createApp} from 'vue';
 import DiffFileTree from '../components/DiffFileTree.vue';
 import DiffFileList from '../components/DiffFileList.vue';
 
 export default function initDiffFileTree() {
-  const el = document.getElementById('diff-file-tree-container');
+  const el = document.getElementById('diff-file-tree');
   if (!el) return;
 
-  const View = Vue.extend({
-    render: (createElement) => createElement(DiffFileTree),
-  });
-  new View().$mount(el);
+  const fileTreeView = createApp(DiffFileTree);
+  fileTreeView.mount(el);
 
-  const fileListElement = document.getElementById('diff-file-list-container');
+  const fileListElement = document.getElementById('diff-file-list');
   if (!fileListElement) return;
 
-  const fileListView = Vue.extend({
-    render: (createElement) => createElement(DiffFileList),
-  });
-  new fileListView().$mount(fileListElement);
+  const fileListView = createApp(DiffFileList);
+  fileListView.mount(fileListElement);
 }
diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
index 747e4f467e..59d4c7a3b4 100644
--- a/web_src/js/features/repo-issue-pr-form.js
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -1,12 +1,10 @@
-import Vue from 'vue';
+import {createApp} from 'vue';
 import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 
 export default function initPullRequestMergeForm() {
   const el = document.getElementById('pull-request-merge-form');
   if (!el) return;
 
-  const View = Vue.extend({
-    render: (createElement) => createElement(PullRequestMergeForm),
-  });
-  new View().$mount(el);
+  const view = createApp(PullRequestMergeForm);
+  view.mount(el);
 }