Enforce trailing comma in JS on multiline (#30002)

To keep blame info accurate and to avoid [changes like this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359), it's good to always have a trailing comma, so let's enforce it in JS. This rule is completely automatically fixable with `make lint-js-fix` and that's what I did here.
2024-03-22 15:06:53 +01:00 · 2024-03-22 15:06:53 +01:00 · 3d751b6ec1
commit 3d751b6ec1
parent f88ad5424f
48 changed files with 117 additions and 117 deletions
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@ -119,7 +119,7 @@ rules:
  "@stylistic/js/arrow-spacing": [2, {before: true, after: true}]
  "@stylistic/js/block-spacing": [0]
  "@stylistic/js/brace-style": [2, 1tbs, {allowSingleLine: true}]
-  "@stylistic/js/comma-dangle": [2, only-multiline]
+  "@stylistic/js/comma-dangle": [2, always-multiline]
  "@stylistic/js/comma-spacing": [2, {before: false, after: true}]
  "@stylistic/js/comma-style": [2, last]
  "@stylistic/js/computed-property-spacing": [2, never]
--- a/playwright.config.js
+++ b/playwright.config.js
@ -20,7 +20,7 @@ export default {
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
-    timeout: 2000
+    timeout: 2000,
  },

  /* Fail the build on CI if you accidentally left test.only in the source code. */
--- a/tools/generate-images.js
+++ b/tools/generate-images.js
@ -20,7 +20,7 @@ async function generate(svg, path, {size, bg}) {
        'removeDimensions',
        {
          name: 'addAttributesToSVGElement',
-          params: {attributes: [{width: size}, {height: size}]}
+          params: {attributes: [{width: size}, {height: size}]},
        },
      ],
    });
--- a/tools/generate-svg.js
+++ b/tools/generate-svg.js
@ -39,8 +39,8 @@ async function processFile(file, {prefix, fullName} = {}) {
          attributes: [
            {'xmlns': 'http://www.w3.org/2000/svg'},
            {'width': '16'}, {'height': '16'}, {'aria-hidden': 'true'},
-          ]
-        }
+          ],
+        },
      },
    ],
  });
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@ -10,20 +10,20 @@ export default {
  props: {
    status: {
      type: String,
-      required: true
+      required: true,
    },
    size: {
      type: Number,
-      default: 16
+      default: 16,
    },
    className: {
      type: String,
-      default: ''
+      default: '',
    },
    localeStatus: {
      type: String,
-      default: ''
-    }
+      default: '',
+    },
  },
 };
 </script>
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@ -11,7 +11,7 @@ export default {
    locale: {
      type: Object,
      default: () => {},
-    }
+    },
  },
  data: () => ({
    colorRange: [
@ -49,7 +49,7 @@ export default {

      const newSearch = params.toString();
      window.location.search = newSearch.length ? `?${newSearch}` : '';
-    }
+    },
  },
 };
 </script>
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@ -69,7 +69,7 @@ export default {
        }
        return {name: label.name, color: `#${label.color}`, textColor};
      });
-    }
+    },
  },
  mounted() {
    this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
@ -97,8 +97,8 @@ export default {
      } finally {
        this.loading = false;
      }
-    }
-  }
+    },
+  },
 };
 </script>
 <template>
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@ -253,7 +253,7 @@ const sfc = {
            ...webSearchRepo.repository,
            latest_commit_status_state: webSearchRepo.latest_commit_status.State,
            locale_latest_commit_status_state: webSearchRepo.locale_latest_commit_status,
-            latest_commit_status_state_link: webSearchRepo.latest_commit_status.TargetURL
+            latest_commit_status_state_link: webSearchRepo.latest_commit_status.TargetURL,
          };
        });
        const count = response.headers.get('X-Total-Count');
@ -325,7 +325,7 @@ const sfc = {
      if (this.activeIndex === -1 || this.activeIndex > this.repos.length - 1) {
        this.activeIndex = 0;
      }
-    }
+    },
  },
 };

--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@ -14,7 +14,7 @@ export default {
      },
      commits: [],
      hoverActivated: false,
-      lastReviewCommitSha: null
+      lastReviewCommitSha: null,
    };
  },
  computed: {
@ -29,7 +29,7 @@ export default {
    },
    issueLink() {
      return this.$el.parentNode.getAttribute('data-issuelink');
-    }
+    },
  },
  mounted() {
    document.body.addEventListener('click', this.onBodyClick);
@ -185,7 +185,7 @@ export default {
        }
      }
    },
