chore: optimize JavaScript bundle (evcc-io#5495)

.gitignore

@@ -30,3 +30,4 @@ fly.toml
 .idea
 vendor/*
 QEMU_EFI.fd
+asset-stats.html

assets/histoire.setup.js

@@ -1,8 +1,6 @@
 import { defineSetupVue3 } from "@histoire/plugin-vue";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap";
 import smoothscroll from "smoothscroll-polyfill";
-import VueNumber from "vue-number-animation";
 import setupI18n from "./js/i18n";
 import "./css/app.css";
 import { watchThemeChanges } from "./js/theme";
@@ -13,5 +11,4 @@ watchThemeChanges();
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.config.globalProperties.$hiddenFeatures = true;
   app.use(setupI18n());
-  app.use(VueNumber);
 });

assets/js/app.js

@@ -1,11 +1,9 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap";
 import smoothscroll from "smoothscroll-polyfill";
 import "../css/app.css";
 import { createApp, h } from "vue";
 import { createMetaManager, plugin as metaPlugin } from "vue-meta";
 import App from "./views/App.vue";
-import VueNumber from "vue-number-animation";
 import setupRouter from "./router";
 import setupI18n from "./i18n";
 import featureflags from "./featureflags";
@@ -70,7 +68,6 @@ app.use(setupRouter(i18n));
 app.use(createMetaManager());
 app.use(metaPlugin);
 app.use(featureflags);
-app.use(VueNumber);
 window.app = app.mount("#app");
 
 watchThemeChanges();

assets/js/components/AnimatedNumber.vue

@@ -1,30 +1,46 @@
 <template>
-	<number :to="to" :format="format" :duration="animationDuration" />
+	<span />
 </template>
 
 <script>
+import { CountUp } from "countup.js";
 const DURATION = 0.5;
 
 export default {
 	name: "AnimatedNumber",
 	props: {
 		to: { type: Number },
-		format: { type: Function },
-		noAnimation: { type: Boolean },
+		format: { type: Function, required: true },
 		duration: { type: Number, default: DURATION },
 	},
 	data() {
-		return { activeDuration: 0 };
-	},
-	computed: {
-		animationDuration() {
-			return this.noAnimation ? 0 : this.activeDuration;
-		},
+		return {
+			instance: null,
+		};
 	},
 	watch: {
-		to: function () {
-			this.activeDuration = this.duration;
+		to(value) {
+			this.instance?.update(value);
 		},
 	},
+	mounted() {
+		if (this.instance) {
+			return;
+		}
+		this.instance = new CountUp(this.$el, this.to, {
+			startVal: this.to,
+			formattingFn: this.format,
+			duration: this.duration,
+			decimalPlaces: 2,
+		});
+		if (this.instance.error) {
+			console.error(this.instance.error);
+		}
+	},
+	unmounted() {
+		this.instance = null;
+	},
 };
 </script>
+
+<style lang="less" scoped></style>

assets/js/components/LiveCommunity.vue

@@ -5,8 +5,7 @@
 			icon="car"
 			:title="$t('footer.community.power')"
 			:value="chargePower"
-			:valueFmt="numberAnimationFmt"
-			:animationDuration="animationDuration"
+			:valueFmt="fmtAnimation"
 			unit="kW"
 			:sub1="$t('footer.community.powerSub1', { totalClients, activeClients })"
 			:sub2="$t('footer.community.powerSub2')"
@@ -17,8 +16,7 @@
 			icon="sun"
 			:title="$t('footer.community.greenShare')"
 			:value="greenShare"
-			:valueFmt="numberAnimationFmt"
-			:animationDuration="animationDuration"
+			:valueFmt="fmtAnimationDecimal"
 			unit="%"
 			:sub1="$t('footer.community.greenShareSub1')"
 			:sub2="$t('footer.community.greenShareSub2')"
@@ -29,8 +27,7 @@
 			icon="eco"
 			:title="$t('footer.community.greenEnergy')"
 			:value="greenEnergyMWh"
-			:valueFmt="numberAnimationFmt"
-			:animationDuration="animationDuration"
+			:valueFmt="fmtAnimationDecimal"
 			unit="MWh"
 			:sub1="$t('footer.community.greenEnergySub1')"
 			:sub2="$t('footer.community.greenEnergySub2')"
@@ -55,7 +52,6 @@ export default {
 		return {
 			refresh: null,
 			result: {},
-			animationDuration: 0.5,
 		};
 	},
 	computed: {
@@ -84,9 +80,6 @@ export default {
 	async mounted() {
 		this.refresh = setInterval(this.update, UPDATE_INTERVAL_SECONDS * 1e3);
 		await this.update();
-		this.$nextTick(() => {
-			this.animationDuration = UPDATE_INTERVAL_SECONDS;
-		});
 	},
 	unmounted() {
 		clearInterval(this.refresh);
@@ -100,7 +93,10 @@ export default {
 				console.error(err);
 			}
 		},
-		numberAnimationFmt(number) {
+		fmtAnimation(number) {
+			return this.fmtNumber(number, 0);
+		},
+		fmtAnimationDecimal(number) {
 			return this.fmtNumber(number, 1);
 		},
 	},

assets/js/components/LoadpointSettingsButton.vue

@@ -1,21 +1,29 @@
 <template>
 	<button
 		type="button"
-		data-bs-toggle="modal"
-		:data-bs-target="`#loadpointSettingsModal_${id}`"
 		class="btn btn-sm btn-outline-secondary position-relative border-0 p-2 evcc-gray"
+		@click="openModal"
 	>
 		<shopicon-regular-adjust size="s"></shopicon-regular-adjust>
 	</button>
 </template>
 
 <script>
 import "@h2d2/shopicons/es/regular/adjust";
+import Modal from "bootstrap/js/dist/modal";
 
 export default {
 	name: "LoadpointSettingsButton",
 	props: {
 		id: [String, Number],
 	},
+	methods: {
+		openModal() {
+			const modal = Modal.getOrCreateInstance(
+				document.getElementById(`loadpointSettingsModal_${this.id}`)
+			);
+			modal.show();
+		},
+	},
 };
 </script>

assets/js/components/Savings.vue

@@ -2,8 +2,7 @@
 	<div>
 		<button
 			class="btn btn-link pe-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
-			data-bs-toggle="modal"
-			data-bs-target="#savingsModal"
+			@click="openModal"
 		>
 			<span class="d-inline d-sm-none">{{
 				$t("footer.savings.footerShort", { percent })
@@ -145,6 +144,7 @@
 </template>
 
 <script>
+import Modal from "bootstrap/js/dist/modal";
 import formatter from "../mixins/formatter";
 import Sponsor from "./Sponsor.vue";
 import SavingsTile from "./SavingsTile.vue";
@@ -192,6 +192,10 @@ export default {
 		showMyData() {
 			this.communityView = false;
 		},
+		openModal() {
+			const modal = Modal.getOrCreateInstance(document.getElementById("savingsModal"));
+			modal.show();
+		},
 	},
 };
 </script>

assets/js/components/SavingsTile.vue

@@ -16,12 +16,7 @@
 				<p class="my-0 fw-bold text-truncate">{{ title }}</p>
 				<strong class="d-flex align-items-baseline lh-sm">
 					<span class="fs-1">
-						<AnimatedNumber
-							v-if="valueFmt"
-							:to="value"
-							:format="valueFmt"
-							:duration="animationDuration"
-						/>
+						<AnimatedNumber v-if="valueFmt" :to="value" :format="valueFmt" />
 						<span v-else>{{ value }}</span>
 					</span>
 					<span class="ms-1 unit">{{ unit }}</span>
@@ -51,7 +46,6 @@ export default {
 		icon: String,
 		value: [String, Number],
 		valueFmt: Function,
-		animationDuration: Number,
 		unit: String,
 		sub1: String,
 		sub2: String,

assets/js/components/StartupError.vue

@@ -93,7 +93,6 @@ export default {
 		scrollTo(e) {
 			const id = e.currentTarget.getAttribute("href").substring(1);
 			const el = document.getElementById(id);
-			console.log({ id, el });
 			if (el) {
 				el.scrollIntoView({ behavior: "smooth", block: "center" });
 			}

assets/js/components/TargetCharge.vue

@@ -8,9 +8,8 @@
 			<button
 				class="btn btn-link p-0 value text-center"
 				:class="targetChargeEnabled ? 'evcc-default-text' : 'text-gray'"
-				data-bs-toggle="modal"
-				:data-bs-target="`#${modalId}`"
 				:disabled="disabled"
+				@click="openModal"
 			>
 				<strong v-if="targetChargeEnabled">{{ targetTimeLabel() }}</strong>
 				<span v-else>{{ $t("main.targetCharge.setTargetTime") }}</span>
@@ -119,6 +118,7 @@
 </template>
 
 <script>
+import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/filled/plus";
 import "@h2d2/shopicons/es/filled/edit";
 import LabelAndValue from "./LabelAndValue.vue";
@@ -243,6 +243,10 @@ export default {
 		removeTargetTime: function () {
 			this.$emit("target-time-removed");
 		},
+		openModal() {
+			const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+			modal.show();
+		},
 	},
 };
 </script>

assets/js/components/TargetEnergySelect.vue

@@ -16,11 +16,7 @@
 					class="text-decoration-underline"
 					:class="{ 'text-gray fw-normal': !targetEnergy }"
 				>
-					<AnimatedNumber
-						:to="targetEnergy"
-						:format="fmtEnergy"
-						:no-animation="!targetEnergy"
-					/>
+					<AnimatedNumber :to="targetEnergy" :format="fmtEnergy" />
 				</span>
 			</label>
 

assets/js/components/TargetSoCSelect.vue

@@ -8,7 +8,7 @@
 					</option>
 				</select>
 				<span class="text-decoration-underline">
-					<AnimatedNumber :to="targetSoc" :format="formatSoC" />
+					<AnimatedNumber :to="77" :format="formatSoC" />
 				</span>
 			</label>
 

assets/js/components/TelemetrySettings.vue

@@ -75,7 +75,7 @@ export default {
 			}
 			try {
 				const response = await api.get("settings/telemetry");
-				this.enabled = response.data.result;
+				settings.telemetry = response.data.result;
 			} catch (err) {
 				console.error(err);
 			}

assets/js/components/TopNavigation.vue

@@ -1,12 +1,10 @@
 <template>
 	<div>
 		<button
+			id="topNavigatonDropdown"
 			type="button"
 			data-bs-toggle="dropdown"
-			data-bs-target="#navbarNavAltMarkup"
-			aria-controls="navbarNavAltMarkup"
 			aria-expanded="false"
-			aria-label="Toggle navigation"
 			class="btn btn-sm btn-outline-secondary position-relative border-0 menu-button"
 		>
 			<span
@@ -17,20 +15,15 @@
 			</span>
 			<shopicon-regular-menu></shopicon-regular-menu>
 		</button>
-		<ul class="dropdown-menu dropdown-menu-end">
+		<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="topNavigatonDropdown">
 			<li>
 				<router-link class="dropdown-item" to="/sessions">
 					{{ $t("header.sessions") }}
 				</router-link>
 			</li>
 
 			<li>
-				<button
-					type="button"
-					class="dropdown-item"
-					data-bs-toggle="modal"
-					data-bs-target="#globalSettingsModal"
-				>
+				<button type="button" class="dropdown-item" @click="openSettingsModal">
 					{{ $t("header.settings") }}
 				</button>
 			</li>
@@ -104,6 +97,10 @@
 </template>
 
 <script>
+import Modal from "bootstrap/js/dist/modal";
+import Dropdown from "bootstrap/js/dist/dropdown";
+import "@h2d2/shopicons/es/regular/gift";
+import "@h2d2/shopicons/es/regular/moonstars";
 import "@h2d2/shopicons/es/regular/menu";
 import "@h2d2/shopicons/es/regular/newtab";
 import GlobalSettingsModal from "./GlobalSettingsModal.vue";
@@ -135,6 +132,12 @@ export default {
 			}));
 		},
 	},
+	mounted() {
+		this.dropdown = new Dropdown(document.getElementById("topNavigatonDropdown"));
+	},
+	unmounted() {
+		this.dropdown?.dispose();
+	},
 	methods: {
 		handleProviderAuthorization: async function (provider) {
 			if (!provider.loggedIn) {
@@ -145,6 +148,10 @@ export default {
 				baseAPI.post(provider.logoutPath);
 			}
 		},
+		openSettingsModal() {
+			const modal = Modal.getOrCreateInstance(document.getElementById("globalSettingsModal"));
+			modal.show();
+		},
 	},
 };
 </script>