@dooboostore/simple-web-component 1.0.49 → 1.0.51

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -1,91 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { SwcAppMessage, SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
-
-export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-message-while-connected');
-
-export interface SwcAppMessageSubscriberMetadata {
-  propertyKey: string | symbol;
-  messageType?: string;
-  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
-}
-
-export interface SwcAppMessageOptions {
-  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
-}
-
-function createSubscribeSwcAppMessageWhileConnected(options?: SwcAppMessageOptions, messageType?: string): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const filter = options?.filter;
-
-    const constructor = target.constructor;
-    let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor) as SwcAppMessageSubscriberMetadata[];
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, messageType, filter });
-    
-    return descriptor;
-  };
-}
-
-// 오버로드 시그니처 - 직접 사용 (괄호 없음)
-export function subscribeSwcAppMessageWhileConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 메시지 타입만
-export function subscribeSwcAppMessageWhileConnected(messageType: string): MethodDecorator;
-// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 옵션만
-export function subscribeSwcAppMessageWhileConnected(options: SwcAppMessageOptions): MethodDecorator;
-// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 메시지 타입 + 옵션
-export function subscribeSwcAppMessageWhileConnected(messageType: string, options: SwcAppMessageOptions): MethodDecorator;
-
-export function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions?: any, optionsOrPropertyKey?: any, descriptor?: PropertyDescriptor): any {
-  // 직접 데코레이터로 사용된 경우 (괄호 없음): @subscribeSwcAppMessageWhileConnected
-  if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === 'object' && 
-      optionsOrPropertyKey && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') &&
-      descriptor) {
-    const target = targetOrMessageTypeOrOptions;
-    const propertyKey = optionsOrPropertyKey;
-    return createSubscribeSwcAppMessageWhileConnected({})(target, propertyKey, descriptor);
-  }
-
-  // 함수로 호출된 경우 (괄호 있음)
-  let messageType: string | undefined;
-  let options: SwcAppMessageOptions = {};
-
-  if (typeof targetOrMessageTypeOrOptions === 'string') {
-    // 메시지 타입 전달: @subscribeSwcAppMessageWhileConnected('messageType') 또는 @subscribeSwcAppMessageWhileConnected('messageType', options)
-    messageType = targetOrMessageTypeOrOptions;
-    if (optionsOrPropertyKey && typeof optionsOrPropertyKey === 'object') {
-      options = optionsOrPropertyKey;
-    }
-  } else if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === 'object') {
-    // 옵션만 전달: @subscribeSwcAppMessageWhileConnected({ filter: ... })
-    options = targetOrMessageTypeOrOptions;
-  }
-
-  return createSubscribeSwcAppMessageWhileConnected(options, messageType);
-}
-
-export const receiveMessage = subscribeSwcAppMessageWhileConnected;
-// Helper function to retrieve message subscribers metadata
-export const getSubscribeSwcAppMessageWhileConnectedMetadata = (target: any): SwcAppMessageSubscriberMetadata[] | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// MessageSubscribeLifeCycler
-// NOTE: 실제 구독 로직은 SwcAppMixin._connected 에서 처리된다.
-// ─────────────────────────────────────────────────────────────────────────────
-import { ElementDefineLifeCycler } from '../types';
-
-export class MessageSubscribeLifeCycler implements ElementDefineLifeCycler {
-  onConnected(_helperHostSet: HelperHostSet): void {
-    // 실제 구독은 SwcAppMixin._connected 에서 처리
-  }
-
-  /** SwcAppMixin 이 구독 대상 메타를 꺼낼 때 사용 */
-  getMetadata(helperHostSet: HelperHostSet): SwcAppMessageSubscriberMetadata[] | undefined {
-    return getSubscribeSwcAppMessageWhileConnectedMetadata(helperHostSet.$this);
-  }
-}

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -1,107 +0,0 @@
-import {ReflectUtils} from '@dooboostore/core';
-import {Router} from '@dooboostore/core-web';
-import {HelperHostSet} from '../types';
-
-export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-route-change-while-connected');
-
-export type RoutePathType = string | string[] | ((currentThis: any) => string | string[]);
-
-export interface SwcAppRouteChangeSubscriberMetadata {
-  propertyKey: string | symbol;
-  options?: SwcAppRouteChangeOptions;
-}
-
-export interface SwcAppRouteChangeOptions {
-  path?: RoutePathType;
-  filter?: (router: Router, meta: { currentThis: any; helper: HelperHostSet }) => boolean;
-  order?: number;
-  valueKey?: symbol | string;
-}
-
-function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const pathPattern = options?.path;
-    const filter = options?.filter;
-
-    const constructor = target.constructor;
-    let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor) as SwcAppRouteChangeSubscriberMetadata[];
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-
-    return descriptor;
-  };
-}
-
-// 오버로드 시그니처 - 직접 사용 (괄호 없음)
-export function subscribeSwcAppRouteChangeWhileConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-// 오버로드 시그니처 - 함수 호출 (괄호 있음)
-export function subscribeSwcAppRouteChangeWhileConnected(): MethodDecorator;
-export function subscribeSwcAppRouteChangeWhileConnected(pathPattern: RoutePathType): MethodDecorator;
-export function subscribeSwcAppRouteChangeWhileConnected(pathPattern: RoutePathType, config: Omit<SwcAppRouteChangeOptions, 'path'>): MethodDecorator;
-export function subscribeSwcAppRouteChangeWhileConnected(options: SwcAppRouteChangeOptions): MethodDecorator;
-
-// 실제 구현 (이중 모드)
-export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any, propertyKeyOrConfig?: any, descriptor?: PropertyDescriptor): any {
-  // 직접 데코레이터로 사용된 경우 (괄호 없음): @subscribeSwcAppRouteChangeWhileConnected
-  // propertyKey가 string | symbol이고 descriptor가 있으면 직접 사용
-  if (propertyKeyOrConfig && (typeof propertyKeyOrConfig === 'string' || typeof propertyKeyOrConfig === 'symbol')) {
-    return createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKeyOrConfig, descriptor);
-  }
-
-  // 함수로 호출된 경우 (괄호 있음): @subscribeSwcAppRouteChangeWhileConnected() / @subscribeSwcAppRouteChangeWhileConnected('/path')
-  let options: SwcAppRouteChangeOptions = {};
-
-  if (Array.isArray(targetOrOptions)) {
-    // 배열: @subscribeSwcAppRouteChangeWhileConnected(['/path1', '/path2'])
-    // 또는: @subscribeSwcAppRouteChangeWhileConnected(['/path1', '/path2'], { order: 1 })
-    options.path = targetOrOptions;
-    if (propertyKeyOrConfig && typeof propertyKeyOrConfig === 'object') {
-      options = { ...options, ...propertyKeyOrConfig };
-    }
-  } else if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'function') {
-    // 문자열 또는 함수: @subscribeSwcAppRouteChangeWhileConnected('/path')
-    // 또는: @subscribeSwcAppRouteChangeWhileConnected('/path', { order: 1 })
-    options.path = targetOrOptions;
-    if (propertyKeyOrConfig && typeof propertyKeyOrConfig === 'object') {
-      options = { ...options, ...propertyKeyOrConfig };
-    }
-  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // 객체: @subscribeSwcAppRouteChangeWhileConnected({ path: '/path', filter: ..., order: 1 })
-    options = targetOrOptions;
-  }
-
-  return createSubscribeSwcAppRouteChangeWhileConnected(options);
-}
-export const changedRoute = subscribeSwcAppRouteChangeWhileConnected;
-
-// Helper function to retrieve route change subscribers metadata
-export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
-  if (!results) return [];
-  
-  // Sort by order (default 0 if not specified)
-  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// RouteSubscribeLifeCycler
-// NOTE: 실제 구독 로직은 SwcAppMixin._connected 에서 처리된다.
-//       이 cycler 는 메타데이터 접근 진입점 역할만 하며,
-//       향후 SwcAppMixin 에서 로직을 분리할 때 이 클래스로 이전한다.
-// ─────────────────────────────────────────────────────────────────────────────
-import { ElementDefineLifeCycler } from '../types';
-
-export class RouteSubscribeLifeCycler implements ElementDefineLifeCycler {
-  onConnected(_helperHostSet: HelperHostSet): void {
-    // 실제 구독은 SwcAppMixin._connected 에서 처리
-  }
-
-  /** SwcAppMixin 이 구독 대상 메타를 꺼낼 때 사용 */
-  getMetadata(helperHostSet: HelperHostSet): SwcAppRouteChangeSubscriberMetadata[] {
-    return getSubscribeSwcAppRouteChangeWhileConnectedMetadata(helperHostSet.$this);
-  }
-}

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}`);
-  }
-}