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;