Lazy-load some Vue components, fix heatmap chunk loading on every page

templates/repo/issue/view_content/pull_merge_box.tmpl

@@ -302,7 +302,8 @@
 						</script>
 
 						{{$showGeneralMergeForm = true}}
-						<div id="pull-request-merge-form"></div>
+						{{/* The merge form is a Vue component. After mounted, it has a button for choosing merge style, so make it have min-height to avoid layout shifting */}}
+						<div id="pull-request-merge-form" class="tw-min-h-[40px]"></div>
 					{{else}}
 						{{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
 						<div class="divider"></div>

templates/repo/view_content.tmpl

@@ -59,7 +59,7 @@
 				data-tree-list-url="{{.RepoLink}}/tree-list/{{.RefTypeNameSubURL}}"
 				data-no-results-text="{{ctx.Locale.Tr "repo.find_file.no_matching"}}"
 				data-placeholder="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"
-		></div>
+		><div class="ui small input global-shortcut-wrapper"><input placeholder="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"><kbd>T</kbd></div></div>
 
 		{{if .RefFullName.IsBranch}}
 			{{$addFilePath := .TreePath}}

web_src/js/features/heatmap.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
 
@@ -46,6 +45,7 @@ export async function initHeatmap() {
       noDataText: el.getAttribute('data-locale-no-contributions'),
     };
 
+    const {default: ActivityHeatmap} = await import(/* webpackChunkName: "ActivityHeatmap" */ '../components/ActivityHeatmap.vue');
     const View = createApp(ActivityHeatmap, {values, locale});
     View.mount(el);
     el.classList.remove('is-loading');

web_src/js/features/repo-findfile.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import RepoFileSearch from '../components/RepoFileSearch.vue';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 const threshold = 50;
@@ -69,7 +68,8 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
 }
 
 export function initRepoFileSearch() {
-  registerGlobalInitFunc('initRepoFileSearch', (el) => {
+  registerGlobalInitFunc('initRepoFileSearch', async (el) => {
+    const {default: RepoFileSearch} = await import(/* webpackChunkName: "RepoFileSearch" */ '../components/RepoFileSearch.vue');
     createApp(RepoFileSearch, {
       repoLink: el.getAttribute('data-repo-link'),
       currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),

web_src/js/features/repo-issue-pull.ts

@@ -1,5 +1,4 @@
 import {createApp} from 'vue';
-import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 import {GET, POST} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
@@ -63,10 +62,11 @@ function initRepoPullRequestCommitStatus(el: HTMLElement) {
   }
 }
 
-function initRepoPullRequestMergeForm(box: HTMLElement) {
+async function initRepoPullRequestMergeForm(box: HTMLElement) {
   const el = box.querySelector('#pull-request-merge-form');
   if (!el) return;
 
+  const {default: PullRequestMergeForm} = await import(/* webpackChunkName: "PullRequestMergeForm" */ '../components/PullRequestMergeForm.vue');
   const view = createApp(PullRequestMergeForm);
   view.mount(el);
 }

web_src/js/markup/refissue.ts

@@ -1,7 +1,6 @@
 import {queryElems} from '../utils/dom.ts';
 import {parseIssueHref} from '../utils.ts';
 import {createApp} from 'vue';
-import ContextPopup from '../components/ContextPopup.vue';
 import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
 
 export function initMarkupRefIssue(el: HTMLElement) {
@@ -20,6 +19,14 @@ function showMarkupRefIssuePopup(e: MouseEvent | FocusEvent) {
   if (!issuePathInfo.ownerName) return;
 
   const el = document.createElement('div');
+  const onShowAsync = async () => {
+    const {default: ContextPopup} = await import(/* webpackChunkName: "ContextPopup" */ '../components/ContextPopup.vue');
+    const view = createApp(ContextPopup, {
+      // backend: GetIssueInfo
+      loadIssueInfoUrl: `${window.config.appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`,
+    });
+    view.mount(el);
+  };
   const tippy = createTippy(refIssue, {
     theme: 'default',
     content: el,
@@ -29,13 +36,7 @@ function showMarkupRefIssuePopup(e: MouseEvent | FocusEvent) {
     role: 'dialog',
     interactiveBorder: 5,
     // onHide() { return false }, // help to keep the popup and debug the layout
-    onShow: () => {
-      const view = createApp(ContextPopup, {
-        // backend: GetIssueInfo
-        loadIssueInfoUrl: `${window.config.appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`,
-      });
-      view.mount(el);
-    },
+    onShow: () => { onShowAsync() },
   });
   tippy.show();
 }