move tabs to use esm modules

25 files changed, 350 insertions, 218 deletions

diff --git a/src/js/main.js b/src/js/main.js
index 56a09496..b74c352f 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -343,73 +343,121 @@ function startProcess() {
                         );
                         break;
                     case 'help':
-                        import('./tabs/help').then(({ help }) => help.initialize(content_ready));
+                        import("./tabs/help").then(({ help }) =>
+                            help.initialize(content_ready),
+                        );
                         break;
                     case 'auxiliary':
-                        TABS.auxiliary.initialize(content_ready);
+                        import("./tabs/auxiliary").then(({ auxiliary }) =>
+                            auxiliary.initialize(content_ready),
+                        );
                         break;
                     case 'adjustments':
-                        TABS.adjustments.initialize(content_ready);
+                        import("./tabs/adjustments").then(({ adjustments }) =>
+                            adjustments.initialize(content_ready),
+                        );
                         break;
                     case 'ports':
-                        TABS.ports.initialize(content_ready);
+                        import("./tabs/ports").then(({ ports }) =>
+                            ports.initialize(content_ready),
+                        );
                         break;
                     case 'led_strip':
-                        TABS.led_strip.initialize(content_ready);
+                        import("./tabs/led_strip").then(({ led_strip }) =>
+                            led_strip.initialize(content_ready),
+                        );
                         break;
                     case 'failsafe':
-                        TABS.failsafe.initialize(content_ready);
+                        import("./tabs/failsafe").then(({ failsafe }) =>
+                            failsafe.initialize(content_ready),
+                        );
                         break;
                     case 'transponder':
-                        TABS.transponder.initialize(content_ready);
+                        import("./tabs/transponder").then(({ transponder }) =>
+                            transponder.initialize(content_ready),
+                        );
                         break;
                     case 'osd':
-                        TABS.osd.initialize(content_ready);
+                        import("./tabs/osd").then(({ osd }) =>
+                            osd.initialize(content_ready),
+                        );
                         break;
                     case 'vtx':
-                        TABS.vtx.initialize(content_ready);
+                        import("./tabs/vtx").then(({ vtx }) =>
+                            vtx.initialize(content_ready),
+                        );
                         break;
                     case 'power':
-                        TABS.power.initialize(content_ready);
+                        import("./tabs/power").then(({ power }) =>
+                            power.initialize(content_ready),
+                        );
                         break;
                     case 'setup':
-                        TABS.setup.initialize(content_ready);
+                        import("./tabs/setup").then(({ setup }) =>
+                            setup.initialize(content_ready),
+                        );
                         break;
                     case 'setup_osd':
-                        TABS.setup_osd.initialize(content_ready);
+                        import("./tabs/setup_osd").then(({ setup_osd }) =>
+                            setup_osd.initialize(content_ready),
+                        );
                         break;
                     case 'configuration':
-                        TABS.configuration.initialize(content_ready);
+                        import(
+                            "./tabs/configuration"
+                        ).then(({ configuration }) =>
+                            configuration.initialize(content_ready),
+                        );
                         break;
                     case 'pid_tuning':
-                        TABS.pid_tuning.initialize(content_ready);
+                        import("./tabs/pid_tuning").then(({ pid_tuning }) =>
+                            pid_tuning.initialize(content_ready),
+                        );
                         break;
                     case 'receiver':
-                        TABS.receiver.initialize(content_ready);
+                        import("./tabs/receiver").then(({ receiver }) =>
+                            receiver.initialize(content_ready),
+                        );
                         break;
                     case 'servos':
-                        TABS.servos.initialize(content_ready);
+                        import("./tabs/servos").then(({ servos }) =>
+                            servos.initialize(content_ready),
+                        );
                         break;
                     case 'gps':
-                        TABS.gps.initialize(content_ready);
+                        import("./tabs/gps").then(({ gps }) =>
+                            gps.initialize(content_ready),
+                        );
                         break;
                     case 'motors':
-                        TABS.motors.initialize(content_ready);
+                        import("./tabs/motors").then(({ motors }) =>
+                            motors.initialize(content_ready),
+                        );
                         break;
                     case 'sensors':
-                        TABS.sensors.initialize(content_ready);
+                        import("./tabs/sensors").then(({ sensors }) =>
+                            sensors.initialize(content_ready),
+                        );
                         break;
                     case 'logging':
-                        TABS.logging.initialize(content_ready);
+                        import("./tabs/logging").then(({ logging }) =>
+                            logging.initialize(content_ready),
+                        );
                         break;
                     case 'onboard_logging':
-                        TABS.onboard_logging.initialize(content_ready);
+                        import("./tabs/onboard_logging").then(({ onboard_logging }) =>
+                            onboard_logging.initialize(content_ready),
+                        );
                         break;
                     case 'cli':
-                        TABS.cli.initialize(content_ready, GUI.nwGui);
+                        import("./tabs/cli").then(({ cli }) =>
+                            cli.initialize(content_ready),
+                        );
                         break;
                     case 'presets':
-                        TABS.presets.initialize(content_ready, GUI.nwGui);
+                        import("../tabs/presets/presets").then(({ presets }) =>
+                            presets.initialize(content_ready),
+                        );
                         break;
 
                     default:
diff --git a/src/js/tabs/adjustments.js b/src/js/tabs/adjustments.js
index c66dde57..ffb146bd 100644
--- a/src/js/tabs/adjustments.js
+++ b/src/js/tabs/adjustments.js
@@ -1,8 +1,8 @@
-'use strict';
+import { i18n } from '../localization';
 
-TABS.adjustments = {};
+const adjustments = {};
 
