@dooboostore/simple-web-component 1.0.33 → 1.0.35

package/src/decorators/attribute.ts

@@ -1,7 +1,7 @@
-import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
-import {ensureInit, getElementConfig} from './elementDefine';
-import {SwcUtils} from '../utils/Utils';
-import {SpecialSelector, SwcQueryOptions} from '../types';
+import { ReflectUtils, FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
 import { ConvertUtils } from '@dooboostore/core-web';
 export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
@@ -25,6 +25,44 @@ const convertValue = (val: string | null, type: any): any => {
   return val;
 };
 
+export { convertValue };
+
+export const getAttributeValue = (inst: any, attrName: string, options?: AttributeFieldOptions & { selector?: string }): any => {
+  const conf = getElementConfig(inst);
+  const currentWin = inst._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+
+  // If selector is not provided, use inst itself
+  const targets = options?.selector ? resolveTargetEls(inst, options.selector, options, currentWin) : [inst];
+
+  const primaryTarget = targets[0];
+
+  if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function' && (primaryTarget as any).hasAttribute(attrName)) {
+    let domVal = (primaryTarget as any).getAttribute(attrName);
+
+    // 표현식 체크
+    const ae = new ActionExpression(domVal);
+    const expr = ae.getFirstExpression('callReturn');
+    if (expr) {
+      try {
+        const result = FunctionUtils.executeReturn({
+          script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
+          context: inst,
+          args: SwcUtils.getHelperAndHostSet(currentWin, inst)
+        });
+        return convertValue(result, options?.type);
+      } catch (e) {
+        console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+        return convertValue(domVal, options?.type);
+      }
+    }
+
+    return convertValue(domVal, options?.type);
+  }
+
+  // If no target found, return null
+  return null;
+};
+
 export const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
@@ -89,7 +127,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       metaList = [];
       ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);
     }
-    metaList.push({propertyKey, selector, options, privateKey});
+    metaList.push({ propertyKey, selector, options, privateKey });
 
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
       targets.forEach(it => {
@@ -111,45 +149,20 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       // delete target[propertyKey];
 
       // const defineTarget = target instanceof Function ? target : (target as any).constructor;
-      
+
       Object.defineProperty(target, propertyKey, {
         get(this: any) {
           const attrName = options.name || String(propertyKey);
-          const conf = getElementConfig(this);
-          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
-          const targetType = options.type || designType;
 
-          const targets = resolveTargetEls(this, selector, options, currentWin);
-          const primaryTarget = targets[0];
-
-          if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
-            if ((primaryTarget as any).hasAttribute(attrName)) {
-              let domVal = (primaryTarget as any).getAttribute(attrName);
-              
-              // 표현식 체크
-              const ae = new ActionExpression(domVal);
-              const expr = ae.getFirstExpression('call-return');
-              if (expr) {
-                try {
-                  const result = FunctionUtils.executeReturn({
-                    script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
-                    context: this,
-                    args: SwcUtils.getHelperAndHostSet(currentWin, this)
-                  });
-                  return convertValue(result, targetType);
-                } catch (e) {
-                  console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
-                  return convertValue(domVal, targetType);
-                }
-              }
-              
-              return convertValue(domVal, targetType);
-            }
-            return null;
-          }
+          // Merge designType fallback into options once
+          const mergedOptions = {
+            ...options,
+            selector,
+            type: options.type || designType
+          };
 
-          const data = convertValue(this[privateKey], targetType);
-          return data;
+          const result = getAttributeValue(this, attrName, mergedOptions);
+          return result !== null ? result : this[privateKey];
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;
@@ -158,7 +171,6 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
-
           // if (!this.__swc_connected) {
           //   this[privateKey] = nv;
           //   return;
@@ -170,9 +182,9 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
         enumerable: true,
         configurable: true
       });
-  } catch (err) {
-    console.error('[SWC] defineProperty error:', err);
-  }
+    } catch (err) {
+      console.error('[SWC] defineProperty error:', err);
+    }
   };
 }
 

package/src/decorators/changedAttributeHost.ts

@@ -1,35 +1,69 @@
-import {ReflectUtils} from '@dooboostore/core';
+import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
+export interface ChangedAttributeHostOptions {
+  type?: typeof Number | typeof Boolean | typeof String;
+  while?: 'connected';
+}
+
+export interface ChangedAttributeHostMetadata {
+  attributeName: string;
+  propertyKey: string | symbol;
+  options: ChangedAttributeHostOptions;
+}
+
+const convertValue = (val: any, type: any): any => {
+  if (val === null || val === undefined) return val;
+  if (type === Number) return Number(val);
+  if (type === Boolean) return val === 'false' || val === '0' ? false : true;
+  return val;
+};
+
 /**
  * @changedAttributeHost decorator - fires when any attribute on :host changes
  * Usage: @changedAttributeHost('data-product-id')
+ *        @changedAttributeHost('count', { type: Number })
  */
-export function changedAttributeHost(attributeName?: string): MethodDecorator {
+export function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): 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);
+    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, 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);
+    metaList.push({
+      attributeName: name,
+      propertyKey,
+      options
+    });
   };
 }
 
-export const getChangedAttributeMetadata = (target: any): Map<string, (string | symbol)[]> | undefined => {
+export const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | 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);
+export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+
+  const result = new Map<string, ChangedAttributeHostMetadata[]>();
+  metaList.forEach(meta => {
+    meta.forEach(item => {
+      if (!result.has(item.attributeName)) {
+        result.set(item.attributeName, []);
+      }
+      result.get(item.attributeName)!.push(item);
+    });
+  });
+  return result;
+};
+
+export const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {
+  return convertValue(val, type);
 };