-  }
+  },
 };
 </script>
 <template>
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@ -31,7 +31,7 @@ export default {
    },
    loadMoreData() {
      loadMoreFiles(this.store.linkLoadMore);
-    }
+    },
  },
 };
 </script>
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@ -30,7 +30,7 @@ export default {
          let newParent = {
            name: split,
            children: [],
-            isFile
+            isFile,
          };

          if (isFile === true) {
@ -40,7 +40,7 @@ export default {
          if (parent) {
            // check if the folder already exists
            const existingFolder = parent.children.find(
-              (x) => x.name === split
+              (x) => x.name === split,
            );
            if (existingFolder) {
              newParent = existingFolder;
@ -74,7 +74,7 @@ export default {
      // reduce the depth of our tree.
      mergeChildIfOnlyOneDir(result);
      return result;
-    }
+    },
  },
  mounted() {
    // Default to true if unset
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@ -7,7 +7,7 @@ export default {
  props: {
    item: {
      type: Object,
-      required: true
+      required: true,
    },
  },
  data: () => ({
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@ -43,7 +43,7 @@ export default {
      for (const elem of document.querySelectorAll('[data-pull-merge-style]')) {
        toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val);
      }
-    }
+    },
  },
  created() {
    this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0);
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@ -66,7 +66,7 @@ const sfc = {
            name: '',
            link: '',
          },
-        }
+        },
      },
      currentJob: {
        title: '',
@ -311,7 +311,7 @@ const sfc = {
      const logLine = this.$refs.steps.querySelector(selectedLogStep);
      if (!logLine) return;
      logLine.querySelector('.line-num').click();
-    }
+    },
  },
 };

@ -352,7 +352,7 @@ export function initRepositoryActionView() {
        skipped: el.getAttribute('data-locale-status-skipped'),
        blocked: el.getAttribute('data-locale-status-blocked'),
      },
-    }
+    },
  });
  view.mount(el);
 }
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@ -47,7 +47,7 @@ const sfc = {
    this.colors.barColor = refStyle.backgroundColor;
    this.colors.textColor = refStyle.color;
    this.colors.textAltColor = refAltStyle.color;
-  }
+  },
 };

 export function initRepoActivityTopAuthorsChart() {
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@ -36,7 +36,7 @@ const sfc = {
    },
    shouldCreateTag() {
      return this.mode === 'tags';
-    }
+    },
  },

  watch: {
@ -45,7 +45,7 @@ const sfc = {
        this.focusSearchField();
        this.fetchBranchesOrTags();
      }
-    }
+    },
  },

  beforeMount() {
@ -209,7 +209,7 @@ const sfc = {
        this.isLoading = false;
      }
    },
-  }
+  },
 };

 export function initRepoBranchTagSelector(selector) {
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@ -39,7 +39,7 @@ export default {
  props: {
    locale: {
      type: Object,
-      required: true
+      required: true,
    },
  },
  data: () => ({
@ -128,12 +128,12 @@ export default {
            },
            ticks: {
              maxRotation: 0,
-              maxTicksLimit: 12
+              maxTicksLimit: 12,
            },
          },
          y: {
            ticks: {
-              maxTicksLimit: 6
+              maxTicksLimit: 6,
            },
          },
        },
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@ -34,7 +34,7 @@ const customEventListener = {
      chart.resetZoom();
      opts.instance.updateOtherCharts(args.event, true);
    }
-  }
+  },
 };

 Chart.defaults.color = chartJsColors.text;