-TABS.adjustments.initialize = function (callback) {
+adjustments.initialize = function (callback) {
     const self = this;
     GUI.active_tab_ref = this;
     GUI.active_tab = 'adjustments';
@@ -282,11 +282,11 @@ TABS.adjustments.initialize = function (callback) {
     }
 };
 
-TABS.adjustments.cleanup = function (callback) {
+adjustments.cleanup = function (callback) {
     if (callback) callback();
 };
 
-TABS.adjustments.adjust_template = function () {
+adjustments.adjust_template = function () {
 
     const selectFunction = $('#functionSelectionSelect');
     let elementsNumber;
@@ -322,3 +322,8 @@ TABS.adjustments.adjust_template = function () {
         element23.insertAfter(selectFunction.find("option[value='28']"));
     }
 };
+
+window.TABS.adjustments = adjustments;
+export {
+    adjustments,
+};
diff --git a/src/js/tabs/auxiliary.js b/src/js/tabs/auxiliary.js
index 2df0ee0d..d80ed11a 100644
--- a/src/js/tabs/auxiliary.js
+++ b/src/js/tabs/auxiliary.js
@@ -1,8 +1,8 @@
-'use strict';
+import { i18n } from '../localization';
 
-TABS.auxiliary = {};
+const auxiliary = {};
 
-TABS.auxiliary.initialize = function (callback) {
+auxiliary.initialize = function (callback) {
     GUI.active_tab_ref = this;
     GUI.active_tab = 'auxiliary';
     let prevChannelsValues = null;
@@ -565,6 +565,11 @@ TABS.auxiliary.initialize = function (callback) {
     }
 };
 
-TABS.auxiliary.cleanup = function (callback) {
+auxiliary.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.auxiliary = auxiliary;
+export {
+    auxiliary,
+};
diff --git a/src/js/tabs/cli.js b/src/js/tabs/cli.js
index 2bd5d4f5..8d1034b4 100644
--- a/src/js/tabs/cli.js
+++ b/src/js/tabs/cli.js
@@ -1,6 +1,6 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.cli = {
+const cli = {
     lineDelayMs: 15,
     profileSwitchDelayMs: 100,
     outputHistory: "",
@@ -75,7 +75,7 @@ function copyToClipboard(text) {
     Clipboard.writeText(text, onCopySuccessful, onCopyFailed);
 }
 
-TABS.cli.initialize = function (callback) {
+cli.initialize = function (callback) {
     const self = this;
 
     if (GUI.active_tab !== 'cli') {
@@ -323,7 +323,7 @@ TABS.cli.initialize = function (callback) {
     });
 };
 
-TABS.cli.adaptPhones = function() {
+cli.adaptPhones = function() {
     if ($(window).width() < 575) {
         const backdropHeight = $('.note').height() + 22 + 38;
         $('.backdrop').css('height', `calc(100% - ${backdropHeight}px)`);
@@ -334,24 +334,24 @@ TABS.cli.adaptPhones = function() {
     }
 };
 
-TABS.cli.history = {
+cli.history = {
     history: [],
     index:  0,
 };
 
-TABS.cli.history.add = function (str) {
+cli.history.add = function (str) {
     this.history.push(str);
     this.index = this.history.length;
 };
 
-TABS.cli.history.prev = function () {
+cli.history.prev = function () {
     if (this.index > 0) {
         this.index -= 1;
     }
     return this.history[this.index];
 };
 
-TABS.cli.history.next = function () {
+cli.history.next = function () {
     if (this.index < this.history.length) {
         this.index += 1;
     }
@@ -385,7 +385,7 @@ function setPrompt(text) {
     $('.tab-cli textarea').val(text);
 }
 
-TABS.cli.read = function (readInfo) {
+cli.read = function (readInfo) {
     /*  Some info about handling line feeds and carriage return
 
         line feed = LF = \n = 0x0A = 10
@@ -487,15 +487,15 @@ TABS.cli.read = function (readInfo) {
     }
 };
 
-TABS.cli.sendLine = function (line, callback) {
+cli.sendLine = function (line, callback) {
     this.send(`${line}\n`, callback);
 };
 
-TABS.cli.sendNativeAutoComplete = function (line, callback) {
+cli.sendNativeAutoComplete = function (line, callback) {
     this.send(`${line}\t`, callback);
 };
 
-TABS.cli.send = function (line, callback) {
+cli.send = function (line, callback) {
     const bufferOut = new ArrayBuffer(line.length);
     const bufView = new Uint8Array(bufferOut);
 
@@ -506,7 +506,7 @@ TABS.cli.send = function (line, callback) {
     serial.send(bufferOut, callback);
 };
 
-TABS.cli.cleanup = function (callback) {
+cli.cleanup = function (callback) {
     if (TABS.cli.GUI.snippetPreviewWindow) {
         TABS.cli.GUI.snippetPreviewWindow.destroy();
         TABS.cli.GUI.snippetPreviewWindow = null;
@@ -534,3 +534,8 @@ TABS.cli.cleanup = function (callback) {
     CliAutoComplete.cleanup();
     $(CliAutoComplete).off();
 };
+
+window.TABS.cli = cli;
+export {
+    cli,
+};
diff --git a/src/js/tabs/configuration.js b/src/js/tabs/configuration.js
index 85925f24..456ec07f 100644
--- a/src/js/tabs/configuration.js
+++ b/src/js/tabs/configuration.js
@@ -1,10 +1,11 @@
-'use strict';
+import semver from 'semver';
+import { i18n } from '../localization';
 
-TABS.configuration = {
+const configuration = {
     analyticsChanges: {},
 };
 
-TABS.configuration.initialize = function (callback) {
+configuration.initialize = function (callback) {
     const self = this;
 
     if (GUI.active_tab != 'configuration') {
@@ -641,6 +642,9 @@ TABS.configuration.initialize = function (callback) {
     }
 };
 
-TABS.configuration.cleanup = function (callback) {
+configuration.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.configuration = configuration;
+export { configuration };
diff --git a/src/js/tabs/failsafe.js b/src/js/tabs/failsafe.js
index 996d4e85..98ce030d 100644
--- a/src/js/tabs/failsafe.js
+++ b/src/js/tabs/failsafe.js
@@ -1,8 +1,8 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.failsafe = {};
+const failsafe = {};
 
-TABS.failsafe.initialize = function (callback, scrollPosition) {
+failsafe.initialize = function (callback, scrollPosition) {
     const self = this;
 
     if (GUI.active_tab != 'failsafe') {
@@ -432,6 +432,11 @@ TABS.failsafe.initialize = function (callback, scrollPosition) {
     }
 };
 
-TABS.failsafe.cleanup = function (callback) {
+failsafe.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.failsafe = failsafe;
+export {
+    failsafe,
+};
diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
index 06d14f86..13c45158 100644
--- a/src/js/tabs/gps.js
+++ b/src/js/tabs/gps.js
@@ -1,7 +1,7 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.gps = {};
-TABS.gps.initialize = function (callback) {
+const gps = {};
+gps.initialize = function (callback) {
 
     if (GUI.active_tab !== 'gps') {
         GUI.active_tab = 'gps';
@@ -219,6 +219,11 @@ TABS.gps.initialize = function (callback) {
 
 };
 
-TABS.gps.cleanup = function (callback) {
+gps.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.gps = gps;
+export {
+    gps,
+};
diff --git a/src/js/tabs/led_strip.js b/src/js/tabs/led_strip.js
index 62525724..d7278793 100644
--- a/src/js/tabs/led_strip.js
+++ b/src/js/tabs/led_strip.js
@@ -1,12 +1,12 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.led_strip = {
+const led_strip = {
         wireMode: false,
         directions: ['n', 'e', 's', 'w', 'u', 'd'],
     };
 
 
-TABS.led_strip.initialize = function (callback, scrollPosition) {
+led_strip.initialize = function (callback, scrollPosition) {
     let selectedColorIndex = null;
     let selectedModeColor = null;
     const functionTag = '.function-';
@@ -1146,6 +1146,11 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
     }
 };
 
-TABS.led_strip.cleanup = function (callback) {
+led_strip.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.led_strip = led_strip;
+export {
+    led_strip,
+};
diff --git a/src/js/tabs/logging.js b/src/js/tabs/logging.js
index 35f39daf..55574866 100644
--- a/src/js/tabs/logging.js
+++ b/src/js/tabs/logging.js
@@ -324,3 +324,7 @@ logging.cleanup = function (callback) {
 
 // TODO: only for transition to modules, drop this eventually
 window.TABS.logging = logging;
+
+export {
+    logging,
+};
diff --git a/src/js/tabs/motors.js b/src/js/tabs/motors.js
index d21cbaca..75a686d3 100644
--- a/src/js/tabs/motors.js
+++ b/src/js/tabs/motors.js
@@ -1,6 +1,6 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.motors = {
+const motors = {
     previousDshotBidir: null,
     previousFilterDynQ: null,
     previousFilterDynCount: null,
@@ -44,7 +44,7 @@ TABS.motors = {
     DSHOT_3D_NEUTRAL: 1500,
 };
 
-TABS.motors.initialize = async function (callback) {
+motors.initialize = async function (callback) {
     const self = this;
 
     self.armed = false;
@@ -371,17 +371,17 @@ TABS.motors.initialize = async function (callback) {
         function validateMixerOutputs() {
             MSP.promise(MSPCodes.MSP_MOTOR).then(() => {
                 const mixer = FC.MIXER_CONFIG.mixer;
-                const motors = mixerList[mixer - 1].motors;
+                const motorCount = mixerList[mixer - 1].motors;
                 // initialize for models with zero motors
-                self.numberOfValidOutputs = motors;
+                self.numberOfValidOutputs = motorCount;
 
                 for (let i = 0; i < FC.MOTOR_DATA.length; i++) {
                     if (FC.MOTOR_DATA[i] === 0) {
                         self.numberOfValidOutputs = i;
-                        if (motors > self.numberOfValidOutputs && motors > 0) {
+                        if (motorCount > self.numberOfValidOutputs && motorCount > 0) {
                             const msg = i18n.getMessage('motorsDialogMixerReset', {
                                 mixerName: mixerList[mixer - 1].name,
-                                mixerMotors: motors,
+                                mixerMotors: motorCount,
                                 outputs: self.numberOfValidOutputs,
                             });
                             showDialogMixerReset(msg);
@@ -1268,7 +1268,7 @@ TABS.motors.initialize = async function (callback) {
     }
 };
 
-TABS.motors.refresh = function (callback) {
+motors.refresh = function (callback) {
     const self = this;
 
     GUI.tab_switch_cleanup(function() {
@@ -1280,6 +1280,11 @@ TABS.motors.refresh = function (callback) {
     });
 };
 
-TABS.motors.cleanup = function (callback) {
+motors.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.motors = motors;
+export {
+    motors,
+};
diff --git a/src/js/tabs/onboard_logging.js b/src/js/tabs/onboard_logging.js
index 9cfb670f..59d1a525 100644
--- a/src/js/tabs/onboard_logging.js
+++ b/src/js/tabs/onboard_logging.js
@@ -1,8 +1,8 @@
-'use strict';
+import { i18n } from "../localization";
 
 let sdcardTimer;
 
-TABS.onboard_logging = {
+const onboard_logging = {
     blockSize: 128,
     writeError: false,
 
@@ -10,7 +10,8 @@ TABS.onboard_logging = {
     VCP_BLOCK_SIZE_3_0: 512,
     VCP_BLOCK_SIZE: 4096,
 };
-TABS.onboard_logging.initialize = function (callback) {
+
+onboard_logging.initialize = function (callback) {
     const self = this;
     let saveCancelled, eraseCancelled;
 
@@ -676,7 +677,7 @@ TABS.onboard_logging.initialize = function (callback) {
     }
 };
 
-TABS.onboard_logging.cleanup = function (callback) {
+onboard_logging.cleanup = function (callback) {
     analytics.setFlightControllerData(analytics.DATA.LOGGING_STATUS, undefined);
     analytics.setFlightControllerData(analytics.DATA.LOG_SIZE, undefined);
 
@@ -690,9 +691,14 @@ TABS.onboard_logging.cleanup = function (callback) {
     }
 };
 
-TABS.onboard_logging.mscRebootFailedCallback = function () {
+onboard_logging.mscRebootFailedCallback = function () {
     $(".tab-onboard_logging")
         .toggleClass("msc-supported", false);
 
     showErrorDialog(i18n.getMessage('operationNotSupported'));
 };
+
+window.TABS.onboard_logging = onboard_logging;
+export {
+    onboard_logging,
+};
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index d9945f06..bb6c47e3 100644
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -1,4 +1,4 @@
-'use strict';
+import { i18n } from "../localization";
 
 const FONT = {};
 const SYM = {};
@@ -2448,11 +2448,11 @@ OSD.GUI.preview = {
 };
 
 
-TABS.osd = {
+const osd = {
     analyticsChanges: {},
 };
 
-TABS.osd.initialize = function(callback) {
+osd.initialize = function(callback) {
     if (GUI.active_tab !== 'osd') {
         GUI.active_tab = 'osd';
     }
@@ -3287,7 +3287,7 @@ TABS.osd.initialize = function(callback) {
     });
 };
 
-TABS.osd.cleanup = function(callback) {
+osd.cleanup = function(callback) {
     PortHandler.flush_callbacks();
 
     if (OSD.GUI.fontManager) {
@@ -3302,3 +3302,8 @@ TABS.osd.cleanup = function(callback) {
         callback();
     }
 };
+
+window.TABS.osd = osd;
+export {
+    osd,
+};
diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js
index 0d72d225..4360c590 100644
--- a/src/js/tabs/pid_tuning.js
+++ b/src/js/tabs/pid_tuning.js
@@ -1,6 +1,6 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.pid_tuning = {
+const pid_tuning = {
     RATE_PROFILE_MASK: 128,
     showAllPids: false,
     updating: true,
@@ -25,7 +25,7 @@ TABS.pid_tuning = {
     CONFIGURATOR_TUNING_SLIDERS: {},
 };
 
-TABS.pid_tuning.initialize = function (callback) {
+pid_tuning.initialize = function (callback) {
 
     const self = this;
 
@@ -2480,11 +2480,11 @@ TABS.pid_tuning.initialize = function (callback) {
     }
 };
 
-TABS.pid_tuning.getReceiverData = function () {
+pid_tuning.getReceiverData = function () {
     MSP.send_message(MSPCodes.MSP_RC, false, false);
 };
 
-TABS.pid_tuning.initRatesPreview = function () {
+pid_tuning.initRatesPreview = function () {
     this.keepRendering = true;
     this.model = new Model($('.rates_preview'), $('.rates_preview canvas'));
 
@@ -2495,7 +2495,7 @@ TABS.pid_tuning.initRatesPreview = function () {
     $(window).on('resize', $.proxy(this.updateRatesLabels, this));
 };
 
-TABS.pid_tuning.renderModel = function () {
+pid_tuning.renderModel = function () {
     if (this.keepRendering) { requestAnimationFrame(this.renderModel.bind(this)); }
 
     if (!this.clock) { this.clock = new THREE.Clock(); }
@@ -2538,7 +2538,7 @@ TABS.pid_tuning.renderModel = function () {
     }
 };
 
-TABS.pid_tuning.cleanup = function (callback) {
+pid_tuning.cleanup = function (callback) {
     const self = this;
 
     if (self.model) {
@@ -2555,7 +2555,7 @@ TABS.pid_tuning.cleanup = function (callback) {
     if (callback) callback();
 };
 
-TABS.pid_tuning.refresh = function (callback) {
+pid_tuning.refresh = function (callback) {
     const self = this;
 
     GUI.tab_switch_cleanup(function () {
@@ -2569,21 +2569,21 @@ TABS.pid_tuning.refresh = function (callback) {
     });
 };
 
-TABS.pid_tuning.setProfile = function () {
+pid_tuning.setProfile = function () {
     const self = this;
 
     self.currentProfile = FC.CONFIG.profile;
     $('.tab-pid_tuning select[name="profile"]').val(self.currentProfile);
 };
 
-TABS.pid_tuning.setRateProfile = function () {
+pid_tuning.setRateProfile = function () {
     const self = this;
 
     self.currentRateProfile = FC.CONFIG.rateProfile;
     $('.tab-pid_tuning select[name="rate_profile"]').val(self.currentRateProfile);
 };
 
-TABS.pid_tuning.setDirty = function (isDirty) {
+pid_tuning.setDirty = function (isDirty) {
     const self = this;
 
     self.dirty = isDirty;
@@ -2593,7 +2593,7 @@ TABS.pid_tuning.setDirty = function (isDirty) {
     }
 };
 
-TABS.pid_tuning.checkUpdateProfile = function (updateRateProfile) {
+pid_tuning.checkUpdateProfile = function (updateRateProfile) {
     const self = this;
 
     if (GUI.active_tab === 'pid_tuning') {
@@ -2634,7 +2634,7 @@ TABS.pid_tuning.checkUpdateProfile = function (updateRateProfile) {
     }
 };
 
-TABS.pid_tuning.checkRC = function() {
+pid_tuning.checkRC = function() {
     // Function monitors for change in the primary axes rc received data and returns true if a change is detected.
 
     if (!this.oldRC) { this.oldRC = [FC.RC.channels[0], FC.RC.channels[1], FC.RC.channels[2]]; }
@@ -2650,7 +2650,7 @@ TABS.pid_tuning.checkRC = function() {
     return rateCurveUpdateRequired;
 };
 
-TABS.pid_tuning.checkThrottle = function() {
+pid_tuning.checkThrottle = function() {
     // Function monitors for change in the received rc throttle data and returns true if a change is detected.
     if (!this.oldThrottle) {
         this.oldThrottle = FC.RC.channels[3];
@@ -2661,7 +2661,7 @@ TABS.pid_tuning.checkThrottle = function() {
     return updateRequired;
 };
 
-TABS.pid_tuning.updatePidControllerParameters = function () {
+pid_tuning.updatePidControllerParameters = function () {
     if (semver.gte(FC.CONFIG.apiVersion, "1.20.0") && semver.lt(FC.CONFIG.apiVersion, API_VERSION_1_31) && $('.tab-pid_tuning select[name="controller"]').val() === '0') {
         $('.pid_tuning .YAW_JUMP_PREVENTION').show();
 
@@ -2684,7 +2684,7 @@ TABS.pid_tuning.updatePidControllerParameters = function () {
     }
 };
 
-TABS.pid_tuning.updateRatesLabels = function() {
+pid_tuning.updateRatesLabels = function() {
     const self = this;
     if (!self.rateCurve.useLegacyCurve && self.rateCurve.maxAngularVel) {
 
@@ -2871,13 +2871,13 @@ TABS.pid_tuning.updateRatesLabels = function() {
     }
 };
 
-TABS.pid_tuning.calculateNewPids = function() {
+pid_tuning.calculateNewPids = function() {
     if (!TABS.pid_tuning.isHtmlProcessing) {
         TuningSliders.calculateNewPids();
     }
 };
 
-TABS.pid_tuning.calculateNewGyroFilters = function() {
+pid_tuning.calculateNewGyroFilters = function() {
     if (!TABS.pid_tuning.isHtmlProcessing) {
         if (TuningSliders.sliderGyroFilter) {
             TuningSliders.calculateNewGyroFilters();
@@ -2885,7 +2885,7 @@ TABS.pid_tuning.calculateNewGyroFilters = function() {
     }
 };
 
-TABS.pid_tuning.calculateNewDTermFilters = function() {
+pid_tuning.calculateNewDTermFilters = function() {
     if (!TABS.pid_tuning.isHtmlProcessing) {
         if (TuningSliders.sliderDTermFilter) {
             TuningSliders.calculateNewDTermFilters();
@@ -2893,7 +2893,7 @@ TABS.pid_tuning.calculateNewDTermFilters = function() {
     }
 };
 
-TABS.pid_tuning.updateFilterWarning = function() {
+pid_tuning.updateFilterWarning = function() {
     const gyroLowpassFilterMode = parseInt($('.pid_filter select[name="gyroLowpassFilterMode"]').val());
     const gyroDynamicLowpassEnabled = gyroLowpassFilterMode === 1;
     const gyroLowpass1Enabled = !gyroLowpassFilterMode;
@@ -2918,7 +2918,7 @@ TABS.pid_tuning.updateFilterWarning = function() {
     }
 };
 
-TABS.pid_tuning.updatePIDColors = function(clear = false) {
+pid_tuning.updatePIDColors = function(clear = false) {
     if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44)) {
         return;
     }
@@ -2951,7 +2951,7 @@ TABS.pid_tuning.updatePIDColors = function(clear = false) {
     setTuningElementColor($('.pid_tuning .YAW input[name="f"]'), FC.ADVANCED_TUNING_ACTIVE.feedforwardYaw, FC.ADVANCED_TUNING.feedforwardYaw);
 };
 
-TABS.pid_tuning.changeRatesType = function(rateTypeID) {
+pid_tuning.changeRatesType = function(rateTypeID) {
     const self = this;
     const dialogRatesType = $('.dialogRatesType')[0];
 
@@ -2987,7 +2987,7 @@ TABS.pid_tuning.changeRatesType = function(rateTypeID) {
 
 };
 
-TABS.pid_tuning.changeRatesSystem = function(sameType) {
+pid_tuning.changeRatesSystem = function(sameType) {
     const self = this;
 
     let rcRateMax = 2.55, rcRateMin = 0.01, rcRateStep = 0.01;
@@ -3142,7 +3142,7 @@ TABS.pid_tuning.changeRatesSystem = function(sameType) {
     }
 };
 
-TABS.pid_tuning.changeRatesTypeLogo = function() {
+pid_tuning.changeRatesTypeLogo = function() {
     const self = this;
 
     const ratesLogoElement = $('.rates_type img[id="ratesLogo"]');
@@ -3177,6 +3177,11 @@ TABS.pid_tuning.changeRatesTypeLogo = function() {
 };
 
 
-TABS.pid_tuning.expertModeChanged = function(expertModeEnabled) {
+pid_tuning.expertModeChanged = function(expertModeEnabled) {
     TuningSliders.setExpertMode(expertModeEnabled);
 };
+
+window.TABS.pid_tuning = pid_tuning;
+export {
+    pid_tuning,
+};
diff --git a/src/js/tabs/ports.js b/src/js/tabs/ports.js
index 79b0ade1..14aef6c0 100644
--- a/src/js/tabs/ports.js
+++ b/src/js/tabs/ports.js
@@ -1,10 +1,11 @@
-'use strict';
+import semver from 'semver';
+import { i18n } from "../localization";
 
-TABS.ports = {
+const ports = {
     analyticsChanges: {},
 };
 
-TABS.ports.initialize = function (callback, scrollPosition) {
+ports.initialize = function (callback) {
     const self = this;
 
     let board_definition = {};
@@ -418,6 +419,9 @@ TABS.ports.initialize = function (callback, scrollPosition) {
     }
 };
 
-TABS.ports.cleanup = function (callback) {
+ports.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.ports = ports;
+export { ports };
diff --git a/src/js/tabs/power.js b/src/js/tabs/power.js
index eabc868c..735a84a3 100644
--- a/src/js/tabs/power.js
+++ b/src/js/tabs/power.js
@@ -1,11 +1,12 @@
-'use strict';
+import semver from 'semver';
+import { i18n } from '../localization';
 
-TABS.power = {
+const power = {
     supported: false,
     analyticsChanges: {},
 };
 
-TABS.power.initialize = function (callback) {
+power.initialize = function (callback) {
     const self = this;
 
     if (GUI.active_tab != 'power') {
@@ -534,7 +535,7 @@ TABS.power.initialize = function (callback) {
     }
 };
 
-TABS.power.cleanup = function (callback) {
+power.cleanup = function (callback) {
     if (callback) callback();
 
     if (GUI.calibrationManager) {
@@ -544,3 +545,6 @@ TABS.power.cleanup = function (callback) {
         GUI.calibrationManagerConfirmation.destroy();
     }
 };
+
+window.TABS.power = power;
+export { power };
diff --git a/src/js/tabs/receiver.js b/src/js/tabs/receiver.js
index 544d9b8d..f20dc6d0 100644
--- a/src/js/tabs/receiver.js
+++ b/src/js/tabs/receiver.js
@@ -1,12 +1,12 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.receiver = {
+const receiver = {
     rateChartHeight: 117,
     analyticsChanges: {},
     needReboot: false,
 };
 
-TABS.receiver.initialize = function (callback) {
+receiver.initialize = function (callback) {
     const tab = this;
 
     if (GUI.active_tab !== 'receiver') {
@@ -806,11 +806,11 @@ TABS.receiver.initialize = function (callback) {
     }
 };
 
-TABS.receiver.getReceiverData = function () {
+receiver.getReceiverData = function () {
     MSP.send_message(MSPCodes.MSP_RC, false, false);
 };
 
-TABS.receiver.initModelPreview = function () {
+receiver.initModelPreview = function () {
     this.keepRendering = true;
     this.model = new Model($('.model_preview'), $('.model_preview canvas'));
 
@@ -828,7 +828,7 @@ TABS.receiver.initModelPreview = function () {
     $(window).on('resize', $.bind(this.model.resize, this.model));
 };
 
-TABS.receiver.renderModel = function () {
+receiver.renderModel = function () {
     if (this.keepRendering) { requestAnimationFrame(this.renderModel.bind(this)); }
 
     if (!this.clock) { this.clock = new THREE.Clock(); }
@@ -847,7 +847,7 @@ TABS.receiver.renderModel = function () {
     }
 };
 
-TABS.receiver.cleanup = function (callback) {
+receiver.cleanup = function (callback) {
     $(window).off('resize', this.resize);
     if (this.model) {
         $(window).off('resize', $.proxy(this.model.resize, this.model));
@@ -859,7 +859,7 @@ TABS.receiver.cleanup = function (callback) {
     if (callback) callback();
 };
 
-TABS.receiver.refresh = function (callback) {
+receiver.refresh = function (callback) {
     const self = this;
 
     GUI.tab_switch_cleanup(function () {
@@ -871,7 +871,7 @@ TABS.receiver.refresh = function (callback) {
     });
 };
 
-TABS.receiver.updateRcInterpolationParameters = function () {
+receiver.updateRcInterpolationParameters = function () {
     if (semver.gte(FC.CONFIG.apiVersion, "1.20.0")) {
         if ($('select[name="rcInterpolation-select"]').val() === '3') {
             $('.tab-receiver .rc-interpolation-manual').show();
@@ -935,3 +935,8 @@ function updateInterpolationView() {
         $('.tab-receiver .rcSmoothing-setpoint-cutoff').hide();
     }
 }
+
+window.TABS.receiver = receiver;
+export {
+    receiver,
+};
diff --git a/src/js/tabs/sensors.js b/src/js/tabs/sensors.js
index a9110ac6..3f2734ce 100644
--- a/src/js/tabs/sensors.js
+++ b/src/js/tabs/sensors.js
@@ -1,7 +1,7 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.sensors = {};
-TABS.sensors.initialize = function (callback) {
+const sensors = {};
+sensors.initialize = function (callback) {
 
     if (GUI.active_tab != 'sensors') {
         GUI.active_tab = 'sensors';
@@ -471,8 +471,13 @@ TABS.sensors.initialize = function (callback) {
     });
 };
 
-TABS.sensors.cleanup = function (callback) {
+sensors.cleanup = function (callback) {
     serial.emptyOutputBuffer();
 
     if (callback) callback();
 };
+
+window.TABS.sensors = sensors;
+export {
+    sensors,
+};
diff --git a/src/js/tabs/servos.js b/src/js/tabs/servos.js
index 9bbc2382..6b877e92 100644
--- a/src/js/tabs/servos.js
+++ b/src/js/tabs/servos.js
@@ -1,7 +1,7 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.servos = {};
-TABS.servos.initialize = function (callback) {
+const servos = {};
+servos.initialize = function (callback) {
 
     if (GUI.active_tab !== 'servos') {
         GUI.active_tab = 'servos';
@@ -233,8 +233,13 @@ TABS.servos.initialize = function (callback) {
     }
 };
 
-TABS.servos.cleanup = function (callback) {
+servos.cleanup = function (callback) {
     if (callback) {
         callback();
     }
 };
+
+window.TABS.servos = servos;
+export {
+    servos,
+};
diff --git a/src/js/tabs/setup.js b/src/js/tabs/setup.js
index ab29a516..7bdd6421 100644
--- a/src/js/tabs/setup.js
+++ b/src/js/tabs/setup.js
@@ -1,10 +1,10 @@
-'use strict';
+import { i18n } from '../localization';
 
-TABS.setup = {
+const setup = {
     yaw_fix: 0.0,
 };
 
-TABS.setup.initialize = function (callback) {
+setup.initialize = function (callback) {
     const self = this;
 
     if (GUI.active_tab != 'setup') {
@@ -318,7 +318,7 @@ TABS.setup.initialize = function (callback) {
     }
 };
 
-TABS.setup.initializeInstruments = function() {
+setup.initializeInstruments = function() {
     const options = {size:90, showBox : false, img_directory: 'images/flightindicators/'};
     const attitude = $.flightIndicator('#attitude', 'attitude', options);
     const heading = $.flightIndicator('#heading', 'heading', options);
@@ -330,13 +330,13 @@ TABS.setup.initializeInstruments = function() {
     };
 };
 
-TABS.setup.initModel = function () {
+setup.initModel = function () {
     this.model = new Model($('.model-and-info #canvas_wrapper'), $('.model-and-info #canvas'));
 
     $(window).on('resize', $.proxy(this.model.resize, this.model));
 };
 
-TABS.setup.renderModel = function () {
+setup.renderModel = function () {
     const x = (FC.SENSOR_DATA.kinematics[1] * -1.0) * 0.017453292519943295,
         y = ((FC.SENSOR_DATA.kinematics[2] * -1.0) - this.yaw_fix) * 0.017453292519943295,
         z = (FC.SENSOR_DATA.kinematics[0] * -1.0) * 0.017453292519943295;
@@ -344,7 +344,7 @@ TABS.setup.renderModel = function () {
     this.model.rotateTo(x, y, z);
 };
 
-TABS.setup.cleanup = function (callback) {
+setup.cleanup = function (callback) {
     if (this.model) {
         $(window).off('resize', $.proxy(this.model.resize, this.model));
         this.model.dispose();
@@ -352,3 +352,7 @@ TABS.setup.cleanup = function (callback) {
 
     if (callback) callback();
 };
+
+window.TABS.setup = setup;
+
+export { setup };
diff --git a/src/js/tabs/setup_osd.js b/src/js/tabs/setup_osd.js
index e93a444d..e62ca69b 100644
--- a/src/js/tabs/setup_osd.js
+++ b/src/js/tabs/setup_osd.js
@@ -1,9 +1,9 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.setup_osd = {
+const setup_osd = {
 };
 
-TABS.setup_osd.initialize = function (callback) {
+setup_osd.initialize = function (callback) {
 
     if (GUI.active_tab != 'setup_osd') {
         GUI.active_tab = 'setup_osd';
@@ -63,6 +63,11 @@ TABS.setup_osd.initialize = function (callback) {
     }
 };
 
-TABS.setup_osd.cleanup = function (callback) {
+setup_osd.cleanup = function (callback) {
     if (callback) callback();
 };
+
+window.TABS.setup_osd = setup_osd;
+export {
+    setup_osd,
+};
diff --git a/src/js/tabs/transponder.js b/src/js/tabs/transponder.js
index 179e50ce..2485db36 100644
--- a/src/js/tabs/transponder.js
+++ b/src/js/tabs/transponder.js
@@ -1,11 +1,10 @@
-'use strict';
+import { i18n } from "../localization";
 
-
-TABS.transponder = {
+const transponder = {
     available: false,
 };
 
-TABS.transponder.initialize = function(callback, scrollPosition) {
+transponder.initialize = function(callback) {
 
     let _persistentInputValues = {};
 
@@ -323,6 +322,11 @@ TABS.transponder.initialize = function(callback, scrollPosition) {
     }
 };
 
-TABS.transponder.cleanup = function(callback) {
+transponder.cleanup = function(callback) {
     if ( callback ) callback();
 };
+
+window.TABS.transponder = transponder;
+export {
+    transponder,
+};
diff --git a/src/js/tabs/vtx.js b/src/js/tabs/vtx.js
index 2c27936c..e9e90e76 100644
--- a/src/js/tabs/vtx.js
+++ b/src/js/tabs/vtx.js
@@ -1,6 +1,6 @@
-'use strict';
+import { i18n } from "../localization";
 
-TABS.vtx = {
+const vtx = {
     supported: false,
     vtxTableSavePending: false,
     vtxTableFactoryBandsSupported: false,
@@ -17,13 +17,13 @@ TABS.vtx = {
     },
 };
 
-TABS.vtx.isVtxDeviceStatusNotReady = function()
+vtx.isVtxDeviceStatusNotReady = function()
 {
     const isReady = (null !== FC.VTX_DEVICE_STATUS) && (FC.VTX_DEVICE_STATUS.deviceIsReady);
     return !isReady;
 };
 
-TABS.vtx.updateVtxDeviceStatus = function()
+vtx.updateVtxDeviceStatus = function()
 {
     MSP.send_message(MSPCodes.MSP2_GET_VTX_DEVICE_STATUS, false, false, vtxDeviceStatusReceived);
 
@@ -33,7 +33,7 @@ TABS.vtx.updateVtxDeviceStatus = function()
     }
 };
 
-TABS.vtx.getVtxTypeString = function()
+vtx.getVtxTypeString = function()
 {
     let result = i18n.getMessage(`vtxType_${FC.VTX_CONFIG.vtx_type}`);
 
@@ -47,7 +47,7 @@ TABS.vtx.getVtxTypeString = function()
     return result;
 };
 
-TABS.vtx.initialize = function (callback) {
+vtx.initialize = function (callback) {
     const self = this;
 
     if (GUI.active_tab !== 'vtx') {
@@ -1004,7 +1004,7 @@ TABS.vtx.initialize = function (callback) {
 
 };
 
-TABS.vtx.cleanup = function (callback) {
+vtx.cleanup = function (callback) {
 
     // Add here things that need to be cleaned or closed before leaving the tab
     this.vtxTableSavePending = false;
@@ -1017,3 +1017,8 @@ TABS.vtx.cleanup = function (callback) {
         callback();
     }
 };
+
+window.TABS.vtx = vtx;
+export {
+    vtx,
+};
diff --git a/src/main.html b/src/main.html
index 816532a3..7f12007c 100644
--- a/src/main.html
+++ b/src/main.html
@@ -118,23 +118,7 @@
     <script type="text/javascript" src="./js/GitHubApi.js"></script>
     <script type="module" src="./js/main.js"></script>
     <script type="text/javascript" src="./js/Clipboard.js"></script>
-    <script type="text/javascript" src="./js/tabs/setup.js"></script>
-    <script type="text/javascript" src="./js/tabs/setup_osd.js"></script>
-    <script type="text/javascript" src="./js/tabs/ports.js"></script>
-    <script type="text/javascript" src="./js/tabs/configuration.js"></script>
-    <script type="text/javascript" src="./js/tabs/pid_tuning.js"></script>
-    <script type="text/javascript" src="./js/tabs/receiver.js"></script>
-    <script type="text/javascript" src="./js/tabs/auxiliary.js"></script>
-    <script type="text/javascript" src="./js/tabs/adjustments.js"></script>
-    <script type="text/javascript" src="./js/tabs/servos.js"></script>
-    <script type="text/javascript" src="./js/tabs/gps.js"></script>
-    <script type="text/javascript" src="./js/tabs/motors.js"></script>
-    <script type="text/javascript" src="./js/tabs/led_strip.js"></script>
-    <script type="text/javascript" src="./js/tabs/sensors.js"></script>
-    <script type="text/javascript" src="./js/tabs/cli.js"></script>
     <!-- TODO: might be removed when everythign is in modules -->
-    <script type="module" src="./js/tabs/logging.js"></script>
-    <script type="text/javascript" src="./tabs/presets/presets.js"></script>
     <script type="text/javascript" src="./tabs/presets/CliEngine.js"></script>
     <script type="text/javascript" src="./tabs/presets/PickedPreset.js"></script>
     <script type="text/javascript" src="./tabs/presets/DetailedDialog/PresetsDetailedDialog.js"></script>
@@ -146,14 +130,8 @@
     <script type="text/javascript" src="./tabs/presets/SourcesDialog/SourcesDialog.js"></script>
     <script type="text/javascript" src="./tabs/presets/SourcesDialog/SourcePanel.js"></script>
     <script type="text/javascript" src="./tabs/presets/SourcesDialog/PresetSource.js"></script>
-    <script type="text/javascript" src="./js/tabs/onboard_logging.js"></script>
     <script type="text/javascript" src="./js/FirmwareCache.js"></script>
-    <script type="text/javascript" src="./js/tabs/failsafe.js"></script>
     <script type="text/javascript" src="./js/LogoManager.js"></script>
-    <script type="text/javascript" src="./js/tabs/osd.js"></script>
-    <script type="text/javascript" src="./js/tabs/vtx.js"></script>
-    <script type="text/javascript" src="./js/tabs/power.js"></script>
-    <script type="text/javascript" src="./js/tabs/transponder.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
     <script type="text/javascript" src="./js/CliAutoComplete.js"></script>
     <script type="text/javascript" src="./js/DarkTheme.js"></script>
diff --git a/src/tabs/presets/presets.js b/src/tabs/presets/presets.js
index 0762e885..21e96742 100644
--- a/src/tabs/presets/presets.js
+++ b/src/tabs/presets/presets.js
@@ -1,13 +1,13 @@
 'use strict';
 
-TABS.presets = {
+const presets = {
     presetsRepo: null,
     cliEngine: null,
     pickedPresetList: [],
     majorVersion: 1,
 };
 
-TABS.presets.initialize = function (callback) {
+presets.initialize = function (callback) {
     const self = this;
 
     self.cliEngine = new CliEngine(self);
@@ -21,7 +21,7 @@ TABS.presets.initialize = function (callback) {
     }
 };
 
-TABS.presets.readDom = function() {
+presets.readDom = function() {
     this._divGlobalLoading = $('#presets_global_loading');
     this._divGlobalLoadingError = $('#presets_global_loading_error');
     this._divCli = $('#presets_cli');
@@ -56,7 +56,7 @@ TABS.presets.readDom = function() {
     this._domListTooManyFound = $("#presets_list_too_many_found");
 };
 
-TABS.presets.getPickedPresetsCli = function() {
+presets.getPickedPresetsCli = function() {
     let result = [];
     this.pickedPresetList.forEach(pickedPreset => {
         result.push(...pickedPreset.presetCli);
@@ -65,17 +65,17 @@ TABS.presets.getPickedPresetsCli = function() {
     return result;
 };
 
-TABS.presets.onApplyProgressChange = function(value) {
+presets.onApplyProgressChange = function(value) {
     this._domProgressDialogProgressBar.val(value);
 };
 
-TABS.presets.applyCommandsList = function(strings) {
+presets.applyCommandsList = function(strings) {
     strings.forEach(cliCommand => {
         this.cliEngine.sendLine(cliCommand);
     });
 };
 
-TABS.presets.onSaveClick = function() {
+presets.onSaveClick = function() {
     this._domProgressDialogProgressBar.val(0);
     this._domProgressDialog.showModal();
     const currentCliErrorsCount = this.cliEngine.errorsCount;
@@ -98,13 +98,13 @@ TABS.presets.onSaveClick = function() {
     });
 };
 
-TABS.presets.disconnectCliMakeSure = function() {
+presets.disconnectCliMakeSure = function() {
     GUI.timeout_add('disconnect', function () {
         $('div.connect_controls a.connect').trigger( "click" );
     }, 500);
 };
 
-TABS.presets.setupMenuButtons = function() {
+presets.setupMenuButtons = function() {
     this._domButtonSave.on("click", () => this.onSaveClick());
 
 
@@ -156,17 +156,17 @@ TABS.presets.setupMenuButtons = function() {
 
 };
 
-TABS.presets.enableSaveCancelButtons = function (isEnabled) {
+presets.enableSaveCancelButtons = function (isEnabled) {
     this._domButtonSave.toggleClass(GUI.buttonDisabledClass, !isEnabled);
     this._domButtonCancel.toggleClass(GUI.buttonDisabledClass, !isEnabled);
 };
 
-TABS.presets.onButtonHideBackupWarningClick = function() {
+presets.onButtonHideBackupWarningClick = function() {
     this._domWarningBackup.toggle(false);
     ConfigStorage.set({ 'showPresetsWarningBackup': false });
 };
 
-TABS.presets.setupBackupWarning = function() {
+presets.setupBackupWarning = function() {
     const obj = ConfigStorage.get('showPresetsWarningBackup');
     if (obj.showPresetsWarningBackup === undefined) {
         obj.showPresetsWarningBackup = true;
@@ -176,13 +176,13 @@ TABS.presets.setupBackupWarning = function() {
     this._domWarningBackup.toggle(warningVisible);
 };
 
-TABS.presets.onPresetSourcesShowClick = function() {
+presets.onPresetSourcesShowClick = function() {
     this.presetsSourcesDialog.show().then(() => {
         this.reload();
     });
 };
 
-TABS.presets.onSaveConfigClick = function() {
+presets.onSaveConfigClick = function() {
     const waitingDialog = GUI.showWaitDialog({title: i18n.getMessage("presetsLoadingDumpAll"), buttonCancelCallback: null});
 
     const saveFailedDialogSettings = {
@@ -211,7 +211,7 @@ TABS.presets.onSaveConfigClick = function() {
     .then(() => this.cliEngine.sendLine(CliEngine.s_commandExit));
 };
 
-TABS.presets.readDumpAll = function() {
+presets.readDumpAll = function() {
     let lastCliStringReceived = performance.now();
     const diffAll = [CliEngine.s_commandDefaultsNoSave, ""];
     const readingDumpIntervalName = "PRESETS_READING_DUMP_INTERVAL";
@@ -238,7 +238,7 @@ TABS.presets.readDumpAll = function() {
     });
 };
 
-TABS.presets.onLoadConfigClick = function() {
+presets.onLoadConfigClick = function() {
     GUI.readTextFileDialog("txt")
     .then(text => {
         if (text) {
@@ -250,7 +250,7 @@ TABS.presets.onLoadConfigClick = function() {
     });
 };
 
-TABS.presets.onHtmlLoad = function(callback) {
+presets.onHtmlLoad = function(callback) {
     i18n.localizePage();
     TABS.presets.adaptPhones();
     this.readDom();
@@ -269,11 +269,11 @@ TABS.presets.onHtmlLoad = function(callback) {
     });
 };
 
-TABS.presets.onPresetPickedCallback = function() {
+presets.onPresetPickedCallback = function() {
     this.enableSaveCancelButtons(true);
 };
 
-TABS.presets.activateCli = function() {
+presets.activateCli = function() {
     return new Promise(resolve => {
         CONFIGURATOR.cliEngineActive = true;
         this.cliEngine.setUi($('#presets_cli_window'), $('#presets_cli_window_wrapper'), $('#presets_cli_command'));
@@ -285,12 +285,12 @@ TABS.presets.activateCli = function() {
     });
 };
 
-TABS.presets.reload = function() {
+presets.reload = function() {
     this.resetInitialValues();
     this.tryLoadPresets();
 };
 
-TABS.presets.tryLoadPresets = function() {
+presets.tryLoadPresets = function() {
     const presetSource = this.presetsSourcesDialog.getActivePresetSource();
 
     if (PresetSource.isUrlGithubRepo(presetSource.url)) {
@@ -317,7 +317,7 @@ TABS.presets.tryLoadPresets = function() {
     });
 };
 
-TABS.presets.multipleSelectComponentScrollFix = function() {
+presets.multipleSelectComponentScrollFix = function() {
     /*
         A hack for multiple select that fixes scrolling problem
         when the number of items 199+. More details here:
@@ -332,7 +332,7 @@ TABS.presets.multipleSelectComponentScrollFix = function() {
     }, 100);
 };
 
-TABS.presets.checkPresetSourceVersion = function() {
+presets.checkPresetSourceVersion = function() {
     const self = this;
 
     return new Promise((resolve, reject) => {
@@ -356,7 +356,7 @@ TABS.presets.checkPresetSourceVersion = function() {
     });
 };
 
-TABS.presets.prepareFilterFields = function() {
+presets.prepareFilterFields = function() {
     this._freezeSearch = true;
     this.prepareFilterSelectField(this._selectCategory, this.presetsRepo.index.uniqueValues.category, 3);
     this.prepareFilterSelectField(this._selectKeyword, this.presetsRepo.index.uniqueValues.keywords, 3);
@@ -373,7 +373,7 @@ TABS.presets.prepareFilterFields = function() {
     this.updateSearchResults();
 };
 
-TABS.presets.preselectFilterFields = function() {
+presets.preselectFilterFields = function() {
     const currentVersion = FC.CONFIG.flightControllerVersion;
     const selectedVersions = [];
 
@@ -386,7 +386,7 @@ TABS.presets.preselectFilterFields = function() {
     this._selectFirmwareVersion.multipleSelect('setSelects', selectedVersions);
 };
 
-TABS.presets.prepareFilterSelectField = function(domSelectElement, selectOptions, minimumCountSelected) {
+presets.prepareFilterSelectField = function(domSelectElement, selectOptions, minimumCountSelected) {
     domSelectElement.multipleSelect("destroy");
     domSelectElement.multipleSelect({
         data: selectOptions,
@@ -401,7 +401,7 @@ TABS.presets.prepareFilterSelectField = function(domSelectElement, selectOptions
     });
 };
 
-TABS.presets.updateSearchResults = function() {
+presets.updateSearchResults = function() {
     if (!this._freezeSearch)
     {
         const searchParams = {
@@ -420,7 +420,7 @@ TABS.presets.updateSearchResults = function() {
     }
 };
 
-TABS.presets.updateSelectStyle = function() {
+presets.updateSelectStyle = function() {
     this.updateSingleSelectStyle(this._selectCategory);
     this.updateSingleSelectStyle(this._selectKeyword);
     this.updateSingleSelectStyle(this._selectAuthor);
@@ -428,13 +428,13 @@ TABS.presets.updateSelectStyle = function() {
     this.updateSingleSelectStyle(this._selectStatus);
 };
 
-TABS.presets.updateSingleSelectStyle = function(select) {
+presets.updateSingleSelectStyle = function(select) {
     const selectedOptions = select.multipleSelect("getSelects", "text");
     const isSomethingSelected = (0 !== selectedOptions.length);
     select.parent().find($(".ms-choice")).toggleClass("presets_filter_select_nonempty", isSomethingSelected);
 };
 
-TABS.presets.displayPresets = function(fitPresets) {
+presets.displayPresets = function(fitPresets) {
     this._presetPanels.forEach(presetPanel => {
         presetPanel.remove();
     });
@@ -456,7 +456,7 @@ TABS.presets.displayPresets = function(fitPresets) {
     this._domListTooManyFound.appendTo(this._divPresetList);
 };
 
-TABS.presets.getFitPresets = function(searchParams) {
+presets.getFitPresets = function(searchParams) {
     const result = [];
 
     for(const preset of this.presetsRepo.index.presets) {
@@ -470,11 +470,11 @@ TABS.presets.getFitPresets = function(searchParams) {
     return result;
 };
 
-TABS.presets.isPresetFitSearchStatuses = function(preset, searchParams) {
+presets.isPresetFitSearchStatuses = function(preset, searchParams) {
     return 0 === searchParams.status.length || searchParams.status.includes(preset.status);
 };
 
-TABS.presets.isPresetFitSearchCategories = function(preset, searchParams) {
+presets.isPresetFitSearchCategories = function(preset, searchParams) {
     if (0 !== searchParams.categories.length) {
         if (undefined === preset.category) {
             return false;
@@ -488,7 +488,7 @@ TABS.presets.isPresetFitSearchCategories = function(preset, searchParams) {
     return true;
 };
 
-TABS.presets.isPresetFitSearchKeywords = function(preset, searchParams) {
+presets.isPresetFitSearchKeywords = function(preset, searchParams) {
     if (0 !== searchParams.keywords.length) {
         if (!Array.isArray(preset.keywords)) {
             return false;
@@ -503,7 +503,7 @@ TABS.presets.isPresetFitSearchKeywords = function(preset, searchParams) {
     return true;
 };
 
-TABS.presets.isPresetFitSearchAuthors = function(preset, searchParams) {
+presets.isPresetFitSearchAuthors = function(preset, searchParams) {
     if (0 !== searchParams.authors.length) {
         if (undefined === preset.author) {
             return false;
@@ -517,7 +517,7 @@ TABS.presets.isPresetFitSearchAuthors = function(preset, searchParams) {
     return true;
 };
 
-TABS.presets.isPresetFitSearchFirmwareVersions = function(preset, searchParams) {
+presets.isPresetFitSearchFirmwareVersions = function(preset, searchParams) {
     if (0 !== searchParams.firmwareVersions.length) {
         if (!Array.isArray(preset.firmware_version)) {
             return false;
@@ -533,7 +533,7 @@ TABS.presets.isPresetFitSearchFirmwareVersions = function(preset, searchParams)
 };
 
 
-TABS.presets.isPresetFitSearchString = function(preset, searchParams) {
+presets.isPresetFitSearchString = function(preset, searchParams) {
     if (searchParams.searchString) {
         const allKeywords = preset.keywords.join(" ");
         const allVersions = preset.firmware_version.join(" ");
@@ -551,7 +551,7 @@ TABS.presets.isPresetFitSearchString = function(preset, searchParams) {
 };
 
 
-TABS.presets.isPresetFitSearch = function(preset, searchParams) {
+presets.isPresetFitSearch = function(preset, searchParams) {
     if (preset.hidden) {
         return false;
     }
@@ -583,17 +583,17 @@ TABS.presets.isPresetFitSearch = function(preset, searchParams) {
     return true;
 };
 
-TABS.presets.adaptPhones = function() {
+presets.adaptPhones = function() {
     if (GUI.isCordova()) {
         UI_PHONES.initToolbar();
     }
 };
 
-TABS.presets.read = function(readInfo) {
+presets.read = function(readInfo) {
     TABS.presets.cliEngine.readSerial(readInfo);
 };
 
-TABS.presets.cleanup = function(callback) {
+presets.cleanup = function(callback) {
     this.resetInitialValues();
 
     if (!(CONFIGURATOR.connectionValid && CONFIGURATOR.cliEngineActive && CONFIGURATOR.cliEngineValid)) {
@@ -611,7 +611,7 @@ TABS.presets.cleanup = function(callback) {
     });
 };
 
-TABS.presets.resetInitialValues = function() {
+presets.resetInitialValues = function() {
     CONFIGURATOR.cliEngineActive = false;
     CONFIGURATOR.cliEngineValid = false;
     TABS.presets.presetsRepo = null;
@@ -619,6 +619,11 @@ TABS.presets.resetInitialValues = function() {
     this._domProgressDialog.close();
 };
 
-TABS.presets.expertModeChanged = function(expertModeEnabled) {
+presets.expertModeChanged = function(expertModeEnabled) {
     this._domShowHideCli.toggle(expertModeEnabled);
 };
+
+window.TABS.presets = presets;
+export {
+    presets,
+};
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 3185a744..4fa0e6a2 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -19,7 +19,7 @@ module.exports = function(config) {
             { pattern: './src/js/localization.js', type: 'module', watched: false },
             './src/js/gui.js',
             './src/js/CliAutoComplete.js',
-            './src/js/tabs/cli.js',
+            { pattern: './src/js/tabs/cli.js', type: 'module', watched: false },
             './src/js/phones_ui.js',
             './test/**/*.js',
         ],
@@ -40,6 +40,7 @@ module.exports = function(config) {
         singleRun: true,
         preprocessors: {
              './src/js/localization.js': ['rollup'],
+             './src/js/tabs/cli.js': ['rollup'],
         },
         rollupPreprocessor: {
             plugins: [