additional debug logging

nruffing · Dec 22, 2023 · e006920 · e006920
1 parent 2ba395d
commit e006920
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,11 @@ function onDragStart(domEl: HTMLElement, dragEvent: DragEvent, dragOptions: Drag
 
 ## Release Notes
 
+### v1.2.0
+  * Add additional debug logging to track when directive lifecycle hooks fire and DOM state after processing.
+  * Add additional debug logging to track when HTML event handlers are added or removed.
+  * Improve debug log formatting.
+
 ### v1.1.1
   * Update development dependencies.
 

diff --git a/lib/DragonDropVue.ts b/lib/DragonDropVue.ts
@@ -3,6 +3,7 @@ import { addClasses, addEventHandler, removeEventHandler } from './htmlHelpers'
 import type { DragonDropVueDragOptions, DragonDropVueOptions } from './options'
 import constants from './constants'
 import { onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop } from './eventHandlers'
+import { log } from './logger'
 
 export default {
   install: (app: App, options: DragonDropVueOptions = {}) => {
@@ -22,6 +23,7 @@ export default {
           return
         }
         setupDrag(el, binding.value)
+        log({ eventName: 'drag | beforeMount', domEl: el, dragOpts: binding.value, opts })
       },
       updated: (
         el: HTMLElement,
@@ -34,6 +36,7 @@ export default {
         } else if (el.getAttribute('draggable') !== 'true') {
           setupDrag(el, binding.value)
         }
+        log({ eventName: 'drag | updated', domEl: el, dragOpts: binding.value, opts })
       },
       beforeUnmount: (
         el: HTMLElement,
@@ -42,8 +45,9 @@ export default {
         prevVnode: VNode<any, HTMLElement> | null,
       ) => {
         // remove drag events
-        removeEventHandler(el, 'dragstart')
-        removeEventHandler(el, 'dragend')
+        removeEventHandler(el, 'dragstart', opts)
+        removeEventHandler(el, 'dragend', opts)
+        log({ eventName: 'drag | beforeUnmount', domEl: el, dragOpts: binding.value, opts })
       },
     } as Directive<HTMLElement, DragonDropVueDragOptions | false>)
 
@@ -55,8 +59,8 @@ export default {
       el.setAttribute('draggable', 'true')
 
       // wire drag events
-      addEventHandler(el, 'dragstart', ev => onDragStart(ev, dragOpts, opts))
-      addEventHandler(el, 'dragend', ev => onDragEnd(ev, dragOpts, opts))
+      addEventHandler(el, 'dragstart', ev => onDragStart(ev, dragOpts, opts), opts)
+      addEventHandler(el, 'dragend', ev => onDragEnd(ev, dragOpts, opts), opts)
     }
 
     /*
@@ -74,6 +78,7 @@ export default {
         }
 
         setupDrop(el, binding.value)
+        log({ eventName: 'drop | beforeMount', domEl: el, dragOpts: binding.value, opts })
       },
       updated: (
         el: HTMLElement,
@@ -89,6 +94,7 @@ export default {
         if (!domEl.classList.contains(constants.dropClass)) {
           setupDrop(el, binding.value)
         }
+        log({ eventName: 'drop | updated', domEl: el, dragOpts: binding.value, opts })
       },
       beforeUnmount: (
         el: HTMLElement,
@@ -97,10 +103,11 @@ export default {
         prevVnode: VNode<any, HTMLElement> | null,
       ) => {
         // remove drag events
-        removeEventHandler(el, 'dragover')
-        removeEventHandler(el, 'dragenter')
-        removeEventHandler(el, 'dragleave')
-        removeEventHandler(el, 'drop')
+        removeEventHandler(el, 'dragover', opts)
+        removeEventHandler(el, 'dragenter', opts)
+        removeEventHandler(el, 'dragleave', opts)
+        removeEventHandler(el, 'drop', opts)
+        log({ eventName: 'drop | beforeUnmount', domEl: el, dragOpts: binding.value, opts })
       },
     } as Directive<HTMLElement, DragonDropVueDragOptions | false>)
 
@@ -109,10 +116,10 @@ export default {
       addClasses(el, [constants.dropClass, opts.dropClass])
 
       // wire drag events
-      addEventHandler(el, 'dragover', ev => onDragOver(ev, dragOpts, opts))
-      addEventHandler(el, 'dragenter', ev => onDragEnter(ev, dragOpts, opts))
-      addEventHandler(el, 'dragleave', ev => onDragLeave(ev, dragOpts, opts))
-      addEventHandler(el, 'drop', ev => onDrop(ev, dragOpts, opts))
+      addEventHandler(el, 'dragover', ev => onDragOver(ev, dragOpts, opts), opts)
+      addEventHandler(el, 'dragenter', ev => onDragEnter(ev, dragOpts, opts), opts)
+      addEventHandler(el, 'dragleave', ev => onDragLeave(ev, dragOpts, opts), opts)
+      addEventHandler(el, 'drop', ev => onDrop(ev, dragOpts, opts), opts)
     }
   },
 }
diff --git a/lib/htmlHelpers.ts b/lib/htmlHelpers.ts
@@ -1,4 +1,6 @@
 import constants from './constants'
+import { log } from './logger'
+import type { DragonDropVueOptions } from './options'
 
 export function addClasses(domEl: HTMLElement, classes: (string | undefined)[]) {
   for (const className of classes) {
@@ -12,16 +14,18 @@ export function removeClasses(domEl: HTMLElement, classes: (string | undefined)[
   }
 }
 
-export function addEventHandler(domEl: HTMLElement, eventName: string, listener: (ev: DragEvent) => any) {
+export function addEventHandler(domEl: HTMLElement, eventName: string, listener: (ev: DragEvent) => any, opts: DragonDropVueOptions) {
   ;(domEl as any)[`${constants.eventPropNamePrefix}${eventName}`] = listener
   domEl.addEventListener(eventName, listener as (ev: Event) => any)
+  log({ eventName: `addEventHandler | ${eventName}`, domEl, opts })
 }
 
-export function removeEventHandler(domEl: HTMLElement, eventName: string) {
+export function removeEventHandler(domEl: HTMLElement, eventName: string, opts: DragonDropVueOptions) {
   const listener = (domEl as any)[`${constants.eventPropNamePrefix}${eventName}`] as ((ev: Event) => any) | undefined
   if (listener) {
     ;(domEl as any)[`${constants.eventPropNamePrefix}${eventName}`] = undefined
     domEl.removeEventListener(eventName, listener)
+    log({ eventName: `removeEventHandler | ${eventName}`, domEl, opts })
   }
 }
 

diff --git a/lib/logger.ts b/lib/logger.ts
@@ -2,14 +2,17 @@ import type { DragonDropVueDragOptions, DragonDropVueOptions } from './options'
 
 export interface LogEvent {
   eventName: string
-  event: DragEvent
+  event?: DragEvent
   domEl: HTMLElement
-  dragOpts: DragonDropVueDragOptions
+  dragOpts?: DragonDropVueDragOptions | false
   opts: DragonDropVueOptions
+  classes?: string[]
 }
 
 export function log(data: LogEvent) {
   if (data.opts.debugLog) {
-    console.log(`DragonDropVue [${data.eventName}]\n`, data)
+    console.groupCollapsed(`🐲%c dragon-drop-vue | ${data.eventName}`, 'color: green; font-weight: bold;')
+    console.log(data)
+    console.groupEnd()
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dragon-drop-vue",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Customizable native Vue3 drag-n-drop library with no dependencies. Includes Vue plugin that registers directives to configure draggable elements and drop zones.",
   "license": "MIT",
   "author": {