Use shallowRef instead of ref in .vue files where possible

reference: https://vuejs.org/api/reactivity-advanced.html#shallowref

Author: Kilisei

web_src/js/components/ActivityHeatmap.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
 import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
-import {onMounted, ref} from 'vue';
+import {onMounted, shallowRef} from 'vue';
 import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
 
 defineProps<{
@@ -24,7 +24,7 @@ const colorRange = [
   'var(--color-primary-dark-4)',
 ];
 
-const endDate = ref(new Date());
+const endDate = shallowRef(new Date());
 
 onMounted(() => {
   // work around issue with first legend color being rendered twice and legend cut off

web_src/js/components/ContextPopup.vue

@@ -2,16 +2,16 @@
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {getIssueColor, getIssueIcon} from '../features/issue.ts';
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, shallowRef, useTemplateRef} from 'vue';
 import type {IssuePathInfo} from '../types.ts';
 
 const {appSubUrl, i18n} = window.config;
 
-const loading = ref(false);
+const loading = shallowRef(false);
 const issue = ref(null);
-const renderedLabels = ref('');
+const renderedLabels = shallowRef('');
 const i18nErrorOccurred = i18n.error_occurred;
-const i18nErrorMessage = ref(null);
+const i18nErrorMessage = shallowRef(null);
 
 const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}));
 const body = computed(() => {
@@ -22,7 +22,7 @@ const body = computed(() => {
   return body;
 });
 
-const root = ref<HTMLElement | null>(null);
+const root = useTemplateRef('root');
 
 onMounted(() => {
   root.value.addEventListener('ce-load-context-popup', (e: CustomEventInit<IssuePathInfo>) => {

web_src/js/components/DiffFileTreeItem.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import {SvgIcon, type SvgName} from '../svg.ts';
-import {ref} from 'vue';
+import {shallowRef} from 'vue';
 import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
 
 const props = defineProps<{
   item: DiffTreeEntry,
 }>();
 
 const store = diffTreeStore();
-const collapsed = ref(props.item.IsViewed);
+const collapsed = shallowRef(props.item.IsViewed);
 
 function getIconForDiffStatus(pType: DiffStatus) {
   const diffTypes: Record<DiffStatus, { name: SvgName, classes: Array<string> }> = {

web_src/js/components/PullRequestMergeForm.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
+import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {toggleElem} from '../utils/dom.ts';
 
 const {csrfToken, pageData} = window.config;
 
 const mergeForm = ref(pageData.pullRequestMergeForm);
 
-const mergeTitleFieldValue = ref('');
-const mergeMessageFieldValue = ref('');
-const deleteBranchAfterMerge = ref(false);
-const autoMergeWhenSucceed = ref(false);
+const mergeTitleFieldValue = shallowRef('');
+const mergeMessageFieldValue = shallowRef('');
+const deleteBranchAfterMerge = shallowRef(false);
+const autoMergeWhenSucceed = shallowRef(false);
 
-const mergeStyle = ref('');
+const mergeStyle = shallowRef('');
 const mergeStyleDetail = ref({
   hideMergeMessageTexts: false,
   textDoMerge: '',
@@ -21,10 +21,10 @@ const mergeStyleDetail = ref({
   hideAutoMerge: false,
 });
 
-const mergeStyleAllowedCount = ref(0);
+const mergeStyleAllowedCount = shallowRef(0);
 
-const showMergeStyleMenu = ref(false);
-const showActionForm = ref(false);
+const showMergeStyleMenu = shallowRef(false);
+const showActionForm = shallowRef(false);
 
 const mergeButtonStyleClass = computed(() => {
   if (mergeForm.value.allOverridableChecksOk) return 'primary';

web_src/js/components/RepoActivityTopAuthors.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // @ts-expect-error - module exports no types
 import {VueBarGraph} from 'vue-bar-graph';
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, useTemplateRef} from 'vue';
 
 const colors = ref({
   barColor: 'green',
@@ -41,8 +41,8 @@ const graphWidth = computed(() => {
   return activityTopAuthors.length * 40;
 });
 
-const styleElement = ref<HTMLElement | null>(null);
-const altStyleElement = ref<HTMLElement | null>(null);
+const styleElement = useTemplateRef('styleElement');
+const altStyleElement = useTemplateRef('altStyleElement');
 
 onMounted(() => {
   const refStyle = window.getComputedStyle(styleElement.value);

web_src/js/components/RepoCodeFrequency.vue

@@ -23,7 +23,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
@@ -47,8 +47,8 @@ defineProps<{
   };
 }>();
 
-const isLoading = ref(false);
-const errorText = ref('');
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
 const repoLink = ref(pageData.repoLink || []);
 const data = ref<DayData[]>([]);
 

web_src/js/components/RepoRecentCommits.vue

@@ -21,7 +21,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
@@ -43,8 +43,8 @@ defineProps<{
   };
 }>();
 
-const isLoading = ref(false);
-const errorText = ref('');
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
 const repoLink = ref(pageData.repoLink || []);
 const data = ref<DayData[]>([]);
 

web_src/js/components/ViewFileTree.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ViewFileTreeItem from './ViewFileTreeItem.vue';
-import {onMounted, ref} from 'vue';
+import {onMounted, useTemplateRef} from 'vue';
 import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
-const elRoot = ref<HTMLElement | null>(null);
+const elRoot = useTemplateRef('elRoot');
 
 const props = defineProps({
   repoLink: {type: String, required: true},

web_src/js/components/ViewFileTreeItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {isPlainClick} from '../utils/dom.ts';
-import {ref} from 'vue';
+import {ref, shallowRef} from 'vue';
 import {type createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
 type Item = {
@@ -20,9 +20,9 @@ const props = defineProps<{
 }>();
 
 const store = props.store;
-const isLoading = ref(false);
+const isLoading = shallowRef(false);
 const children = ref(props.item.children);
-const collapsed = ref(!props.item.children);
+const collapsed = shallowRef(!props.item.children);
 
 const doLoadChildren = async () => {
   collapsed.value = !collapsed.value;