Feat: Begin implementing logging

Author: jlukic

packages/query/src/behavior.js

@@ -529,6 +529,48 @@ export class Behavior {
     return found ?? undefined;
   }
 
+  // Helper method for log level checking
+  canLog(requiredLevel) {
+    const levels = ['silent', 'error', 'warn', 'info', 'debug'];
+    const currentLevel = levels.indexOf(this.settings.logLevel || 'silent');
+    const required = levels.indexOf(requiredLevel);
+    return currentLevel >= required;
+  }
+
+  outputLog(level, consoleMethod, color, message, data) {
+    if (!this.canLog(level)) { return; }
+
+    const args = [`%c[${this.namespace}]%c ${message}`, `color: ${color}; font-weight: bold;`, 'color: inherit;'];
+    if (data !== undefined) {
+      args.push(data);
+    }
+
+    console[consoleMethod](...args);
+  }
+
+  log(message, data) {
+    this.outputLog('info', 'log', '#0066cc', message, data);
+  }
+
+  debug(message, data) {
+    this.outputLog('debug', 'debug', '#666', message, data);
+  }
+
+  warn(message, data) {
+    this.outputLog('warn', 'warn', '#ff9800', message, data);
+  }
+
+  error(message, data) {
+    this.outputLog('error', 'error', '#f44336', message, data);
+
+    // Optional: dispatch error event for handling
+    this.dispatchEvent('behavior:error', {
+      message,
+      namespace: this.namespace,
+      data,
+    });
+  }
+
   // Get or set individual setting
   setting(name, value) {
     if (value === undefined) {
@@ -566,6 +608,12 @@ export class Behavior {
         dispatchEvent: self.dispatchEvent.bind(this),
         dispatchGroupEvent: self.dispatchGroupEvent.bind(this),
 
+        // Add logging functions
+        log: self.log.bind(self),
+        debug: self.debug.bind(self),
+        warn: self.warn.bind(self),
+        error: self.error.bind(self),
+
         // element index information
         index: self.elementIndex,
         total: self.totalElements,

src/behaviors/transition/transition.js

@@ -59,6 +59,9 @@ const createBehavior = (
     isFirst,
     isLast,
     total,
+    log,
+    warn,
+    error,
   },
 ) => ({
   initialize() {
@@ -74,16 +77,20 @@ const createBehavior = (
       ...runtimeSettings,
     };
 
+    log('Starting animation', { animation: animationSettings.animation });
+
     // handle case of already animating
     // handle animation queuing
     if (self.isAnimating()) {
       if (settings.queue) {
+        log('Animation already running, queuing');
         const eventName = (el.animatingGroup)
           ? 'transition:groupEnd'
           : 'transition:end';
         await $(el).onNext(eventName);
       }
       else {
+        warn('Animation already running, stopping previous');
         self.stop();
       }
     }
@@ -250,7 +257,7 @@ const createBehavior = (
   // takes a set of css animations and then performs them using web animation API
   async performAnimation(cssAnimations, direction, { duration, callback = noop, delay } = {}) {
     if (!cssAnimations || !cssAnimations.exists) {
-      console.warn('No animation data available for', cssAnimations.name);
+      warn('No animation data available for', cssAnimations.name);
       return;
     }