✨ Add utility functions for JSON handling and performance optimization

code/websites/pokedex.online/src/utilities/json-utils.js

@@ -0,0 +1,134 @@
+/**
+ * JSON Path Extraction Utility
+ * Extracts property paths from JSON objects for filtering
+ */
+
+/**
+ * Extract all JSON paths from an object recursively
+ * @param {Object} obj - Object to extract paths from
+ * @param {string} prefix - Current path prefix
+ * @param {Set} paths - Accumulated paths
+ * @param {number} maxDepth - Maximum recursion depth
+ * @param {number} currentDepth - Current recursion depth
+ */
+function extractPathsRecursive(obj, prefix = '', paths = new Set(), maxDepth = 5, currentDepth = 0) {
+  if (currentDepth >= maxDepth || obj === null || typeof obj !== 'object') {
+    return;
+  }
+
+  Object.keys(obj).forEach(key => {
+    const path = prefix ? `${prefix}.${key}` : key;
+    paths.add(path);
+
+    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+      extractPathsRecursive(obj[key], path, paths, maxDepth, currentDepth + 1);
+    }
+  });
+}
+
+/**
+ * Extract JSON paths from an array of objects
+ * @param {Array} data - Array of objects
+ * @param {number} sampleSize - Number of items to sample (default: 100)
+ * @returns {Array<Object>} Array of {path, breadcrumb} objects
+ */
+export function extractJsonPaths(data, sampleSize = 100) {
+  const paths = new Set();
+  const sample = data.slice(0, Math.min(sampleSize, data.length));
+
+  sample.forEach(item => {
+    extractPathsRecursive(item, '', paths);
+  });
+
+  return Array.from(paths)
+    .sort()
+    .map(path => ({
+      path,
+      breadcrumb: path.replace(/\./g, ' › ')
+    }));
+}
+
+/**
+ * Continue extracting paths from remaining items (lazy loading)
+ * @param {Array} data - Full data array
+ * @param {number} startIndex - Where to start processing
+ * @param {Set} existingPaths - Existing paths to add to
+ * @param {Function} callback - Callback when new paths found
+ * @param {number} chunkSize - Items to process per chunk
+ */
+export function extractJsonPathsLazy(data, startIndex, existingPaths, callback, chunkSize = 100) {
+  if (startIndex >= data.length) {
+    return;
+  }
+
+  const processChunk = (index) => {
+    const end = Math.min(index + chunkSize, data.length);
+    const chunk = data.slice(index, end);
+    const newPaths = new Set(existingPaths);
+
+    chunk.forEach(item => {
+      extractPathsRecursive(item, '', newPaths);
+    });
+
+    const addedPaths = Array.from(newPaths).filter(p => !existingPaths.has(p));
+    
+    if (addedPaths.length > 0) {
+      addedPaths.forEach(p => existingPaths.add(p));
+      callback(addedPaths.map(path => ({
+        path,
+        breadcrumb: path.replace(/\./g, ' › ')
+      })));
+    }
+
+    if (end < data.length) {
+      requestIdleCallback(() => processChunk(end));
+    }
+  };
+
+  if (typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(() => processChunk(startIndex));
+  } else {
+    setTimeout(() => processChunk(startIndex), 0);
+  }
+}
+
+/**
+ * Get value from object using dot notation path
+ * @param {Object} obj - Object to get value from
+ * @param {string} path - Dot notation path (e.g., 'data.pokemonSettings.pokemonId')
+ * @returns {any} Value at path or undefined
+ */
+export function getValueByPath(obj, path) {
+  return path.split('.').reduce((current, key) => current?.[key], obj);
+}
+
+/**
+ * Truncate text in the middle
+ * @param {string} text - Text to truncate
+ * @param {number} matchIndex - Index of match for context
+ * @param {number} maxLength - Maximum length
+ * @returns {string} Truncated text
+ */
+export function truncateMiddle(text, matchIndex = 0, maxLength = 100) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  const halfLength = Math.floor(maxLength / 2);
+  const start = Math.max(0, matchIndex - halfLength);
+  const end = Math.min(text.length, matchIndex + halfLength);
+
+  let result = '';
+  
+  if (start > 0) {
+    result += '...';
+  }
+  
+  result += text.substring(start, end);
+  
+  if (end < text.length) {
+    result += '...';
+  }
+
+  return result;
+}

code/websites/pokedex.online/src/utilities/performance-utils.js

@@ -0,0 +1,91 @@
+/**
+ * Performance Monitoring Utility
+ * Wraps operations with console.time/timeEnd for development and production feature flag
+ */
+
+/**
+ * Check if performance monitoring is enabled
+ * @returns {boolean}
+ */
+export function isPerfMonitoringEnabled() {
+  return (
+    import.meta.env.DEV ||
+    localStorage.getItem('enablePerfMonitoring') === 'true'
+  );
+}
+
+/**
+ * Monitor performance of an operation
+ * @param {string} label - Operation label
+ * @param {Function} fn - Function to monitor
+ * @returns {Promise<any>|any} Result of the function
+ */
+export async function perfMonitor(label, fn) {
+  if (!isPerfMonitoringEnabled()) {
+    return typeof fn === 'function' ? await fn() : fn;
+  }
+
+  const perfLabel = `⚡ ${label}`;
+  console.time(perfLabel);
+
+  try {
+    const result = typeof fn === 'function' ? await fn() : fn;
+    console.timeEnd(perfLabel);
+    return result;
+  } catch (error) {
+    console.timeEnd(perfLabel);
+    console.error(`${perfLabel} failed:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Detect device performance characteristics
+ * @returns {Object} Performance info
+ */
+export function getDevicePerformance() {
+  const cores = navigator.hardwareConcurrency || 4;
+  const memory = navigator.deviceMemory || 4; // GB
+
+  return {
+    cores,
+    memory,
+    isHighPerformance: cores >= 8 && memory >= 8,
+    isMediumPerformance: cores >= 4 && memory >= 4,
+    isLowPerformance: cores < 4 || memory < 4,
+    recommendedChunkSize: cores >= 8 ? 1000 : cores >= 4 ? 500 : 250
+  };
+}
+
+/**
+ * Debounce function for performance optimization
+ * @param {Function} fn - Function to debounce
+ * @param {number} delay - Delay in milliseconds
+ * @returns {Function} Debounced function
+ */
+export function debounce(fn, delay = 300) {
+  let timeoutId;
+  
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+/**
+ * Throttle function for performance optimization
+ * @param {Function} fn - Function to throttle
+ * @param {number} limit - Limit in milliseconds
+ * @returns {Function} Throttled function
+ */
+export function throttle(fn, limit = 100) {
+  let inThrottle;
+  
+  return function (...args) {
+    if (!inThrottle) {
+      fn.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}