Merge pull request #2430 from chmelevskij/more-modules

Author: mikeller

gulpfile.js

@@ -320,7 +320,8 @@ function dist_rollup() {
                 'components/init': 'src/components/init.js',
                 'js/main_cordova': 'src/js/main_cordova.js',
                 'js/utils/common': 'src/js/utils/common.js',
-                'js/tabs/logging': 'src/js/tabs/logging.js'
+                'js/tabs/logging': 'src/js/tabs/logging.js',
+                'js/main': 'src/js/main.js',
             },
             plugins: [
                 alias({

src/components/init.js

@@ -3,6 +3,7 @@
 // in the future it should be pure. This means it should
 // explicitly export things used by other parts of the app.
 import '../js/localization.js';
+import '../js/injected_methods';
 import i18next from 'i18next';
 import Vue from "vue";
 import vueI18n from "./vueI18n.js";

src/js/main.js

@@ -1,7 +1,4 @@
-'use strict';
-
-window.googleAnalytics = analytics;
-window.analytics = null;
+import { i18n } from './localization';
 
 $(document).ready(function () {
 
@@ -298,7 +295,7 @@ function startProcess() {
 
                 switch (tab) {
                     case 'landing':
-                        TABS.landing.initialize(content_ready);
+                        import('./tabs/landing').then(({ landing }) => landing.initialize(content_ready));
                         break;
                     case 'changelog':
                         TABS.staticTab.initialize('changelog', content_ready);
@@ -313,7 +310,7 @@ function startProcess() {
                         TABS.firmware_flasher.initialize(content_ready);
                         break;
                     case 'help':
-                        TABS.help.initialize(content_ready);
+                        import('./tabs/help').then(({ help }) => help.initialize(content_ready));
                         break;
                     case 'auxiliary':
                         TABS.auxiliary.initialize(content_ready);
@@ -545,6 +542,7 @@ function setDarkTheme(enabled) {
     });
 }
 
+
 function checkForConfiguratorUpdates() {
     const releaseChecker = new ReleaseChecker('configurator', 'https://api.github.com/repos/betaflight/betaflight-configurator/releases');
 
@@ -712,3 +710,17 @@ function showDialogDynFiltersChange() {
         });
     }
 }
+
+// TODO: all of these are used as globals in other parts.
+// once moved to modules extract to own module.
+window.showDialogDynFiltersChange = showDialogDynFiltersChange;
+window.googleAnalytics = analytics;
+window.analytics = null;
+window.showErrorDialog = showErrorDialog;
+window.generateFilename = generateFilename;
+window.updateTabList = updateTabList;
+window.isExpertModeEnabled = isExpertModeEnabled;
+window.checkForConfiguratorUpdates = checkForConfiguratorUpdates;
+window.setDarkTheme = setDarkTheme;
+window.appReady = appReady;
+window.checkSetupAnalytics = checkSetupAnalytics;

src/js/tabs/help.js

@@ -1,7 +1,5 @@
-'use strict';
-
-TABS.help = {};
-TABS.help.initialize = function (callback) {
+const help = {};
+help.initialize = function (callback) {
 
     if (GUI.active_tab != 'help') {
         GUI.active_tab = 'help';
@@ -14,6 +12,11 @@ TABS.help.initialize = function (callback) {
     });
 };
 
-TABS.help.cleanup = function (callback) {
+help.cleanup = function (callback) {
     if (callback) callback();
 };
+
+// TODO: remove when modules are in place
+window.TABS.help = help;
+
+export { help };

src/js/tabs/landing.js

@@ -1,7 +1,5 @@
-'use strict';
-
-TABS.landing = {};
-TABS.landing.initialize = function (callback) {
+const landing = {};
+landing.initialize = function (callback) {
 
   if (GUI.active_tab != 'landing') {
     GUI.active_tab = 'landing';
@@ -49,6 +47,12 @@ TABS.landing.initialize = function (callback) {
 
 };
 
-TABS.landing.cleanup = function (callback) {
+landing.cleanup = function (callback) {
     if (callback) callback();
 };
+
+// TODO: remove after all is using modules
+window.TABS.landing = landing;
+export {
+    landing
+};

src/main.html

@@ -75,13 +75,11 @@
     <!-- TODO: remove when using modules fully -->
     <script type="module" src="./js/utils/css.js"></script>
     <script type="text/javascript" src="./js/utils/window_watchers.js"></script>
-    <script type="text/javascript" src="./js/utils/CommonUtils.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatusFactory.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatus.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/TrampDeviceStatus.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/SmartAudioDeviceStatus.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/Rtc6705DeviceStatus.js"></script>
-    <script type="text/javascript" src="./js/injected_methods.js"></script>
     <script type="text/javascript" src="./js/ConfigStorage.js"></script>
     <script type="text/javascript" src="./js/data_storage.js"></script>
     <script type="text/javascript" src="./js/fc.js"></script>
@@ -110,13 +108,11 @@
     <script type="text/javascript" src="./js/jenkins_loader.js"></script>
     <script type="text/javascript" src="./js/Analytics.js"></script>
     <script type="text/javascript" src="./js/GitHubApi.js"></script>
-    <script type="text/javascript" src="./js/main.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/static_tab.js"></script>
-    <script type="text/javascript" src="./js/tabs/landing.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/help.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>