@dooboostore/simple-web-component 1.0.42 → 1.0.44

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/src/index.ts

@@ -15,6 +15,8 @@ export * from './utils/Utils';
 // Config
 export * from './config/config';
 
+export * from './SwcAppEngine'
+
 // Registration Factory
 export default async (w: Window, other?: (((w: Window) => Promise<CustomElementConstructor> | CustomElementConstructor) | any) []) => {
   const cr = await defineSwcAppAll(w);

package/src/router/ElementRouter.ts

@@ -7,6 +7,10 @@ export class ElementRouter extends Router {
 
   constructor(config: RouterConfig) {
     super(config);
+    if (config.firstUrl) {
+      this._history.push({ url: config.firstUrl, data: null, title: undefined });
+      this._currentIndex = 0;
+    }
   }
 
   // Override pushState to manage internal history

package/dist/cjs/decorators/changedAttributeThis.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/changedAttributeThis.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\nexport interface ChangedAttributeThisOptions  {\n  type?: typeof Number | typeof Boolean | typeof String;\n  while?: 'connected';\n}\n\nexport interface ChangedAttributeThisMetadata {\n  attributeName: string;\n  propertyKey: string | symbol;\n  options: ChangedAttributeThisOptions;\n}\n\nconst convertValue = (val: any, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\n/**\n * @changedAttributeThis decorator - fires when any attribute on $this changes\n */\nexport function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    metaList.push({\n      attributeName: name,\n      propertyKey,\n      options\n    });\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): ChangedAttributeThisMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeThisMetadata[]> => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeThisMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];\n\n  const result = new Map<string, ChangedAttributeThisMetadata[]>();\n  metaList.forEach(meta => {\n    meta.forEach(item => {\n      if (!result.has(item.attributeName)) {\n        result.set(item.attributeName, []);\n      }\n      result.get(item.attributeName)!.push(item);\n    });\n  });\n  return result;\n};\n\nexport const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {\n  return convertValue(val, type);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAEtB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAavG,MAAM,eAAe,CAAC,KAAU,SAAmB;AACjD,MAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,MAAI,SAAS,OAAQ,QAAO,OAAO,GAAG;AACtC,MAAI,SAAS,QAAS,QAAO,QAAQ,WAAW,QAAQ,MAAM,QAAQ;AACtE,SAAO;AACT;AAKO,SAAS,qBAAqB,eAAwB,UAAuC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,WAAW,yBAAa,eAAe,mCAAmC,WAAW;AACzF,QAAI,CAAC,UAAU;AACb,iBAAW,CAAC;AACZ,+BAAa,eAAe,mCAAmC,UAAU,WAAW;AAAA,IACtF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,aAAS,KAAK;AAAA,MACZ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA4D;AACtG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAA6D;AAC3G,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,QAAM,WAAW,yBAAa,gBAAgD,mCAAmC,WAAW,KAAK,CAAC;AAElI,QAAM,SAAS,oBAAI,IAA4C;AAC/D,WAAS,QAAQ,UAAQ;AACvB,SAAK,QAAQ,UAAQ;AACnB,UAAI,CAAC,OAAO,IAAI,KAAK,aAAa,GAAG;AACnC,eAAO,IAAI,KAAK,eAAe,CAAC,CAAC;AAAA,MACnC;AACA,aAAO,IAAI,KAAK,aAAa,EAAG,KAAK,IAAI;AAAA,IAC3C,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,KAAU,SAA+D;AAC7G,SAAO,aAAa,KAAK,IAAI;AAC/B;",
-  "names": []
-}

package/dist/esm/decorators/changedAttributeThis.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/changedAttributeThis.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\nexport interface ChangedAttributeThisOptions  {\n  type?: typeof Number | typeof Boolean | typeof String;\n  while?: 'connected';\n}\n\nexport interface ChangedAttributeThisMetadata {\n  attributeName: string;\n  propertyKey: string | symbol;\n  options: ChangedAttributeThisOptions;\n}\n\nconst convertValue = (val: any, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\n/**\n * @changedAttributeThis decorator - fires when any attribute on $this changes\n */\nexport function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    metaList.push({\n      attributeName: name,\n      propertyKey,\n      options\n    });\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): ChangedAttributeThisMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeThisMetadata[]> => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeThisMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];\n\n  const result = new Map<string, ChangedAttributeThisMetadata[]>();\n  metaList.forEach(meta => {\n    meta.forEach(item => {\n      if (!result.has(item.attributeName)) {\n        result.set(item.attributeName, []);\n      }\n      result.get(item.attributeName)!.push(item);\n    });\n  });\n  return result;\n};\n\nexport const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {\n  return convertValue(val, type);\n};\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAavG,MAAM,eAAe,CAAC,KAAU,SAAmB;AACjD,MAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,MAAI,SAAS,OAAQ,QAAO,OAAO,GAAG;AACtC,MAAI,SAAS,QAAS,QAAO,QAAQ,WAAW,QAAQ,MAAM,QAAQ;AACtE,SAAO;AACT;AAKO,SAAS,qBAAqB,eAAwB,UAAuC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,WAAW,aAAa,eAAe,mCAAmC,WAAW;AACzF,QAAI,CAAC,UAAU;AACb,iBAAW,CAAC;AACZ,mBAAa,eAAe,mCAAmC,UAAU,WAAW;AAAA,IACtF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,aAAS,KAAK;AAAA,MACZ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA4D;AACtG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAA6D;AAC3G,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,QAAM,WAAW,aAAa,gBAAgD,mCAAmC,WAAW,KAAK,CAAC;AAElI,QAAM,SAAS,oBAAI,IAA4C;AAC/D,WAAS,QAAQ,UAAQ;AACvB,SAAK,QAAQ,UAAQ;AACnB,UAAI,CAAC,OAAO,IAAI,KAAK,aAAa,GAAG;AACnC,eAAO,IAAI,KAAK,eAAe,CAAC,CAAC;AAAA,MACnC;AACA,aAAO,IAAI,KAAK,aAAa,EAAG,KAAK,IAAI;AAAA,IAC3C,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,KAAU,SAA+D;AAC7G,SAAO,aAAa,KAAK,IAAI;AAC/B;",
-  "names": []
-}

package/dist/types/decorators/changedAttributeThis.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"changedAttributeThis.d.ts","sourceRoot":"","sources":["../../../src/decorators/changedAttributeThis.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iCAAiC,eAA0D,CAAC;AAEzG,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,OAAO,OAAO,GAAG,OAAO,MAAM,CAAC;IACtD,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,2BAA2B,CAAC;CACtC;AASD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,2BAAgC,GAAG,eAAe,CAgBvH;AAED,eAAO,MAAM,2BAA2B,GAAI,QAAQ,GAAG,KAAG,4BAA4B,EAAE,GAAG,SAG1F,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAAI,QAAQ,GAAG,KAAG,GAAG,CAAC,MAAM,EAAE,4BAA4B,EAAE,CAcvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,KAAK,GAAG,EAAE,OAAO,OAAO,MAAM,GAAG,OAAO,OAAO,GAAG,OAAO,MAAM,KAAG,GAEvG,CAAC"}