@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/README.md

@@ -39,11 +39,11 @@ class Dashboard extends HTMLElement {
 
 ### 3. **Declarative DOM Updates**
 
-#### @onConnectedShadow
+#### @onConnectedBodyShadow
 Render HTML automatically when component connects to DOM.
 
 ```typescript
-@onConnectedShadow
+@onConnectedBodyShadow
 render() {
   return `<div>Hello, <span>${this.name}</span>!</div>`;
 }
@@ -101,7 +101,7 @@ class ContentManager extends HTMLElement {
     return true;
   }
 
-  @onConnectedLight
+  @onConnectedBodyLight
   render() {
     return `
       <div>
@@ -171,7 +171,7 @@ class CounterApp extends HTMLElement {
     this.count++;  // Triggers automatic DOM update
   }
 
-  @onConnectedInnerHtml
+  @onConnectedBodyLight
   render() {
     return `
       <div>
@@ -181,14 +181,14 @@ class CounterApp extends HTMLElement {
         <!-- Text directive: render as text -->
         <!--[text Count: @count@ ]-->
         
-        <!-- Attribute binding with a: prefix -->
-        <div a:title="'Count is'+@count@"></div>
+        <!-- Attribute binding with a:: prefix -->
+        <div a::title="'Count is'+@count@"></div>
         
-        <!-- Event binding with e: prefix -->
-        <button e:click="@increment@()">Increment (@count@)</button>
+        <!-- Event binding with e:: prefix -->
+        <button e::click="@increment@()">Increment (@count@)</button>
         
         <!-- Conditional rendering -->
-        <div a:style="@isActive@ ? 'color: green' : 'color: red'">
+        <div a::style="@isActive@ ? 'color: green' : 'color: red'">
         </div>
       </div>
     `;
@@ -206,8 +206,8 @@ class CounterApp extends HTMLElement {
 **Template Directives:**
 - `<!--[html @state@ ]-->` - Render state value as HTML
 - `<!--[text @state@ ]-->` - Render state value as text
-- `a:attributeName="@state@"` - Bind state to HTML attributes
-- `e:eventName="@methodName@()"` - Bind events to methods
+- `a::attributeName="@state@"` - Bind state to HTML attributes
+- `e::eventName="@methodName@()"` - Bind events to methods
 
 **How @state Works:**
 1. Declare property with `@state('stateName')`
@@ -236,7 +236,7 @@ increment() {
 <!--[text @count = 5@ ]-->  // This won't work - read-only in templates
 
 // ✅ CORRECT - Call method from template
-<button e:click="@increment@()">Increment</button>
+<button e::click="@increment@()">Increment</button>
 ```
 
 **Advanced Example:**
@@ -254,20 +254,20 @@ class UserProfile extends HTMLElement {
     this.isEditing = !this.isEditing;
   }
 
-  @onConnectedShadow
+  @onConnectedBodyShadow
   render() {
     return `
       <div>
         <!-- Display user info -->
         <h2><!--[text @user.name@ ]--></h2>
-        <p a:title="Email: @user.email@">Age: @user.age@</p>
+        <p a::title="Email: @user.email@">Age: @user.age@</p>
         
         <!-- Conditional rendering based on state -->
-        <div a:style="@isEditing@ ? 'border: 1px solid blue' : 'border: none'">
+        <div a::style="@isEditing@ ? 'border: 1px solid blue' : 'border: none'">
           <!--[html @isEditing@ ? '<input type="text" />' : '<span>View Mode</span>' ]-->
         </div>
         
-        <button e:click="toggleEdit"> toggleEdit </button>
+        <button e::click="toggleEdit"> toggleEdit </button>
       </div>
     `;
   }
@@ -305,12 +305,16 @@ onCriticalClick(event: Event) {
 - `addEventListenerDocument(type, options)` - Listen on document
 - `addEventListenerDelegate(selector, type, options)` - Event delegation
 - `eventDelegate(selector, type, options)` - Short alias
-- `addEventListenerDelegateLightDom(selector, type, options)` - Delegate in light DOM
-- `eventDelegateLightDom(selector, type, options)` - Short alias
-- `addEventListenerDelegateShadowDom(selector, type, options)` - Delegate in shadow DOM
-- `eventDelegateShadowDom(selector, type, options)` - Short alias
-- `addEventListenerDelegateAllDom(selector, type, options)` - Delegate in all DOM
-- `eventDelegateAllDom(selector, type, options)` - Short alias
+- `addEventListenerDelegateLight(selector, type, options)` - Delegate in light DOM
+- `eventDelegateLight(selector, type, options)` - Short alias
+- `addEventListenerDelegateShadow(selector, type, options)` - Delegate in shadow DOM
+- `eventDelegateShadow(selector, type, options)` - Short alias
+- `addEventListenerDelegateAll(selector, type, options)` - Delegate in all DOM
+- `eventDelegateAll(selector, type, options)` - Short alias
+- `addEventListenerLight(selector, type, options)` / `eventLight(...)` - Bind (non-delegated) in light DOM
+- `addEventListenerShadow(selector, type, options)` / `eventShadow(...)` - Bind (non-delegated) in shadow DOM
+- `addEventListenerAll(selector, type, options)` / `eventAll(...)` - Bind (non-delegated) in both light & shadow DOM
+- `addEventListenerMutation(selector, type, options)` / `eventMutation(...)` - Delegate via `MutationObserver` instead of event bubbling (useful for non-bubbling events like `focus`/`blur`); `*Light`/`*Shadow`/`*All` variants also available
 
 #### @emitCustomEvent
 Emit custom events with data.
@@ -613,6 +617,148 @@ class FormHandler extends HTMLElement {
 - `@setProperty('#selector', 'propertyName', options)` - Set property on selector with options
 - `@setProperty` - Bare decorator (uses method name as property on $this)
 
+### 6.6 **DOM Observers (@mutationObserver, @resizeObserver, @intersectionObserver)**
+
+Observe DOM mutations, element size changes, and viewport intersection declaratively. All three decorators share the same pattern as `@event` — they support optional selector (defaults to `$this`), root-based helpers, and `delegate` mode.
+
+#### @mutationObserver
+Detect DOM changes (child add/remove, attribute changes, text changes) and react automatically.
+
+```typescript
+@elementDefine('list-observer')
+class ListObserver extends HTMLElement {
+  // Observe all changes under this component (light DOM)
+  @mutationObserverLight({ childList: true, attributes: true, subtree: true })
+  onDomChanged(matchedEls: HTMLElement[], mutations: MutationRecord[], observer: MutationObserver) {
+    console.log('DOM changed:', matchedEls.length, mutations);
+  }
+
+  // Observe a specific selector (delegate mode - catches dynamically added nodes too)
+  @mutationObserverDelegateShadow('.item', { childList: true })
+  onItemChanged(matchedEls: HTMLElement[], mutations: MutationRecord[], observer: MutationObserver) {
+    console.log('Item changed:', matchedEls);
+  }
+}
+```
+
+**Callback signature:**
+- `matchedEls: HTMLElement[]` - Elements matching the selector (1st arg)
+- `mutations: MutationRecord[]` - Original mutation records (2nd arg)
+- `observer: MutationObserver` - The observer instance (3rd arg)
+
+**How delegate works:**
+- **delegate=true** - Observes the root with `subtree: true`; dynamically added/removed elements matching the selector are detected in the callback
+- **delegate=false** (default) - Observes only the elements matching the selector at connect time
+
+**@mutationObserver Options:**
+- Standard `MutationObserverInit` options: `childList`, `attributes`, `characterData`, `subtree`, `attributeFilter`, `attributeOldValue`, `characterDataOldValue`
+- `delegate` - Observe root and filter by selector in callback
+- `root` - `'light' | 'shadow' | 'all' | 'auto'`
+- `filter` - Additional callback filter
+- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
+
+**@mutationObserver Decorator Variants:**
+- `mutationObserver(selector?, options?)` - Full form (selector defaults to `$this`)
+- `mutationObserverLight(selector?, options?)` - Observe light DOM
+- `mutationObserverShadow(selector?, options?)` - Observe shadow DOM
+- `mutationObserverAll(selector?, options?)` - Observe both light & shadow
+- `mutationObserverDelegate(selector?, options?)` - Delegate mode (root observe)
+- `mutationObserverDelegateLight(selector?, options?)` - Delegate in light DOM
+- `mutationObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
+- `mutationObserverDelegateAll(selector?, options?)` - Delegate in all DOM
+
+#### @resizeObserver
+Detect element size changes and react automatically.
+
+```typescript
+@elementDefine('chart-widget')
+class ChartWidget extends HTMLElement {
+  // Re-render when component size changes (selector defaults to $this)
+  @resizeObserverLight()
+  onResize(matchedEls: HTMLElement[], entries: ResizeObserverEntry[], observer: ResizeObserver) {
+    this.redraw(entries[0]?.contentRect);
+  }
+
+  // Watch specific elements (delegate mode tracks dynamically added ones)
+  @resizeObserverDelegateShadow('.card')
+  onCardResize(matchedEls: HTMLElement[], entries: ResizeObserverEntry[], observer: ResizeObserver) {
+    console.log('Card resized:', matchedEls[0]?.clientWidth);
+  }
+}
+```
+
+**Callback signature:**
+- `matchedEls: HTMLElement[]` - Elements that were resized (1st arg)
+- `entries: ResizeObserverEntry[]` - Original observer entries (2nd arg)
+- `observer: ResizeObserver` - The observer instance (3rd arg)
+
+**@resizeObserver Options:**
+- `box` - `'content-box' | 'border-box' | 'device-pixel-content-box'`
+- `delegate` - Track dynamically added/removed matching elements
+- `root` - `'light' | 'shadow' | 'all' | 'auto'`
+- `filter` - Additional callback filter
+- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
+
+**@resizeObserver Decorator Variants:**
+- `resizeObserver(selector?, options?)` - Full form (selector defaults to `$this`)
+- `resizeObserverLight(selector?, options?)` - Observe light DOM
+- `resizeObserverShadow(selector?, options?)` - Observe shadow DOM
+- `resizeObserverAll(selector?, options?)` - Observe both light & shadow
+- `resizeObserverDelegate(selector?, options?)` - Delegate mode (root observe)
+- `resizeObserverDelegateLight(selector?, options?)` - Delegate in light DOM
+- `resizeObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
+- `resizeObserverDelegateAll(selector?, options?)` - Delegate in all DOM
+
+**Combining with @resizeObserver delegate (dynamic tracking):**
+When `delegate: true`, an internal `MutationObserver` automatically observes the root so that elements matching the selector are tracked even after being dynamically added/removed from the DOM.
+
+#### @intersectionObserver
+Detect when elements enter/exit the viewport (or a custom scroll container) and react automatically — useful for lazy loading, infinite scroll, and visibility tracking.
+
+```typescript
+@elementDefine('lazy-image-list')
+class LazyImageList extends HTMLElement {
+  // Fire when any matching element crosses the viewport boundary
+  @intersectionObserverLight('.lazy-img', { threshold: 0 })
+  onImageVisible(matchedEls: HTMLElement[], entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
+    entries.forEach(e => {
+      if (e.isIntersecting) (e.target as HTMLImageElement).src = (e.target as HTMLElement).dataset.src!;
+    });
+  }
+
+  // Delegate mode tracks dynamically added elements too
+  @intersectionObserverDelegateShadow('.card', { threshold: [0, 0.5, 1] })
+  onCardIntersect(matchedEls: HTMLElement[], entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
+    console.log('intersection ratio:', entries[0]?.intersectionRatio);
+  }
+}
+```
+
+**Callback signature:**
+- `matchedEls: HTMLElement[]` - Elements matching the selector (1st arg)
+- `entries: IntersectionObserverEntry[]` - Original observer entries (2nd arg)
+- `observer: IntersectionObserver` - The observer instance (3rd arg)
+
+**@intersectionObserver Options:**
+- Standard `IntersectionObserverInit` options: `threshold`, `rootMargin` (note: its own scroll-container `root` is passed as `intersectionRoot`, since the decorator's `root` option already means light/shadow/all/auto selector scope)
+- `delegate` - Observe root and filter by selector in callback (dynamically added/removed elements are tracked too)
+- `root` - `'light' | 'shadow' | 'all' | 'auto'`
+- `filter` - Additional callback filter
+- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
+
+**@intersectionObserver Decorator Variants:**
+- `intersectionObserver(selector?, options?)` - Full form (selector defaults to `$this`)
+- `intersectionObserverLight(selector?, options?)` - Observe light DOM
+- `intersectionObserverShadow(selector?, options?)` - Observe shadow DOM
+- `intersectionObserverAll(selector?, options?)` - Observe both light & shadow
+- `intersectionObserverDelegate(selector?, options?)` - Delegate mode (root observe)
+- `intersectionObserverDelegateLight(selector?, options?)` - Delegate in light DOM
+- `intersectionObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
+- `intersectionObserverDelegateAll(selector?, options?)` - Delegate in all DOM
+
+**Cleanup:**
+All three observers are automatically disconnected when the component is removed from the DOM. `removeObserver` callbacks (if provided) are invoked during cleanup.
+
 ### 7. **DOM Manipulation with applyNode**
 
 Surgically add, replace, or remove nodes in the DOM with fine-grained control.
@@ -638,7 +784,7 @@ class ContentUpdater extends HTMLElement {
     return `<p>Prepended content</p>`;
   }
 
-  @onConnectedLight
+  @onConnectedBodyLight
   render() {
     return `
       <div>
@@ -704,7 +850,7 @@ class StyledComponent extends HTMLElement {
     };
   }
 
-  @onConnectedLight
+  @onConnectedBodyLight
   render() {
     return `
       <div>
@@ -811,6 +957,57 @@ onFirst() { }
 onSecond() { }
 ```
 
+### 8.6 **Timers (@setInterval, @setTimeout)**
+
+Declaratively run a method on a repeating interval or after a one-time delay, tied to the component's connected lifecycle. Both are pure metadata-collecting decorators — they never touch the method itself (no `descriptor.value` wrapping) — so they compose safely with any other decorator stacked on the same method, regardless of declaration order. All the actual scheduling/cleanup is handled by `SetIntervalLifeCycler`/`SetTimeoutLifeCycler` (`ElementDefineLifeCycler` implementations, same plugin pattern as the observers above):
+
+- Starts automatically when the component connects.
+- Automatically `clearInterval`/`clearTimeout`s when the component disconnects — no manual cleanup needed.
+
+```typescript
+@elementDefine('live-clock')
+class LiveClock extends HTMLElement {
+  @setInterval(1000, {
+    parameter: (set) => [Date.now()],
+    created: (set, id) => console.log('interval started, timer id:', id)
+  })
+  tick(now: number) {
+    this.textContent = new Date(now).toLocaleTimeString();
+  }
+
+  // No options - called with no arguments, once per second
+  @setInterval(1000)
+  onTick() {
+    console.log('tick');
+  }
+
+  // Fires once, 3 seconds after connect
+  @setTimeout(3000)
+  onceAfter3s() {
+    console.log('3 seconds have passed');
+  }
+}
+```
+
+**`@setInterval(interval, options?)` / `@setTimeout(delay, options?)`:**
+- `interval` / `delay` - milliseconds. `setInterval` repeats; `setTimeout` fires once.
+- `parameter?: (set: HelperHostSet) => any[]` - computes the arguments passed to the method on each tick/fire. Omitted → method is called with no arguments.
+- `created?: (set: HelperHostSet, id: number) => void` - fires once, right after the timer is armed, with the real `setInterval`/`setTimeout` return value. For logging/debugging only — cleanup is still handled automatically, this is not a manual-clear hook.
+- `valueKey?: symbol | string` - same convention as `@applyAttribute`'s `valueKey` (see "Multiple Decorators with Shared Return Value" below): if the method's return value is an object and this key's value is a function, that function is called on every tick/fire — but note the callback signature is just `(id: number)`, not `(set, id)` like `created`.
+
+```typescript
+@setInterval(900, { valueKey: 'onTick' })
+poll() {
+  return {
+    onTick: (id: number) => console.log('interval', id, 'ticked'),
+  };
+}
+```
+
+**Why no wrapping is needed:** unlike `@applyAttribute`/`@setAttribute` (which must wrap the method because it can be called by arbitrary code — event handlers, other decorators, etc.), the timer's own `LifeCycler` is the one calling `inst[propertyKey](...)` every tick/fire — it already has the return value in hand at that call site, so it can read `valueKey` off of it without ever needing to intercept the method.
+
+> `@requestAnimationFrame` is not implemented yet.
+
 ### 9. **Structural Directives**
 
 Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
@@ -1328,6 +1525,7 @@ class MixedKeysExample extends HTMLElement {
 - `@applyClass` / `@updateClass` / etc.
 - `@emitCustomEvent` / `@emit`
 - `@publishSwcAppMessage` / `@publish`
+- `@setInterval` / `@setTimeout` - variant: the extracted value must itself be a function, and that function is invoked with `(id: number)` on every tick/fire (see "Timers" section above) rather than being applied directly like the other decorators here.
 
 Each decorator will use only its corresponding value from the return object, preventing conflicts and allowing clean separation of concerns.
 
@@ -1419,9 +1617,7 @@ method() { ... }
 
 **query.ts:**
 - `query(selector?, options?)` - Query single element (supports $this, $host, $appHost, etc.)
-
-**queryAll.ts:**
-- `queryAll(selector?, options?)` - Query multiple elements
+- `queryAll(selector?, options?)` - Query multiple elements (same file as `query`)
 
 **emitCustomEvent.ts:**
 - `emitCustomEvent(target, type, options?)` - Emit custom events

package/dist/cjs/config/config.js

@@ -81,6 +81,6 @@ const HTML_TAG_ENTRIES = [
   ["HTMLHeadingElement", "h1"],
   ["HTMLBodyElement", "body"]
 ];
-const DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "unload", "hashchange", "connected"];
+const DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "hashchange", "connected"];
 const BROWSER_GLOBALS = ["window", "document", "Node", "Element", "HTMLElement", "DocumentFragment", "CustomEvent", "customElements", "NodeFilter", ...HTML_TAG_ENTRIES.map(([className]) => className)];
 //# sourceMappingURL=config.js.map

package/dist/cjs/config/config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/config.ts"],
-  "sourcesContent": ["export const HTML_TAG_ENTRIES: [string, string][] = [\n  ['HTMLAnchorElement', 'a'],\n  ['HTMLAreaElement', 'area'],\n  ['HTMLAudioElement', 'audio'],\n  ['HTMLBaseElement', 'base'],\n  ['HTMLButtonElement', 'button'],\n  ['HTMLCanvasElement', 'canvas'],\n  ['HTMLDataElement', 'data'],\n  ['HTMLDataListElement', 'datalist'],\n  ['HTMLDetailsElement', 'details'],\n  ['HTMLDialogElement', 'dialog'],\n  ['HTMLDivElement', 'div'],\n  ['HTMLDListElement', 'dl'],\n  ['HTMLEmbedElement', 'embed'],\n  ['HTMLFieldSetElement', 'fieldset'],\n  ['HTMLFormElement', 'form'],\n  ['HTMLHRElement', 'hr'],\n  ['HTMLIFrameElement', 'iframe'],\n  ['HTMLImageElement', 'img'],\n  ['HTMLInputElement', 'input'],\n  ['HTMLLabelElement', 'label'],\n  ['HTMLLegendElement', 'legend'],\n  ['HTMLLIElement', 'li'],\n  ['HTMLLinkElement', 'link'],\n  ['HTMLMapElement', 'map'],\n  ['HTMLMetaElement', 'meta'],\n  ['HTMLMeterElement', 'meter'],\n  ['HTMLModElement', 'del'],\n  ['HTMLObjectElement', 'object'],\n  ['HTMLOListElement', 'ol'],\n  ['HTMLOptGroupElement', 'optgroup'],\n  ['HTMLOptionElement', 'option'],\n  ['HTMLOutputElement', 'output'],\n  ['HTMLParagraphElement', 'p'],\n  ['HTMLParamElement', 'param'],\n  ['HTMLPictureElement', 'picture'],\n  ['HTMLPreElement', 'pre'],\n  ['HTMLProgressElement', 'progress'],\n  ['HTMLQuoteElement', 'blockquote'],\n  ['HTMLScriptElement', 'script'],\n  ['HTMLSelectElement', 'select'],\n  ['HTMLSlotElement', 'slot'],\n  ['HTMLSourceElement', 'source'],\n  ['HTMLSpanElement', 'span'],\n  ['HTMLStyleElement', 'style'],\n  ['HTMLTableElement', 'table'],\n  ['HTMLTableSectionElement', 'tbody'],\n  ['HTMLTableCellElement', 'td'],\n  ['HTMLTemplateElement', 'template'],\n  ['HTMLTextAreaElement', 'textarea'],\n  ['HTMLTimeElement', 'time'],\n  ['HTMLTitleElement', 'title'],\n  ['HTMLTableRowElement', 'tr'],\n  ['HTMLTrackElement', 'track'],\n  ['HTMLUListElement', 'ul'],\n  ['HTMLVideoElement', 'video'],\n  ['HTMLHeadingElement', 'h1'],\n  ['HTMLBodyElement', 'body']\n];\n\nexport const DOM_EVENT_NAMES = ['click', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'contextmenu', 'keydown', 'keypress', 'keyup', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'scroll', 'resize', 'load', 'unload', 'hashchange', 'connected'];\n\nexport const BROWSER_GLOBALS = ['window', 'document', 'Node', 'Element', 'HTMLElement', 'DocumentFragment', 'CustomEvent', 'customElements', 'NodeFilter', ...HTML_TAG_ENTRIES.map(([className]) => className)];\n"],
-  "mappings": "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",
+  "sourcesContent": ["export const HTML_TAG_ENTRIES: [string, string][] = [\n  ['HTMLAnchorElement', 'a'],\n  ['HTMLAreaElement', 'area'],\n  ['HTMLAudioElement', 'audio'],\n  ['HTMLBaseElement', 'base'],\n  ['HTMLButtonElement', 'button'],\n  ['HTMLCanvasElement', 'canvas'],\n  ['HTMLDataElement', 'data'],\n  ['HTMLDataListElement', 'datalist'],\n  ['HTMLDetailsElement', 'details'],\n  ['HTMLDialogElement', 'dialog'],\n  ['HTMLDivElement', 'div'],\n  ['HTMLDListElement', 'dl'],\n  ['HTMLEmbedElement', 'embed'],\n  ['HTMLFieldSetElement', 'fieldset'],\n  ['HTMLFormElement', 'form'],\n  ['HTMLHRElement', 'hr'],\n  ['HTMLIFrameElement', 'iframe'],\n  ['HTMLImageElement', 'img'],\n  ['HTMLInputElement', 'input'],\n  ['HTMLLabelElement', 'label'],\n  ['HTMLLegendElement', 'legend'],\n  ['HTMLLIElement', 'li'],\n  ['HTMLLinkElement', 'link'],\n  ['HTMLMapElement', 'map'],\n  ['HTMLMetaElement', 'meta'],\n  ['HTMLMeterElement', 'meter'],\n  ['HTMLModElement', 'del'],\n  ['HTMLObjectElement', 'object'],\n  ['HTMLOListElement', 'ol'],\n  ['HTMLOptGroupElement', 'optgroup'],\n  ['HTMLOptionElement', 'option'],\n  ['HTMLOutputElement', 'output'],\n  ['HTMLParagraphElement', 'p'],\n  ['HTMLParamElement', 'param'],\n  ['HTMLPictureElement', 'picture'],\n  ['HTMLPreElement', 'pre'],\n  ['HTMLProgressElement', 'progress'],\n  ['HTMLQuoteElement', 'blockquote'],\n  ['HTMLScriptElement', 'script'],\n  ['HTMLSelectElement', 'select'],\n  ['HTMLSlotElement', 'slot'],\n  ['HTMLSourceElement', 'source'],\n  ['HTMLSpanElement', 'span'],\n  ['HTMLStyleElement', 'style'],\n  ['HTMLTableElement', 'table'],\n  ['HTMLTableSectionElement', 'tbody'],\n  ['HTMLTableCellElement', 'td'],\n  ['HTMLTemplateElement', 'template'],\n  ['HTMLTextAreaElement', 'textarea'],\n  ['HTMLTimeElement', 'time'],\n  ['HTMLTitleElement', 'title'],\n  ['HTMLTableRowElement', 'tr'],\n  ['HTMLTrackElement', 'track'],\n  ['HTMLUListElement', 'ul'],\n  ['HTMLVideoElement', 'video'],\n  ['HTMLHeadingElement', 'h1'],\n  ['HTMLBodyElement', 'body']\n];\n\nexport const DOM_EVENT_NAMES = ['click', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'contextmenu', 'keydown', 'keypress', 'keyup', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'scroll', 'resize', 'load', 'hashchange', 'connected'];\n\nexport const BROWSER_GLOBALS = ['window', 'document', 'Node', 'Element', 'HTMLElement', 'DocumentFragment', 'CustomEvent', 'customElements', 'NodeFilter', ...HTML_TAG_ENTRIES.map(([className]) => className)];\n"],
+  "mappings": "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",
   "names": []
 }