use loadsh.defaultsDeep to deep merge options

package.json

@@ -20,6 +20,8 @@
         "chroma-js": "^2.1.2",
         "colorthief": "^2.3.2",
         "jquery": "^3.6.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.defaultsdeep": "^4.6.1",
         "markdown-it": "^12.2.0",
         "markdown-it-attrs": "^4.1.0",
         "moment": "^2.29.1",

src/js/ConfigMenu.js

@@ -1,6 +1,6 @@
 import $ from "jquery";
 
-import { renderMD } from "./Util";
+import { renderMD, defaults } from "./Util";
 import { icons } from "./Icons";
 
 export default class ConfigMenu {
@@ -125,7 +125,7 @@ export default class ConfigMenu {
             parent: null
         };
         // Set Defaults
-        options = { ...defaultOptions, ...options };
+        options = defaults(options, defaultOptions);
         if (typeof options.area == "string") options.area = { name: options.area, order: 0 };
         options.description = options.description
             .split("\n")

src/js/Icons.js

@@ -1,3 +1,4 @@
+import { defaults } from "./Util";
 import { parseSync as parseSVG, stringify as stringifySVG } from "svgson";
 
 export default class Icons {
@@ -73,7 +74,7 @@ export default class Icons {
             fill: "currentColor",
             base64: false
         };
-        options = { ...defaultOptions, ...options };
+        options = defaults(options, defaultOptions);
 
         const svg = parseSVG(this.getRawSVG(name, options.style));
 

src/js/Util.js

@@ -1,5 +1,7 @@
 import MarkdownIt from "markdown-it";
 import MarkdownItAttrs from "markdown-it-attrs";
+import defaultsDeep from "lodash.defaultsdeep";
+import { default as _debounce } from "lodash.debounce";
 
 /**
  * @callback waitForElCb
@@ -69,22 +71,25 @@ export function getRandomInt(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
+/**
+ * @template T
+ * @param {T[]} arr
+ * @returns {T}
+ */
 export function randomFromArray(arr) {
     return arr[Math.floor(Math.random() * arr.length)];
 }
 
-export function debounce(func, wait, immediate) {
-    var timeout;
-    return function () {
-        var context = this,
-            args = arguments;
-        var later = function () {
-            timeout = null;
-            if (!immediate) func.apply(context, args);
-        };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-    };
+/** @type {_debounce} */
+export function debounce(fn, wait, opts) {
+    return _debounce(fn, wait, opts);
+}
+
+/**
+ * @param {Object} options
+ * @param  {...Object} defaults
+ * @returns {Object}
+ */
+export function defaults(options, ...defaults) {
+    return defaultsDeep(options, ...defaults);
 }