refactor: optimize LWC components with performance improvements

  Performance improvements:
  - Added memoization for expensive computations in bikeFilters, bikePagination, and cartStore
  - Cached currency formatter in cartSummary to avoid repeated Intl.NumberFormat instantiation
  - Implemented state caching with dirty flag tracking in cartStore for efficient updates

  Code optimization:
  - Extracted constants across all components for better maintainability
  - Simplified event dispatching patterns and removed redundant composed: false
  - Enhanced accessibility with proper ARIA attributes and navigation labels
  - Consolidated patterns using arrow functions and modern ES2022 features
  - Improved ID generation using crypto.randomUUID with fallback strategy

Author: dab

src/modules/my/bikeCard/bikeCard.js

@@ -1,78 +1,80 @@
 import { LightningElement, api } from 'lwc';
 
+// Constants
+const DEFAULT_IMAGE_URL = 'https://placehold.co/300x200';
+const KEYBOARD_KEYS = {
+  ENTER: 'Enter',
+  SPACE: ' ',
+};
+
 export default class BikeCard extends LightningElement {
   @api bike;
-
   selectedColor = '';
 
   connectedCallback() {
-    // Set default color
-    if (this.bike?.colors?.length > 0) {
-      this.selectedColor = this.bike.colors[0];
-    }
+    // Initialize selected color when bike data is available
+    this.selectedColor = this.bike?.colors?.[0] || '';
   }
 
   handleColorChange(event) {
     this.selectedColor = event.target.value;
   }
 
   handleAddToCart() {
-    // Event naming per lwc.dev: no uppercase, underscores OK
-    const addEvent = new CustomEvent('add_to_cart', {
-      bubbles: true,
-      composed: false,
-      detail: {
-        // Send only primitives (lwc.dev best practice)
-        bikeId: this.bike.id,
-        selectedColor: this.selectedColor,
-        quantity: 1,
-      },
-    });
-
-    this.dispatchEvent(addEvent);
+    this.dispatchEvent(
+      new CustomEvent('add_to_cart', {
+        bubbles: true,
+        detail: {
+          bikeId: this.bike.id,
+          selectedColor: this.selectedColor,
+          quantity: 1,
+        },
+      })
+    );
   }
 
   handleViewDetails() {
-    const detailEvent = new CustomEvent('view_product_detail', {
-      bubbles: true,
-      composed: false,
-      detail: {
-        bikeId: this.bike.id,
-      },
-    });
-
-    this.dispatchEvent(detailEvent);
+    this.dispatchEvent(
+      new CustomEvent('view_product_detail', {
+        bubbles: true,
+        detail: {
+          bikeId: this.bike.id,
+        },
+      })
+    );
   }
 
   handleKeyDown(event) {
     // Handle Enter and Space key for accessibility
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === KEYBOARD_KEYS.ENTER || event.key === KEYBOARD_KEYS.SPACE) {
       event.preventDefault();
       this.handleViewDetails();
     }
   }
 
   get currentImage() {
     // Use color-specific image if available, fallback to default image
-    if (this.bike?.images && this.selectedColor && this.bike.images[this.selectedColor]) {
-      const colorImages = this.bike.images[this.selectedColor];
-      // Use first image from array if it's an array, otherwise use as string
+    const colorImages = this.bike?.images?.[this.selectedColor];
+    if (colorImages) {
       return Array.isArray(colorImages) ? colorImages[0] : colorImages;
     }
-    return this.bike?.image || 'https://placehold.co/300x200';
+    return this.bike?.image || DEFAULT_IMAGE_URL;
   }
 
-  get formattedPrice() {
+  // Utility method for formatting currency
+  formatCurrency(amount) {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
-    }).format(this.bike?.price || 0);
+    }).format(amount || 0);
   }
 
