Use 3rd party modules as esm

.eslintrc.js

@@ -24,8 +24,8 @@ module.exports = {
         'no-duplicate-imports': 'error',
     },
     globals: {
+        globalThis: true,
         d3: true,
-        THREE: true,
         cordova: true,
         cordovaUI: true,
         ol: true,

gulpfile.js

@@ -392,6 +392,7 @@ function dist_rollup() {
     const alias = require('@rollup/plugin-alias');
     const vue = require('rollup-plugin-vue');
     const rollupReplace = require('@rollup/plugin-replace');
+    const inject = require('@rollup/plugin-inject');
 
     return rollup
         .rollup({
@@ -402,10 +403,14 @@ function dist_rollup() {
                 // it with `import/export` file doesn't have to be here.
                 // 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/utils/common': 'src/js/utils/common.js',
                 'js/main': 'src/js/main.js',
             },
             plugins: [
+                inject({
+                    $: 'jquery',
+                    jQuery: 'jquery',
+                }),
                 alias({
                     entries: {
                         vue: require.resolve('vue/dist/vue.esm.js'),

package.json

@@ -53,9 +53,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@panter/vue-i18next": "^0.15.2",
-    "bluebird": "^3.7.2",
+    "@rollup/plugin-inject": "^5.0.3",
     "bonjour": "^3.5.0",
     "crypto-es": "^1.2.7",
+    "d3": "^7.8.1",
     "djv": "^2.1.4",
     "dompurify": "^2.4.0",
     "i18next": "^19.0.0",
@@ -65,14 +66,12 @@
     "jquery": "^3.6.1",
     "jquery-textcomplete": "^1.8.5",
     "jquery-touchswipe": "^1.6.19",
-    "jquery-ui-npm": "^1.12.0",
+    "jquery-ui": "^1.12.0",
     "jsdom": "^21.0.0",
-    "lru_map": "^0.3.3",
     "marked": "^4.1.1",
     "multicast-dns": "^7.2.5",
     "multiple-select": "^1.5.2",
     "nw-vue-devtools-prebuilt": "^0.0.10",
-    "object-hash": "^3.0.0",
     "select2": "^4.0.13",
     "semver-min": "^0.7.2",
     "short-unique-id": "^4.4.4",

src/js/jQueryPlugins.js

@@ -0,0 +1,8 @@
+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';
+import '../../libraries/jquery.ba-throttle-debounce.min.js';

src/js/main.js

@@ -1,6 +1,11 @@
+import $ from 'jquery';
 import 'jbox';
+// TODO: this is needed for some of the tabs, might make more sense to import things there.
+import './jQueryPlugins';
+import * as THREE from 'three';
 import '../components/init.js';
 import { gui_log } from './gui_log.js';
+import * as d3 from 'd3';
 // same, msp seems to be everywhere used from global scope
 import './msp/MSPHelper.js';
 import { i18n } from './localization.js';

src/js/model.js

@@ -1,4 +1,5 @@
 import FC from "./fc";
+import * as THREE from 'three';
 
 // generate mixer
 export const mixerList = [

src/js/serial_backend.js

@@ -22,6 +22,7 @@ import { updateTabList } from "./utils/updateTabList";
 import { get as getConfig, set as setConfig } from "./ConfigStorage";
 import { tracking } from "./Analytics";
 import semver from 'semver';
+import CryptoES from 'crypto-es';
 
 let mspHelper;
 let connectionTimestamp;
@@ -463,7 +464,7 @@ function processUid() {
     MSP.send_message(MSPCodes.MSP_UID, false, false, function () {
         const deviceIdentifier = FC.CONFIG.deviceIdentifier;
 
-        tracking.setFlightControllerData(tracking.DATA.MCU_ID, objectHash.sha1(deviceIdentifier));
+        tracking.setFlightControllerData(tracking.DATA.MCU_ID, CryptoES.SHA1(deviceIdentifier));
         tracking.sendEvent(tracking.EVENT_CATEGORIES.FLIGHT_CONTROLLER, 'Connected');
         connectionTimestamp = Date.now();
         gui_log(i18n.getMessage('uniqueDeviceIdReceived', [deviceIdentifier]));

src/js/tabs/cli.js

@@ -111,24 +111,27 @@ cli.initialize = function (callback) {
         self.history.add(outString.trim());
 
         const outputArray = outString.split("\n");
-        return Promise.reduce(outputArray, function(delay, line, index) {
-            return new Promise(function (resolve) {
-                GUI.timeout_add('CLI_send_slowly', function () {
-                    let processingDelay = self.lineDelayMs;
-                    line = line.trim();
-                    if (line.toLowerCase().startsWith('profile')) {
-                        processingDelay = self.profileSwitchDelayMs;
-                    }
-                    const isLastCommand = outputArray.length === index + 1;
-                    if (isLastCommand && self.cliBuffer) {
-                        line = getCliCommand(line, self.cliBuffer);
-                    }
-                    self.sendLine(line, function () {
-                        resolve(processingDelay);
-                    });
-                }, delay);
-            });
-        }, 0);
+        return outputArray.reduce((p, line, index) =>
+            p.then((delay) =>
+                new Promise((resolve) => {
+                    GUI.timeout_add('CLI_send_slowly', function () {
+                        let processingDelay = self.lineDelayMs;
+                        line = line.trim();
+                        if (line.toLowerCase().startsWith('profile')) {
+                            processingDelay = self.profileSwitchDelayMs;
+                        }
+                        const isLastCommand = outputArray.length === index + 1;
+                        if (isLastCommand && self.cliBuffer) {
+                            line = getCliCommand(line, self.cliBuffer);
+                        }
+                        self.sendLine(line, function () {
+                            resolve(processingDelay);
+                        });
+                    }, delay);
+                }),
+            ),
+            Promise.resolve(0),
+        );
     }
 
     $('#content').load("./tabs/cli.html", function () {

src/js/tabs/osd.js

@@ -252,15 +252,28 @@ FONT.msp = {
     },
 };
 
-FONT.upload = function($progress) {
-    return Promise.mapSeries(FONT.data.characters, function(data, i) {
-        $progress.val((i / FONT.data.characters.length) * 100);
-        return MSP.promise(MSPCodes.MSP_OSD_CHAR_WRITE, FONT.msp.encode(i));
-    })
-        .then(function() {
-
-            console.log(`Uploaded all ${FONT.data.characters.length} characters`);
-            gui_log(i18n.getMessage('osdSetupUploadingFontEnd', {length: FONT.data.characters.length}));
+FONT.upload = async function ($progress) {
+    return FONT.data.characters
+        .reduce(
+            (p, x, i) =>
+                p.then(() => {
+                    $progress.val((i / FONT.data.characters.length) * 100);
+                    return MSP.promise(
+                        MSPCodes.MSP_OSD_CHAR_WRITE,
+                        FONT.msp.encode(i),
+                    );
+                }),
+            Promise.resolve(),
+        )
+        .then(function () {
+            console.log(
+                `Uploaded all ${FONT.data.characters.length} characters`,
+            );
+            gui_log(
+                i18n.getMessage("osdSetupUploadingFontEnd", {
+                    length: FONT.data.characters.length,
+                }),
+            );
 
             OSD.GUI.fontManager.close();
 

src/js/tabs/pid_tuning.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import * as THREE from "three";
 import { colorTables, getColorForPercentage } from '../utils/css.js';
 import GUI, { TABS } from '../gui';
 import { tracking } from "../Analytics";

src/js/tabs/receiver.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import * as THREE from "three";
 import GUI, { TABS } from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 import { tracking } from "../Analytics";

src/js/utils/common.js

@@ -1,6 +1,7 @@
 import semver from "semver";
 import { mixerList } from "../model";
 import CONFIGURATOR from "../data_storage";
+import $ from "jquery";
 
 export function millitime() {
     return new Date().getTime();

src/main.html

@@ -53,26 +53,8 @@
 
     <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
 
-    <!-- TODO: probably won't need this here once everything is imported -->
-    <script type="module" src="./js/utils/common.js"></script>
     <!-- CORDOVA_INCLUDE js/cordova_chromeapi.js -->
     <!-- CORDOVA_INCLUDE js/cordova_startup.js -->
-    <script type="text/javascript" src="./node_modules/lru_map/lru.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/d3.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
-    <script type="text/javascript" src="./node_modules/three/build/three.min.js"></script>
-    <script type="text/javascript" src="./node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
-    <script type="text/javascript" src="./node_modules/three/examples/js/renderers/Projector.js"></script>
-    <script type="text/javascript" src="./js/libraries/jquery.flightindicators.js"></script>
-    <script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
-    <script type="text/javascript" src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
-    <script type="text/javascript" src="./node_modules/select2/dist/js/select2.min.js"></script>
-    <script type="text/javascript" src="./node_modules/multiple-select/dist/multiple-select.min.js"></script>
-    <script type="text/javascript" src="./node_modules/object-hash/dist/object_hash.js"></script>
     <script type="module" src="./js/main.js"></script>
 
     <title></title>

src/tabs/presets/CliEngine.js

@@ -88,31 +88,34 @@ export default class CliEngine
         this._reportSendCommandsProgress(0);
         const totalCommandsCount = strings.length;
 
-        return Promise.reduce(strings, (delay, line, index) => {
-            return new Promise((resolve) => {
-                GUI.timeout_add('CLI_send_slowly', () => {
-                    let processingDelay = this.lineDelayMs;
-                    line = line.trim();
-
-                    if (line.toLowerCase().startsWith('profile')) {
-                        processingDelay = this.profileSwitchDelayMs;
-                    }
-
-                    const isLastCommand = totalCommandsCount === index + 1;
-
-                    if (isLastCommand && this.cliBuffer) {
-                        line = this.getCliCommand(line, this.cliBuffer);
-                    }
-
-                    this.sendLine(line, ()=>{ /* empty on-send callback */ }, () => {
-                        resolve(processingDelay);
-                        this._reportSendCommandsProgress(100.0 * index / totalCommandsCount);
-                    });
-                }, delay);
+        return strings.reduce(strings, (p, line, index) =>
+                p.then((delay) =>
+                    new Promise((resolve) => {
+                        GUI.timeout_add('CLI_send_slowly', () => {
+                            let processingDelay = this.lineDelayMs;
+                            line = line.trim();
+
+                            if (line.toLowerCase().startsWith('profile')) {
+                                processingDelay = this.profileSwitchDelayMs;
+                            }
+
+                            const isLastCommand = totalCommandsCount === index + 1;
+
+                            if (isLastCommand && this.cliBuffer) {
+                                line = this.getCliCommand(line, this.cliBuffer);
+                            }
+
+                            this.sendLine(line, () => { /* empty on-send callback */ }, () => {
+                                resolve(processingDelay);
+                                this._reportSendCommandsProgress(100.0 * index / totalCommandsCount);
+                            });
+                        }, delay);
+                    }),
+                ),
+                Promise.resolve(0),
+            ).then(() => {
+                this._reportSendCommandsProgress(100);
             });
-        }, 0).then(() => {
-            this._reportSendCommandsProgress(100);
-        });
     }
 
     removePromptHash(promptText) {

src/tabs/receiver_msp.html

@@ -1,12 +1,6 @@
 <html>
 <head>
 <link type="text/css" rel="stylesheet" href="/css/opensans_webfontkit/fonts.css" media="all" />
-<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="/node_modules/jquery-ui-npm/jquery-ui.min.js"></script>
-<script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
-
-<script type="text/javascript" src="/js/utils/window_watchers.js"></script>
-<script type="text/javascript" src="/js/tabs/receiver_msp.js"></script>
 
 <link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
 <link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">

test/setup.js

@@ -1,4 +1,3 @@
-import "bluebird";
 import { JSDOM } from "jsdom";
 import $ from "jquery";
 import { vi } from "vitest";

test/tabs/cli.test.js

@@ -1,4 +1,3 @@
-import { Promise } from "bluebird";
 import {
     describe,
     it,
@@ -88,7 +87,7 @@ describe("cli", () => {
             cli.cliBuffer = "se";
             cli.read({
                 data: toArrayBuffer(
-                    "\r\x1B[Kserialpassthrough\tservo\r\n# ser"
+                    "\r\x1B[Kserialpassthrough\tservo\r\n# ser",
                 ),
             });
             // Ambigous auto-complete from firmware is preceded with an \r carriage return
@@ -153,9 +152,6 @@ describe("cli", () => {
                     send: () => {},
                 };
             });
-            vi.spyOn(Promise, "reduce").mockImplementation((items, cb) => {
-                items.forEach((line, idx) => cb(0, line, idx));
-            });
 
             vi.spyOn(Promise, "Promise").mockResolvedValue(0);
             vi.spyOn(GUI, "timeout_add").mockImplementation((name, cb) => {
@@ -222,7 +218,7 @@ describe("cli", () => {
 
                 expect(cli.send).toHaveBeenCalledOnce();
                 expect(cli.send).toHaveBeenCalledWith(
-                    `${backspaceCode.repeat(3)}\t`
+                    `${backspaceCode.repeat(3)}\t`,
                 );
                 done();
             });
@@ -266,7 +262,7 @@ describe("cli", () => {
 
                 expect(cli.send).toHaveBeenCalledOnce();
                 expect(cli.send).toHaveBeenCalledWith(
-                    `${backspaceCode.repeat(3)}\n`
+                    `${backspaceCode.repeat(3)}\n`,
                 );
                 done();
             });