Use esm modules for session storage (#3191)

* use esm for session storage
* refactor release checker and loader to modules

src/js/SessionStorage.js

@@ -1,45 +1,59 @@
-'use strict';
+/**
+ * Gets one or more items from sessionStorage
+ * @param {string | string[]} key string or array of strings
+ * @returns {object}
+ */
+export function get(key) {
+  let result = {};
+  if (Array.isArray(key)) {
+    key.forEach(function (element) {
+      try {
+        result = { ...result, ...JSON.parse(sessionStorage.getItem(element)) };
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  } else {
+    const keyValue = sessionStorage.getItem(key);
+    if (keyValue) {
+      try {
+        result = JSON.parse(keyValue);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
 
-const SessionStorage = {
+  return result;
-    // key can be one string, or array of strings
+}
-    get: function(key) {
-        let result = {};
-        if (Array.isArray(key)) {
-            key.forEach(function (element) {
-                try {
-                    result = {...result, ...JSON.parse(sessionStorage.getItem(element))};
-                } catch (e) {
-                    console.error(e);
-                }
-            });
-        } else {
-            const keyValue = sessionStorage.getItem(key);
-            if (keyValue) {
-                try {
-                    result = JSON.parse(keyValue);
-                } catch (e) {
-                    console.error(e);
-                }
-            }
-        }
 
-        return result;
+/**
-    },
+ * Save dictionary of key/value pairs to sessionStorage
-    set: function(input) {
+ * @param {object} input object which keys are strings and values are serializable objects
-        Object.keys(input).forEach(function (element) {
+ */
-            const tmpObj = {};
+export function set(input) {
-            tmpObj[element] = input[element];
+  Object.keys(input).forEach(function (element) {
-            try {
+    const tmpObj = {};
-                sessionStorage.setItem(element, JSON.stringify(tmpObj));
+    tmpObj[element] = input[element];
-            } catch (e) {
+    try {
-                console.error(e);
+      sessionStorage.setItem(element, JSON.stringify(tmpObj));
-            }
+    } catch (e) {
-        });
+      console.error(e);
-    },
+    }
-    remove: function(item) {
+  });
-        sessionStorage.removeItem(item);
+}
-    },
+
-    clear: function() {
+/**
-        sessionStorage.clear();
+ * Remove item from sessionStorage
-    },
+ * @param {string} item key to remove from storage
-};
+ */
+export function remove(item) {
+  sessionStorage.removeItem(item);
+}
+
+/**
+ * Clear sessionStorage
+ */
+export function clear() {
+  sessionStorage.clear();
+}

src/js/main.js

@@ -2,6 +2,7 @@ import '../components/init.js';
 import { i18n } from './localization.js';
 import GUI from './gui.js';
 import { get as getConfig, set as setConfig } from './ConfigStorage.js';
+import ReleaseChecker from './release_checker.js';
 
 $(document).ready(function () {
 

src/js/release_checker.js

@@ -1,4 +1,6 @@
-'use strict';
+import GUI from "./gui";
+import { i18n } from "./localization";
+import { get as getStorage, set as setStorage } from "./SessionStorage";
 
 const ReleaseChecker = function (releaseName, releaseUrl) {
     const self = this;
@@ -11,7 +13,7 @@ const ReleaseChecker = function (releaseName, releaseUrl) {
 
 ReleaseChecker.prototype.loadReleaseData = function (processFunction) {
     const self = this;
-    const result = SessionStorage.get([self._releaseLastUpdateTag, self._releaseDataTag]);
+    const result = getStorage([self._releaseLastUpdateTag, self._releaseDataTag]);
     const releaseDataTimestamp = $.now();
     const cacheReleaseData = result[self._releaseDataTag];
     const cachedReleaseLastUpdate = result[self._releaseLastUpdateTag];
@@ -23,7 +25,7 @@ ReleaseChecker.prototype.loadReleaseData = function (processFunction) {
             const data = {};
             data[self._releaseDataTag] = releaseData;
             data[self._releaseLastUpdateTag] = releaseDataTimestamp;
-            SessionStorage.set(data);
+            setStorage(data);
 
             self._processReleaseData(releaseData, processFunction);
         }).fail(function (data) {
@@ -54,3 +56,5 @@ ReleaseChecker.prototype._processReleaseData = function (releaseData, processFun
         processFunction();
     }
 };
+
+export default ReleaseChecker;

src/js/release_loader.js

@@ -1,6 +1,8 @@
-'use strict';
+import GUI from "./gui";
+import { i18n } from "./localization";
+import { get as getStorage, set as setStorage } from "./SessionStorage";
 
-class ReleaseLoader {
+export default class ReleaseLoader {
 
     constructor (url) {
         this._url = url;
@@ -12,7 +14,7 @@ class ReleaseLoader {
         const dataTag = `${url}_Data`;
         const cacheLastUpdateTag = `${url}_LastUpdate`;
 
-        const result = SessionStorage.get([cacheLastUpdateTag, dataTag]);
+        const result = getStorage([cacheLastUpdateTag, dataTag]);
         const dataTimestamp = $.now();
         const cachedData = result[dataTag];
         const cachedLastUpdate = result[cacheLastUpdateTag];
@@ -33,7 +35,7 @@ class ReleaseLoader {
                 const object = {};
                 object[dataTag] = info;
                 object[cacheLastUpdateTag] = $.now();
-                SessionStorage.set(object);
+                setStorage(object);
                 onSuccess(info);
             }).fail(xhr => {
                 GUI.log(i18n.getMessage('buildServerLoadFailed', [url, `HTTP ${xhr.status}`]));

src/js/tabs/firmware_flasher.js

@@ -1,6 +1,8 @@
 import { i18n } from '../localization';
 import GUI from '../gui';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
+import { get as getStorage, set as setStorage } from '../SessionStorage';
+import ReleaseLoader from '../release_loader';
 
 const firmware_flasher = {
     targets: null,
@@ -142,7 +144,7 @@ firmware_flasher.initialize = function (callback) {
 
             TABS.firmware_flasher.targets = targets;
 
-            result = SessionStorage.get('selected_board');
+            result = getStorage('selected_board');
             if (result.selected_board) {
                 const selected = targets.find(t => t.target === result.selected_board);
                 $('select[name="board"]').val(selected ? result.selected_board : 0).trigger('change');
@@ -373,7 +375,7 @@ firmware_flasher.initialize = function (callback) {
 
             if (!GUI.connect_lock) {
                 if (target !== '0') {
-                    SessionStorage.set({'selected_board': target});
+                    setStorage({'selected_board': target});
                 }
 
                 self.selectedBoard = target;
@@ -940,10 +942,10 @@ firmware_flasher.initialize = function (callback) {
             function setAcknowledgementTimestamp() {
                 const storageObj = {};
                 storageObj[storageTag] = Date.now();
-                SessionStorage.set(storageObj);
+                setStorage(storageObj);
             }
 
-            result = SessionStorage.get(storageTag);
+            result = getStorage(storageTag);
             if (!result[storageTag] || Date.now() - result[storageTag] > DAY_MS) {
 
                 showAcknowledgementDialog(setAcknowledgementTimestamp);
@@ -1153,7 +1155,7 @@ firmware_flasher.showDialogVerifyBoard = function (selected, verified, onAbort,
     if (!dialogVerifyBoard.hasAttribute('open')) {
         dialogVerifyBoard.showModal();
         $('#dialog-verify-board-abort-confirmbtn').click(function() {
-            SessionStorage.set({'selected_board': FC.CONFIG.boardName});
+            setStorage({'selected_board': FC.CONFIG.boardName});
             dialogVerifyBoard.close();
             onAbort();
         });

src/main.html

@@ -82,7 +82,6 @@
     <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/SessionStorage.js"></script>
     <script type="text/javascript" src="./js/data_storage.js"></script>
     <script type="text/javascript" src="./js/fc.js"></script>
     <script type="text/javascript" src="./js/VirtualFC.js"></script>
@@ -106,8 +105,6 @@
     <script type="text/javascript" src="./js/RateCurve.js"></script>
     <script type="text/javascript" src="./js/Features.js"></script>
     <script type="text/javascript" src="./js/Beepers.js"></script>
-    <script type="text/javascript" src="./js/release_checker.js"></script>
-    <script type="text/javascript" src="./js/release_loader.js"></script>
     <script type="text/javascript" src="./js/ConfigInserter.js"></script>
     <script type="text/javascript" src="./js/GitHubApi.js"></script>
     <script type="module" src="./js/main.js"></script>