@ -82,7 +82,7 @@ export default {
        this.xAxisMax = this.xAxisEnd;
        this.type = val;
        this.sortContributors();
-      }
+      },
    });
  },
  methods: {
@ -175,7 +175,7 @@ export default {
      // Normally, chartjs handles this automatically, but it will resize the graph when you
      // zoom, pan etc. I think resizing the graph makes it harder to compare things visually.
      const maxValue = Math.max(
-        ...this.totalStats.weeks.map((o) => o[this.type])
+        ...this.totalStats.weeks.map((o) => o[this.type]),
      );
      const [coefficient, exp] = maxValue.toExponential().split('e').map(Number);
      if (coefficient % 1 === 0) return maxValue;
@ -187,7 +187,7 @@ export default {
      // for contributors' graph. If I let chartjs do this for me, it will choose different
      // maxY value for each contributors' graph which again makes it harder to compare.
      const maxValue = Math.max(
-        ...this.sortedContributors.map((c) => c.max_contribution_type)
+        ...this.sortedContributors.map((c) => c.max_contribution_type),
      );
      const [coefficient, exp] = maxValue.toExponential().split('e').map(Number);
      if (coefficient % 1 === 0) return maxValue;
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@ -35,7 +35,7 @@ export default {
  props: {
    locale: {
      type: Object,
-      required: true
+      required: true,
    },
  },
  data: () => ({
@ -105,12 +105,12 @@ export default {
            },
            ticks: {
              maxRotation: 0,
-              maxTicksLimit: 52
+              maxTicksLimit: 52,
            },
          },
          y: {
            ticks: {
-              maxTicksLimit: 6
+              maxTicksLimit: 6,
            },
          },
        },
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@ -39,7 +39,7 @@ const sfc = {
        'repository',
        'user');
      return categories;
-    }
+    },
  },

  mounted() {
@ -68,7 +68,7 @@ const sfc = {
      }
      // no scopes selected, show validation error
      showElem(warningEl);
-    }
+    },
  },
 };

--- a/web_src/js/features/captcha.js
+++ b/web_src/js/features/captcha.js
@ -9,7 +9,7 @@ export async function initCaptcha() {

  const params = {
    sitekey: siteKey,
-    theme: isDark ? 'dark' : 'light'
+    theme: isDark ? 'dark' : 'light',
  };

  switch (captchaEl.getAttribute('data-captcha-type')) {
@ -42,7 +42,7 @@ export async function initCaptcha() {
        siteKey: {
          instanceUrl: new URL(instanceURL),
          key: siteKey,
-        }
+        },
      });
      break;
    }
--- a/web_src/js/features/code-frequency.js
+++ b/web_src/js/features/code-frequency.js
@ -11,7 +11,7 @@ export async function initRepoCodeFrequency() {
        loadingTitle: el.getAttribute('data-locale-loading-title'),
        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
        loadingInfo: el.getAttribute('data-locale-loading-info'),
-      }
+      },
    });
    View.mount(el);
  } catch (err) {
--- a/web_src/js/features/codeeditor.js
+++ b/web_src/js/features/codeeditor.js
@ -80,7 +80,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
    rules: [
      {
        background: getColor('--color-code-bg'),
-      }
+      },
    ],
    colors: {
      'editor.background': getColor('--color-code-bg'),
@ -98,7 +98,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
      'input.foreground': getColor('--color-input-text'),
      'scrollbar.shadow': getColor('--color-shadow'),
      'progressBar.background': getColor('--color-primary'),
-    }
+    },
  });

  // Quick fix: https://github.com/microsoft/monaco-editor/issues/2962
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@ -335,7 +335,7 @@ export function initGlobalLinkActions() {
          const data = await response.json();
          window.location.href = data.redirect;
        }
-      }
+      },
    }).modal('show');
  }

--- a/web_src/js/features/comp/EasyMDEToolbarActions.js
+++ b/web_src/js/features/comp/EasyMDEToolbarActions.js
@ -139,7 +139,7 @@ export function easyMDEToolbarActions(EasyMDE, editor) {
      },
      icon: svg('octicon-chevron-right'),
      title: 'Add Inline Code',
-    }
+    },
  };

  for (const [key, value] of Object.entries(actions)) {
--- a/web_src/js/features/comp/SearchUserBox.js
+++ b/web_src/js/features/comp/SearchUserBox.js
@ -22,7 +22,7 @@ export function initCompSearchUserBox() {
        $.each(response.data, (_i, item) => {
          const resultItem = {
            title: item.login,
-            image: item.avatar_url
+            image: item.avatar_url,
          };
          if (item.full_name) {
            resultItem.description = htmlEscape(item.full_name);
@ -37,15 +37,15 @@ export function initCompSearchUserBox() {
        if (allowEmailInput && items.length === 0 && looksLikeEmailAddressCheck.test(searchQuery)) {
          const resultItem = {
            title: searchQuery,
-            description: allowEmailDescription
+            description: allowEmailDescription,
          };
          items.push(resultItem);
        }

        return {results: items};
-      }
+      },
    },
    searchFields: ['login', 'full_name'],
-    showNoResults: false
+    showNoResults: false,
  });
 }
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@ -37,7 +37,7 @@ export function attachRefIssueContextPopup(refIssues) {
      interactiveBorder: 5,
      onShow: () => {
        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
-      }
+      },
    });
  }
 }
