search

betaflight / betaflight-configurator

Cross platform configuration tool for the Betaflight firmware
GNU General Public License v3.0
2.57k stars 911 forks source link

Vue3 upgrade #4169

Closed BoldBigflank closed 2 months ago

BoldBigflank commented 2 months ago

Upgrades to Vue3

Upgrades Storybook to Version 8

Updates ESLint rules

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[bot] commented 2 months ago

Deploy Preview for origin-betaflight-app ready!

Name Link
Latest commit a72634ed45bc5d11a185c38404410412d56125e7
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...

QR Code

Use your smartphone camera to open QR code link.

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

sonarcloud[bot] commented 2 months ago

Quality Gate Passed 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

nerdCopter commented 2 months ago

what CLI commands should i invoke for testing?

BoldBigflank commented 2 months ago

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

BoldBigflank commented 2 months ago

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

BoldBigflank commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

Not an issue with this PR.

Needs experimental flags being enabled https://github.com/betaflight/betaflight-configurator/pull/4024#issue-2350887491

Obvious some code (likely porthandler) is bypassing https://github.com/betaflight/betaflight-configurator/blob/643b484510ab00854e89b7971d97076190651ecc/src/js/protocols/bluetooth.js#L26-L31

McGiverGim commented 2 months ago

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 commented 2 months ago

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

image

BoldBigflank commented 2 months ago

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 commented 2 months ago

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