Update Vue

package.json

@@ -32,13 +32,13 @@
     "@capacitor/android": "^6.0.0",
     "@capacitor/core": "^6.0.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@panter/vue-i18next": "^0.15.2",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.1.4",
     "crypto-es": "^2.1.0",
     "d3": "^7.9.0",
     "djv": "^2.1.4",
     "dompurify": "^2.5.5",
     "i18next": "^19.9.2",
+    "i18next-vue": "^5.0.0",
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
     "jbox": "^1.3.3",
@@ -57,8 +57,9 @@
     "short-unique-id": "^4.4.4",
     "switchery-latest": "^0.8.2",
     "three": "~0.97.0",
+    "tiny-emitter": "^2.1.0",
     "vite-plugin-pwa": "^0.17.5",
-    "vue": "^2.7.16"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -67,6 +68,7 @@
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/vue": "^6.5.16",
+    "@vue/compiler-sfc": "^3.5.12",
     "babel-loader": "^8.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^7.20.0",

src/components/betaflight-logo/BetaflightLogo.vue

@@ -1,3 +1,26 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  configuratorVersion: {
+    type: String,
+    required: true,
+  },
+  firmwareVersion: {
+    type: String,
+    default: '',
+  },
+  firmwareId: {
+    type: String,
+    default: '',
+  },
+  hardwareId: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="logo">
     <div class="logo_text">
@@ -15,29 +38,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    configuratorVersion: {
-      type: String,
-      required: true,
-    },
-    firmwareVersion: {
-      type: String,
-      default: '',
-    },
-    firmwareId: {
-      type: String,
-      default: '',
-    },
-    hardwareId: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
 <style>
 .logo {
   height: 70px;
@@ -116,3 +116,9 @@ export default {
   }
 }
 </style>
+
+export default {
+  components: {
+    BetaflightLogo
+  }
+}

src/components/data-flash/DataFlash.vue

@@ -24,46 +24,43 @@
     </div>
   </div>
 </template>
+
 <script>
-export default {
-    props: {
-        fcTotalSize: { type: Number, default: 100000 },
-        fcUsedSize: { type: Number, default: 82000 },
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    fcTotalSize: { type: Number, default: 100000 },
+    fcUsedSize: { type: Number, default: 82000 },
+  },
+  computed: {
+    supportDataflash() {
+      return this.fcTotalSize > 0;
+    },
+    freeSpace() {
+      if (!this.supportDataflash) { return; }
+      const bytes = this.fcTotalSize - this.fcUsedSize;
+      if (this.fcUsedSize >= this.fcTotalSize) {
+        return "0B";
+      }
+      if (bytes < 1024) {
+        return `${bytes}B`;
+      }
+      const kilobytes = bytes / 1024;
+      if (kilobytes < 1024) {
+        return `${Math.round(kilobytes)}KB`;
+      }
+      const megabytes = kilobytes / 1024;
+      if (megabytes < 1024) {
+        return `${megabytes.toFixed(1)}MB`;
+      }
+      const gigabytes = megabytes / 1024;
+        return `${gigabytes.toFixed(1)}GB`;
     },
-    computed: {
-        supportDataflash() {
-            if (this.fcTotalSize > 0) return true;
-            else return false;
-        },
-        freeSpace() {
-            if (!this.supportDataflash) return;
-            const bytes = this.fcTotalSize - this.fcUsedSize;
-            if (this.fcUsedSize >= this.fcTotalSize) {
-                return "0B";
-            }
-            if (bytes < 1024) {
-                return `${bytes}B`;
-            }
-            const kilobytes = bytes / 1024;
-            if (kilobytes < 1024) {
-                return `${Math.round(kilobytes)}KB`;
-            }
-            const megabytes = kilobytes / 1024;
-            if (megabytes < 1024) {
-                return `${megabytes.toFixed(1)}MB`;
-            }
-            const gigabytes = megabytes / 1024;
-            return `${gigabytes.toFixed(1)}GB`;
-        },
-        indicatorWidth() {
-            if (!this.supportDataflash) return;
-            return `${Math.min(
-                (this.fcUsedSize / this.fcTotalSize) * 100,
-                100,
-            )}%`;
-        },
+    indicatorWidth() {
+      return this.supportDataflash ? `${Math.min((this.fcUsedSize / this.fcTotalSize) * 100, 100)}%` : "0%";
     },
-};
+  },
+});
 </script>
 
 <style scoped>

