feat: use jquery package

[chmelevskij]

Use jquery as npm module instead of global version where possible.

[McGiverGim]

If this is going to be included in the next version I think we need to merge this ASAP. It can produce errors if some import is forgotten that can be difficult to detect until tested.

[chmelevskij]

hey, this will be my focus tomorrow. It's one of the pre-cursors for whole web work I'm doing so want to get it in ASAP as well.

Everything seems to be working fine, just have few tabs where some of the jquery plugins we use don't register properly 🤷

[chmelevskij]

This is to prevent clash of different jquery versions when plugins are loaded in.

[haslinghuis]

Testing now (fails on tab led strip):

Uncaught TypeError: jqueryExports(...).selectable is not a function
    at HTMLDivElement.process_html (led_strip.js:292:24)
    at HTMLDivElement.<anonymous> (jquery.js:10233:14)
    at Function.each (jquery.js:383:19)
    at jQuery.fn.init.each (jquery.js:205:17)
    at Object.<anonymous> (jquery.js:10232:9)
    at fire (jquery.js:3213:31)
    at Object.fireWith [as resolveWith] (jquery.js:3343:7)
    at done (jquery.js:9617:14)
    at XMLHttpRequest.<anonymous> (jquery.js:9878:9)

Test failing

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
21 Code Smells

No Coverage information
0.0% Duplication

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-macOS
Betaflight-Configurator-Windows
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[blckmn]

AUTOMERGE: (FAIL)

• github identifies PR as mergeable -> FAIL
• assigned to a milestone -> PASS
• cooling off period lapsed -> PASS
• commit count less or equal to three -> PASS
• Don't merge label NOT found -> PASS
• at least one RN: label found -> PASS
• Tested label found -> PASS
• assigned to an approver -> PASS
• approver count at least three -> FAIL

[McGiverGim]

Let's test it!

[nerdCopter]

Let's test it!

i guess that meant merge it and let the pilots find out 😆

[haslinghuis]

😂 #3540 (comment)

[ASDosjani]

i guess that meant merge it and let the pilots find out 😆

This pilot found out that it breaks master😂

[haslinghuis]

Just tested master and it works fine.

[ASDosjani]

Sorry, it had old packages, I run yarn and now it's working for me as well.

[HThuren]

hi @chmelevskij ,
I will like to use multiple-select-locale-all.min.js insted of multiple-select.min.js
The old way in main.html:
<script type="text/javascript" src="./node_modules/multiple-select/dist/multiple-select.min.js"></script>
<script type="text/javascript" src="./node_modules/multiple-select/dist/multiple-select-locale-all.min.js"></script>
are now changed to jqueryPlugins.js:
import 'multiple-select';

but how are this resolved, how do I change to use multiple-select-locale-all ?

[chmelevskij]

@haslinghuis have you tried updating import to import 'multiple-select-locale-all' in that file?

[HThuren]

@haslinghuis have you tried updating import to import 'multiple-select-locale-all' in that file?

I have a ongoing test, working on this output:
Uncaught TypeError: Failed to resolve module specifier "multiple-select-locale-all". Relative references must start with either "/", "./", or "../".

[HThuren]

maybe a distribution issue

[HThuren]

@chmelevskij , only first of below three works (?)

import 'multiple-select'
import 'multiple-select/dist/multiple-select.js'
import 'multiple-select/dist/multiple-select-locale-all.min.js'

[HThuren]

@chmelevskij @haslinghuis can you explain the resolve / point to documentaion of how elementes in jQueryPlugins.js are resolved, what are in use in the imported module, ie. package.json or ??

package.json in multiple-select contain:

  "name": "multiple-select",
  "main": "dist/multiple-select.min.js",
  "module": "dist/multiple-select-es.min.js",

[nerdCopter]

• all packages maintained in package.json (via yarn add --save[-dev]). yarn install is a prerequisite to usage/execution.
• code author decides when to use package via import.
• minified versions are some effect of packaging process.
• if i recall correctly, author can import entire package, or individual sub-command.
• ./dist/ is a result of execution/packaging.
• git clean -dxf to remove all cruft not included in repo.

$ grep -Iin multiple ./package.json 
63:    "multiple-select": "^1.6.0",

Other devs will know more. -- and i'm open to corrections.

Should "Discussions" be enabled on Betaflight Github? or maybe too many distractions.

[haslinghuis]

Try multiple-select-locale-all.min.js instead in main.html (line 51)

<link type="text/css" rel="stylesheet" href="./node_modules/multiple-select/dist/multiple-select.min.css" media="all"/>

[chmelevskij]

@haslinghuis let's not go back to script tags, that will cause pain later on down the line with building for web.

RE: how imports are resolved and package json

https://nodejs.org/docs/latest-v20.x/api/packages.html#main-entry-point-export
https://nodejs.org/docs/latest-v20.x/api/packages.html#main-entry-point-export

import 'multiple-select/dist/multiple-select-locale-all.min.js' this seems like this should work 🤔

[HThuren]

@chmelevskij
Problem moved, now the modules are imported (remember to delete cache and debug catalogs), but an undeclared variable give exeception

but this happen before main window are fully open, so debug are difficult (for me)

Have a look in #3756