Add Vue linting (#13447)

* Add Vue linting

Turns out the .vue files were not linted at all, so I added that as well
as re-indented the file to 2-space and fixed all reasonable issues that
cam up except one case of a unintended side effect for which I have no
idea how to fix it, so the rule was disabled.

* misc tweaks

* update lockfile

* use overrides to include .vue files

* treat warnings as errors on lint-frontend

* also treat stylelint warnings as errors

* use equal sign syntax

Co-authored-by: Lauris BH <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>

Author: 3 people

.eslintrc

@@ -11,6 +11,10 @@ parserOptions:
 plugins:
   - eslint-plugin-unicorn
   - eslint-plugin-import
+  - eslint-plugin-vue
+
+extends:
+  - plugin:vue/recommended
 
 env:
   es2021: true
@@ -24,7 +28,7 @@ globals:
   u2fApi: false
 
 overrides:
-  - files: ["web_src/**/*.js"]
+  - files: ["web_src/**/*.js", "web_src/**/*.vue"]
     env:
       browser: true
       jquery: true
@@ -387,6 +391,11 @@ rules:
   use-isnan: [2]
   valid-typeof: [2, {requireStringLiterals: true}]
   vars-on-top: [0]
+  vue/attributes-order: [0]
+  vue/component-definition-name-casing: [0]
+  vue/html-closing-bracket-spacing: [0]
+  vue/max-attributes-per-line: [0]
+  vue/one-component-per-file: [0]
   wrap-iife: [2, inside]
   wrap-regex: [0]
   yield-star-spacing: [2, after]

Makefile

@@ -312,8 +312,8 @@ lint: lint-frontend lint-backend
 
 .PHONY: lint-frontend
 lint-frontend: node_modules
-	npx eslint web_src/js build webpack.config.js
-	npx stylelint web_src/less
+	npx eslint --max-warnings=0 web_src/js build webpack.config.js
+	npx stylelint --max-warnings=0 web_src/less
 
 .PHONY: lint-backend
 lint-backend: golangci-lint revive vet

package-lock.json

@@ -54,6 +54,7 @@
     "eslint": "7.11.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-unicorn": "23.0.0",
+    "eslint-plugin-vue": "7.1.0",
     "stylelint": "13.7.2",
     "stylelint-config-standard": "20.0.0",
     "svgo": "1.3.2",

package.json

@@ -1,79 +1,71 @@
 <template>
-    <div>
-        <div v-show="isLoading">
-            <slot name="loading"></slot>
-        </div>
-        <h4 class="total-contributions" v-if="!isLoading">
-            {{ totalContributions }} total contributions in the last 12 months
-        </h4>
-        <calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/>
+  <div>
+    <div v-show="isLoading">
+      <slot name="loading"/>
     </div>
+    <h4 v-if="!isLoading" class="total-contributions">
+      {{ values.length }} total contributions in the last 12 months
+    </h4>
+    <calendar-heatmap
+      v-show="!isLoading"
+      :locale="locale"
+      :no-data-text="locale.no_contributions"
+      :tooltip-unit="locale.contributions"
+      :end-date="endDate"
+      :values="values"
+      :range-color="colorRange"
+    />
+  </div>
 </template>
-
 <script>
 import {CalendarHeatmap} from 'vue-calendar-heatmap';
 const {AppSubUrl, heatmapUser} = window.config;
 
 export default {
-    name: "ActivityHeatmap",
-    components: {
-        CalendarHeatmap
-    },
-    data() {
-        return {
-            isLoading: true,
-            colorRange: [],
-            endDate: null,
-            values: [],
-            totalContributions: 0,
-            suburl: AppSubUrl,
-            user: heatmapUser,
-            locale: {
-                contributions: 'contributions',
-                no_contributions: 'No contributions',
-            },
-        };
+  name: 'ActivityHeatmap',
+  components: {CalendarHeatmap},
+  data: () => ({
+    isLoading: true,
+    colorRange: [],
+    endDate: null,
+    values: [],
+    suburl: AppSubUrl,
+    user: heatmapUser,
+    locale: {
+      contributions: 'contributions',
+      no_contributions: 'No contributions',
     },
-    mounted() {
-        this.colorRange = [
-            this.getColor(0),
-            this.getColor(1),
-            this.getColor(2),
-            this.getColor(3),
-            this.getColor(4),
-            this.getColor(5)
-        ];
-        this.endDate = new Date();
-        this.loadHeatmap(this.user);
-    },
-    methods: {
-        loadHeatmap(userName) {
-            const self = this;
-            $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
-                const chartData = [];
-                for (let i = 0; i < chartRawData.length; i++) {
-                    self.totalContributions += chartRawData[i].contributions;
-                    chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
-                }
-                self.values = chartData;
-                self.isLoading = false;
-            });
-        },
-        getColor(idx) {
-            const el = document.createElement('div');
-            el.className = `heatmap-color-${idx}`;
-            document.body.appendChild(el);
-
-            const color = getComputedStyle(el).backgroundColor;
-
-            document.body.removeChild(el);
-
-            return color;
-        }
+  }),
+  mounted() {
+    this.colorRange = [
+      this.getColor(0),
+      this.getColor(1),
+      this.getColor(2),
+      this.getColor(3),
+      this.getColor(4),
+      this.getColor(5)
+    ];
+    this.endDate = new Date();
+    this.loadHeatmap(this.user);
+  },
+  methods: {
+    async loadHeatmap(userName) {
+      const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`);
+      const data = await res.json();
+      this.values = data.map(({contributions, timestamp}) => {
+        return {date: new Date(timestamp * 1000), count: contributions};
+      });
+      this.isLoading = false;
     },
-}
+    getColor(idx) {
+      const el = document.createElement('div');
+      el.className = `heatmap-color-${idx}`;
+      document.body.appendChild(el);
+      const color = getComputedStyle(el).backgroundColor;
+      document.body.removeChild(el);
+      return color;
+    }
+  },
+};
 </script>
-
-<style scoped>
-
-</style>
+<style scoped/>