src/components/eventBus.js

@@ -1,2 +1,8 @@
-import Vue from "vue";
-export const EventBus = new Vue();
+import emitter from 'tiny-emitter/instance';
+
+export const EventBus = {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+};

src/components/init.js

@@ -5,8 +5,8 @@
 import '../js/localization.js';
 import '../js/injected_methods';
 import i18next from 'i18next';
-import Vue from "vue";
-import vueI18n from "./vueI18n.js";
+import { createApp } from "vue";
+import I18NextVue from "i18next-vue";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
@@ -31,29 +31,28 @@ const betaflightModel = {
 };
 
 i18next.on('initialized', function() {
-
     console.log("i18n initialized, starting Vue framework");
 
+    const app = createApp({
+        data() { return betaflightModel; },
+    });
+
+    app
+    .use(I18NextVue, { i18next })
+    .component('BetaflightLogo', BetaflightLogo)
+    .component('BatteryLegend', BatteryLegend)
+    .component('StatusBar', StatusBar)
+    .component('BatteryIcon', BatteryIcon)
+    .component('PortPicker', PortPicker)
+    .mount('#main-wrapper');
+
     if (process.env.NODE_ENV === 'development') {
         console.log("Development mode enabled, installing Vue tools");
-        Vue.config.devtools = true;
+        // TODO Vue.config.devtools = true;
+        app.config.performance = true;
     }
-
-    const app = new Vue({
-        i18n: vueI18n,
-        el: '#main-wrapper',
-        components: {
-            BatteryLegend,
-            BetaflightLogo,
-            StatusBar,
-            BatteryIcon,
-            PortPicker,
-        },
-        data: betaflightModel,
-    });
 });
 
-
 // Not strictly necessary here, but if needed
 // it's always possible to modify this model in
 // jquery land to trigger updates in vue

src/components/port-picker/FirmwareVirtualOption.vue

@@ -22,24 +22,26 @@
 </template>
 
 <script>
-export default {
-    props: {
-        isVirtual: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            firmwareVersions: [
-                { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
-                { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
-                { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
-                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
-                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
-                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
-            ],
-        };
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    isVirtual: {
+      type: Boolean,
+      default: true,
     },
-};
+  },
+  data() {
+    return {
+      firmwareVersions: [
+        { value: '1.46.0', label: 'MSP: 1.46 | Firmware: 4.5.*' },
+        { value: '1.45.0', label: 'MSP: 1.45 | Firmware: 4.4.*' },
+        { value: '1.44.0', label: 'MSP: 1.44 | Firmware: 4.3.*' },
+        { value: '1.43.0', label: 'MSP: 1.43 | Firmware: 4.2.*' },
+        { value: '1.42.0', label: 'MSP: 1.42 | Firmware: 4.1.*' },
+        { value: '1.41.0', label: 'MSP: 1.41 | Firmware: 4.0.*' },
+      ],
+    };
+  },
+});
 </script>

src/components/port-picker/PortOverrideOption.vue

@@ -11,13 +11,16 @@
         type="text"
         :value="value"
         @change="inputValueChanged($event)"
-      ></label>
+      >
+    </label>
   </div>
 </template>
 
 <script>
 import { set as setConfig } from "../../js/ConfigStorage";
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -34,7 +37,7 @@ export default {
       this.$emit('input', event.target.value);
     },
   },
-};
+});
 </script>
 
 <style lang="less" scoped>