Update Vue

package.json

@@ -41,13 +41,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",
@@ -66,8 +66,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",

src/components/data-flash/DataFlash.vue

@@ -18,43 +18,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

@@ -2,11 +2,11 @@
 // `i18n` helper to window and setting up `i18next`
 // in the future it should be pure. This means it should
 // explicitly export things used by other parts of the app.
-import "../js/localization.js";
-import "../js/injected_methods";
-import i18next from "i18next";
-import Vue from "vue";
-import vueI18n from "./vueI18n.js";
+import '../js/localization.js';
+import '../js/injected_methods';
+import i18next from 'i18next';
+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";
@@ -30,26 +30,27 @@ const betaflightModel = {
     PortHandler,
 };
 
-i18next.on("initialized", function () {
+i18next.on('initialized', function() {
     console.log("i18n initialized, starting Vue framework");
 
-    if (process.env.NODE_ENV === "development") {
+    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

src/components/port-picker/FirmwareVirtualOption.vue

@@ -11,24 +11,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

@@ -1,32 +1,45 @@
 <template>
-    <div v-if="isManual" id="port-override-option">
-        <label for="port-override"
-            ><span>{{ $t("portOverrideText") }}</span>
-            <input id="port-override" type="text" :value="value" @change="inputValueChanged($event)"
-        /></label>
-    </div>
+  <div
+    v-if="isManual"
+    id="port-override-option"
+  >
+    <label
+      for="port-override"
+    ><span>{{ $t("portOverrideText") }}</span>
+      <input
+        id="port-override"
+        type="text"
+        :value="value"
+        @change="inputValueChanged($event)"
+      >
+    </label>
+  </div>
 </template>
 
 <script>
 import { set as setConfig } from "../../js/ConfigStorage";
-export default {
-    props: {
-        value: {
-            type: String,
-            default: "/dev/rfcomm0",
-        },
-        isManual: {
-            type: Boolean,
-            default: true,
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: '/dev/rfcomm0',
     },
     methods: {
         inputValueChanged(event) {
             setConfig({ portOverride: event.target.value });
             this.$emit("input", event.target.value);
         },
     },
-};
+  },
+  methods: {
+    inputValueChanged(event) {
+      setConfig({'portOverride': event.target.value});
+      this.$emit('input', event.target.value);
+    },
+  },
+});
 </script>
 
 <style lang="less" scoped>

src/components/port-picker/PortPicker.vue

@@ -1,42 +1,44 @@
 <template>
     <div class="web-port-picker">
         <PortOverrideOption
-            v-if="value.selectedPort === 'manual'"
-            :value="value.portOverride"
-            @input="updateValue('portOverride', $event)"
+            v-if="modelValue.selectedPort === 'manual'"
+            :model-value="modelValue.portOverride"
+            @update:modelValue="updateValue('portOverride', $event)"
         />
         <FirmwareVirtualOption
-            v-if="value.selectedPort === 'virtual' && !isConnected"
-            :value="value.virtualMspVersion"
-            @input="updateValue('virtualMspVersion', $event)"
+            v-if="modelValue.selectedPort === 'virtual' && !isConnected"
+            :model-value="modelValue.virtualMspVersion"
+            @update:modelValue="updateValue('virtualMspVersion', $event)"
         />
         <PortsInput
-            :value="value"
+            :model-value="modelValue.selectedPort"
             :connected-bluetooth-devices="connectedBluetoothDevices"
             :connected-serial-devices="connectedSerialDevices"
             :connected-usb-devices="connectedUsbDevices"
             :disabled="disabled"
             :show-virtual-option="showVirtualOption"
             :show-manual-option="showManualOption"
-            @input="updateValue(null, $event)"
+            @update:modelValue="updateValue(null, $event)"
         />
     </div>
 </template>
 
 <script>
+import { defineComponent } from "vue";
 import PortOverrideOption from "./PortOverrideOption.vue";
 import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 import CONFIGURATOR from "../../js/data_storage";
 
-export default {
+export default defineComponent({
     components: {
         PortOverrideOption,
         FirmwareVirtualOption,
         PortsInput,
     },
+
     props: {
-        value: {
+        modelValue: {
             type: Object,
             default: () => ({
                 selectedPort: "noselection",
@@ -71,21 +73,25 @@ export default {
             default: false,
         },
     },
+
+    emits: ["update:modelValue"],
+
     computed: {
         isConnected() {
             return CONFIGURATOR.connectionValid;
         },
     },
+
     methods: {
         updateValue(key, value) {
             if (key != null) {
-                this.$emit("input", { ...this.value, [key]: value });
+                this.$emit("update:modelValue", { ...this.modelValue, [key]: value });
             } else {
-                this.$emit("input", { ...this.value, ...value });
+                this.$emit("update:modelValue", { ...this.modelValue, ...value });
             }
         },
     },
-};
+});
 </script>
 
 <style scoped>