chore: optimize bundle size (evcc-io#9464)

assets/js/app.js

@@ -3,7 +3,6 @@ import smoothscroll from "smoothscroll-polyfill";
 import "../css/app.css";
 import { createApp, h } from "vue";
 import { createMetaManager, plugin as metaPlugin } from "vue-meta";
-import Vue3linkify from "vue-3-linkify";
 import App from "./views/App.vue";
 import setupRouter from "./router";
 import setupI18n from "./i18n";
@@ -69,7 +68,6 @@ app.use(setupRouter(i18n));
 app.use(createMetaManager());
 app.use(metaPlugin);
 app.use(featureflags);
-app.use(Vue3linkify);
 window.app = app.mount("#app");
 
 watchThemeChanges();

assets/js/components/Config/FormRow.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
 	<div class="mb-3">
 		<label :for="id">
@@ -11,12 +12,14 @@
 		</div>
 		<div class="form-text">
 			<div v-if="example">{{ $t("config.form.example") }}: {{ example }}</div>
-			<div v-if="help" v-linkify:options="{ target: '_blank' }">{{ help }}</div>
+			<div v-if="help" v-html="helpHtml"></div>
 		</div>
 	</div>
 </template>
 
 <script>
+import linkify from "../../utils/linkify";
+
 export default {
 	name: "FormRow",
 	props: {
@@ -27,5 +30,10 @@ export default {
 		smallValue: Boolean,
 		example: String,
 	},
+	computed: {
+		helpHtml() {
+			return linkify(this.help);
+		},
+	},
 };
 </script>

assets/js/router.js

@@ -1,19 +1,17 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 
 import Main from "./views/Main.vue";
-import ChargingSessions from "./views/ChargingSessions.vue";
-import Config from "./views/Config.vue";
 import { ensureCurrentLocaleMessages } from "./i18n";
 
 export default function setupRouter(i18n) {
   const router = createRouter({
     history: createWebHashHistory(),
     routes: [
       { path: "/", component: Main, props: true },
-      { path: "/config", component: Config, props: true },
+      { path: "/config", component: () => import("./views/Config.vue"), props: true },
       {
         path: "/sessions",
-        component: ChargingSessions,
+        component: () => import("./views/ChargingSessions.vue"),
         props: (route) => {
           const { month, year, loadpoint, vehicle } = route.query;
           return {

assets/js/utils/linkify.js

@@ -0,0 +1,7 @@
+export default function linkify(text) {
+  const urlRegex = /https?:\/\/[^\s]+/g;
+
+  return text.replace(urlRegex, function (url) {
+    return `<a href="${url}" target="_blank">${url}</a>`;
+  });
+}

assets/js/utils/linkify.test.js

@@ -0,0 +1,25 @@
+import linkify from "./linkify";
+import { describe, expect, test } from "vitest";
+
+describe("linkify", () => {
+  test("should wrap links", () => {
+    expect(linkify("https://example.com")).eq(
+      `<a href="https://example.com" target="_blank">https://example.com</a>`
+    );
+  });
+  test("with surrounding text", () => {
+    expect(linkify("hello http://foo.bar/ world")).eq(
+      `hello <a href="http://foo.bar/" target="_blank">http://foo.bar/</a> world`
+    );
+  });
+  test("with query and hash", () => {
+    expect(linkify("a http://b.c/?d=e#f g")).eq(
+      `a <a href="http://b.c/?d=e#f" target="_blank">http://b.c/?d=e#f</a> g`
+    );
+  });
+  test("with multiple links", () => {
+    expect(linkify("hello http://foo.bar/ world https://bar.baz/ tadda!")).eq(
+      `hello <a href="http://foo.bar/" target="_blank">http://foo.bar/</a> world <a href="https://bar.baz/" target="_blank">https://bar.baz/</a> tadda!`
+    );
+  });
+});

package.json

@@ -45,7 +45,6 @@
     "vite-plugin-toml": "^0.5.0",
     "vitest": "^0.33.0",
     "vue": "^3.2.29",
-    "vue-3-linkify": "^1.1.0",
     "vue-eslint-parser": "^9.1.0",
     "vue-hot-reload-api": "^2.3.4",
     "vue-i18n": "^9.2.2",