Vue3 upgrade

[BoldBigflank]

Upgrades to Vue3

Upgrades Storybook to Version 8

Updates ESLint rules

• Changes to plugin:vue/vue3-recommended
• Adds plugin:storybook/recommended
• Adds eslint:recommended
• Makes most existing errors into warnings
• no-unused-vars is changed to an error with an exception to allow a function regex

NOTE: Currently Storybook loads without errors but many components are not looking like you would expect, so there's more to do to make a robust Storybook experience.

[netlify]

✅ Deploy Preview for origin-betaflight-app ready!

Name	Link
🔨 Latest commit	a72634e
🔍 Latest deploy log	https://app.netlify.com/sites/origin-betaflight-app/deploys/66e9e837e72a020008b196af
😎 Deploy Preview	https://deploy-preview-4169.dev.app.betaflight.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[haslinghuis]

LGTM ❤️

[nerdCopter]

what CLI commands should i invoke for testing?

[BoldBigflank]

@haslinghuis I just realized I used the wrong branch, I'm gonna have to redo my PR

[BoldBigflank]

Wait, I misread and it wants the branch to NOT be named master, so we're good to go here.

[BoldBigflank]

@nerdCopter yarn dev to load the site (things like the Betaflight logo have the right version info, Battery icon exists, etc)
yarn storybook will fire up the storybook host

[BoldBigflank]

I get an error on loading the home page

bluetooth.js:99 Uncaught (in promise) TypeError: this.bluetooth.getDevices is not a function
    at BT.loadDevices (bluetooth.js:99:46)
    at new BT (bluetooth.js:57:14)
    at bluetooth.js:361:16

Can anyone confirm this is expected?

[haslinghuis]

Not an issue with this PR.

Needs experimental flags being enabled #4024 (comment)

Obvious some code (likely porthandler) is bypassing

betaflight-configurator/src/js/protocols/bluetooth.js

Lines 26 to 31 in 643b484

	if (!this.bluetooth && window && window.navigator && window.navigator.bluetooth) {
	this.bluetooth = navigator.bluetooth;
	} else {
	console.error(`${this.logHead} Bluetooth API not available`);
	return;
	}

[McGiverGim]

High! Thanks for this PR, it's always welcome an update to more modern versions.
This PR is very long, including changes in " by ' (I don't know if they are mandatory/recommended for Vue3) so it's difficult to review fully but at least can be tested.
Some things don't work. For example, in options, if I enable the virtual mode, the combo doesn't reflect it without refreshing the page. In the current master it changes without problem. Could you verify this?

[haslinghuis]

PortPicker is not following changes in options tab. Also baudrate default would be 115K2

request changes

[BoldBigflank]

Here seems to be the reason that reactivity is missing, Vue 2 data object was deep reactivity, and Vue 3 is shallow reactivity:

https://v3-migration.vuejs.org/breaking-changes/data-option#migration-strategy

For users relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug.

I'm working through options to get this going again

[BoldBigflank]

I haven't figured it out and will redo the PR when it's ready

[nerdCopter]

accurate, or just junk/noise: ?