@dooboostore/simple-web-component 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -81,9 +81,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/simple-boot": "1.0.53",
     "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/simple-boot": "1.0.53"
+    "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/config/config.ts

@@ -57,3 +57,5 @@ export const HTML_TAG_ENTRIES: [string, string][] = [
   ['HTMLHeadingElement', 'h1'],
   ['HTMLBodyElement', 'body']
 ];
+
+export 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'];

package/src/decorators/addEventListener.ts

@@ -1,8 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface AddEventListenerOptions extends EventListenerOptions {
-  query?: string;
-  type: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
   capture?: boolean;
   once?: boolean;
@@ -10,28 +8,33 @@ export interface AddEventListenerOptions extends EventListenerOptions {
   stopPropagation?: boolean;
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
+  delegate?: boolean;
 }
 
 export interface AddEventListenerMetadata {
+  selector: string;
+  type: string;
   options: AddEventListenerOptions;
   propertyKey: string | symbol;
 }
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');
 
-export function addEventListener(type: string, query?: string): MethodDecorator;
-export function addEventListener(options: AddEventListenerOptions): MethodDecorator;
-export function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): MethodDecorator {
+/**
+ * @addEventListener decorator to bind events to elements.
+ * Usage: @addEventListener('.btn', 'click') onClick() { ... }
+ * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }
+ */
+export function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
-    const options: AddEventListenerOptions = typeof arg1 === 'string' ? { type: arg1, query: arg2 } : arg1;
 
     let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ options, propertyKey });
+    listeners.push({ selector, type, options, propertyKey });
   };
 }
 

package/src/decorators/changedAttribute.ts

@@ -0,0 +1,31 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+
+export function changedAttribute(attributeName?: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as Map<string, (string | symbol)[]>;
+    if (!meta) {
+      meta = new Map<string, (string | symbol)[]>();
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+
+    const name = attributeName || String(propertyKey);
+    let methods = meta.get(name);
+    if (!methods) {
+      methods = [];
+      meta.set(name, methods);
+    }
+    if (!methods.includes(propertyKey)) methods.push(propertyKey);
+  };
+}
+
+export const getChangedAttributeMetadata = (target: any): Map<string, (string | symbol)[]> | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+};
+
+export const findAllAttributeChangedMetadata = (target: any): Map<string, (string | symbol)[]> => {
+  return ReflectUtils.findAllMapMetadata<string, string | symbol>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, target);
+};