feat: Inject package.json version into the app

Author: bastienwirtz

eslint.config.js

@@ -6,7 +6,14 @@ import eslintConfigPrettier from "@vue/eslint-config-prettier";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ["**/*.{js,mjs,cjs,vue}"] },
-  { languageOptions: { globals: globals.browser } },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __APP_VERSION__: "readable",
+      },
+    },
+  },
   pluginJs.configs.recommended,
   ...pluginVue.configs["flat/recommended"],
   eslintConfigPrettier,

src/App.vue

@@ -54,7 +54,6 @@
         />
       </Navbar>
     </div>
-
     <section id="main-section" class="section">
       <div v-cloak class="container">
         <ConnectivityChecker
@@ -154,6 +153,7 @@ export default {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
     this.loaded = true;
+    console.info(`Homer v${__APP_VERSION__}`);
   },
   beforeUnmount() {
     window.onhashchange = null;

vite.config.js

@@ -7,13 +7,28 @@ import process from "process";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
+import { version } from "./package.json";
+
+function writeVersionPlugin() {
+  return {
+    name: "write-version",
+    closeBundle() {
+      fs.writeFileSync("dist/VERSION", version);
+    },
+  };
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "",
   build: {
     assetsDir: "resources",
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(version),
+  },
   plugins: [
+    writeVersionPlugin(),
     // Custom plugin to serve dummy-data JSON files without sourcemap injection
     {
       name: "dummy-data-json-handler",