@dooboostore/simple-web-component 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/SwcAppEngine.ts

@@ -77,6 +77,7 @@ export class SwcAppEngine {
 
 
       if (this._config.onStartedLazyDefineComponent) {
+        // console.log('-------->', this._config.onStartedLazyDefineComponent)
         await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))
       }
       if (this._config.onEngineStarted) {

package/src/decorators/applyAttribute.ts

@@ -1,161 +1,346 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
+import {ensureInit, getElementConfig} from './elementDefine';
+import {SwcUtils} from '../utils/Utils';
+import {SwcQueryOptions, HelperHostSet} from '../types';
+import {ConvertUtils} from '@dooboostore/core-web';
 
-export type AttributeAction = 'set' | 'update' | 'remove';
+// ============================================
+// Types & Interfaces
+// ============================================
 
-export interface AttributeApplyOptions extends SwcQueryOptions {
+export interface AttributeOptions extends SwcQueryOptions {
   name?: string;
-  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+  type?: typeof Number | typeof Boolean | typeof String;
+  filter?: (target: HTMLElement, value: any, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
 }
 
-export interface AttributeApplyMetadata {
+export interface AttributeMetadata {
   propertyKey: string | symbol;
   selector: string;
-  action: AttributeAction;
-  options: AttributeApplyOptions;
+  targetAttributeName: string;
+  options: AttributeOptions;
+  type: 'property' | 'method';
 }
 
-export const ATTRIBUTE_APPLY_METADATA_KEY = Symbol.for('simple-web-component:attribute-apply');
+export const ATTRIBUTE_METADATA_KEY = Symbol.for('simple-web-component:attribute');
 
-function createAttributeDecorator(action: AttributeAction) {
-  return (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-      const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_APPLY_METADATA_KEY, constructor) as Map<string | symbol, AttributeApplyMetadata>;
-      if (!metaList) {
-        metaList = new Map<string | symbol, AttributeApplyMetadata>();
-        ReflectUtils.defineMetadata(ATTRIBUTE_APPLY_METADATA_KEY, metaList, constructor);
+// ============================================
+// Utilities
+// ============================================
+
+const convertValue = (val: string | null, 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;
+};
+
+export {convertValue};
+
+export const getAttributeValue = (inst: any, attrName: string, options?: AttributeOptions & { 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 ? resolveAttributeTargets(inst, options.selector, options) : [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 (err) {
+        console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, err);
+        return convertValue(domVal, options?.type);
       }
+    }
 
-      let attributeName = typeof nameOrOptions === 'string' ? nameOrOptions : undefined;
-      let finalOptions = options;
-      
-      if (typeof nameOrOptions === 'object' && nameOrOptions !== null) {
-          finalOptions = nameOrOptions as AttributeApplyOptions;
+    return convertValue(domVal, options?.type);
+  }
+
+  // If no target found, return null
+  return null;
+};
+
+/**
+ * Resolve target elements based on selector and options
+ * Handles special selectors ($this, $host, etc.) and CSS selectors
+ * Returns HTMLElement[] for attribute operations
+ */
+export const resolveAttributeTargets = (inst: any, selector: string, options: AttributeOptions): HTMLElement[] => {
+  const conf = getElementConfig(inst);
+  const currentWin = conf.window;
+  const r = options.root || 'auto';
+  const results: HTMLElement[] = [];
+
+  const applyRoot = (target: any) => {
+    if (!target) return;
+    if (r === 'auto') {
+      results.push(target);
+    } else {
+      if (r === 'light' || r === 'all') results.push(target);
+      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);
+    }
+  };
+
+  if (selector === '$this' || !selector) {
+    applyRoot(inst);
+  } else {
+    const hostSet = SwcUtils.getHostSet(inst);
+    if (selector === '$host') applyRoot(hostSet.$host);
+    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+    else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+    else {
+      if (r === 'shadow') {
+        const found = inst.shadowRoot?.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'light') {
+        const found = inst.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'all') {
+        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+        const lMatch = inst.querySelectorAll(selector);
+        if (sMatch) results.push(...sMatch);
+        if (lMatch) results.push(...lMatch);
+      } else {
+        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        if (found) results.push(...found);
       }
+    }
+  }
+  return results;
+};
+
+/**
+ * @applyAttribute decorator - set/get element attributes
+ *
+ * Usage:
+ * - @applyAttribute('selector', 'attrName') - Set attribute with explicit name
+ * - @applyAttribute('selector') - Use property name as attribute name
+ * - @applyAttribute('selector', { name: 'attrName' }) - Set attribute via options
+ * - Return null to remove attribute
+ */
+export function applyAttribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    // ensureInit(target as any);
+
+    const constructor = target.constructor;
+    const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);
+    const metaType: 'property' | 'method' = descriptor && typeof descriptor.value === 'function' ? 'method' : 'property';
+
+    // Parse arguments
+    let finalOptions: AttributeOptions = {};
+    let targetAttributeName: string;
+
+    if (typeof targetAttributeNameOrOptions === 'string') {
+      // applyAttribute('selector', 'attrName', options?)
+      targetAttributeName = targetAttributeNameOrOptions;
+      finalOptions = options || {};
+    } else if (targetAttributeNameOrOptions) {
+      // applyAttribute('selector', options)
+      finalOptions = targetAttributeNameOrOptions;
+      targetAttributeName = finalOptions.name || String(propertyKey);
+    } else {
+      // applyAttribute('selector')
+      targetAttributeName = String(propertyKey);
+    }
+
+    // Store metadata
+    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor) as AttributeMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({
+      propertyKey,
+      selector,
+      targetAttributeName,
+      options: finalOptions,
+      type: metaType
+    });
+
+    // Helper: Apply resolved value to targets
+    const applyValueToTargets = (inst: any, resolvedValue: any) => {
+      const conf = getElementConfig(inst);
+      const currentWin = conf.window;
+      const targetEls = resolveAttributeTargets(inst, selector, finalOptions);
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+
+      targetEls.forEach(targetEl => {
+        // Apply filter if provided
+        if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: inst, helper: hostSet})) {
+          return;
+        }
 
-      metaList.set(propertyKey, { 
-        propertyKey, 
-        selector, 
-        action, 
-        options: { ...finalOptions, name: attributeName } 
+        if (resolvedValue === null) {
+          // Remove attribute if value is null
+          targetEl.removeAttribute(targetAttributeName);
+        } else if (resolvedValue !== undefined) {
+          // Set attribute
+          targetEl.setAttribute(targetAttributeName, resolvedValue === true ? '' : String(resolvedValue));
+        }
       });
 
+      return resolvedValue;
+    };
+
+    // Method decorator: wrap method to apply its return value to attributes
+    if (descriptor && typeof descriptor.value === 'function') {
       const original = descriptor.value;
       descriptor.value = function (...args: any[]) {
         ensureInit(this);
         const res = (original as any).apply(this, args);
 
-        const handleResult = (resolvedValue: any) => {
-          if (resolvedValue !== undefined) {
-            const win = (this as any).ownerDocument?.defaultView || window;
-            const host = this as unknown as HTMLElement;
-            const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-            const r = finalOptions.root || 'auto';
-            const targetEls: HTMLElement[] = [];
-
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-
-            if (selector === '$this' || !selector) applyRoot(host);
-            else if (selector === '$host') applyRoot(hostSet.$host);
-            else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-            else if (selector === '$appHost') applyRoot(hostSet.$appHost);
-            else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-            else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-            else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
-            else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
-            else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-            else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
-            else {
-              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-              if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-              }
-            }
-
-            targetEls.forEach(targetEl => {
-              if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
-                return;
-              }
-              const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
-
-              if (action === 'set' || action === 'update') {
-                if (attributeName) {
-                  // Case: @setAttribute(selector, 'name')
-                  if (resolvedRes === null || resolvedRes === undefined || resolvedRes === false) {
-                    targetEl.removeAttribute(attributeName);
-                  } else {
-                    targetEl.setAttribute(attributeName, resolvedRes === true ? '' : String(resolvedRes));
-                  }
-                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  // Case: @applyAttribute(selector) with Object return
-                  Object.entries(resolvedRes as any).forEach(([attr, val]) => {
-                    const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
-                    if (finalVal === null || finalVal === undefined || finalVal === false) {
-                      targetEl.removeAttribute(attr);
-                    } else {
-                      targetEl.setAttribute(attr, finalVal === true ? '' : String(finalVal));
-                    }
-                  });
-                }
-              } else if (action === 'remove') {
-                if (attributeName) {
-                  targetEl.removeAttribute(attributeName);
-                } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-                  Object.entries(resolvedRes as any).forEach(([attr, val]) => {
-                    const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
-                    if (shouldRemove) targetEl.removeAttribute(attr);
-                  });
-                } else {
-                  const attrs = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
-                  attrs.forEach(a => targetEl.removeAttribute(String(a)));
-                }
-              }
-            });
-          }
-          return resolvedValue;
-        };
-
         if (res instanceof Promise) {
-          return res.then(handleResult);
+          return res.then((v: any) => {
+            applyValueToTargets(this, v);
+            return v;
+          });
         } else {
-          return handleResult(res);
+          applyValueToTargets(this, res);
+          return res;
         }
       };
