@dooboostore/simple-web-component 1.0.48 → 1.0.50

package/src/decorators/applyStyle.ts

@@ -1,21 +1,28 @@
 import {ReflectUtils} from '@dooboostore/core';
 import {ensureInit} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
 
 export type StyleAction = 'set' | 'update' | 'remove';
 
-export interface StyleApplyOptions extends SwcQueryOptions {
+// 공통 옵션 — root 없음
+export interface StyleBaseOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
-  /**
-   * Custom key to extract value from return object.
-   * If not provided, uses STYLE_METADATA_KEY by default.
-   * Useful when multiple @applyStyle decorators are on the same method.
-   */
   valueKey?: symbol | string;
 }
 
-export type StyleSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+// 문자열 셀렉터 전용 — root 허용
+export type StyleQueryOptions = StyleBaseOptions & SwcQueryOptions;
+// 함수 셀렉터 전용 — root 금지
+export type StyleNonQueryOptions = StyleBaseOptions;
+// 내부 저장/해석용
+export type StyleApplyOptions = StyleQueryOptions;
+
+export type StyleFnSelector = SwcFnSelector;
+export type StyleSelector = SwcSelector;
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type StyleOptionsOf<S extends StyleSelector> = S extends string ? StyleQueryOptions : StyleNonQueryOptions;
 
 export interface StyleApplyMetadata {
   propertyKey: string | symbol;
@@ -47,6 +54,9 @@ const resolveSelector = (selector: StyleSelector, inst: any, win: Window): strin
     if (result === null) {
       return [];
     }
+    if (result instanceof win.Node) {
+      return [];
+    }
     return result as string;
   }
   return selector as string;
@@ -184,14 +194,15 @@ function createStyleDecorator(action: StyleAction) {
 }
 
 export function applyStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function applyStyle(selector: StyleSelector, action?: StyleAction, options?: StyleApplyOptions): MethodDecorator;
+export function applyStyle(selector: string, action?: StyleAction, options?: StyleQueryOptions): MethodDecorator;
+export function applyStyle(selector: StyleFnSelector, action?: StyleAction, options?: StyleNonQueryOptions): MethodDecorator;
 export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
   // Bare decorator: @applyStyle
-  if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
+  if (optionsOrDescriptor !== undefined && typeof selectorOrTarget !== 'string' && typeof selectorOrTarget !== 'function' && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
     return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, actionOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     const action = (typeof actionOrPropertyKey === 'string' ? actionOrPropertyKey : 'update') as StyleAction;
     const options = (typeof actionOrPropertyKey === 'object' ? actionOrPropertyKey : optionsOrDescriptor) as StyleApplyOptions | undefined;
     return createStyleDecorator(action)(selectorOrTarget, options);
@@ -203,14 +214,15 @@ export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, op
 }
 
 export function setStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function setStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function setStyle(selector: string, options?: StyleQueryOptions): MethodDecorator;
+export function setStyle(selector: StyleFnSelector, options?: StyleNonQueryOptions): MethodDecorator;
 export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @setStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
     return createStyleDecorator('set')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createStyleDecorator('set')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -218,14 +230,15 @@ export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, des
 }
 
 export function updateStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function updateStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function updateStyle(selector: string, options?: StyleQueryOptions): MethodDecorator;
+export function updateStyle(selector: StyleFnSelector, options?: StyleNonQueryOptions): MethodDecorator;
 export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @updateStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
     return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createStyleDecorator('update')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
   }
   // Without selector (defaults to $this)
@@ -233,20 +246,64 @@ export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any,
 }
 
 export function removeStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
-export function removeStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function removeStyle(selector: string, options?: StyleQueryOptions): MethodDecorator;
+export function removeStyle(selector: StyleFnSelector, options?: StyleNonQueryOptions): MethodDecorator;
 export function removeStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
   // Bare decorator: @removeStyle
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
     return createStyleDecorator('remove')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return createStyleDecorator('remove')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
   }
   // Without selector (defaults to $this)
   return createStyleDecorator('remove')('$this', selectorOrTarget as StyleApplyOptions);
 }
 
