@dooboostore/simple-web-component 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -22,7 +22,7 @@
   "bugs": {
     "url": "https://github.com/dooboostore-develop/packages/issues"
   },
-  "homepage": "https://github.com/dooboostore-develop/packages#readme",
+  "homepage": "https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component",
   "keywords": [
     "front",
     "web-components",
@@ -80,8 +80,8 @@
     "esbuild": "^0.23.0",
     "reflect-metadata": "^0.2.2",
     "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9"
+    "@dooboostore/core-web": "1.0.9",
+    "@dooboostore/core-node": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -1,12 +1,15 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface AddEventListenerOptions extends EventListenerOptions {
-  selector?: string;
-  eventName: string;
-  useShadow?: boolean;
+  query?: string;
+  type: string;
+  root?: 'light' | 'shadow' | 'all' | 'auto';
   capture?: boolean;
   once?: boolean;
   passive?: boolean;
+  stopPropagation?: boolean;
+  stopImmediatePropagation?: boolean;
+  preventDefault?: boolean;
 }
 
 export interface AddEventListenerMetadata {
@@ -16,9 +19,12 @@ export interface AddEventListenerMetadata {
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');
 
-export const addEventListener = (options: AddEventListenerOptions): MethodDecorator => {
+export function addEventListener(type: string, query?: string): MethodDecorator;
+export function addEventListener(options: AddEventListenerOptions): MethodDecorator;
+export function addEventListener(arg1: string | AddEventListenerOptions, arg2?: string): 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) {
@@ -27,7 +33,7 @@ export const addEventListener = (options: AddEventListenerOptions): MethodDecora
     }
     listeners.push({ options, propertyKey });
   };
-};
+}
 
 export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/attribute.ts

@@ -0,0 +1,77 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface AttributeOptions {
+  name?: string;
+  type?: any; // String, Number, Boolean, Object
+  disableReflect?: boolean; // Default is false (reflect is enabled by default)
+}
+
+export interface AttributeMetadata {
+  propertyKey: string | symbol;
+  options: AttributeOptions;
+}
+
+export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+
+export function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};
+
+    if (!options.name) options.name = String(propertyKey);
+    if (!options.type) options.type = String;
+    if (options.disableReflect === undefined) options.disableReflect = false;
+
+    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+
+    // Define getter and setter for the property
+    const internalKey = Symbol(String(propertyKey));
+    Object.defineProperty(target, propertyKey, {
+      get(this: any) {
+        return this[internalKey];
+      },
+      set(this: any, val: any) {
+        const oldVal = this[internalKey];
+        if (oldVal === val) return;
+
+        // Type conversion
+        let convertedVal = val;
+        if (options.type === Number) convertedVal = Number(val);
+        else if (options.type === Boolean) convertedVal = Boolean(val);
+        else if (options.type === Object && typeof val === 'string') {
+          try {
+            convertedVal = JSON.parse(val);
+          } catch (e) {
+            convertedVal = val;
+          }
+        }
+
+        this[internalKey] = convertedVal;
+
+        // Reflection
+        if (!options.disableReflect && this.setAttribute) {
+          if (convertedVal === null || convertedVal === undefined || convertedVal === false) {
+            this.removeAttribute(options.name);
+          } else {
+            const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);
+            if (this.getAttribute(options.name) !== attrVal) {
+              this.setAttribute(options.name, attrVal);
+            }
+          }
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+
+export const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+};