@dooboostore/simple-web-component 1.0.48 → 1.0.50

package/src/examples/RxJSOperatorsExample.ts

@@ -1,279 +0,0 @@
-/**
- * Example: Using RxJS-like Operators with @addEventListener
- * 
- * This example demonstrates how to use debounceTime, throttleTime, and distinctUntilChanged
- * operators with the @addEventListener decorator.
- */
-
-import { elementDefine, addEventListener } from '../decorators';
-
-/**
- * Example 1: Search Component with Debounce
- * 
- * Waits 1 second after user stops typing before performing search.
- * Prevents excessive API calls during typing.
- */
-@elementDefine('search-component')
-export class SearchComponent extends HTMLElement {
-  private results: any[] = [];
-
-  @addEventListener('$this', 'input', { debounceTime: 1000 })
-  async onSearchInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const query = input.value.trim();
-
-    if (query.length > 2) {
-      try {
-        // Simulate API call
-        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
-        this.results = await response.json();
-        this.renderResults();
-      } catch (error) {
-        console.error('Search failed:', error);
-      }
-    } else {
-      this.results = [];
-      this.renderResults();
-    }
-  }
-
-  private renderResults() {
-    // Render search results
-    console.log('Rendering results:', this.results);
-  }
-}
-
-/**
- * Example 2: Window Resize Handler with Throttle
- * 
- * Recalculates layout at most 4 times per second (every 250ms).
- * Prevents performance issues from excessive resize calculations.
- */
-@elementDefine('responsive-layout')
-export class ResponsiveLayout extends HTMLElement {
-  @addEventListener('$window', 'resize', { throttleTime: 250 })
-  onWindowResize(event: Event) {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-
-    console.log(`Window resized to: ${width}x${height}`);
-    this.updateLayout(width, height);
-  }
-
-  private updateLayout(width: number, height: number) {
-    // Update layout based on new dimensions
-    if (width < 768) {
-      this.classList.add('mobile');
-      this.classList.remove('desktop');
-    } else {
-      this.classList.add('desktop');
-      this.classList.remove('mobile');
-    }
-  }
-}
-
-/**
- * Example 3: Form Input with Debounce + Distinct
- * 
- * Validates field only when:
- * 1. User stops typing (debounce 300ms)
- * 2. AND the value actually changed (distinct)
- */
-@elementDefine('form-input')
-export class FormInput extends HTMLElement {
-  @addEventListener('$this', 'input', {
-    debounceTime: 300,
-    distinctUntilChanged: true
-  })
-  onFormInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const fieldName = input.name;
-    const value = input.value;
-
-    console.log(`Validating ${fieldName}: ${value}`);
-    this.validateField(fieldName, value);
-  }
-
-  private validateField(name: string, value: string) {
-    // Perform validation
-    const isValid = value.length > 0;
-    console.log(`Field ${name} is ${isValid ? 'valid' : 'invalid'}`);
-  }
-}
-
-/**
- * Example 4: Scroll Event with Throttle
- * 
- * Checks if user scrolled to bottom at most 10 times per second.
- * Prevents excessive "load more" API calls.
- */
-@elementDefine('infinite-scroll')
-export class InfiniteScroll extends HTMLElement {
-  private isLoading = false;
-
-  @addEventListener('$window', 'scroll', { throttleTime: 100 })
-  onScroll(event: Event) {
-    if (this.isLoading) return;
-
-    if (this.isNearBottom()) {
-      console.log('Near bottom, loading more content...');
-      this.loadMoreContent();
-    }
-  }
-
-  private isNearBottom(): boolean {
-    const scrollTop = window.scrollY;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-
-    return scrollTop + windowHeight >= documentHeight - 500;
-  }
-
-  private async loadMoreContent() {
-    this.isLoading = true;
-    try {
-      // Simulate API call
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      console.log('Content loaded');
-    } finally {
-      this.isLoading = false;
-    }
-  }
-}
-
-/**
- * Example 5: Custom Comparison with Distinct
- * 
- * Only fires when the input value length changes.
- * Ignores changes that don't affect the length.
- */
-@elementDefine('length-tracker')
-export class LengthTracker extends HTMLElement {
-  @addEventListener('$this', 'input', {
-    distinctUntilChanged: (prev: any, curr: any) => {
-      // Only consider it changed if the length differs
-      return prev?.length === curr?.length;
-    }
-  })
-  onInputChange(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const length = input.value.length;
-
-    console.log(`Input length changed to: ${length}`);
-    this.updateLengthDisplay(length);
-  }
-
-  private updateLengthDisplay(length: number) {
-    // Update UI with new length
-    const display = this.querySelector('.length-display');
-    if (display) {
-      display.textContent = `${length} characters`;
-    }
-  }
-}
-
-/**
- * Example 6: Complex Scenario - Auto-save with Multiple Operators
- * 
- * Combines debounce and distinct for intelligent auto-save:
- * - Waits 2 seconds after user stops typing
- * - Only saves if content actually changed
- * - Prevents unnecessary save operations
- */
-@elementDefine('auto-save-editor')
-export class AutoSaveEditor extends HTMLElement {
-  private lastSavedContent = '';
-
-  @addEventListener('$this', 'input', {
-    debounceTime: 2000,
-    distinctUntilChanged: (prev: any, curr: any) => {
-      // Consider changed if the content is different
-      return prev === curr;
-    }
-  })
-  async onContentChange(event: Event) {
-    const textarea = event.target as HTMLTextAreaElement;
-    const content = textarea.value;
-
-    if (content !== this.lastSavedContent) {
-      console.log('Auto-saving content...');
-      await this.saveContent(content);
-      this.lastSavedContent = content;
-    }
-  }
-
-  private async saveContent(content: string) {
-    try {
-      // Simulate API call
-      const response = await fetch('/api/save', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content })
-      });
-
-      if (response.ok) {
-        console.log('Content saved successfully');
-        this.showSaveIndicator();
-      }
-    } catch (error) {
-      console.error('Save failed:', error);
-    }
-  }
-
-  private showSaveIndicator() {
-    const indicator = this.querySelector('.save-indicator');
-    if (indicator) {
-      indicator.classList.add('show');
-      setTimeout(() => indicator.classList.remove('show'), 2000);
-    }
-  }
-}
-
-/**
- * Example 7: Keyboard Shortcut Handler with Throttle
- * 
- * Prevents rapid repeated execution of keyboard shortcuts.
- */
-@elementDefine('keyboard-handler')
-export class KeyboardHandler extends HTMLElement {
-  @addEventListener('$document', 'keydown', {
-    throttleTime: 500,
-    filter: (event: KeyboardEvent) => {
-      // Only handle Ctrl+S or Cmd+S
-      return (event.ctrlKey || event.metaKey) && event.key === 's';
-    }
-  })
-  onSaveShortcut(event: KeyboardEvent) {
-    event.preventDefault();
-    console.log('Save shortcut triggered');
-    this.handleSave();
-  }
-
-  private handleSave() {
-    // Handle save operation
-    console.log('Saving...');
-  }
-}
-
-/**
- * Example 8: Mouse Move Tracking with Throttle
- * 
- * Tracks mouse position at most 10 times per second.
- * Useful for analytics or interactive features.
- */
-@elementDefine('mouse-tracker')
-export class MouseTracker extends HTMLElement {
-  @addEventListener('$document', 'mousemove', { throttleTime: 100 })
-  onMouseMove(event: MouseEvent) {
-    const x = event.clientX;
-    const y = event.clientY;
-
-    // Update cursor position indicator
-    this.updateCursorPosition(x, y);
-  }
-
-  private updateCursorPosition(x: number, y: number) {
-    // Update UI with cursor position
-    console.log(`Cursor at: ${x}, ${y}`);
-  }
-}