-      return descriptor;
-    };
+      return;
+    }
+
+    // Property decorator: define getter/setter to proxy to element attributes
+    Object.defineProperty(target, propertyKey, {
+      configurable: true,
+      enumerable: true,
+      get(this: any) {
+        ensureInit(this);
+        const mergedOptions = {...finalOptions, selector, type: finalOptions.type || designType};
+        return getAttributeValue(this, targetAttributeName, mergedOptions);
+      },
+      set(this: any, value: any) {
+        ensureInit(this);
+
+        if (value instanceof Promise) {
+          value.then((v: any) => applyValueToTargets(this, v)).catch(() => { /* swallow */
+          });
+        } else {
+          applyValueToTargets(this, value);
+        }
+      }
+    });
   };
 }
 
-export function applyAttribute(selector: string, action: AttributeAction = 'update', options: AttributeApplyOptions = {}): MethodDecorator {
-  return createAttributeDecorator(action)(selector, options);
+// ============================================
+// Convenience Aliases
+// ============================================
+
+/**
+ * @attribute - Alias for @applyAttribute
+ */
+export function attribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function attribute(selector: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function attribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
+  return applyAttribute(selector, targetAttributeNameOrOptions as any, options);
 }
 
-export const setAttribute = (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('set')(selector, nameOrOptions, options);
-export const updateAttribute = (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('update')(selector, nameOrOptions, options);
-export const removeAttribute = (selector: string, nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('remove')(selector, nameOrOptions, options);
+/**
+ * @attributeThis - Apply attribute on $this element
+ * Can be used as: @attributeThis or @attributeThis('attrName') or @attributeThis({ name: 'attrName' })
+ */
+export function attributeThis(target: Object, propertyKey: string | symbol): void;
+export function attributeThis(targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function attributeThis(options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function attributeThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
+  // Direct decorator usage: @attributeThis
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
+    typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol') {
+    // Called as @attributeThis (target, propertyKey)
+    return applyAttribute('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+  }
 
-// This versions
-export function applyAttributeThis(action: AttributeAction = 'update', options: AttributeApplyOptions = {}): MethodDecorator {
-  return createAttributeDecorator(action)('$this', options);
+  // Called with parameters
+  if (typeof targetOrOptions === 'string') {
+    // @attributeThis('attrName', options?)
+    return applyAttribute('$this', targetOrOptions, propertyKeyOrOptions);
+  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
+    // @attributeThis({ name: 'attrName' })
+    return applyAttribute('$this', undefined as any, targetOrOptions);
+  } else {
+    // @attributeThis() or @attributeThis
+    return applyAttribute('$this', undefined as any, {});
+  }
 }
-export const setAttributeThis = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('set')('$this', nameOrOptions, options);
-export const updateAttributeThis = (nameOrOptions: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('update')('$this', nameOrOptions, options);
-export const removeAttributeThis = (nameOrOptions?: string | AttributeApplyOptions, options: AttributeApplyOptions = {}) => createAttributeDecorator('remove')('$this', nameOrOptions, options);
-
-export const findAllAttributeApplyMetadata = (target: any): Map<string | symbol, AttributeApplyMetadata> => {
-  const result = new Map<string | symbol, AttributeApplyMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, AttributeApplyMetadata>>(ATTRIBUTE_APPLY_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
+
+/**
+ * @setAttribute - Alias for @applyAttribute (method-decorator semantics)
+ */
+export function setAttribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(selector: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator {
+  return applyAttribute(selector, targetAttributeNameOrOptions as any, options) as MethodDecorator;
+}
+
+/**
+ * @setAttributeThis - Set attribute on $this element
+ * Can be used as: @setAttributeThis or @setAttributeThis('attrName') or @setAttributeThis({ name: 'attrName' })
+ */
+export function setAttributeThis(target: Object, propertyKey: string | symbol): void;
+export function setAttributeThis(targetAttributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttributeThis(options?: AttributeOptions): MethodDecorator;
+export function setAttributeThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
+  // Direct decorator usage: @setAttributeThis
+  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
+    (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
+    // Called as @setAttributeThis (target, propertyKey)
+    return applyAttribute('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+  }
+
+  // Called with parameters
+  if (typeof targetOrOptions === 'string') {
+    // @setAttributeThis('attrName', options?)
+    return applyAttribute('$this', targetOrOptions, propertyKeyOrOptions) as MethodDecorator;
+  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
+    // @setAttributeThis({ name: 'attrName' })
+    return applyAttribute('$this', undefined as any, targetOrOptions) as MethodDecorator;
+  } else {
+    // @setAttributeThis() or @setAttributeThis
+    return applyAttribute('$this', undefined as any, {}) as MethodDecorator;
+  }
+}
+
+// ============================================
+// Metadata Helpers
+// ============================================
+
+export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
+  const actualTarget = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, actualTarget).flat();
+};
+
+// Backward compatibility alias
+export const findAllAttributeApplyMetadata = (target: any): Map<string | symbol, AttributeMetadata> => {
+  const result = new Map<string | symbol, AttributeMetadata>();
+  findAllAttributeMetadata(target).forEach(meta => {
+    result.set(meta.propertyKey, meta);
   });
   return result;
 };
+
+
+export default applyAttribute;