feat: use jquery package

Author: chmelevskij

gulpfile.js

@@ -403,6 +403,7 @@ function dist_rollup() {
                 // I will be picked up by rollup and bundled accordingly.
                 'js/main_cordova': 'src/js/main_cordova.js',
                 'js/utils/common': 'src/js/utils/common.js',
+                'js/jquery': 'src/js/jquery.js',
                 'js/main': 'src/js/main.js',
                 'js/tabs/receiver_msp': 'src/js/tabs/receiver_msp.js',
             },
@@ -437,8 +438,16 @@ function dist_rollup() {
                 sourcemap: true,
                 // put any 3rd party module in vendor.js
                 manualChunks(id) {
+                    /**
+                     * This splits every npm module loaded in into it's own package
+                     * to preserve the loading order. This is to prevent issues
+                     * where after bundling some modules are loaded in the wrong order.
+                     */
                     if (id.includes('node_modules')) {
-                        return 'vendor';
+                        const parts = id.split(/[\\/]/);
+                        const nodeModulesIndex = parts.indexOf('node_modules');
+                        const packageName = parts[nodeModulesIndex + 1];
+                        return packageName;
                     }
                 },
                 dir: DIST_DIR,

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,26 @@
+import $ from 'jquery';
+
+/**
+ * jQuery has plugins which load in all sort of different ways,
+ * not necessary as modules. This binds jquery package to global
+ * scope and is loaded in first, so that when plugins are loaded
+ * all of them have access to the same instance.
+ */
+if(typeof globalThis !== 'undefined') {
+    // eslint-disable-next-line no-undef
+    globalThis.jQuery = $;
+    // eslint-disable-next-line no-undef
+    globalThis.$ = $;
+}
+
+if(typeof window !== 'undefined') {
+    window.jQuery = $;
+    window.$ = $;
+}
+
+if(typeof global !== 'undefined') {
+    global.$ = $;
+    global.jQuery = $;
+}
+
+export default $;

src/js/jqueryPlugins.js

@@ -0,0 +1,9 @@
+import './jquery';
+import 'jquery-ui/dist/jquery-ui';
+import 'jquery-textcomplete';
+import 'jquery-touchswipe';
+import select2 from 'select2';
+select2(jQuery);
+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';

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: {},