Update Vue

betaflight · Jan 7, 2025 · c40d626 · c40d626
1 parent f109371
commit c40d626
Show file tree

Hide file tree

Showing 20 changed files with 799 additions and 466 deletions.
diff --git a/package.json b/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",

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
@@ -18,43 +18,61 @@
         </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() {
+      if (this.fcTotalSize > 0) return true;
+      else return false;
     },
     computed: {
-        supportDataflash() {
-            if (this.fcTotalSize > 0) return true;
-            else return false;
+      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`;
+          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)}%`;
-        },
+          if (!this.supportDataflash) return;
+          return `${Math.min(
+            (this.fcUsedSize / this.fcTotalSize) * 100,
+            100,
+          )}%`;
+      },
+    },
+    indicatorWidth() {
+      if (!this.supportDataflash) return;
+      return `${Math.min(
+        (this.fcUsedSize / this.fcTotalSize) * 100,
+        100,
+      )}%`;
     },
-};
+  },
+});
 </script>
 
 <style scoped>

diff --git a/src/components/eventBus.js b/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),
+};
diff --git a/src/components/init.js b/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;
+        // 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

diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/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>
diff --git a/src/components/port-picker/PortOverrideOption.vue b/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>