Refactor code to comply with ESLint rules

Major refactoring using ESLint with rules from AirBnb and Vue.

Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.

Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.

Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
This commit is contained in:
undergroundwires
2022-01-02 18:20:14 +01:00
parent 96265b75de
commit 5b1fbe1e2f
341 changed files with 16126 additions and 15101 deletions

View File

@@ -1,7 +1,10 @@
<template>
<span
<span
class="container"
v-bind:class="{ 'container-unsupported': !hasCurrentOsDesktopVersion, 'container-supported': hasCurrentOsDesktopVersion }">
v-bind:class="{
'container-unsupported': !hasCurrentOsDesktopVersion,
'container-supported': hasCurrentOsDesktopVersion
}">
<span class="description">
<font-awesome-icon class="description__icon" :icon="['fas', 'desktop']" />
<span class="description__text">For desktop:</span>
@@ -25,13 +28,15 @@ import DownloadUrlListItem from './DownloadUrlListItem.vue';
})
export default class DownloadUrlList extends Vue {
public readonly supportedDesktops: ReadonlyArray<OperatingSystem>;
public readonly hasCurrentOsDesktopVersion: boolean = false;
constructor() {
super();
const supportedOperativeSystems = [OperatingSystem.Windows, OperatingSystem.Linux, OperatingSystem.macOS];
const supportedOperativeSystems = [
OperatingSystem.Windows, OperatingSystem.Linux, OperatingSystem.macOS];
const currentOs = Environment.CurrentEnvironment.os;
this.supportedDesktops = supportedOperativeSystems.sort((os) => os === currentOs ? 0 : 1);
this.supportedDesktops = supportedOperativeSystems.sort((os) => (os === currentOs ? 0 : 1));
this.hasCurrentOsDesktopVersion = supportedOperativeSystems.includes(currentOs);
}
}

View File

@@ -2,14 +2,16 @@
<span class="url">
<a :href="downloadUrl"
v-bind:class="{
'url__active': hasCurrentOsDesktopVersion && isCurrentOs,
'url__inactive': hasCurrentOsDesktopVersion && !isCurrentOs,
}">{{ operatingSystemName }}</a>
'url__active': hasCurrentOsDesktopVersion && isCurrentOs,
'url__inactive': hasCurrentOsDesktopVersion && !isCurrentOs,
}">{{ operatingSystemName }}</a>
</span>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
import {
Component, Prop, Watch, Vue,
} from 'vue-property-decorator';
import { Environment } from '@/application/Environment/Environment';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { ApplicationFactory } from '@/application/ApplicationFactory';
@@ -18,58 +20,61 @@ import { ApplicationFactory } from '@/application/ApplicationFactory';
export default class DownloadUrlListItem extends Vue {
@Prop() public operatingSystem!: OperatingSystem;
public downloadUrl: string = '';
public operatingSystemName: string = '';
public isCurrentOs: boolean = false;
public hasCurrentOsDesktopVersion: boolean = false;
public downloadUrl = '';
public operatingSystemName = '';
public isCurrentOs = false;
public hasCurrentOsDesktopVersion = false;
public async mounted() {
await this.onOperatingSystemChanged(this.operatingSystem);
await this.onOperatingSystemChanged(this.operatingSystem);
}
@Watch('operatingSystem')
public async onOperatingSystemChanged(os: OperatingSystem) {
const currentOs = Environment.CurrentEnvironment.os;
this.isCurrentOs = os === currentOs;
this.downloadUrl = await this.getDownloadUrl(os);
this.downloadUrl = await getDownloadUrl(os);
this.operatingSystemName = getOperatingSystemName(os);
this.hasCurrentOsDesktopVersion = hasDesktopVersion(currentOs);
}
}
private async getDownloadUrl(os: OperatingSystem): Promise<string> {
const context = await ApplicationFactory.Current.getApp();
return context.info.getDownloadUrl(os);
}
async function getDownloadUrl(os: OperatingSystem): Promise<string> {
const context = await ApplicationFactory.Current.getApp();
return context.info.getDownloadUrl(os);
}
function hasDesktopVersion(os: OperatingSystem): boolean {
return os === OperatingSystem.Windows
|| os === OperatingSystem.Linux
|| os === OperatingSystem.macOS;
return os === OperatingSystem.Windows
|| os === OperatingSystem.Linux
|| os === OperatingSystem.macOS;
}
function getOperatingSystemName(os: OperatingSystem): string {
switch (os) {
case OperatingSystem.Linux:
return 'Linux';
case OperatingSystem.macOS:
return 'macOS';
case OperatingSystem.Windows:
return 'Windows';
default:
throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
}
switch (os) {
case OperatingSystem.Linux:
return 'Linux';
case OperatingSystem.macOS:
return 'macOS';
case OperatingSystem.Windows:
return 'Windows';
default:
throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
}
}
</script>
<style scoped lang="scss">
.url {
&__active {
font-size: 1em;
}
&__inactive {
font-size: 0.70em;
}
&__active {
font-size: 1em;
}
&__inactive {
font-size: 0.70em;
}
}
</style>

View File

