feat: use jquery package

Author: chmelevskij

package.json

@@ -63,10 +63,10 @@
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
     "jbox": "^1.3.3",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.3",
     "jquery-textcomplete": "^1.8.5",
     "jquery-touchswipe": "^1.6.19",
-    "jquery-ui-npm": "^1.12.0",
+    "jquery-ui": "^1.13.2",
     "jsdom": "^21.0.0",
     "lodash.debounce": "^4.0.8",
     "marked": "^4.1.1",
@@ -135,6 +135,9 @@
   "optionalDependencies": {
     "appdmg": "^0.6.4"
   },
+  "resolutions": {
+    "jquery": "3.6.3"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "yarn lint"

src/components/EscDshotDirection/EscDshotDirectionComponent.js

@@ -6,6 +6,7 @@ import DshotCommand from "../../js/utils/DshotCommand.js";
 import FC from "../../js/fc.js";
 import { API_VERSION_1_44 } from '../../js/data_storage.js';
 import { getMixerImageSrc } from "../../js/utils/common.js";
+import $ from "jquery";
 
 class EscDshotDirectionComponent
 {

src/components/MotorOutputReordering/MotorOutputReorderingComponent.js

@@ -8,6 +8,7 @@ import FC from "../../js/fc";
 import { gui_log } from "../../js/gui_log";
 import { i18n } from "../../js/localization";
 import GUI, { TABS } from "../../js/gui";
+import $ from "jquery";
 
 export default class MotorOutputReorderComponent
 {

src/js/Analytics.js

@@ -3,6 +3,7 @@ import googleAnalytics from 'universal-ga';
 import { set as setConfig, get as getConfig } from './ConfigStorage';
 import GUI from './gui';
 import CONFIGURATOR from './data_storage';
+import $ from 'jquery';
 
 let tracking = null;
 export { tracking };

src/js/Beepers.js

@@ -1,4 +1,5 @@
 import { bit_check, bit_clear, bit_set } from './bit';
+import $ from 'jquery';
 
 class Beepers {
     constructor(config, supportedConditions) {

src/js/BuildApi.js

@@ -1,6 +1,7 @@
 import { gui_log } from './gui_log';
 import { i18n } from "./localization";
 import { get as getStorage, set as setStorage } from "./SessionStorage";
+import $ from 'jquery';
 
 export default class BuildApi {
 

src/js/CliAutoComplete.js

@@ -3,6 +3,7 @@ import CONFIGURATOR from './data_storage';
 import FC from './fc';
 import semver from 'semver';
 import { tracking } from './Analytics';
+import $ from 'jquery';
 
 /**
  * Encapsulates the AutoComplete logic

src/js/DarkTheme.js

@@ -1,6 +1,7 @@
 import GUI from "./gui";
 import windowWatcherUtil from "./utils/window_watchers";
 import { checkSetupAnalytics } from "./Analytics";
+import $ from 'jquery';
 
 const css_dark = [
     './css/dark-theme.css',

src/js/Features.js

@@ -2,6 +2,7 @@ import { bit_check, bit_set, bit_clear } from "./bit";
 import { API_VERSION_1_44, API_VERSION_1_45 } from './data_storage';
 import semver from "semver";
 import { tracking } from "./Analytics";
+import $ from 'jquery';
 
 const Features = function (config) {
     const self = this;

src/js/LogoManager.js

@@ -1,6 +1,7 @@
 import { gui_log } from "./gui_log";
 import { i18n } from "./localization";
 import { checkChromeRuntimeError } from "./utils/common";
+import $ from 'jquery';
 
 /**
  * Takes an ImageData object and returns an MCM symbol as an array of strings.

src/js/TuningSliders.js

@@ -6,6 +6,7 @@ import { isExpertModeEnabled } from "./utils/isExportModeEnabled";
 import semver from "semver";
 import { mspHelper } from "./msp/MSPHelper";
 import { TABS } from "./gui";
+import $ from 'jquery';
 
 const TuningSliders = {
     // Legacy Sliders

src/js/gui.js

@@ -3,6 +3,7 @@ import MSP from './msp';
 import Switchery from 'switchery-latest';
 import jBox from 'jbox';
 import { checkChromeRuntimeError } from './utils/common';
+import $ from 'jquery';
 
 const TABS = {};
 
@@ -316,7 +317,7 @@ class GuiControl {
         documentationButton.html("Wiki").attr("href", `https://betaflight.com/docs/wiki/configurator/${tRex}-tab`);
 
         // loading tooltip
-        jQuery(function () {
+        $(function () {
 
             new jBox('Tooltip', {
                 attach: '.cf_tip',

src/js/gui_log.js

@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 /**
  * log to GUI
  * @param {string} message message to log to GUI

src/js/jquery.js

@@ -0,0 +1,10 @@
+import $ from 'jquery';
+
+// eslint-disable-next-line no-undef
+globalThis.jQuery = $;
+// eslint-disable-next-line no-undef
+globalThis.$ = $;
+window.jQuery = $;
+window.$ = $;
+
+export default $;

src/js/jqueryPlugins.js

@@ -0,0 +1,8 @@
+import $ from './jquery';
+import 'jquery-ui';
+import 'jquery-textcomplete';
+import 'jquery-touchswipe';
+import 'select2';
+import 'multiple-select';
+import '../../libraries/jquery.nouislider.all.min.js';
+import '../../libraries/jquery.flightindicators.js';

src/js/localization.js

@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import i18nextXHRBackend from 'i18next-xhr-backend';
 import { gui_log } from './gui_log.js';
 import { get as getConfig, set as setConfig } from './ConfigStorage.js';
+import $ from "jquery";
 
 const i18n = {};
 /*

src/js/main.js

@@ -1,3 +1,5 @@
+import './jqueryPlugins';
+import $ from 'jquery';
 import 'jbox';
 import '../components/init.js';
 import { gui_log } from './gui_log.js';

src/js/main_cordova.js

@@ -1,4 +1,5 @@
 import { i18n } from "./localization.js";
+import $ from 'jquery';
 
 const REQUIRED_WEBVIEW_VERSION = 72;
 const WEBVIEW = {

src/js/msp/MSPConnector.js

@@ -9,6 +9,9 @@ import CONFIGURATOR from "../data_storage";
 import serial from "../serial";
 import { gui_log } from "../gui_log";
 
+/**
+ * This seems to be mainly used in firmware flasher parts.
+ */
 const MSPConnectorImpl = function () {
     this.baud = undefined;
     this.port = undefined;

src/js/msp/MSPHelper.js

@@ -1,3 +1,4 @@
+import '../injected_methods';
 import { update_dataflash_global } from "../update_dataflash_global";
 import { sensor_status } from "../sensor_helpers";
 import { bit_check, bit_set } from "../bit";

src/js/phones_ui.js

@@ -1,4 +1,5 @@
 import GUI from "./gui";
+import $ from 'jquery';
 
 const UI_PHONES = {
     background: '#background',

src/js/port_handler.js

@@ -5,6 +5,7 @@ import { generateVirtualApiVersions, getTextWidth } from './utils/common';
 import { get as getConfig } from "./ConfigStorage";
 import serial from "./serial";
 import MdnsDiscovery from "./mdns_discovery";
+import $ from 'jquery';
 
 const TIMEOUT_CHECK = 500 ; // With 250 it seems that it produces a memory leak and slowdown in some versions, reason unknown
 

src/js/protocols/stm32.js

@@ -19,6 +19,7 @@ import { API_VERSION_1_42 } from "../data_storage";
 import serial from "../serial";
 import STM32DFU from "./stm32usbdfu";
 import semver from "semver";
+import $ from 'jquery';
 
 const STM32_protocol = function () {
     this.baud = null;

src/js/sensor_helpers.js

@@ -1,4 +1,5 @@
 import { bit_check } from './bit';
+import $ from 'jquery';
 
 export function have_sensor(sensors_detected, sensor_code) {
     switch(sensor_code) {

src/js/serial.js

@@ -6,6 +6,7 @@ import { gui_log } from "./gui_log";
 import inflection from "inflection";
 import PortHandler from "./port_handler";
 import { checkChromeRuntimeError } from "./utils/common";
+import $ from 'jquery';
 
 const serial = {
     connected:      false,

src/js/serial_backend.js

@@ -22,6 +22,7 @@ import { get as getConfig, set as setConfig } from "./ConfigStorage";
 import { tracking } from "./Analytics";
 import semver from 'semver';
 import CryptoES from "crypto-es";
+import $ from 'jquery';
 import BuildApi from "./BuildApi";
 
 let mspHelper;

src/js/tabs/adjustments.js

@@ -7,6 +7,7 @@ import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42 } from '../data_storage';
 import { gui_log } from '../gui_log';
 import semver from 'semver';
+import $ from 'jquery';
 
 const adjustments = {};
 

src/js/tabs/auxiliary.js

@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import adjustBoxNameIfPeripheralWithModeID from '../peripherals';
 import { getTextWidth } from '../utils/common';
+import $ from 'jquery';
 import inflection from "inflection";
 
 const auxiliary = {};

src/js/tabs/cli.js

@@ -12,6 +12,7 @@ import UI_PHONES from "../phones_ui";
 import { gui_log } from "../gui_log";
 import jBox from "jbox";
 import { checkChromeRuntimeError } from "../utils/common";
+import $ from 'jquery';
 
 const cli = {
     lineDelayMs: 15,

src/js/tabs/configuration.js

@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_45 } from '../data_storage';
 import { updateTabList } from '../utils/updateTabList';
+import $ from 'jquery';
 
 const configuration = {
     analyticsChanges: {},

src/js/tabs/failsafe.js

@@ -7,6 +7,7 @@ import MSPCodes from "../msp/MSPCodes";
 import adjustBoxNameIfPeripheralWithModeID from "../peripherals";
 import { API_VERSION_1_43, API_VERSION_1_44, API_VERSION_1_45 } from "../data_storage";
 import semver from 'semver';
+import $ from 'jquery';
 
 const failsafe = {};
 

src/js/tabs/firmware_flasher.js

@@ -1,3 +1,4 @@
+import $ from '../jquery';
 import { i18n } from '../localization';
 import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
@@ -1257,7 +1258,7 @@ firmware_flasher.initialize = function (callback) {
     }
 
     self.releaseLoader.loadTargets(() => {
-       $('#content').load("./tabs/firmware_flasher.html", onDocumentLoad);
+       $('#content').load("./src/tabs/firmware_flasher.html", onDocumentLoad);
     });
 };
 

src/js/tabs/gps.js

@@ -5,6 +5,7 @@ import GUI, { TABS } from '../gui';
 import FC from '../fc';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
+import $ from 'jquery';
 import { have_sensor } from "../sensor_helpers";
 import { mspHelper } from '../msp/MSPHelper';
 import { updateTabList } from '../utils/updateTabList';

src/js/tabs/help.js

@@ -1,5 +1,6 @@
 import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
+import $ from 'jquery';
 
 const help = {};
 help.initialize = function (callback) {

src/js/tabs/landing.js

@@ -1,5 +1,6 @@
 import GUI, { TABS } from '../gui';
 import { i18n } from '../localization';
+import $ from 'jquery';
 
 const landing = {};
 landing.initialize = function (callback) {

src/js/tabs/led_strip.js

@@ -5,6 +5,7 @@ import FC from "../fc";
 import semver from 'semver';
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
+import $ from 'jquery';
 import { API_VERSION_1_46 } from '../data_storage';
 
 const led_strip = {

src/js/tabs/logging.js

@@ -8,6 +8,7 @@ import MSP from '../msp.js';
 import MSPCodes from '../msp/MSPCodes.js';
 import CONFIGURATOR from '../data_storage.js';
 import { gui_log } from '../gui_log.js';
+import $ from 'jquery';
 
 const logging = {};
 logging.initialize = function (callback) {

src/js/tabs/motors.js

@@ -18,6 +18,7 @@ import { updateTabList } from "../utils/updateTabList";
 import { isInt, getMixerImageSrc } from "../utils/common";
 import semver from 'semver';
 import * as d3 from 'd3';
+import $ from 'jquery';
 
 const motors = {
     previousDshotBidir: null,

src/js/tabs/onboard_logging.js

@@ -11,6 +11,7 @@ import { generateFilename } from "../utils/generate_filename";
 import semver from 'semver';
 import { showErrorDialog } from "../utils/showErrorDialog";
 import { checkChromeRuntimeError } from "../utils/common";
+import $ from 'jquery';
 
 let sdcardTimer;
 

src/js/tabs/options.js

@@ -6,6 +6,7 @@ import CliAutoComplete from '../CliAutoComplete';
 import DarkTheme, { setDarkTheme } from '../DarkTheme';
 import { checkForConfiguratorUpdates } from '../utils/checkForConfiguratorUpdates';
 import { checkSetupAnalytics } from '../Analytics';
+import $ from 'jquery';
 import CONFIGURATOR from '../data_storage';
 
 const options = {};

src/js/tabs/osd.js

@@ -15,6 +15,7 @@ import jBox from "jbox";
 import inflection from "inflection";
 import { checkChromeRuntimeError } from "../utils/common";
 import debounce from "lodash.debounce";
+import $ from 'jquery';
 
 const FONT = {};
 const SYM = {};

src/js/tabs/pid_tuning.js

@@ -15,6 +15,7 @@ import { gui_log } from "../gui_log";
 import { degToRad, isInt } from "../utils/common";
 import semver from "semver";
 import * as THREE from "three";
+import $ from 'jquery';
 
 const pid_tuning = {
     RATE_PROFILE_MASK: 128,

src/js/tabs/ports.js

@@ -8,6 +8,7 @@ import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import { API_VERSION_1_42, API_VERSION_1_43, API_VERSION_1_45 } from '../data_storage';
 import BOARD from '../boards';
+import $ from 'jquery';
 
 const ports = {
     analyticsChanges: {},

src/js/tabs/power.js

@@ -6,6 +6,7 @@ import FC from '../fc';
 import MSP from '../msp';
 import MSPCodes from '../msp/MSPCodes';
 import jBox from 'jbox';
+import $ from 'jquery';
 
 const power = {
     supported: false,

src/js/tabs/receiver.js

@@ -18,7 +18,7 @@ import semver from 'semver';
 import { updateTabList } from "../utils/updateTabList";
 import * as THREE from 'three';
 import * as d3 from "d3";
-
+import $ from 'jquery';
 import CryptoES from 'crypto-es';
 
 const receiver = {

src/js/tabs/receiver_msp.js

@@ -1,4 +1,5 @@
 import windowWatcherUtil from "../utils/window_watchers";
+import $ from 'jquery';
 
 const css_dark = [
     '/css/dark-theme.css',

src/js/tabs/sensors.js

@@ -7,6 +7,7 @@ import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
 import serial from "../serial";
 import * as d3 from 'd3';
+import $ from 'jquery';
 import semver from 'semver';
 import { API_VERSION_1_46 } from "../data_storage";