-  get colorOptions() {
-    if (!this.bike?.colors) return [];
+  get formattedPrice() {
+    return this.formatCurrency(this.bike?.price);
+  }
 
-    return this.bike.colors.map(color => ({
+  get colorOptions() {
+    return (this.bike?.colors || []).map(color => ({
       label: color.charAt(0).toUpperCase() + color.slice(1),
       value: color,
       selected: this.selectedColor === color,
@@ -84,9 +86,9 @@ export default class BikeCard extends LightningElement {
   }
 
   get stockBadgeClass() {
-    return this.bike?.inStock
-      ? 'slds-badge slds-badge_lightest slds-theme_success'
-      : 'slds-badge slds-badge_lightest slds-theme_error';
+    const baseClasses = 'slds-badge slds-badge_lightest';
+    const themeClass = this.bike?.inStock ? 'slds-theme_success' : 'slds-theme_error';
+    return `${baseClasses} ${themeClass}`;
   }
 
   get colorSelectId() {

src/modules/my/bikeDetail/bikeDetail.js

@@ -1,16 +1,26 @@
 import { LightningElement, api } from 'lwc';
 
+// Constants
+const DEFAULT_IMAGE_URL = 'https://placehold.co/600x400';
+const KEYBOARD_KEYS = {
+  ESCAPE: 'Escape',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_RIGHT: 'ArrowRight',
+  ENTER: 'Enter',
+  SPACE: ' ',
+};
+
 export default class BikeDetail extends LightningElement {
   @api bike;
   selectedColor = '';
   quantity = 1;
   isImageZoomed = false;
   currentImageIndex = 0;
+  boundKeyHandler;
 
   connectedCallback() {
-    if (this.bike?.colors?.length > 0) {
-      this.selectedColor = this.bike.colors[0];
-    }
+    // Initialize selected color
+    this.selectedColor = this.bike?.colors?.[0] || '';
 
     // Bind keyboard handler for zoom navigation
     this.boundKeyHandler = this.handleZoomKeyDown.bind(this);
@@ -34,34 +44,32 @@ export default class BikeDetail extends LightningElement {
   }
 
   handleAddToCart() {
-    const addEvent = new CustomEvent('add_to_cart', {
-      bubbles: true,
-      composed: false,
-      detail: {
-        bikeId: this.bike.id,
-        selectedColor: this.selectedColor,
-        quantity: this.quantity,
-      },
-    });
-
-    this.dispatchEvent(addEvent);
+    this.dispatchEvent(
+      new CustomEvent('add_to_cart', {
+        bubbles: true,
+        detail: {
+          bikeId: this.bike.id,
+          selectedColor: this.selectedColor,
+          quantity: this.quantity,
+        },
+      })
+    );
   }
 
   handleBackToStore() {
-    const backEvent = new CustomEvent('back_to_store', {
-      bubbles: true,
-      composed: false,
-    });
-
-    this.dispatchEvent(backEvent);
+    this.dispatchEvent(
+      new CustomEvent('back_to_store', {
+        bubbles: true,
+      })
+    );
   }
 
   handleImageClick() {
     this.isImageZoomed = !this.isImageZoomed;
   }
 
   handleImageKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === KEYBOARD_KEYS.ENTER || event.key === KEYBOARD_KEYS.SPACE) {
       event.preventDefault();
       this.handleImageClick();
     }
@@ -71,25 +79,20 @@ export default class BikeDetail extends LightningElement {
     this.isImageZoomed = false;
   }
 
-  handleZoomPrevious() {
-    this.handlePreviousImage();
-  }
-
-  handleZoomNext() {
-    this.handleNextImage();
-  }
+  handleZoomPrevious = () => this.handlePreviousImage();
+  handleZoomNext = () => this.handleNextImage();
 
   handleZoomKeyDown(event) {
     if (this.isImageZoomed) {
       switch (event.key) {
-        case 'Escape':
+        case KEYBOARD_KEYS.ESCAPE:
           this.handleZoomClose();
           break;
-        case 'ArrowLeft':
+        case KEYBOARD_KEYS.ARROW_LEFT:
           event.preventDefault();
           this.handlePreviousImage();
           break;
-        case 'ArrowRight':
+        case KEYBOARD_KEYS.ARROW_RIGHT:
           event.preventDefault();
           this.handleNextImage();
           break;
@@ -125,40 +128,36 @@ export default class BikeDetail extends LightningElement {
 
   get currentImages() {
     // Get all images for the selected color
-    if (this.bike?.images && this.selectedColor && this.bike.images[this.selectedColor]) {
-      const colorImages = this.bike.images[this.selectedColor];
+    const colorImages = this.bike?.images?.[this.selectedColor];
+    if (colorImages) {
       return Array.isArray(colorImages) ? colorImages : [colorImages];
     }
-    return [this.bike?.image || 'https://placehold.co/600x400'];
+    return [this.bike?.image || DEFAULT_IMAGE_URL];
   }
 
   get currentImage() {
     // Get the currently selected image from the gallery
     const images = this.currentImages;
-    return (
-      images[this.currentImageIndex] ||
-      images[0] ||
-      this.bike?.image ||
-      'https://placehold.co/600x400'
-    );
+    return images[this.currentImageIndex] || images[0] || DEFAULT_IMAGE_URL;
   }
 
-  get formattedPrice() {
+  // Utility method for formatting currency
+  formatCurrency(amount) {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
-    }).format(this.bike?.price || 0);
+    }).format(amount || 0);
+  }
+
+  get formattedPrice() {
+    return this.formatCurrency(this.bike?.price);
   }
 
   get formattedOriginalPrice() {
     if (!this.bike?.originalPrice || this.bike.originalPrice === this.bike.price) {
       return null;
     }
-
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(this.bike.originalPrice);
+    return this.formatCurrency(this.bike.originalPrice);
   }
 
   get hasDiscount() {
@@ -192,16 +191,13 @@ export default class BikeDetail extends LightningElement {
   }
 
   get frameSize() {
-    if (!this.bike?.frameSize) return 'Various sizes available';
-    return this.bike.frameSize.join(', ');
+    return this.bike?.frameSize?.join(', ') || 'Various sizes available';
   }
 
   get specifications() {
-    if (!this.bike?.specs) return [];
-
-    return Object.entries(this.bike.specs).map(([key, value]) => ({
+    return Object.entries(this.bike?.specs || {}).map(([key, value]) => ({
       label: key.charAt(0).toUpperCase() + key.slice(1),
-      value: value,
+      value,
     }));
   }