@@ -1,33 +1,39 @@
<template>
<div class="privacy-policy">
<div v-if="!isDesktop" class="line">
<div class="line__emoji">🚫🍪</div>
<div>No cookies!</div>
</div>
<div v-if="isDesktop" class="line">
<div class="line__emoji">🚫🌐</div>
<div>Everything is offline, except single request GitHub to check for updates on application start.</div>
</div>
<div class="line">
<div class="line__emoji">🚫👀</div>
<div>No user behavior / IP address collection!</div>
</div>
<div class="line">
<div class="line__emoji">🤖</div>
<div>All transparent: Deployed automatically from the master branch
of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
</div>
<div v-if="!isDesktop" class="line">
<div class="line__emoji">📈</div>
<div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
are collected by AWS but they cannot be traced to you or your behavior. You can download the offline version if you don't want any CDN data collection.</div>
</div>
<div class="line">
<div class="line__emoji">🎉</div>
<div>As almost no data is collected, the application gets better only with your active feedback.
Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
<div class="privacy-policy">
<div v-if="!isDesktop" class="line">
<div class="line__emoji">🚫🍪</div>
<div>No cookies!</div>
</div>
<div v-if="isDesktop" class="line">
<div class="line__emoji">🚫🌐</div>
<div>
Everything is offline, except single request GitHub
to check for updates on application start.
</div>
</div>
<div class="line">
<div class="line__emoji">🚫👀</div>
<div>No user behavior / IP address collection!</div>
</div>
<div class="line">
<div class="line__emoji">🤖</div>
<div>All transparent: Deployed automatically from the master branch
of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
</div>
<div v-if="!isDesktop" class="line">
<div class="line__emoji">📈</div>
<div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
are collected by AWS but they cannot be traced to you or your behavior.
You can download the offline version if you don't want any CDN data collection.</div>
</div>
<div class="line">
<div class="line__emoji">🎉</div>
<div>
As almost no data is collected, the application gets better
only with your active feedback.
Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
</div>
</div>
</template>
<script lang="ts">
@@ -38,8 +44,10 @@ import { IApplication } from '@/domain/IApplication';
@Component
export default class PrivacyPolicy extends Vue {
public repositoryUrl: string = '';
public feedbackUrl: string = '';
public repositoryUrl = '';
public feedbackUrl = '';
public isDesktop = Environment.CurrentEnvironment.isDesktop;
public async created() {
@@ -48,7 +56,7 @@ export default class PrivacyPolicy extends Vue {
}
private initialize(app: IApplication) {
const info = app.info;
const { info } = app;
this.repositoryUrl = info.repositoryWebUrl;
this.feedbackUrl = info.feedbackUrl;
}
@@ -59,18 +67,18 @@ export default class PrivacyPolicy extends Vue {
@use "@/presentation/assets/styles/main" as *;
.privacy-policy {
display: flex;
flex-direction: column;
font-family: $font-normal;
text-align:center;
.line {
display: flex;
flex-direction: column;
font-family: $font-normal;
text-align:center;
.line {
display: flex;
flex-direction: column;
&:not(:first-child) {
margin-top:0.2rem;
}
&:not(:first-child) {
margin-top:0.2rem;
}
}
}
</style>

View File

@@ -4,7 +4,9 @@
<div class="footer__section">
<span v-if="isDesktop" class="footer__section__item">
<font-awesome-icon class="icon" :icon="['fas', 'globe']" />
<span>Online version at <a :href="homepageUrl" target="_blank">{{ homepageUrl }}</a></span>
<span>
Online version at <a :href="homepageUrl" target="_blank">{{ homepageUrl }}</a>
</span>
</span>
<span v-else class="footer__section__item">
<DownloadUrlList />
@@ -44,11 +46,11 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Environment } from '@/application/Environment/Environment';
import PrivacyPolicy from './PrivacyPolicy.vue';
import Dialog from '@/presentation/components/Shared/Dialog.vue';
import DownloadUrlList from './DownloadUrlList.vue';
import { IApplication } from '@/domain/IApplication';
import { ApplicationFactory } from '@/application/ApplicationFactory';
import DownloadUrlList from './DownloadUrlList.vue';
import PrivacyPolicy from './PrivacyPolicy.vue';
@Component({
components: {
@@ -58,11 +60,15 @@ import { ApplicationFactory } from '@/application/ApplicationFactory';
export default class TheFooter extends Vue {
public readonly isDesktop = Environment.CurrentEnvironment.isDesktop;
public version: string = '';
public repositoryUrl: string = '';
public releaseUrl: string = '';
public feedbackUrl: string = '';
public homepageUrl: string = '';
public version = '';
public repositoryUrl = '';
public releaseUrl = '';
public feedbackUrl = '';
public homepageUrl = '';
public async created() {
const app = await ApplicationFactory.Current.getApp();
@@ -70,7 +76,7 @@ export default class TheFooter extends Vue {
}
private initialize(app: IApplication) {
const info = app.info;
const { info } = app;
this.version = info.version;
this.homepageUrl = info.homepage;
this.repositoryUrl = info.repositoryWebUrl;
@@ -91,15 +97,15 @@ export default class TheFooter extends Vue {
.footer {
display: flex;
justify-content: space-between;
@media screen and (max-width: $media-screen-big-width) {
@media screen and (max-width: $media-screen-big-width) {
flex-direction: column;
align-items: center;
}
&__section {
display: flex;
@media screen and (max-width: $media-screen-big-width) {
@media screen and (max-width: $media-screen-big-width) {
justify-content: space-around;
width:100%;
width: 100%;
&:not(:first-child) {
margin-top: 0.7em;
}
@@ -112,7 +118,7 @@ export default class TheFooter extends Vue {
content: "|";
padding: 0 5px;
}
@media screen and (max-width: $media-screen-big-width) {
@media screen and (max-width: $media-screen-big-width) {
margin-top: 3px;
&::before {
content: "";