@dooboostore/simple-web-component 1.0.47 → 1.0.48

package/src/decorators/mutationObserver.ts

@@ -0,0 +1,128 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { EventListenerSelector } from './addEventListener';
+
+export interface MutationObserverBaseOptions extends MutationObserverInit, SwcQueryOptions {
+  // observe 대상 셀렉터. 기본값 $this (컴포넌트 자신)
+  // delegate: true 인 경우 root에 observer를 걸고 셀렉터 매칭 대상의 mutation만 콜백
+  // 셀렉터로 직접 지정한 경우 해당 요소들을 각각 observe
+  delegate?: boolean;
+  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  // observer 해제(disconnected) 시 호출되는 콜백. 첫 번째 인자는 observe된 target element, 두 번째는 사용자 옵션 객체.
+  removeObserver?: (target: Element, optionValue: MutationObserverBaseOptions) => void;
+}
+
+export interface MutationObserverMetadata {
+  propertyKey: string | symbol;
+  selector: EventListenerSelector;
+  options: MutationObserverBaseOptions;
+}
+
+export const MUTATION_OBSERVER_METADATA_KEY = Symbol.for('simple-web-component:mutation-observer');
+
+export function mutationObserver(target: SpecialSelector, options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserver(selector: EventListenerSelector, options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserver(options?: MutationObserverBaseOptions): MethodDecorator;
+/**
+ * @mutationObserver decorator to observe DOM mutations.
+ */
+export function mutationObserver(selectorOrOptions?: EventListenerSelector | MutationObserverBaseOptions, maybeOptions?: MutationObserverBaseOptions): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    let selector: EventListenerSelector = '$this';
+    let options: MutationObserverBaseOptions = {};
+
+    if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+      selector = selectorOrOptions;
+      options = maybeOptions ?? {};
+    } else {
+      selector = '$this';
+      options = selectorOrOptions ?? {};
+    }
+
+    const constructor = targetObj.constructor;
+
+    let observers = ReflectUtils.getMetadata<MutationObserverMetadata[]>(MUTATION_OBSERVER_METADATA_KEY, constructor);
+    if (!observers) {
+      observers = [];
+      ReflectUtils.defineMetadata(MUTATION_OBSERVER_METADATA_KEY, observers, constructor);
+    }
+
+    observers.push({ propertyKey, selector, options });
+  };
+}
+
+export function mutationObserverThis<TEvent extends Event = Event>(options?: MutationObserverBaseOptions): MethodDecorator {
+  return mutationObserver('$this', options);
+}
+
+// ─── root별 delegate 헬퍼 (addEventListener와 동일 패턴) ───
+
+export function mutationObserverDelegateLight(selector: EventListenerSelector, options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateLight(options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateLight(selectorOrOptions?: EventListenerSelector | Omit<MutationObserverBaseOptions, 'delegate'>, maybeOptions?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light', delegate: true});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'light', delegate: true});
+}
+
+export function mutationObserverDelegateShadow(selector: EventListenerSelector, options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateShadow(options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateShadow(selectorOrOptions?: EventListenerSelector | Omit<MutationObserverBaseOptions, 'delegate'>, maybeOptions?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow', delegate: true});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'shadow', delegate: true});
+}
+
+export function mutationObserverDelegateAll(selector: EventListenerSelector, options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateAll(options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegateAll(selectorOrOptions?: EventListenerSelector | Omit<MutationObserverBaseOptions, 'delegate'>, maybeOptions?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all', delegate: true});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'all', delegate: true});
+}
+
+export function mutationObserverDelegate(selector: EventListenerSelector, options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegate(options?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator;
+export function mutationObserverDelegate(selectorOrOptions?: EventListenerSelector | Omit<MutationObserverBaseOptions, 'delegate'>, maybeOptions?: Omit<MutationObserverBaseOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'auto', delegate: true});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'auto', delegate: true});
+}
+
+// ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
+
+export function mutationObserverLight(selector: EventListenerSelector, options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverLight(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverLight(selectorOrOptions?: EventListenerSelector | MutationObserverBaseOptions, maybeOptions?: MutationObserverBaseOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light'});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'light'});
+}
+
+export function mutationObserverShadow(selector: EventListenerSelector, options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverShadow(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverShadow(selectorOrOptions?: EventListenerSelector | MutationObserverBaseOptions, maybeOptions?: MutationObserverBaseOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow'});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'shadow'});
+}
+
+export function mutationObserverAll(selector: EventListenerSelector, options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverAll(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverAll(selectorOrOptions?: EventListenerSelector | MutationObserverBaseOptions, maybeOptions?: MutationObserverBaseOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return mutationObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all'});
+  }
+  return mutationObserver({...selectorOrOptions ?? {}, root: 'all'});
+}
+
+export function getMutationObserverMetadata(target: any): MutationObserverMetadata[] | undefined {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+}

package/src/decorators/query.ts

@@ -177,3 +177,26 @@ export const getQueryMetadata = (target: any): QueryMetadata[]  => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
 };
+
+// ─── root별 편의 데코레이터 ───
+
+/**
+ * @queryShadow(selector, options?) — shadow DOM에서 단일 요소를 쿼리
+ */
+export function queryShadow(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
+  return query(selector, {...options ?? {}, root: 'shadow'});
+}
+
+/**
+ * @queryLight(selector, options?) — light DOM에서 단일 요소를 쿼리
+ */
+export function queryLight(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
+  return query(selector, {...options ?? {}, root: 'light'});
+}
+
+/**
+ * @queryAll(selector, options?) — shadow+light 모두에서 요소를 쿼리
+ */
+export function queryAllRoots(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
+  return query(selector, {...options ?? {}, root: 'all'});
+}

package/src/decorators/resizeObserver.ts

@@ -0,0 +1,129 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { EventListenerSelector } from './addEventListener';
+
+export interface ResizeObserverOptions extends SwcQueryOptions {
+  // 관찰 대상 셀렉터. 기본값 $this (컴포넌트 자신)
+  // delegate: true 인 경우 루트에서 매칭 요소들의 크기 변화를 감지 (동적 요소 포함)
+  delegate?: boolean;
+  // ResizeObserver box 옵션
+  box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  // observer 해제(disconnected) 시 호출되는 콜백. 첫 번째 인자는 observe된 target element, 두 번째는 사용자 옵션 객체.
+  removeObserver?: (target: Element, optionValue: ResizeObserverOptions) => void;
+}
+
+export interface ResizeObserverMetadata {
+  propertyKey: string | symbol;
+  selector: EventListenerSelector;
+  options: ResizeObserverOptions;
+}
+
+export const RESIZE_OBSERVER_METADATA_KEY = Symbol.for('simple-web-component:resize-observer');
+
+export function resizeObserver(target: SpecialSelector, options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserver(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserver(options?: ResizeObserverOptions): MethodDecorator;
+/**
+ * @resizeObserver decorator to observe element size changes.
+ */
+export function resizeObserver(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    let selector: EventListenerSelector = '$this';
+    let options: ResizeObserverOptions = {};
+
+    if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+      selector = selectorOrOptions;
+      options = maybeOptions ?? {};
+    } else {
+      selector = '$this';
+      options = selectorOrOptions ?? {};
+    }
+
+    const constructor = targetObj.constructor;
+
+    let observers = ReflectUtils.getMetadata<ResizeObserverMetadata[]>(RESIZE_OBSERVER_METADATA_KEY, constructor);
+    if (!observers) {
+      observers = [];
+      ReflectUtils.defineMetadata(RESIZE_OBSERVER_METADATA_KEY, observers, constructor);
+    }
+
+    observers.push({ propertyKey, selector, options });
+  };
+}
+
+export function resizeObserverThis(options?: ResizeObserverOptions): MethodDecorator {
+  return resizeObserver('$this', options);
+}
+
+// ─── root별 delegate 헬퍼 ───
+
+export function resizeObserverDelegateLight(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateLight(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateLight(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light', delegate: true});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'light', delegate: true});
+}
+
+export function resizeObserverDelegateShadow(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateShadow(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateShadow(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow', delegate: true});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'shadow', delegate: true});
+}
+
+export function resizeObserverDelegateAll(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateAll(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateAll(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all', delegate: true});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'all', delegate: true});
+}
+
+export function resizeObserverDelegate(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegate(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegate(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'auto', delegate: true});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'auto', delegate: true});
+}
+
+// ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
+
+export function resizeObserverLight(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverLight(options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverLight(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light'});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'light'});
+}
+
+export function resizeObserverShadow(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverShadow(options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverShadow(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow'});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'shadow'});
+}
+
+export function resizeObserverAll(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverAll(options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserverAll(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all'});
+  }
+  return resizeObserver({...selectorOrOptions ?? {}, root: 'all'});
+}
+
+export function getResizeObserverMetadata(target: any): ResizeObserverMetadata[] | undefined {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
+}

package/src/examples/RxJSOperatorsExample.ts

@@ -0,0 +1,279 @@
+/**
+ * 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}`);
+  }
+}

package/dist/cjs/elements/tt/SwcAppMixin.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAppMixin.js.map

package/dist/cjs/elements/tt/SwcAppMixin.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcAsync.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAsync.js.map

package/dist/cjs/elements/tt/SwcAsync.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcAsyncTemplate.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAsyncTemplate.js.map

package/dist/cjs/elements/tt/SwcAsyncTemplate.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcChoose.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcChoose.js.map

package/dist/cjs/elements/tt/SwcChoose.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcChooseTemplate.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcChooseTemplate.js.map

package/dist/cjs/elements/tt/SwcChooseTemplate.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcIf.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcIf.js.map

package/dist/cjs/elements/tt/SwcIf.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcIfTemplate.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcIfTemplate.js.map

package/dist/cjs/elements/tt/SwcIfTemplate.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcLoop.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcLoop.js.map

package/dist/cjs/elements/tt/SwcLoop.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcLoopTemplate.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcLoopTemplate.js.map