fix: replace debug with a util debug function

package.json

@@ -32,7 +32,6 @@
     "ace-builds": "^1.4.13",
     "ajv": "^8.8.2",
     "classnames": "^2.3.1",
-    "debug": "^4.3.2",
     "diff-sequences": "^27.0.6",
     "immutable-json-patch": "^1.1.2",
     "jmespath": "^0.15.0",

src/lib/components/JSONEditor.svelte

@@ -2,7 +2,7 @@
 
 <script>
   import { faCode } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../utils/debug'
   import Modal from 'svelte-simple-modal'
   import { MODE } from '../constants.js'
   import { uniqueId } from '../utils/uniqueId.js'

src/lib/components/controls/createAutoScrollHandler.js

@@ -1,4 +1,4 @@
-import createDebug from 'debug'
+import { createDebug } from '../../utils/debug'
 import {
   AUTO_SCROLL_INTERVAL,
   AUTO_SCROLL_SPEED_FAST,

src/lib/components/controls/createFocusTracker.js

@@ -1,4 +1,4 @@
-import createDebug from 'debug'
+import { createDebug } from '../../utils/debug'
 
 const debug = createDebug('jsoneditor:FocusTracker')
 

src/lib/components/controls/navigationBar/NavigationBar.svelte

@@ -6,7 +6,7 @@
   import { isObject, isObjectOrArray } from '../../../utils/typeUtils'
   import { STATE_KEYS } from '../../../constants'
   import { createSelection, SELECTION_TYPE } from '../../../logic/selection'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import NavigationBarItem from '../../../components/controls/navigationBar/NavigationBarItem.svelte'
   import { caseInsensitiveNaturalCompare } from '../../../logic/sort'
 

src/lib/components/modals/TransformModal.svelte

@@ -14,7 +14,7 @@
   import TransformWizard from './TransformWizard.svelte'
   import TransformModalHeader from './TransformModalHeader.svelte'
   import AbsolutePopup from './popup/AbsolutePopup.svelte'
-  import createDebug from 'debug'
+  import { createDebug } from '../../utils/debug'
 
   const debug = createDebug('jsoneditor:TransformModal')
 

src/lib/components/modals/TransformWizard.svelte

@@ -4,9 +4,9 @@
   import Select from 'svelte-select'
   import { getNestedPaths } from '../../utils/arrayUtils.js'
   import { stringifyPath } from '../../utils/pathUtils.js'
+  import { createDebug } from '../../utils/debug.js'
   import { isEmpty, isEqual } from 'lodash-es'
   import { setIn } from 'immutable-json-patch'
-  import createDebug from 'debug'
 
   const debug = createDebug('jsoneditor:TransformWizard')
 

src/lib/components/modals/popup/AbsolutePopup.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import { setContext, tick } from 'svelte'
   import { isChildOf } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'

src/lib/components/modals/repair/JSONRepairComponent.svelte

@@ -8,7 +8,7 @@
     faTimes,
     faWrench
   } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import Message from '../../controls/Message.svelte'
   import { onDestroy, onMount } from 'svelte'
   import { activeElementIsChildOf, getWindow } from '../../../utils/domUtils.js'

src/lib/components/modes/codemode/CodeMode.svelte

@@ -2,7 +2,7 @@
 
 <script>
   import { faExclamationTriangle, faWrench } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import { immutableJSONPatch, revertJSONPatch } from 'immutable-json-patch'
   import jsonrepair from 'jsonrepair'
   import { debounce, uniqueId } from 'lodash-es'

src/lib/components/modes/treemode/TreeMode.svelte

@@ -3,7 +3,7 @@
 <script>
   import { createAutoScrollHandler } from '$lib/components/controls/createAutoScrollHandler'
   import { faCheck, faCode, faWrench } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug.js'
   import {
     compileJSONPointer,
     existsIn,

src/lib/components/modes/treemode/value/EditableDiv.svelte

@@ -4,7 +4,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { getPlainText, setCursorToEnd, setPlainText } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../../utils/debug'
   import { noop } from 'lodash-es'
 
   const debug = createDebug('jsoneditor:ValueEditor')

src/lib/config.js

@@ -6,7 +6,6 @@ export const viteOptimizeDeps = [
   'ace-builds/src-noconflict/mode-json',
   'ajv',
   'classnames',
-  'debug',
   'diff-sequences',
   'jmespath', // TODO: double check whether jmespath dep is necessary here
   'json-source-map',

src/lib/utils/debug.js

@@ -0,0 +1,77 @@
+/**
+ * Create a lightweight debug function to log output into the browser console.
+ *
+ * Inspired by https://github.com/visionmedia/debug (some code is copied below)
+ *
+ * Usage:
+ *
+ *     import { createDebug } from './debug.js'
+ *
+ *     const debug = createDebug('my:namespace')
+ *
+ *     debug('testing:', 2 + 2)
+ *
+ * By default, logging is only enabled when a property DEBUG is set in the
+ * in the localStorage of your browser:
+ *
+ *     localStorage['debug'] = '*'
+ *
+ * The actual value of 'debug' is not used. You can choose other conditions to
+ * enable/disable debugging if you want, for example some flag determining
+ * whether in development or production.
+ *
+ *
+ * @param {string} namespace
+ * @param {boolean} [enabled]
+ * @returns {function (...args: any) : void}
+ */
+export function createDebug(
+  namespace,
+  enabled = typeof window !== 'undefined' && window.localStorage['debug']
+) {
+  if (enabled) {
+    const color = selectColor(namespace)
+
+    return function debug(...args) {
+      console.log(`%c${namespace}`, `color:${color}`, ...args)
+    }
+  } else {
+    return noop
+  }
+}
+
+function noop() {}
+
+/**
+ * Selects a color for a debug namespace
+ *
+ * Code is copied from the following source: https://github.com/visionmedia/debug
+ *
+ * @param {string} namespace The namespace string for the debug instance to be colored
+ * @return {string} An ANSI color code for the given namespace
+ */
+function selectColor(namespace) {
+  let hash = 0
+
+  for (let i = 0; i < namespace.length; i++) {
+    hash = (hash << 5) - hash + namespace.charCodeAt(i)
+    hash |= 0 // Convert to 32bit integer
+  }
+
+  return colors[Math.abs(hash) % colors.length]
+}
+
+const colors = [
+  '#0000CC',
+  '#0099FF',
+  '#009400',
+  '#8dd200',
+  '#CCCC00',
+  '#CC9933',
+  '#ae04e7',
+  '#ff35d7',
+  '#FF3333',
+  '#FF6600',
+  '#FF9933',
+  '#FFCC33'
+]