JS refactors (#22227)

- Replace all default exports with named exports, except for Vue SFCs
- Remove names from Vue SFCs, they are automatically inferred from the
filename
- Misc whitespace-related tweaks

Author: silverwind

web_src/js/components/ActivityHeatmap.vue

@@ -18,7 +18,6 @@
 import {CalendarHeatmap} from 'vue3-calendar-heatmap';
 
 export default {
-  name: 'ActivityHeatmap',
   components: {CalendarHeatmap},
   props: {
     values: {

web_src/js/components/ContextPopup.vue

@@ -46,19 +46,13 @@ const luminance = (colorString) => {
 const luminanceThreshold = 0.179;
 
 export default {
-  name: 'ContextPopup',
-
-  components: {
-    SvgIcon,
-  },
-
+  components: {SvgIcon},
   data: () => ({
     loading: false,
     issue: null,
     i18nErrorOccurred: i18n.error_occurred,
     i18nErrorMessage: null,
   }),
-
   computed: {
     createdAt() {
       return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
@@ -107,7 +101,6 @@ export default {
       });
     }
   },
-
   mounted() {
     this.$refs.root.addEventListener('us-load-context-popup', (e) => {
       const data = e.detail;
@@ -116,7 +109,6 @@ export default {
       }
     });
   },
-
   methods: {
     load(data) {
       this.loading = true;

web_src/js/components/DiffFileList.vue

@@ -27,12 +27,9 @@ import {doLoadMoreFiles} from '../features/repo-diff.js';
 const {pageData} = window.config;
 
 export default {
-  name: 'DiffFileList',
-
   data: () => {
     return pageData.diffFileInfo;
   },
-
   watch: {
     fileListIsVisible(newValue) {
       if (newValue === true) {
@@ -44,15 +41,12 @@ export default {
       }
     }
   },
-
   mounted() {
     document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
   },
-
   unmounted() {
     document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
   },
-
   methods: {
     toggleFileList() {
       this.fileListIsVisible = !this.fileListIsVisible;

web_src/js/components/DiffFileTree.vue

@@ -21,15 +21,12 @@ const {pageData} = window.config;
 const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
 
 export default {
-  name: 'DiffFileTree',
   components: {DiffFileTreeItem},
-
   data: () => {
     const fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) === 'true';
     pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
     return pageData.diffFileInfo;
   },
-
   computed: {
     fileTree() {
       const result = [];
@@ -94,7 +91,6 @@ export default {
       return result;
     }
   },
-
   mounted() {
     // ensure correct buttons when we are mounted to the dom
     this.adjustToggleButton(this.fileTreeIsVisible);
@@ -125,7 +121,7 @@ export default {
       doLoadMoreFiles(this.link, this.diffEnd, () => {
         this.isLoadingNewData = false;
       });
-    }
+    },
   },
 };
 </script>

web_src/js/components/DiffFileTreeItem.vue

@@ -43,11 +43,7 @@
 import {SvgIcon} from '../svg.js';
 
 export default {
-  name: 'DiffFileTreeItem',
-  components: {
-    SvgIcon,
-  },
-
+  components: {SvgIcon},
   props: {
     item: {
       type: Object,
@@ -59,7 +55,6 @@ export default {
       default: true
     }
   },
-
   data: () => ({
     collapsed: false,
   }),

web_src/js/components/PullRequestMergeForm.vue

@@ -111,11 +111,7 @@ import {SvgIcon} from '../svg.js';
 const {csrfToken, pageData} = window.config;
 
 export default {
-  name: 'PullRequestMergeForm',
-  components: {
-    SvgIcon,
-  },
-
+  components: {SvgIcon},
   data: () => ({
     csrfToken,
     mergeForm: pageData.pullRequestMergeForm,
@@ -137,36 +133,30 @@ export default {
     showMergeStyleMenu: false,
     showActionForm: false,
   }),
-
   computed: {
     mergeButtonStyleClass() {
       if (this.mergeForm.allOverridableChecksOk) return 'green';
       return this.autoMergeWhenSucceed ? 'blue' : 'red';
     }
   },
-
   watch: {
     mergeStyle(val) {
       this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val);
     }
   },
-
   created() {
     this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0);
 
     let mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed && e.name === this.mergeForm.defaultMergeStyle)?.name;
     if (!mergeStyle) mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed)?.name;
     this.switchMergeStyle(mergeStyle, !this.mergeForm.canMergeNow);
   },
-
   mounted() {
     document.addEventListener('mouseup', this.hideMergeStyleMenu);
   },
-
   unmounted() {
     document.removeEventListener('mouseup', this.hideMergeStyleMenu);
   },
-
   methods: {
     hideMergeStyleMenu() {
       this.showMergeStyleMenu = false;

web_src/js/features/clipboard.js

@@ -44,7 +44,7 @@ function fallbackCopyToClipboard(text) {
 
 // For all DOM elements with [data-clipboard-target] or [data-clipboard-text],
 // this copy-to-clipboard will work for them
-export default function initGlobalCopyToClipboardListener() {
+export function initGlobalCopyToClipboardListener() {
   document.addEventListener('click', (e) => {
     let target = e.target;
     // in case <button data-clipboard-text><svg></button>, so we just search

web_src/js/features/colorpicker.js

@@ -1,4 +1,4 @@
-export default async function createColorPicker($els) {
+export async function createColorPicker($els) {
   if (!$els || !$els.length) return;
 
   await Promise.all([

web_src/js/features/common-global.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import 'jquery.are-you-sure';
 import {mqBinarySearch} from '../utils.js';
-import createDropzone from './dropzone.js';
+import {createDropzone} from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {attachDropdownAria} from './aria.js';

web_src/js/features/comp/ColorPicker.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import createColorPicker from '../colorpicker.js';
+import {createColorPicker} from '../colorpicker.js';
 
 export function initCompColorPicker() {
   createColorPicker($('.color-picker'));