chore: migrate to eslint 9; optimize chunks (evcc-io#16887)

assets/js/auth.js

@@ -75,7 +75,11 @@ watch(
   () => auth.configured,
   (configured) => {
     const modal = Modal.getOrCreateInstance(document.getElementById("passwordModal"));
-    configured ? modal.hide() : modal.show();
+    if (configured) {
+      modal.hide();
+    } else {
+      modal.show();
+    }
   }
 );
 

assets/js/components/BatterySettingsModal.vue

@@ -30,7 +30,7 @@
 			</li>
 		</ul>
 
-		<div class="row" v-show="usageTabActive">
+		<div v-show="usageTabActive" class="row">
 			<p class="text-center text-md-start col-md-6 order-md-2 col-lg-3 order-lg-3 pt-lg-2">
 				{{ $t("batterySettings.batteryLevel") }}:
 				<strong>{{ fmtSoc(batterySoc) }}</strong>
@@ -224,7 +224,7 @@
 						</i18n-t>
 					</span>
 				</p>
-				<div class="form-check form-switch mt-4" v-if="controllable">
+				<div v-if="controllable" class="form-check form-switch mt-4">
 					<input
 						id="batteryDischargeControl"
 						:checked="batteryDischargeControl"
@@ -263,8 +263,8 @@ import smartCostAvailable from "../utils/smartCostAvailable";
 
 export default {
 	name: "BatterySettingsModal",
-	mixins: [formatter, collector],
 	components: { SmartCostLimit, CustomSelect, GenericModal },
+	mixins: [formatter, collector],
 	props: {
 		bufferSoc: Number,
 		prioritySoc: Number,

assets/js/components/ChargingPlanPreview.vue

@@ -95,7 +95,7 @@ export default {
 			if (!this.targetTime || this.duration === 0) {
 				return "—";
 			}
-			let price = this.activeSlot ? this.activeSlot.price : this.avgPrice;
+			const price = this.activeSlot ? this.activeSlot.price : this.avgPrice;
 			if (price === undefined) {
 				return this.$t("main.targetChargePlan.unknownPrice");
 			}

assets/js/components/Config/ControlModal.vue

@@ -7,7 +7,7 @@
 		@open="open"
 	>
 		<p>{{ $t("config.control.description") }}</p>
-		<p class="text-danger" v-if="error">{{ error }}</p>
+		<p v-if="error" class="text-danger">{{ error }}</p>
 		<form ref="form" class="container mx-0 px-0" @submit.prevent="save">
 			<FormRow
 				id="controlInterval"

assets/js/components/Config/DeviceCard.vue

@@ -42,20 +42,20 @@ export default {
 		editable: Boolean,
 		error: Boolean,
 	},
+	emits: ["edit"],
 	data() {
 		return {
 			tooltip: null,
 		};
 	},
-	emits: ["edit"],
-	mounted() {
-		this.initTooltip();
-	},
 	watch: {
 		editable() {
 			this.initTooltip();
 		},
 	},
+	mounted() {
+		this.initTooltip();
+	},
 	methods: {
 		initTooltip() {
 			this.$nextTick(() => {

assets/js/components/Config/DeviceTags.vue

@@ -27,10 +27,10 @@ import formatter from "../../mixins/formatter";
 
 export default {
 	name: "DeviceTags",
+	mixins: [formatter],
 	props: {
 		tags: Object,
 	},
-	mixins: [formatter],
 	computed: {
 		entries() {
 			return Object.entries(this.tags).map(

assets/js/components/Config/FormRow.vue

@@ -14,7 +14,7 @@
 			<div v-if="example">{{ $t("config.form.example") }}: {{ example }}</div>
 			<div v-if="help">
 				<span class="text-gray" v-html="helpHtml"></span>
-				<a class="ms-1 text-gray" v-if="link" :href="link" target="_blank">
+				<a v-if="link" class="ms-1 text-gray" :href="link" target="_blank">
 					{{ $t("config.general.docsLink") }}
 				</a>
 			</div>

assets/js/components/Config/GeneralConfig.vue

@@ -109,17 +109,14 @@ import formatter from "../../mixins/formatter";
 
 export default {
 	name: "GeneralConfig",
+	components: { TitleModal, EditIcon },
+	mixins: [formatter],
+	emits: ["site-changed"],
 	data() {
 		return {
 			title: "",
 		};
 	},
-	components: { TitleModal, EditIcon },
-	mixins: [formatter],
-	emits: ["site-changed"],
-	async mounted() {
-		await this.load();
-	},
 	computed: {
 		telemetryEnabled() {
 			return settings.telemetry === true;
@@ -148,14 +145,17 @@ export default {
 			return { name, expiresSoon, cssClass };
 		},
 	},
+	async mounted() {
+		await this.load();
+	},
 	methods: {
 		async changed() {
 			this.$emit("site-changed");
 			this.load();
 		},
 		async load() {
 			try {
-				let res = await api.get("/config/site", {
+				const res = await api.get("/config/site", {
 					validateStatus: (code) => [200, 404].includes(code),
 				});
 				if (res.status === 200) {

assets/js/components/Config/InfluxModal.vue

@@ -9,7 +9,7 @@
 		data-testid="influx-modal"
 		@changed="$emit('changed')"
 	>
-		<template v-slot:default="{ values }">
+		<template #default="{ values }">
 			<FormRow
 				id="influxUrl"
 				:label="$t('config.influx.labelUrl')"
@@ -76,10 +76,10 @@
 			<FormRow id="influxInsecure" :label="$t('config.influx.labelInsecure')">
 				<div class="d-flex">
 					<input
-						class="form-check-input"
 						id="influxInsecure"
-						type="checkbox"
 						v-model="values.insecure"
+						class="form-check-input"
+						type="checkbox"
 					/>
 					<label class="form-check-label ms-2" for="influxInsecure">
 						{{ $t("config.influx.labelCheckInsecure") }}

assets/js/components/Config/JsonModal.vue

@@ -6,7 +6,7 @@
 				{{ $t("config.general.docsLink") }}
 			</a>
 		</p>
-		<p class="text-danger" v-if="error">
+		<p v-if="error" class="text-danger">
 			<span v-if="errorMessage" class="d-block">{{ errorMessage }}</span>
 			{{ error }}
 		</p>
@@ -71,16 +71,6 @@ import store from "../../store";
 export default {
 	name: "JsonModal",
 	components: { GenericModal },
-	emits: ["changed", "open"],
-	data() {
-		return {
-			saving: false,
-			removing: false,
-			error: "",
-			values: {},
-			serverValues: {},
-		};
-	},
 	props: {
 		title: String,
 		description: String,
@@ -93,6 +83,16 @@ export default {
 		stateKey: String,
 		saveMethod: { type: String, default: "post" },
 	},
+	emits: ["changed", "open"],
+	data() {
+		return {
+			saving: false,
+			removing: false,
+			error: "",
+			values: {},
+			serverValues: {},
+		};
+	},
 	computed: {
 		docsLink() {
 			return this.docs ? `${docsPrefix()}${this.docs}` : null;

assets/js/components/Config/Markdown.vue

@@ -1,4 +1,5 @@
 <template>
+	<!-- eslint-disable-next-line vue/no-v-html -->
 	<div v-html="compiledMarkdown"></div>
 </template>
 

assets/js/components/Config/MeterModal.vue

@@ -41,9 +41,9 @@
 								<select
 									id="meterTemplate"
 									v-model="templateName"
-									@change="templateChanged"
 									:disabled="!isNew"
 									class="form-select w-100"
+									@change="templateChanged"
 								>
 									<option
 										v-for="option in genericOptions"
@@ -83,8 +83,8 @@
 							/>
 							<PropertyEntry
 								v-for="param in normalParams"
-								:key="param.Name"
 								:id="`meterParam${param.Name}`"
+								:key="param.Name"
 								v-bind="param"
 								v-model="values[param.Name]"
 							/>
@@ -93,8 +93,8 @@
 								<template v-if="advancedParams.length" #advanced>
 									<PropertyEntry
 										v-for="param in advancedParams"
-										:key="param.Name"
 										:id="`meterParam${param.Name}`"
+										:key="param.Name"
 										v-bind="param"
 										v-model="values[param.Name]"
 									/>

assets/js/components/Config/MqttModal.vue

@@ -9,7 +9,7 @@
 		data-testid="mqtt-modal"
 		@changed="$emit('changed')"
 	>
-		<template v-slot:default="{ values }">
+		<template #default="{ values }">
 			<FormRow
 				id="mqttBroker"
 				:label="$t('config.mqtt.labelBroker')"
@@ -53,10 +53,10 @@
 			<FormRow id="mqttInsecure" :label="$t('config.mqtt.labelInsecure')">
 				<div class="d-flex">
 					<input
-						class="form-check-input"
 						id="mqttInsecure"
-						type="checkbox"
 						v-model="values.insecure"
+						class="form-check-input"
+						type="checkbox"
 					/>
 					<label class="form-check-label ms-2" for="mqttInsecure">
 						{{ $t("config.mqtt.labelCheckInsecure") }}

assets/js/components/Config/NetworkModal.vue

@@ -8,7 +8,7 @@
 		data-testid="network-modal"
 		@changed="$emit('changed')"
 	>
-		<template v-slot:default="{ values }">
+		<template #default="{ values }">
 			<FormRow
 				id="networkSchema"
 				:label="$t('config.network.labelSchema')"

assets/js/components/Config/PropertyCertField.vue

@@ -10,11 +10,11 @@
 				{{ $t("config.general.readFromFile") }}
 			</button>
 			<input
-				type="file"
 				ref="fileInput"
+				type="file"
 				class="d-none"
-				@change="readFile"
 				accept=".crt,.pem,.cer,.csr,.key"
+				@change="readFile"
 			/>
 		</div>
 	</div>

assets/js/components/Config/PropertyEntry.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+/* eslint-disable vue/prop-name-casing */
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
 

assets/js/components/Config/PropertyField.vue

@@ -46,8 +46,8 @@
 	<SelectGroup
 		v-else-if="boolean"
 		:id="id"
-		class="w-50"
 		v-model="value"
+		class="w-50"
 		equal-width
 		transparent
 		:options="[

assets/js/components/Config/SponsorModal.vue

@@ -13,7 +13,7 @@
 		@changed="$emit('changed')"
 		@open="showForm = false"
 	>
-		<template v-slot:default="{ values }">
+		<template #default="{ values }">
 			<SponsorTokenExpires v-bind="sponsor" />
 			<div class="mt-4 mb-3">
 				<Sponsor v-bind="sponsor" />
@@ -65,11 +65,6 @@ export default {
 	data: () => ({
 		showForm: false,
 	}),
-	methods: {
-		transformReadValues() {
-			return { token: "" };
-		},
-	},
 	computed: {
 		sponsor() {
 			return store?.state?.sponsor;
@@ -84,6 +79,11 @@ export default {
 				: this.$t("config.sponsor.addToken");
 		},
 	},
+	methods: {
+		transformReadValues() {
+			return { token: "" };
+		},
+	},
 };
 </script>
 <style scoped>