+// ─── Aliases ───
+export const style = applyStyle;
+
+// ─── 편의 헬퍼 (selector/root 생략) ───
+
+export function styleThis(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator;
+export function styleThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function styleThis(actionOrTarget?: StyleAction | Object, optionsOrPropertyKey?: StyleQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyStyle('$this', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyStyle('$this', actionOrTarget as any, optionsOrPropertyKey as StyleQueryOptions);
+}
+export function styleAppHost(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator;
+export function styleAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function styleAppHost(actionOrTarget?: StyleAction | Object, optionsOrPropertyKey?: StyleQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyStyle('$appHost', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyStyle('$appHost', actionOrTarget as any, optionsOrPropertyKey as StyleQueryOptions);
+}
+export function styleLight(selector: string, action?: StyleAction, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleLight(selector: string, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleLight(selector: string, actionOrOptions?: StyleAction | Omit<StyleQueryOptions, 'root'>, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as StyleAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<StyleQueryOptions, 'root'> | undefined;
+  return applyStyle(selector, action, {...opts ?? {}, root: 'light'});
+}
+export function styleShadow(selector: string, action?: StyleAction, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleShadow(selector: string, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleShadow(selector: string, actionOrOptions?: StyleAction | Omit<StyleQueryOptions, 'root'>, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as StyleAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<StyleQueryOptions, 'root'> | undefined;
+  return applyStyle(selector, action, {...opts ?? {}, root: 'shadow'});
+}
+export function styleAll(selector: string, action?: StyleAction, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleAll(selector: string, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
+export function styleAll(selector: string, actionOrOptions?: StyleAction | Omit<StyleQueryOptions, 'root'>, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator {
+  const action = (typeof actionOrOptions === 'string' ? actionOrOptions : undefined) as StyleAction | undefined;
+  const opts = (typeof actionOrOptions === 'object' ? actionOrOptions : options) as Omit<StyleQueryOptions, 'root'> | undefined;
+  return applyStyle(selector, action, {...opts ?? {}, root: 'all'});
+}
+
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {
   const result = new Map<string | symbol, StyleApplyMetadata>();
   const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleApplyMetadata>>(STYLE_METADATA_KEY, target);

package/src/decorators/changedAttribute.ts

@@ -20,24 +20,39 @@ const convertValue = (val: any, type: any): any => {
   return val;
 };
 
+const applyChangedAttribute = (attributeName: string | undefined, options: ChangedAttributeThisOptions, target: Object, propertyKey: string | symbol): void => {
+  const constructor = target.constructor;
+  let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
+  if (!metaList) {
+    metaList = [];
+    ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
+  }
+
+  const name = attributeName || String(propertyKey);
+  metaList.push({
+    attributeName: name,
+    propertyKey,
+    options
+  });
+};
+
+export function changedAttribute(attributeName?: string, options?: ChangedAttributeThisOptions): MethodDecorator;
+export function changedAttribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 /**
- * @changedAttributeThis decorator - fires when any attribute on $this changes
+ * @changedAttributeThis decorator - fires when any attribute on $this changes.
+ * 옵션 없이 `@changedAttribute` 그대로 붙여도 되고, `@changedAttribute(...)`처럼 이름/옵션을 줄 수도 있다.
  */
-export function changedAttribute(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
+export function changedAttribute(attributeNameOrTarget?: string | Object, optionsOrPropertyKey?: ChangedAttributeThisOptions | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    // 옵션 없이: @changedAttribute
+    applyChangedAttribute(undefined, {}, attributeNameOrTarget as Object, optionsOrPropertyKey);
+    return;
+  }
+  // 옵션과 함께: @changedAttribute() / @changedAttribute('name', options?)
+  const attributeName = attributeNameOrTarget as string | undefined;
+  const options = (optionsOrPropertyKey as ChangedAttributeThisOptions) ?? {};
   return (target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
-    if (!metaList) {
-      metaList = [];
-      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
-    }
-
-    const name = attributeName || String(propertyKey);
-    metaList.push({
-      attributeName: name,
-      propertyKey,
-      options
-    });
+    applyChangedAttribute(attributeName, options, target, propertyKey);
   };
 }
 
@@ -65,3 +80,49 @@ export const findAllAttributeChangedMetadata = (target: any): Map<string, Change
 export const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {
   return convertValue(val, type);
 };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ChangedAttributeLifeCycler
+// ─────────────────────────────────────────────────────────────────────────────
+import { ElementDefineLifeCycler, HelperHostSet } from '../types';
+import { getAttributeValue } from './applyAttribute';
+
+export class ChangedAttributeLifeCycler implements ElementDefineLifeCycler {
+  private attrChangeMap: Map<string, ChangedAttributeThisMetadata[]> | null = null;
+
+  /** 클래스 메타데이터 기반 attrChangeMap 을 lazy 로드한다 (공유 시클러 캐시). */
+  private getAttrChangeMap(inst: any): Map<string, ChangedAttributeThisMetadata[]> {
+    if (!this.attrChangeMap) this.attrChangeMap = findAllAttributeChangedMetadata(inst);
+    return this.attrChangeMap;
+  }
+
+  /** observedAttributes 에 포함할 attribute 이름 목록 */
+  getObservedAttributeNames(inst: any): string[] {
+    return Array.from(this.getAttrChangeMap(inst).keys());
+  }
+
+  onConnected(helperHostSet: HelperHostSet): void {
+    const inst = helperHostSet.$this;
+
+    // while:'connected' 옵션 — connected 시점 현재 값으로 초기 실행
+    for (const [name, metaList] of this.getAttrChangeMap(inst)) {
+      for (const meta of metaList) {
+        if (meta.options.while === 'connected') {
+          const val = getAttributeValue(inst, name, { type: meta.options.type });
+          if (val !== null) inst[meta.propertyKey](val, null, name, helperHostSet);
+        }
+      }
+    }
+  }
+
+  /** attributeChangedCallback 에서 elementDefine 이 직접 호출 */
+  onAttributeChanged(helperHostSet: HelperHostSet, name: string, old: string | null, newVal: any): void {
+    const inst = helperHostSet.$this;
+    const metaList = this.getAttrChangeMap(inst).get(name);
+    if (!metaList) return;
+    for (const meta of metaList) {
+      if (meta.options.while === 'connected' && !inst.__swc_connected) continue;
+      inst[meta.propertyKey](convertAttributeValue(newVal, meta.options.type), old, name, helperHostSet);
+    }
+  }
+}