--- a/web_src/js/features/contributors.js
+++ b/web_src/js/features/contributors.js
@ -18,7 +18,7 @@ export async function initRepoContributors() {
        loadingTitle: el.getAttribute('data-locale-loading-title'),
        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
        loadingInfo: el.getAttribute('data-locale-loading-info'),
-      }
+      },
    });
    View.mount(el);
  } catch (err) {
--- a/web_src/js/features/eventsource.sharedworker.js
+++ b/web_src/js/features/eventsource.sharedworker.js
@ -48,7 +48,7 @@ class Source {
    this.eventSource.addEventListener(eventType, (event) => {
      this.notifyClients({
        type: eventType,
-        data: event.data
+        data: event.data,
      });
    });
  }
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@ -20,19 +20,19 @@ function getDefaultSvgBoundsIfUndefined(text, src) {
    if (img.width > 1 && img.width < MaxSize && img.height > 1 && img.height < MaxSize) {
      return {
        width: img.width,
-        height: img.height
+        height: img.height,
      };
    }
    if (svg.hasAttribute('viewBox')) {
      const viewBox = svg.viewBox.baseVal;
      return {
        width: DefaultSize,
-        height: DefaultSize * viewBox.width / viewBox.height
+        height: DefaultSize * viewBox.width / viewBox.height,
      };
    }
    return {
      width: DefaultSize,
-      height: DefaultSize
+      height: DefaultSize,
    };
  }
  return null;
@ -42,15 +42,15 @@ export function initImageDiff() {
  function createContext(image1, image2) {
    const size1 = {
      width: image1 && image1.width || 0,
-      height: image1 && image1.height || 0
+      height: image1 && image1.height || 0,
    };
    const size2 = {
      width: image2 && image2.width || 0,
-      height: image2 && image2.height || 0
+      height: image2 && image2.height || 0,
    };
    const max = {
      width: Math.max(size2.width, size1.width),
-      height: Math.max(size2.height, size1.height)
+      height: Math.max(size2.height, size1.height),
    };

    return {
@ -63,8 +63,8 @@ export function initImageDiff() {
        Math.floor(max.width - size1.width) / 2,
        Math.floor(max.height - size1.height) / 2,
        Math.floor(max.width - size2.width) / 2,
-        Math.floor(max.height - size2.height) / 2
-      ]
+        Math.floor(max.height - size2.height) / 2,
+      ],
    };
  }

@ -79,12 +79,12 @@ export function initImageDiff() {
      path: this.getAttribute('data-path-after'),
      mime: this.getAttribute('data-mime-after'),
      $images: $container.find('img.image-after'), // matches 3 <img>
-      $boundsInfo: $container.find('.bounds-info-after')
+      $boundsInfo: $container.find('.bounds-info-after'),
    }, {
      path: this.getAttribute('data-path-before'),
      mime: this.getAttribute('data-mime-before'),
      $images: $container.find('img.image-before'), // matches 3 <img>
-      $boundsInfo: $container.find('.bounds-info-before')
+      $boundsInfo: $container.find('.bounds-info-before'),
    }];

    await Promise.all(imageInfos.map(async (info) => {
@ -222,21 +222,21 @@ export function initImageDiff() {

      sizes.image1.css({
        width: sizes.size1.width * factor,
-        height: sizes.size1.height * factor
+        height: sizes.size1.height * factor,
      });
      sizes.image2.css({
        width: sizes.size2.width * factor,
-        height: sizes.size2.height * factor
+        height: sizes.size2.height * factor,
      });
      sizes.image1.parent().css({
        margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`,
        width: sizes.size1.width * factor + 2,
-        height: sizes.size1.height * factor + 2
+        height: sizes.size1.height * factor + 2,
      });
      sizes.image2.parent().css({
        margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
        width: sizes.size2.width * factor + 2,
-        height: sizes.size2.height * factor + 2
+        height: sizes.size2.height * factor + 2,
      });

      // some inner elements are `position: absolute`, so the container's height must be large enough
@ -248,7 +248,7 @@ export function initImageDiff() {

      const $range = $container.find("input[type='range']");
      const onInput = () => sizes.image1.parent().css({
-        opacity: $range.val() / 100
+        opacity: $range.val() / 100,
      });
      $range.on('input', onInput);
      onInput();
--- a/Show More
+++ b/Show More