@dooboostore/simple-web-component 1.0.45 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/bundle-entry.js +22 -0
- package/dist/cjs/bundle-entry.js.map +2 -2
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyNode.js +3 -1
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/applyProperty.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +5 -8
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/lifecycles.js +11 -36
- package/dist/cjs/decorators/lifecycles.js.map +2 -2
- package/dist/cjs/elements/SwcAppMixin.js +6 -2
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/bundle-entry.js +8 -0
- package/dist/esm/bundle-entry.js.map +2 -2
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyNode.js +3 -1
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/applyProperty.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +6 -9
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/lifecycles.js +11 -36
- package/dist/esm/decorators/lifecycles.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +6 -2
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +5524 -231
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/bundle-entry.d.ts +3 -0
- package/dist/types/bundle-entry.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +1 -0
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyProperty.d.ts +1 -0
- package/dist/types/decorators/applyProperty.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/lifecycles.d.ts +12 -13
- package/dist/types/decorators/lifecycles.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +5520 -231
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +6 -7
- package/src/bundle-entry.ts +8 -0
- package/src/decorators/applyAttribute.ts +1 -0
- package/src/decorators/applyNode.ts +3 -1
- package/src/decorators/applyProperty.ts +1 -0
- package/src/decorators/elementDefine.ts +8 -11
- package/src/decorators/lifecycles.ts +53 -52
- package/src/elements/SwcAppMixin.ts +7 -3
- package/dist/cjs/examples/RxJSOperatorsExample.js +0 -285
- package/dist/cjs/examples/RxJSOperatorsExample.js.map +0 -7
- package/dist/esm/examples/RxJSOperatorsExample.js +0 -266
- package/dist/esm/examples/RxJSOperatorsExample.js.map +0 -7
- package/dist/types/examples/RxJSOperatorsExample.d.ts +0 -94
- package/dist/types/examples/RxJSOperatorsExample.d.ts.map +0 -1
- package/src/examples/RxJSOperatorsExample.ts +0 -279
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/examples/RxJSOperatorsExample.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Example: Using RxJS-like Operators with @addEventListener\n * \n * This example demonstrates how to use debounceTime, throttleTime, and distinctUntilChanged\n * operators with the @addEventListener decorator.\n */\n\nimport { elementDefine, addEventListener } from '../decorators';\n\n/**\n * Example 1: Search Component with Debounce\n * \n * Waits 1 second after user stops typing before performing search.\n * Prevents excessive API calls during typing.\n */\n@elementDefine('search-component')\nexport class SearchComponent extends HTMLElement {\n private results: any[] = [];\n\n @addEventListener('$this', 'input', { debounceTime: 1000 })\n async onSearchInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const query = input.value.trim();\n\n if (query.length > 2) {\n try {\n // Simulate API call\n const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);\n this.results = await response.json();\n this.renderResults();\n } catch (error) {\n console.error('Search failed:', error);\n }\n } else {\n this.results = [];\n this.renderResults();\n }\n }\n\n private renderResults() {\n // Render search results\n console.log('Rendering results:', this.results);\n }\n}\n\n/**\n * Example 2: Window Resize Handler with Throttle\n * \n * Recalculates layout at most 4 times per second (every 250ms).\n * Prevents performance issues from excessive resize calculations.\n */\n@elementDefine('responsive-layout')\nexport class ResponsiveLayout extends HTMLElement {\n @addEventListener('$window', 'resize', { throttleTime: 250 })\n onWindowResize(event: Event) {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n console.log(`Window resized to: ${width}x${height}`);\n this.updateLayout(width, height);\n }\n\n private updateLayout(width: number, height: number) {\n // Update layout based on new dimensions\n if (width < 768) {\n this.classList.add('mobile');\n this.classList.remove('desktop');\n } else {\n this.classList.add('desktop');\n this.classList.remove('mobile');\n }\n }\n}\n\n/**\n * Example 3: Form Input with Debounce + Distinct\n * \n * Validates field only when:\n * 1. User stops typing (debounce 300ms)\n * 2. AND the value actually changed (distinct)\n */\n@elementDefine('form-input')\nexport class FormInput extends HTMLElement {\n @addEventListener('$this', 'input', {\n debounceTime: 300,\n distinctUntilChanged: true\n })\n onFormInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const fieldName = input.name;\n const value = input.value;\n\n console.log(`Validating ${fieldName}: ${value}`);\n this.validateField(fieldName, value);\n }\n\n private validateField(name: string, value: string) {\n // Perform validation\n const isValid = value.length > 0;\n console.log(`Field ${name} is ${isValid ? 'valid' : 'invalid'}`);\n }\n}\n\n/**\n * Example 4: Scroll Event with Throttle\n * \n * Checks if user scrolled to bottom at most 10 times per second.\n * Prevents excessive \"load more\" API calls.\n */\n@elementDefine('infinite-scroll')\nexport class InfiniteScroll extends HTMLElement {\n private isLoading = false;\n\n @addEventListener('$window', 'scroll', { throttleTime: 100 })\n onScroll(event: Event) {\n if (this.isLoading) return;\n\n if (this.isNearBottom()) {\n console.log('Near bottom, loading more content...');\n this.loadMoreContent();\n }\n }\n\n private isNearBottom(): boolean {\n const scrollTop = window.scrollY;\n const windowHeight = window.innerHeight;\n const documentHeight = document.documentElement.scrollHeight;\n\n return scrollTop + windowHeight >= documentHeight - 500;\n }\n\n private async loadMoreContent() {\n this.isLoading = true;\n try {\n // Simulate API call\n await new Promise(resolve => setTimeout(resolve, 1000));\n console.log('Content loaded');\n } finally {\n this.isLoading = false;\n }\n }\n}\n\n/**\n * Example 5: Custom Comparison with Distinct\n * \n * Only fires when the input value length changes.\n * Ignores changes that don't affect the length.\n */\n@elementDefine('length-tracker')\nexport class LengthTracker extends HTMLElement {\n @addEventListener('$this', 'input', {\n distinctUntilChanged: (prev: any, curr: any) => {\n // Only consider it changed if the length differs\n return prev?.length === curr?.length;\n }\n })\n onInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n const length = input.value.length;\n\n console.log(`Input length changed to: ${length}`);\n this.updateLengthDisplay(length);\n }\n\n private updateLengthDisplay(length: number) {\n // Update UI with new length\n const display = this.querySelector('.length-display');\n if (display) {\n display.textContent = `${length} characters`;\n }\n }\n}\n\n/**\n * Example 6: Complex Scenario - Auto-save with Multiple Operators\n * \n * Combines debounce and distinct for intelligent auto-save:\n * - Waits 2 seconds after user stops typing\n * - Only saves if content actually changed\n * - Prevents unnecessary save operations\n */\n@elementDefine('auto-save-editor')\nexport class AutoSaveEditor extends HTMLElement {\n private lastSavedContent = '';\n\n @addEventListener('$this', 'input', {\n debounceTime: 2000,\n distinctUntilChanged: (prev: any, curr: any) => {\n // Consider changed if the content is different\n return prev === curr;\n }\n })\n async onContentChange(event: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n const content = textarea.value;\n\n if (content !== this.lastSavedContent) {\n console.log('Auto-saving content...');\n await this.saveContent(content);\n this.lastSavedContent = content;\n }\n }\n\n private async saveContent(content: string) {\n try {\n // Simulate API call\n const response = await fetch('/api/save', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ content })\n });\n\n if (response.ok) {\n console.log('Content saved successfully');\n this.showSaveIndicator();\n }\n } catch (error) {\n console.error('Save failed:', error);\n }\n }\n\n private showSaveIndicator() {\n const indicator = this.querySelector('.save-indicator');\n if (indicator) {\n indicator.classList.add('show');\n setTimeout(() => indicator.classList.remove('show'), 2000);\n }\n }\n}\n\n/**\n * Example 7: Keyboard Shortcut Handler with Throttle\n * \n * Prevents rapid repeated execution of keyboard shortcuts.\n */\n@elementDefine('keyboard-handler')\nexport class KeyboardHandler extends HTMLElement {\n @addEventListener('$document', 'keydown', {\n throttleTime: 500,\n filter: (event: KeyboardEvent) => {\n // Only handle Ctrl+S or Cmd+S\n return (event.ctrlKey || event.metaKey) && event.key === 's';\n }\n })\n onSaveShortcut(event: KeyboardEvent) {\n event.preventDefault();\n console.log('Save shortcut triggered');\n this.handleSave();\n }\n\n private handleSave() {\n // Handle save operation\n console.log('Saving...');\n }\n}\n\n/**\n * Example 8: Mouse Move Tracking with Throttle\n * \n * Tracks mouse position at most 10 times per second.\n * Useful for analytics or interactive features.\n */\n@elementDefine('mouse-tracker')\nexport class MouseTracker extends HTMLElement {\n @addEventListener('$document', 'mousemove', { throttleTime: 100 })\n onMouseMove(event: MouseEvent) {\n const x = event.clientX;\n const y = event.clientY;\n\n // Update cursor position indicator\n this.updateCursorPosition(x, y);\n }\n\n private updateCursorPosition(x: number, y: number) {\n // Update UI with cursor position\n console.log(`Cursor at: ${x}, ${y}`);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;AAOA,wBAAgD;;;;;;;;;;;AASzC,IAAM,kBAAN,MAAMA,yBAAwB,YAAW;EAAzC,cAAA;;AACG,SAAA,UAAiB,CAAA;EA0B3B;EAvBE,MAAM,cAAc,OAAY;AAC9B,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM,MAAM,KAAI;AAE9B,QAAI,MAAM,SAAS,GAAG;AACpB,UAAI;AAEF,cAAM,WAAW,MAAM,MAAM,iBAAiB,mBAAmB,KAAK,CAAC,EAAE;AACzE,aAAK,UAAU,MAAM,SAAS,KAAI;AAClC,aAAK,cAAa;MACpB,SAAS,OAAO;AACd,gBAAQ,MAAM,kBAAkB,KAAK;MACvC;IACF,OAAO;AACL,WAAK,UAAU,CAAA;AACf,WAAK,cAAa;IACpB;EACF;EAEQ,gBAAa;AAEnB,YAAQ,IAAI,sBAAsB,KAAK,OAAO;EAChD;;AAtBM,WAAA;MADL,oCAAiB,SAAS,SAAS,EAAE,cAAc,IAAI,CAAE;;uDAC/B,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AAJrB,kBAAe,WAAA;MAD3B,iCAAc,kBAAkB;GACpB,eAAe;AAoCrB,IAAM,mBAAN,MAAMC,0BAAyB,YAAW;EAE/C,eAAe,OAAY;AACzB,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AAEtB,YAAQ,IAAI,sBAAsB,KAAK,IAAI,MAAM,EAAE;AACnD,SAAK,aAAa,OAAO,MAAM;EACjC;EAEQ,aAAa,OAAe,QAAc;AAEhD,QAAI,QAAQ,KAAK;AACf,WAAK,UAAU,IAAI,QAAQ;AAC3B,WAAK,UAAU,OAAO,SAAS;IACjC,OAAO;AACL,WAAK,UAAU,IAAI,SAAS;AAC5B,WAAK,UAAU,OAAO,QAAQ;IAChC;EACF;;AAjBA,WAAA;MADC,oCAAiB,WAAW,UAAU,EAAE,cAAc,IAAG,CAAE;;uDACtC,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AAFhB,mBAAgB,WAAA;MAD5B,iCAAc,mBAAmB;GACrB,gBAAgB;AA8BtB,IAAM,YAAN,MAAMC,mBAAkB,YAAW;EAKxC,YAAY,OAAY;AACtB,UAAM,QAAQ,MAAM;AACpB,UAAM,YAAY,MAAM;AACxB,UAAM,QAAQ,MAAM;AAEpB,YAAQ,IAAI,cAAc,SAAS,KAAK,KAAK,EAAE;AAC/C,SAAK,cAAc,WAAW,KAAK;EACrC;EAEQ,cAAc,MAAc,OAAa;AAE/C,UAAM,UAAU,MAAM,SAAS;AAC/B,YAAQ,IAAI,SAAS,IAAI,OAAO,UAAU,UAAU,SAAS,EAAE;EACjE;;AAbA,WAAA;MAJC,oCAAiB,SAAS,SAAS;IAClC,cAAc;IACd,sBAAsB;GACvB;;uDACkB,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AALb,YAAS,WAAA;MADrB,iCAAc,YAAY;GACd,SAAS;AA4Bf,IAAM,iBAAN,MAAMC,wBAAuB,YAAW;EAAxC,cAAA;;AACG,SAAA,YAAY;EA8BtB;EA3BE,SAAS,OAAY;AACnB,QAAI,KAAK;AAAW;AAEpB,QAAI,KAAK,aAAY,GAAI;AACvB,cAAQ,IAAI,sCAAsC;AAClD,WAAK,gBAAe;IACtB;EACF;EAEQ,eAAY;AAClB,UAAM,YAAY,OAAO;AACzB,UAAM,eAAe,OAAO;AAC5B,UAAM,iBAAiB,SAAS,gBAAgB;AAEhD,WAAO,YAAY,gBAAgB,iBAAiB;EACtD;EAEQ,MAAM,kBAAe;AAC3B,SAAK,YAAY;AACjB,QAAI;AAEF,YAAM,IAAI,QAAQ,aAAW,WAAW,SAAS,GAAI,CAAC;AACtD,cAAQ,IAAI,gBAAgB;IAC9B;AACE,WAAK,YAAY;IACnB;EACF;;AA1BA,WAAA;MADC,oCAAiB,WAAW,UAAU,EAAE,cAAc,IAAG,CAAE;;uDAC5C,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AAJV,iBAAc,WAAA;MAD1B,iCAAc,iBAAiB;GACnB,cAAc;AAwCpB,IAAM,gBAAN,MAAMC,uBAAsB,YAAW;EAO5C,cAAc,OAAY;AACxB,UAAM,QAAQ,MAAM;AACpB,UAAM,SAAS,MAAM,MAAM;AAE3B,YAAQ,IAAI,4BAA4B,MAAM,EAAE;AAChD,SAAK,oBAAoB,MAAM;EACjC;EAEQ,oBAAoB,QAAc;AAExC,UAAM,UAAU,KAAK,cAAc,iBAAiB;AACpD,QAAI,SAAS;AACX,cAAQ,cAAc,GAAG,MAAM;IACjC;EACF;;AAdA,WAAA;MANC,oCAAiB,SAAS,SAAS;IAClC,sBAAsB,CAAC,MAAW,SAAa;AAE7C,aAAO,MAAM,WAAW,MAAM;IAChC;GACD;;uDACoB,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AAPf,gBAAa,WAAA;MADzB,iCAAc,gBAAgB;GAClB,aAAa;AAiCnB,IAAM,iBAAN,MAAMC,wBAAuB,YAAW;EAAxC,cAAA;;AACG,SAAA,mBAAmB;EA6C7B;EApCE,MAAM,gBAAgB,OAAY;AAChC,UAAM,WAAW,MAAM;AACvB,UAAM,UAAU,SAAS;AAEzB,QAAI,YAAY,KAAK,kBAAkB;AACrC,cAAQ,IAAI,wBAAwB;AACpC,YAAM,KAAK,YAAY,OAAO;AAC9B,WAAK,mBAAmB;IAC1B;EACF;EAEQ,MAAM,YAAY,SAAe;AACvC,QAAI;AAEF,YAAM,WAAW,MAAM,MAAM,aAAa;QACxC,QAAQ;QACR,SAAS,EAAE,gBAAgB,mBAAkB;QAC7C,MAAM,KAAK,UAAU,EAAE,QAAO,CAAE;OACjC;AAED,UAAI,SAAS,IAAI;AACf,gBAAQ,IAAI,4BAA4B;AACxC,aAAK,kBAAiB;MACxB;IACF,SAAS,OAAO;AACd,cAAQ,MAAM,gBAAgB,KAAK;IACrC;EACF;EAEQ,oBAAiB;AACvB,UAAM,YAAY,KAAK,cAAc,iBAAiB;AACtD,QAAI,WAAW;AACb,gBAAU,UAAU,IAAI,MAAM;AAC9B,iBAAW,MAAM,UAAU,UAAU,OAAO,MAAM,GAAG,GAAI;IAC3D;EACF;;AAnCM,WAAA;MAPL,oCAAiB,SAAS,SAAS;IAClC,cAAc;IACd,sBAAsB,CAAC,MAAW,SAAa;AAE7C,aAAO,SAAS;IAClB;GACD;;uDAC4B,UAAK,eAAL,WAAK,aAAA,KAAA,MAAA,CAAA;;;AAVvB,iBAAc,WAAA;MAD1B,iCAAc,kBAAkB;GACpB,cAAc;AAsDpB,IAAM,kBAAN,MAAMC,yBAAwB,YAAW;EAQ9C,eAAe,OAAoB;AACjC,UAAM,eAAc;AACpB,YAAQ,IAAI,yBAAyB;AACrC,SAAK,WAAU;EACjB;EAEQ,aAAU;AAEhB,YAAQ,IAAI,WAAW;EACzB;;AATA,WAAA;MAPC,oCAAiB,aAAa,WAAW;IACxC,cAAc;IACd,QAAQ,CAAC,UAAwB;AAE/B,cAAQ,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ;IAC3D;GACD;;uDACqB,kBAAa,eAAb,mBAAa,aAAA,KAAA,MAAA,CAAA;;;AARxB,kBAAe,WAAA;MAD3B,iCAAc,kBAAkB;GACpB,eAAe;AA2BrB,IAAM,eAAN,MAAMC,sBAAqB,YAAW;EAE3C,YAAY,OAAiB;AAC3B,UAAM,IAAI,MAAM;AAChB,UAAM,IAAI,MAAM;AAGhB,SAAK,qBAAqB,GAAG,CAAC;EAChC;EAEQ,qBAAqB,GAAW,GAAS;AAE/C,YAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;EACrC;;AAXA,WAAA;MADC,oCAAiB,aAAa,aAAa,EAAE,cAAc,IAAG,CAAE;;uDAC9C,eAAU,eAAV,gBAAU,aAAA,KAAA,MAAA,CAAA;;;AAFlB,eAAY,WAAA;MADxB,iCAAc,eAAe;GACjB,YAAY;",
|
|
6
|
-
"names": ["SearchComponent", "ResponsiveLayout", "FormInput", "InfiniteScroll", "LengthTracker", "AutoSaveEditor", "KeyboardHandler", "MouseTracker"]
|
|
7
|
-
}
|
|
@@ -1,266 +0,0 @@
|
|
|
1
|
-
var __decorate = function(decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __metadata = function(k, v) {
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
-
};
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
11
|
-
import { elementDefine, addEventListener } from "../decorators/index.js";
|
|
12
|
-
let SearchComponent = class SearchComponent2 extends HTMLElement {
|
|
13
|
-
constructor() {
|
|
14
|
-
super(...arguments);
|
|
15
|
-
this.results = [];
|
|
16
|
-
}
|
|
17
|
-
async onSearchInput(event) {
|
|
18
|
-
const input = event.target;
|
|
19
|
-
const query = input.value.trim();
|
|
20
|
-
if (query.length > 2) {
|
|
21
|
-
try {
|
|
22
|
-
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
|
|
23
|
-
this.results = await response.json();
|
|
24
|
-
this.renderResults();
|
|
25
|
-
} catch (error) {
|
|
26
|
-
console.error("Search failed:", error);
|
|
27
|
-
}
|
|
28
|
-
} else {
|
|
29
|
-
this.results = [];
|
|
30
|
-
this.renderResults();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
renderResults() {
|
|
34
|
-
console.log("Rendering results:", this.results);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
__decorate([
|
|
38
|
-
addEventListener("$this", "input", { debounceTime: 1e3 }),
|
|
39
|
-
__metadata("design:type", Function),
|
|
40
|
-
__metadata("design:paramtypes", [typeof (_a = typeof Event !== "undefined" && Event) === "function" ? _a : Object]),
|
|
41
|
-
__metadata("design:returntype", Promise)
|
|
42
|
-
], SearchComponent.prototype, "onSearchInput", null);
|
|
43
|
-
SearchComponent = __decorate([
|
|
44
|
-
elementDefine("search-component")
|
|
45
|
-
], SearchComponent);
|
|
46
|
-
let ResponsiveLayout = class ResponsiveLayout2 extends HTMLElement {
|
|
47
|
-
onWindowResize(event) {
|
|
48
|
-
const width = window.innerWidth;
|
|
49
|
-
const height = window.innerHeight;
|
|
50
|
-
console.log(`Window resized to: ${width}x${height}`);
|
|
51
|
-
this.updateLayout(width, height);
|
|
52
|
-
}
|
|
53
|
-
updateLayout(width, height) {
|
|
54
|
-
if (width < 768) {
|
|
55
|
-
this.classList.add("mobile");
|
|
56
|
-
this.classList.remove("desktop");
|
|
57
|
-
} else {
|
|
58
|
-
this.classList.add("desktop");
|
|
59
|
-
this.classList.remove("mobile");
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
__decorate([
|
|
64
|
-
addEventListener("$window", "resize", { throttleTime: 250 }),
|
|
65
|
-
__metadata("design:type", Function),
|
|
66
|
-
__metadata("design:paramtypes", [typeof (_b = typeof Event !== "undefined" && Event) === "function" ? _b : Object]),
|
|
67
|
-
__metadata("design:returntype", void 0)
|
|
68
|
-
], ResponsiveLayout.prototype, "onWindowResize", null);
|
|
69
|
-
ResponsiveLayout = __decorate([
|
|
70
|
-
elementDefine("responsive-layout")
|
|
71
|
-
], ResponsiveLayout);
|
|
72
|
-
let FormInput = class FormInput2 extends HTMLElement {
|
|
73
|
-
onFormInput(event) {
|
|
74
|
-
const input = event.target;
|
|
75
|
-
const fieldName = input.name;
|
|
76
|
-
const value = input.value;
|
|
77
|
-
console.log(`Validating ${fieldName}: ${value}`);
|
|
78
|
-
this.validateField(fieldName, value);
|
|
79
|
-
}
|
|
80
|
-
validateField(name, value) {
|
|
81
|
-
const isValid = value.length > 0;
|
|
82
|
-
console.log(`Field ${name} is ${isValid ? "valid" : "invalid"}`);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
__decorate([
|
|
86
|
-
addEventListener("$this", "input", {
|
|
87
|
-
debounceTime: 300,
|
|
88
|
-
distinctUntilChanged: true
|
|
89
|
-
}),
|
|
90
|
-
__metadata("design:type", Function),
|
|
91
|
-
__metadata("design:paramtypes", [typeof (_c = typeof Event !== "undefined" && Event) === "function" ? _c : Object]),
|
|
92
|
-
__metadata("design:returntype", void 0)
|
|
93
|
-
], FormInput.prototype, "onFormInput", null);
|
|
94
|
-
FormInput = __decorate([
|
|
95
|
-
elementDefine("form-input")
|
|
96
|
-
], FormInput);
|
|
97
|
-
let InfiniteScroll = class InfiniteScroll2 extends HTMLElement {
|
|
98
|
-
constructor() {
|
|
99
|
-
super(...arguments);
|
|
100
|
-
this.isLoading = false;
|
|
101
|
-
}
|
|
102
|
-
onScroll(event) {
|
|
103
|
-
if (this.isLoading)
|
|
104
|
-
return;
|
|
105
|
-
if (this.isNearBottom()) {
|
|
106
|
-
console.log("Near bottom, loading more content...");
|
|
107
|
-
this.loadMoreContent();
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
isNearBottom() {
|
|
111
|
-
const scrollTop = window.scrollY;
|
|
112
|
-
const windowHeight = window.innerHeight;
|
|
113
|
-
const documentHeight = document.documentElement.scrollHeight;
|
|
114
|
-
return scrollTop + windowHeight >= documentHeight - 500;
|
|
115
|
-
}
|
|
116
|
-
async loadMoreContent() {
|
|
117
|
-
this.isLoading = true;
|
|
118
|
-
try {
|
|
119
|
-
await new Promise((resolve) => setTimeout(resolve, 1e3));
|
|
120
|
-
console.log("Content loaded");
|
|
121
|
-
} finally {
|
|
122
|
-
this.isLoading = false;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
__decorate([
|
|
127
|
-
addEventListener("$window", "scroll", { throttleTime: 100 }),
|
|
128
|
-
__metadata("design:type", Function),
|
|
129
|
-
__metadata("design:paramtypes", [typeof (_d = typeof Event !== "undefined" && Event) === "function" ? _d : Object]),
|
|
130
|
-
__metadata("design:returntype", void 0)
|
|
131
|
-
], InfiniteScroll.prototype, "onScroll", null);
|
|
132
|
-
InfiniteScroll = __decorate([
|
|
133
|
-
elementDefine("infinite-scroll")
|
|
134
|
-
], InfiniteScroll);
|
|
135
|
-
let LengthTracker = class LengthTracker2 extends HTMLElement {
|
|
136
|
-
onInputChange(event) {
|
|
137
|
-
const input = event.target;
|
|
138
|
-
const length = input.value.length;
|
|
139
|
-
console.log(`Input length changed to: ${length}`);
|
|
140
|
-
this.updateLengthDisplay(length);
|
|
141
|
-
}
|
|
142
|
-
updateLengthDisplay(length) {
|
|
143
|
-
const display = this.querySelector(".length-display");
|
|
144
|
-
if (display) {
|
|
145
|
-
display.textContent = `${length} characters`;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
__decorate([
|
|
150
|
-
addEventListener("$this", "input", {
|
|
151
|
-
distinctUntilChanged: (prev, curr) => {
|
|
152
|
-
return prev?.length === curr?.length;
|
|
153
|
-
}
|
|
154
|
-
}),
|
|
155
|
-
__metadata("design:type", Function),
|
|
156
|
-
__metadata("design:paramtypes", [typeof (_e = typeof Event !== "undefined" && Event) === "function" ? _e : Object]),
|
|
157
|
-
__metadata("design:returntype", void 0)
|
|
158
|
-
], LengthTracker.prototype, "onInputChange", null);
|
|
159
|
-
LengthTracker = __decorate([
|
|
160
|
-
elementDefine("length-tracker")
|
|
161
|
-
], LengthTracker);
|
|
162
|
-
let AutoSaveEditor = class AutoSaveEditor2 extends HTMLElement {
|
|
163
|
-
constructor() {
|
|
164
|
-
super(...arguments);
|
|
165
|
-
this.lastSavedContent = "";
|
|
166
|
-
}
|
|
167
|
-
async onContentChange(event) {
|
|
168
|
-
const textarea = event.target;
|
|
169
|
-
const content = textarea.value;
|
|
170
|
-
if (content !== this.lastSavedContent) {
|
|
171
|
-
console.log("Auto-saving content...");
|
|
172
|
-
await this.saveContent(content);
|
|
173
|
-
this.lastSavedContent = content;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
async saveContent(content) {
|
|
177
|
-
try {
|
|
178
|
-
const response = await fetch("/api/save", {
|
|
179
|
-
method: "POST",
|
|
180
|
-
headers: { "Content-Type": "application/json" },
|
|
181
|
-
body: JSON.stringify({ content })
|
|
182
|
-
});
|
|
183
|
-
if (response.ok) {
|
|
184
|
-
console.log("Content saved successfully");
|
|
185
|
-
this.showSaveIndicator();
|
|
186
|
-
}
|
|
187
|
-
} catch (error) {
|
|
188
|
-
console.error("Save failed:", error);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
showSaveIndicator() {
|
|
192
|
-
const indicator = this.querySelector(".save-indicator");
|
|
193
|
-
if (indicator) {
|
|
194
|
-
indicator.classList.add("show");
|
|
195
|
-
setTimeout(() => indicator.classList.remove("show"), 2e3);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
__decorate([
|
|
200
|
-
addEventListener("$this", "input", {
|
|
201
|
-
debounceTime: 2e3,
|
|
202
|
-
distinctUntilChanged: (prev, curr) => {
|
|
203
|
-
return prev === curr;
|
|
204
|
-
}
|
|
205
|
-
}),
|
|
206
|
-
__metadata("design:type", Function),
|
|
207
|
-
__metadata("design:paramtypes", [typeof (_f = typeof Event !== "undefined" && Event) === "function" ? _f : Object]),
|
|
208
|
-
__metadata("design:returntype", Promise)
|
|
209
|
-
], AutoSaveEditor.prototype, "onContentChange", null);
|
|
210
|
-
AutoSaveEditor = __decorate([
|
|
211
|
-
elementDefine("auto-save-editor")
|
|
212
|
-
], AutoSaveEditor);
|
|
213
|
-
let KeyboardHandler = class KeyboardHandler2 extends HTMLElement {
|
|
214
|
-
onSaveShortcut(event) {
|
|
215
|
-
event.preventDefault();
|
|
216
|
-
console.log("Save shortcut triggered");
|
|
217
|
-
this.handleSave();
|
|
218
|
-
}
|
|
219
|
-
handleSave() {
|
|
220
|
-
console.log("Saving...");
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
__decorate([
|
|
224
|
-
addEventListener("$document", "keydown", {
|
|
225
|
-
throttleTime: 500,
|
|
226
|
-
filter: (event) => {
|
|
227
|
-
return (event.ctrlKey || event.metaKey) && event.key === "s";
|
|
228
|
-
}
|
|
229
|
-
}),
|
|
230
|
-
__metadata("design:type", Function),
|
|
231
|
-
__metadata("design:paramtypes", [typeof (_g = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" ? _g : Object]),
|
|
232
|
-
__metadata("design:returntype", void 0)
|
|
233
|
-
], KeyboardHandler.prototype, "onSaveShortcut", null);
|
|
234
|
-
KeyboardHandler = __decorate([
|
|
235
|
-
elementDefine("keyboard-handler")
|
|
236
|
-
], KeyboardHandler);
|
|
237
|
-
let MouseTracker = class MouseTracker2 extends HTMLElement {
|
|
238
|
-
onMouseMove(event) {
|
|
239
|
-
const x = event.clientX;
|
|
240
|
-
const y = event.clientY;
|
|
241
|
-
this.updateCursorPosition(x, y);
|
|
242
|
-
}
|
|
243
|
-
updateCursorPosition(x, y) {
|
|
244
|
-
console.log(`Cursor at: ${x}, ${y}`);
|
|
245
|
-
}
|
|
246
|
-
};
|
|
247
|
-
__decorate([
|
|
248
|
-
addEventListener("$document", "mousemove", { throttleTime: 100 }),
|
|
249
|
-
__metadata("design:type", Function),
|
|
250
|
-
__metadata("design:paramtypes", [typeof (_h = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _h : Object]),
|
|
251
|
-
__metadata("design:returntype", void 0)
|
|
252
|
-
], MouseTracker.prototype, "onMouseMove", null);
|
|
253
|
-
MouseTracker = __decorate([
|
|
254
|
-
elementDefine("mouse-tracker")
|
|
255
|
-
], MouseTracker);
|
|
256
|
-
export {
|
|
257
|
-
AutoSaveEditor,
|
|
258
|
-
FormInput,
|
|
259
|
-
InfiniteScroll,
|
|
260
|
-
KeyboardHandler,
|
|
261
|
-
LengthTracker,
|
|
262
|
-
MouseTracker,
|
|
263
|
-
ResponsiveLayout,
|
|
264
|
-
SearchComponent
|
|
265
|
-
};
|
|
266
|
-
//# sourceMappingURL=RxJSOperatorsExample.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/examples/RxJSOperatorsExample.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Example: Using RxJS-like Operators with @addEventListener\n * \n * This example demonstrates how to use debounceTime, throttleTime, and distinctUntilChanged\n * operators with the @addEventListener decorator.\n */\n\nimport { elementDefine, addEventListener } from '../decorators';\n\n/**\n * Example 1: Search Component with Debounce\n * \n * Waits 1 second after user stops typing before performing search.\n * Prevents excessive API calls during typing.\n */\n@elementDefine('search-component')\nexport class SearchComponent extends HTMLElement {\n private results: any[] = [];\n\n @addEventListener('$this', 'input', { debounceTime: 1000 })\n async onSearchInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const query = input.value.trim();\n\n if (query.length > 2) {\n try {\n // Simulate API call\n const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);\n this.results = await response.json();\n this.renderResults();\n } catch (error) {\n console.error('Search failed:', error);\n }\n } else {\n this.results = [];\n this.renderResults();\n }\n }\n\n private renderResults() {\n // Render search results\n console.log('Rendering results:', this.results);\n }\n}\n\n/**\n * Example 2: Window Resize Handler with Throttle\n * \n * Recalculates layout at most 4 times per second (every 250ms).\n * Prevents performance issues from excessive resize calculations.\n */\n@elementDefine('responsive-layout')\nexport class ResponsiveLayout extends HTMLElement {\n @addEventListener('$window', 'resize', { throttleTime: 250 })\n onWindowResize(event: Event) {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n console.log(`Window resized to: ${width}x${height}`);\n this.updateLayout(width, height);\n }\n\n private updateLayout(width: number, height: number) {\n // Update layout based on new dimensions\n if (width < 768) {\n this.classList.add('mobile');\n this.classList.remove('desktop');\n } else {\n this.classList.add('desktop');\n this.classList.remove('mobile');\n }\n }\n}\n\n/**\n * Example 3: Form Input with Debounce + Distinct\n * \n * Validates field only when:\n * 1. User stops typing (debounce 300ms)\n * 2. AND the value actually changed (distinct)\n */\n@elementDefine('form-input')\nexport class FormInput extends HTMLElement {\n @addEventListener('$this', 'input', {\n debounceTime: 300,\n distinctUntilChanged: true\n })\n onFormInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const fieldName = input.name;\n const value = input.value;\n\n console.log(`Validating ${fieldName}: ${value}`);\n this.validateField(fieldName, value);\n }\n\n private validateField(name: string, value: string) {\n // Perform validation\n const isValid = value.length > 0;\n console.log(`Field ${name} is ${isValid ? 'valid' : 'invalid'}`);\n }\n}\n\n/**\n * Example 4: Scroll Event with Throttle\n * \n * Checks if user scrolled to bottom at most 10 times per second.\n * Prevents excessive \"load more\" API calls.\n */\n@elementDefine('infinite-scroll')\nexport class InfiniteScroll extends HTMLElement {\n private isLoading = false;\n\n @addEventListener('$window', 'scroll', { throttleTime: 100 })\n onScroll(event: Event) {\n if (this.isLoading) return;\n\n if (this.isNearBottom()) {\n console.log('Near bottom, loading more content...');\n this.loadMoreContent();\n }\n }\n\n private isNearBottom(): boolean {\n const scrollTop = window.scrollY;\n const windowHeight = window.innerHeight;\n const documentHeight = document.documentElement.scrollHeight;\n\n return scrollTop + windowHeight >= documentHeight - 500;\n }\n\n private async loadMoreContent() {\n this.isLoading = true;\n try {\n // Simulate API call\n await new Promise(resolve => setTimeout(resolve, 1000));\n console.log('Content loaded');\n } finally {\n this.isLoading = false;\n }\n }\n}\n\n/**\n * Example 5: Custom Comparison with Distinct\n * \n * Only fires when the input value length changes.\n * Ignores changes that don't affect the length.\n */\n@elementDefine('length-tracker')\nexport class LengthTracker extends HTMLElement {\n @addEventListener('$this', 'input', {\n distinctUntilChanged: (prev: any, curr: any) => {\n // Only consider it changed if the length differs\n return prev?.length === curr?.length;\n }\n })\n onInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n const length = input.value.length;\n\n console.log(`Input length changed to: ${length}`);\n this.updateLengthDisplay(length);\n }\n\n private updateLengthDisplay(length: number) {\n // Update UI with new length\n const display = this.querySelector('.length-display');\n if (display) {\n display.textContent = `${length} characters`;\n }\n }\n}\n\n/**\n * Example 6: Complex Scenario - Auto-save with Multiple Operators\n * \n * Combines debounce and distinct for intelligent auto-save:\n * - Waits 2 seconds after user stops typing\n * - Only saves if content actually changed\n * - Prevents unnecessary save operations\n */\n@elementDefine('auto-save-editor')\nexport class AutoSaveEditor extends HTMLElement {\n private lastSavedContent = '';\n\n @addEventListener('$this', 'input', {\n debounceTime: 2000,\n distinctUntilChanged: (prev: any, curr: any) => {\n // Consider changed if the content is different\n return prev === curr;\n }\n })\n async onContentChange(event: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n const content = textarea.value;\n\n if (content !== this.lastSavedContent) {\n console.log('Auto-saving content...');\n await this.saveContent(content);\n this.lastSavedContent = content;\n }\n }\n\n private async saveContent(content: string) {\n try {\n // Simulate API call\n const response = await fetch('/api/save', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ content })\n });\n\n if (response.ok) {\n console.log('Content saved successfully');\n this.showSaveIndicator();\n }\n } catch (error) {\n console.error('Save failed:', error);\n }\n }\n\n private showSaveIndicator() {\n const indicator = this.querySelector('.save-indicator');\n if (indicator) {\n indicator.classList.add('show');\n setTimeout(() => indicator.classList.remove('show'), 2000);\n }\n }\n}\n\n/**\n * Example 7: Keyboard Shortcut Handler with Throttle\n * \n * Prevents rapid repeated execution of keyboard shortcuts.\n */\n@elementDefine('keyboard-handler')\nexport class KeyboardHandler extends HTMLElement {\n @addEventListener('$document', 'keydown', {\n throttleTime: 500,\n filter: (event: KeyboardEvent) => {\n // Only handle Ctrl+S or Cmd+S\n return (event.ctrlKey || event.metaKey) && event.key === 's';\n }\n })\n onSaveShortcut(event: KeyboardEvent) {\n event.preventDefault();\n console.log('Save shortcut triggered');\n this.handleSave();\n }\n\n private handleSave() {\n // Handle save operation\n console.log('Saving...');\n }\n}\n\n/**\n * Example 8: Mouse Move Tracking with Throttle\n * \n * Tracks mouse position at most 10 times per second.\n * Useful for analytics or interactive features.\n */\n@elementDefine('mouse-tracker')\nexport class MouseTracker extends HTMLElement {\n @addEventListener('$document', 'mousemove', { throttleTime: 100 })\n onMouseMove(event: MouseEvent) {\n const x = event.clientX;\n const y = event.clientY;\n\n // Update cursor position indicator\n this.updateCursorPosition(x, y);\n }\n\n private updateCursorPosition(x: number, y: number) {\n // Update UI with cursor position\n console.log(`Cursor at: ${x}, ${y}`);\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["SearchComponent", "ResponsiveLayout", "FormInput", "InfiniteScroll", "LengthTracker", "AutoSaveEditor", "KeyboardHandler", "MouseTracker"]
|
|
7
|
-
}
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Example: Using RxJS-like Operators with @addEventListener
|
|
3
|
-
*
|
|
4
|
-
* This example demonstrates how to use debounceTime, throttleTime, and distinctUntilChanged
|
|
5
|
-
* operators with the @addEventListener decorator.
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* Example 1: Search Component with Debounce
|
|
9
|
-
*
|
|
10
|
-
* Waits 1 second after user stops typing before performing search.
|
|
11
|
-
* Prevents excessive API calls during typing.
|
|
12
|
-
*/
|
|
13
|
-
export declare class SearchComponent extends HTMLElement {
|
|
14
|
-
private results;
|
|
15
|
-
onSearchInput(event: Event): Promise<void>;
|
|
16
|
-
private renderResults;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Example 2: Window Resize Handler with Throttle
|
|
20
|
-
*
|
|
21
|
-
* Recalculates layout at most 4 times per second (every 250ms).
|
|
22
|
-
* Prevents performance issues from excessive resize calculations.
|
|
23
|
-
*/
|
|
24
|
-
export declare class ResponsiveLayout extends HTMLElement {
|
|
25
|
-
onWindowResize(event: Event): void;
|
|
26
|
-
private updateLayout;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Example 3: Form Input with Debounce + Distinct
|
|
30
|
-
*
|
|
31
|
-
* Validates field only when:
|
|
32
|
-
* 1. User stops typing (debounce 300ms)
|
|
33
|
-
* 2. AND the value actually changed (distinct)
|
|
34
|
-
*/
|
|
35
|
-
export declare class FormInput extends HTMLElement {
|
|
36
|
-
onFormInput(event: Event): void;
|
|
37
|
-
private validateField;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Example 4: Scroll Event with Throttle
|
|
41
|
-
*
|
|
42
|
-
* Checks if user scrolled to bottom at most 10 times per second.
|
|
43
|
-
* Prevents excessive "load more" API calls.
|
|
44
|
-
*/
|
|
45
|
-
export declare class InfiniteScroll extends HTMLElement {
|
|
46
|
-
private isLoading;
|
|
47
|
-
onScroll(event: Event): void;
|
|
48
|
-
private isNearBottom;
|
|
49
|
-
private loadMoreContent;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Example 5: Custom Comparison with Distinct
|
|
53
|
-
*
|
|
54
|
-
* Only fires when the input value length changes.
|
|
55
|
-
* Ignores changes that don't affect the length.
|
|
56
|
-
*/
|
|
57
|
-
export declare class LengthTracker extends HTMLElement {
|
|
58
|
-
onInputChange(event: Event): void;
|
|
59
|
-
private updateLengthDisplay;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Example 6: Complex Scenario - Auto-save with Multiple Operators
|
|
63
|
-
*
|
|
64
|
-
* Combines debounce and distinct for intelligent auto-save:
|
|
65
|
-
* - Waits 2 seconds after user stops typing
|
|
66
|
-
* - Only saves if content actually changed
|
|
67
|
-
* - Prevents unnecessary save operations
|
|
68
|
-
*/
|
|
69
|
-
export declare class AutoSaveEditor extends HTMLElement {
|
|
70
|
-
private lastSavedContent;
|
|
71
|
-
onContentChange(event: Event): Promise<void>;
|
|
72
|
-
private saveContent;
|
|
73
|
-
private showSaveIndicator;
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* Example 7: Keyboard Shortcut Handler with Throttle
|
|
77
|
-
*
|
|
78
|
-
* Prevents rapid repeated execution of keyboard shortcuts.
|
|
79
|
-
*/
|
|
80
|
-
export declare class KeyboardHandler extends HTMLElement {
|
|
81
|
-
onSaveShortcut(event: KeyboardEvent): void;
|
|
82
|
-
private handleSave;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Example 8: Mouse Move Tracking with Throttle
|
|
86
|
-
*
|
|
87
|
-
* Tracks mouse position at most 10 times per second.
|
|
88
|
-
* Useful for analytics or interactive features.
|
|
89
|
-
*/
|
|
90
|
-
export declare class MouseTracker extends HTMLElement {
|
|
91
|
-
onMouseMove(event: MouseEvent): void;
|
|
92
|
-
private updateCursorPosition;
|
|
93
|
-
}
|
|
94
|
-
//# sourceMappingURL=RxJSOperatorsExample.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RxJSOperatorsExample.d.ts","sourceRoot":"","sources":["../../../src/examples/RxJSOperatorsExample.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC9C,OAAO,CAAC,OAAO,CAAa;IAGtB,aAAa,CAAC,KAAK,EAAE,KAAK;IAmBhC,OAAO,CAAC,aAAa;CAItB;AAED;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,WAAW;IAE/C,cAAc,CAAC,KAAK,EAAE,KAAK;IAQ3B,OAAO,CAAC,YAAY;CAUrB;AAED;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,WAAW;IAKxC,WAAW,CAAC,KAAK,EAAE,KAAK;IASxB,OAAO,CAAC,aAAa;CAKtB;AAED;;;;;GAKG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAO,CAAC,SAAS,CAAS;IAG1B,QAAQ,CAAC,KAAK,EAAE,KAAK;IASrB,OAAO,CAAC,YAAY;YAQN,eAAe;CAU9B;AAED;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,WAAW;IAO5C,aAAa,CAAC,KAAK,EAAE,KAAK;IAQ1B,OAAO,CAAC,mBAAmB;CAO5B;AAED;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAO,CAAC,gBAAgB,CAAM;IASxB,eAAe,CAAC,KAAK,EAAE,KAAK;YAWpB,WAAW;IAkBzB,OAAO,CAAC,iBAAiB;CAO1B;AAED;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAQ9C,cAAc,CAAC,KAAK,EAAE,aAAa;IAMnC,OAAO,CAAC,UAAU;CAInB;AAED;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE3C,WAAW,CAAC,KAAK,EAAE,UAAU;IAQ7B,OAAO,CAAC,oBAAoB;CAI7B"}
|