@dooboostore/simple-web-component 1.0.35 → 1.0.37

package/src/decorators/lifecycles.ts

@@ -8,21 +8,76 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
+export const ON_CONNECTED_INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
 export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
-export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
+export const ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for('simple-web-component:on-completed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 export interface InnerHtmlOptions {
+  ssrFirst?: boolean;
   replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
 }
-
 export interface InnerHtmlMetadata {
   propertyKey: string | symbol;
   options: InnerHtmlOptions;
 }
 
+export interface OnConnectedOptions {
+  ssrFirst?: boolean;
+}
+export interface OnConnectedMetadata {
+  propertyKey: string | symbol;
+  options: OnConnectedOptions;
+}
+
+
+export function onConnectedBefore(options: OnConnectedOptions): MethodDecorator;
+export function onConnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedBefore(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    return decorator({}, arg1!, arg2);
+  }
+
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as OnConnectedOptions) || {}, target, propertyKey);
+  };
+}
+
+export function onConnectedAfter(options: OnConnectedOptions): MethodDecorator;
+export function onConnectedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_AFTER_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    return decorator({}, arg1!, arg2);
+  }
+
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as OnConnectedOptions) || {}, target, propertyKey);
+  };
+}
+
+
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
@@ -36,8 +91,8 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
 }
 
 export const onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
+// export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
+// export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
 export const onConnected = onConnectedAfter;
 
 export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
@@ -50,7 +105,8 @@ export const onAdopted = onAdoptedAfter;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
-// export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+export const onConnectedCompleted = createLifecycleDecorator(ON_CONNECTED_COMPLETED_METADATA_KEY);
 
 /**
  * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
@@ -60,10 +116,10 @@ export function onConnectedInnerHtml(target: Object, propertyKey: string | symbo
 export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
+    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(ON_CONNECTED_INNER_HTML_METADATA_KEY, constructor);
     if (!list) {
       list = [];
-      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+      ReflectUtils.defineMetadata(ON_CONNECTED_INNER_HTML_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, options });
   };
@@ -80,12 +136,21 @@ export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: st
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
-export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
+// export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
+export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] => {
   const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
-  return results.length > 0 ? (results as unknown as T) : undefined;
+  return results;
 };
 
-export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
+export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_CONNECTED_INNER_HTML_METADATA_KEY, constructor) ?? [];
+};
+export const getOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+};
+export const getOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+  return ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
 };

package/src/decorators/query.ts

@@ -30,8 +30,6 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
     }
     queries.push({ propertyKey, selector: selectorOrTarget, options });
 
-    // const propertyType = Reflect.getMetadata("design:type", targetObj, propertyKey);
-    // console.log(`Property ${String(propertyKey)} type is:`, propertyType.name);
     Object.defineProperty(targetObj, propertyKey, {
       get(this: HTMLElement) {
         ensureInit(this);
@@ -43,25 +41,26 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
           if (r === 'auto') return t.shadowRoot || t;
           if (r === 'shadow') return t.shadowRoot;
           if (r === 'light') return t;
-          if (r === 'all') return t.shadowRoot || t; // query only returns one, so shadow preferred
+          if (r === 'all') return t.shadowRoot || t; 
           return t;
         };
 
         // --- Special Selectors: HostSet ---
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ':parentHost') return applyRoot(hostSet.$parentHost);
-        if (selector === ':appHost') return applyRoot(hostSet.$appHost);
-        if (selector === ':firstHost') return applyRoot(hostSet.$firstHost);
-        if (selector === ':lastHost') return applyRoot(hostSet.$lastHost);
-        if (selector === ':firstAppHost') return applyRoot(hostSet.$firstAppHost);
-        if (selector === ':lastAppHost') return applyRoot(hostSet.$lastAppHost);
+        if (selector === '$this') return applyRoot(this);
+        if (selector === '$host') return applyRoot(hostSet.$host);
+        if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+        if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
+        if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
 
         // --- Special Selectors: Env ---
         const config = getElementConfig(this);
         const win = config?.window || window;
-        if (selector === ':window') return win;
-        if (selector === ':document') return win.document;
-        if (selector === ':host') return applyRoot(this);
+        if (selector === '$window') return win;
+        if (selector === '$document') return win.document;
 
         // --- Standard Selectors ---
         if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
@@ -76,7 +75,7 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
         ensureInit(this);
         if (nv === null || nv === undefined) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(':') && selector !== ':host') return;
+          if (selector.startsWith('$') && selector !== '$this') return;
 
           const r = options.root || 'auto';
           const targets: Element[] = [];
@@ -103,157 +102,85 @@ export function query(selectorOrTarget: string, options: any = {}): PropertyDeco
 }
 
 /**
- * @queryHost decorator - simplified version of @query for :host selector
- * Usage: @queryHost testzzs: HTMLElement | undefined;
- * Usage: @queryHost() testzzs: HTMLElement | undefined;
- * Usage: @queryHost({ root: 'shadow' }) testzzs: HTMLElement | undefined;
+ * @queryThis decorator - simplified version of @query for $this selector
  */
-export function queryHost(target: Object, propertyKey: string | symbol): void;
-export function queryHost(): PropertyDecorator;
-export function queryHost(options: SwcQueryOptions): PropertyDecorator;
-export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  // Direct decorator usage: @queryHost (no parentheses)
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':host', {})(targetOrOptions, propertyKey);
-  }
-
-  // @queryHost() or @queryHost(options)
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':host', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query(':host', {});
-  }
-}
-
-/**
- * @host - Alias for @queryHost decorator
- * Usage: @host element: HTMLElement | undefined;
- * Usage: @host() element: HTMLElement | undefined;
- * Usage: @host({ root: 'shadow' }) element: HTMLElement | undefined;
- */
-export const host = queryHost;
-
-/**
- * @parentHost - Query :parentHost (Direct parent SWC component)
- * Usage: @parentHost parent: HTMLElement | undefined;
- * Usage: @parentHost() parent: HTMLElement | undefined;
- * Usage: @parentHost({ root: 'shadow' }) parent: HTMLElement | undefined;
- */
-export function parentHost(target: Object, propertyKey: string | symbol): void;
-export function parentHost(): PropertyDecorator;
-export function parentHost(options: SwcQueryOptions): PropertyDecorator;
-export function parentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+export function queryThis(target: Object, propertyKey: string | symbol): void;
+export function queryThis(): PropertyDecorator;
+export function queryThis(options: SwcQueryOptions): PropertyDecorator;
+export function queryThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':parentHost', {})(targetOrOptions, propertyKey);
+    return query('$this', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':parentHost', targetOrOptions as SwcQueryOptions);
+    return query('$this', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':parentHost', {});
+    return query('$this', {});
   }
 }
 
-/**
- * @appHost - Query :appHost (Nearest <swc-app>)
- * Usage: @appHost app: SwcAppInterface | undefined;
- * Usage: @appHost() app: SwcAppInterface | undefined;
- * Usage: @appHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
- */
-export function appHost(target: Object, propertyKey: string | symbol): void;
-export function appHost(): PropertyDecorator;
-export function appHost(options: SwcQueryOptions): PropertyDecorator;
-export function appHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':appHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':appHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query(':appHost', {});
-  }
-}
 
-/**
- * @firstHost - Query :firstHost (First component in hierarchy)
- * Usage: @firstHost first: HTMLElement | undefined;
- * Usage: @firstHost() first: HTMLElement | undefined;
- * Usage: @firstHost({ root: 'shadow' }) first: HTMLElement | undefined;
- */
-export function firstHost(target: Object, propertyKey: string | symbol): void;
-export function firstHost(): PropertyDecorator;
-export function firstHost(options: SwcQueryOptions): PropertyDecorator;
-export function firstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+export function queryWindow(target: Object, propertyKey: string | symbol): void;
+export function queryWindow(): PropertyDecorator;
+export function queryWindow(options: SwcQueryOptions): PropertyDecorator;
+export function queryWindow(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':firstHost', {})(targetOrOptions, propertyKey);
+    return query('$window', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':firstHost', targetOrOptions as SwcQueryOptions);
+    return query('$window', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':firstHost', {});
+    return query('$window', {});
   }
 }
 
-/**
- * @lastHost - Query :lastHost (Last component in hierarchy)
- * Usage: @lastHost last: HTMLElement | undefined;
- * Usage: @lastHost() last: HTMLElement | undefined;
- * Usage: @lastHost({ root: 'shadow' }) last: HTMLElement | undefined;
- */
-export function lastHost(target: Object, propertyKey: string | symbol): void;
-export function lastHost(): PropertyDecorator;
-export function lastHost(options: SwcQueryOptions): PropertyDecorator;
-export function lastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+export function queryDocument(target: Object, propertyKey: string | symbol): void;
+export function queryDocument(): PropertyDecorator;
+export function queryDocument(options: SwcQueryOptions): PropertyDecorator;
+export function queryDocument(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':lastHost', {})(targetOrOptions, propertyKey);
+    return query('$document', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':lastHost', targetOrOptions as SwcQueryOptions);
+    return query('$document', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':lastHost', {});
+    return query('$document', {});
   }
 }
-
 /**
- * @firstAppHost - Query :firstAppHost (First <swc-app> in hierarchy)
- * Usage: @firstAppHost app: SwcAppInterface | undefined;
- * Usage: @firstAppHost() app: SwcAppInterface | undefined;
- * Usage: @firstAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ * @host - Query $host (Direct parent SWC component)
  */
-export function firstAppHost(target: Object, propertyKey: string | symbol): void;
-export function firstAppHost(): PropertyDecorator;
-export function firstAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function firstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+export function queryHost(target: Object, propertyKey: string | symbol): void;
+export function queryHost(): PropertyDecorator;
+export function queryHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':firstAppHost', {})(targetOrOptions, propertyKey);
+    return query('$host', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':firstAppHost', targetOrOptions as SwcQueryOptions);
+    return query('$host', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':firstAppHost', {});
+    return query('$host', {});
   }
 }
 
 /**
- * @lastAppHost - Query :lastAppHost (Last <swc-app> in hierarchy)
- * Usage: @lastAppHost app: SwcAppInterface | undefined;
- * Usage: @lastAppHost() app: SwcAppInterface | undefined;
- * Usage: @lastAppHost({ root: 'shadow' }) app: SwcAppInterface | undefined;
+ * @appHost - Query $appHost (Nearest <swc-app>)
  */
-export function lastAppHost(target: Object, propertyKey: string | symbol): void;
-export function lastAppHost(): PropertyDecorator;
-export function lastAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function lastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
+export function queryAppHost(target: Object, propertyKey: string | symbol): void;
+export function queryAppHost(): PropertyDecorator;
+export function queryAppHost(options: SwcQueryOptions): PropertyDecorator;
+export function queryAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query(':lastAppHost', {})(targetOrOptions, propertyKey);
+    return query('$appHost', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query(':lastAppHost', targetOrOptions as SwcQueryOptions);
+    return query('$appHost', targetOrOptions as SwcQueryOptions);
   } else {
-    return query(':lastAppHost', {});
+    return query('$appHost', {});
   }
 }
 
 export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
-};
+};

package/src/decorators/queryAll.ts

@@ -56,15 +56,22 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
 
         // --- Special Selectors: HostSet ---
         const hostSet = SwcUtils.getHostSet(this);
-        if (selector === ':hosts') return applyRoot(hostSet.$hosts);
-        if (selector === ':appHosts') return applyRoot(hostSet.$appHosts);
+        if (selector === '$hosts') return applyRoot(hostSet.$hosts);
+        if (selector === '$appHosts') return applyRoot(hostSet.$appHosts);
+        if (selector === '$host') return applyRoot(hostSet.$host);
+        if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+        if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+        if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+        if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+        if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
+        if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
 
         // --- Special Selectors: Env ---
         const config = getElementConfig(this);
         const win = config?.window || window;
-        if (selector === ':window') return [win];
-        if (selector === ':document') return [win.document];
-        if (selector === ':host') return applyRoot(this);
+        if (selector === '$window') return [win];
+        if (selector === '$document') return [win.document];
+        if (selector === '$this') return applyRoot(this);
 
         // --- Standard Selectors ---
         if (r === 'shadow') return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
@@ -81,7 +88,7 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
         ensureInit(this);
         if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
           const selector = selectorOrTarget;
-          if (selector.startsWith(':') && selector !== ':host') return;
+          if (selector.startsWith('$') && selector !== '$this') return;
 
           const r = options.root || 'auto';
           let targets: (Element | Node)[] = [];
@@ -102,164 +109,60 @@ export function queryAll(selectorOrTarget: string, options: any = {}): PropertyD
     });
   };
 }
+
 /**
- * @hostQueryAll decorator - simplified version of @queryAll for :host selector
- * Usage: @hostQueryAll()
- * Usage: @hostQueryAll({ root: 'shadow' })
- */
-/**
- * @queryAllHost decorator - simplified version of @queryAll for :host selector
- * Usage: @queryAllHost items: HTMLElement[];
- * Usage: @queryAllHost() items: HTMLElement[];
- * Usage: @queryAllHost({ root: 'shadow' }) items: HTMLElement[];
+ * @queryAllThis decorator - simplified version of @queryAll for $this selector
  */
-export function queryAllHost(target: Object, propertyKey: string | symbol): void;
-export function queryAllHost(): PropertyDecorator;
-export function queryAllHost(options: SwcQueryOptions): PropertyDecorator;
-export function queryAllHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  // Direct decorator usage: @queryAllHost (no parentheses)
+export function queryAllThis(target: Object, propertyKey: string | symbol): void;
+export function queryAllThis(): PropertyDecorator;
+export function queryAllThis(options: SwcQueryOptions): PropertyDecorator;
+export function queryAllThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':host', {})(targetOrOptions, propertyKey);
+    return queryAll('$this', {})(targetOrOptions, propertyKey);
   }
 
-  // @queryAllHost() or @queryAllHost(options)
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':host', targetOrOptions as SwcQueryOptions);
+    return queryAll('$this', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':host', {});
+    return queryAll('$this', {});
   }
 }
 
 /**
- * @allHost - Alias for @queryAllHost decorator
- * Usage: @allHost items: HTMLElement[];
- * Usage: @allHost() items: HTMLElement[];
- * Usage: @allHost({ root: 'shadow' }) items: HTMLElement[];
- */
-export const allHost = queryAllHost;
-/**
- * @allParentHost - Query all :parentHost (All parent SWC components)
- * Usage: @allParentHost parents: HTMLElement[];
- * Usage: @allParentHost() parents: HTMLElement[];
- * Usage: @allParentHost({ root: 'shadow' }) parents: HTMLElement[];
+ * @allParentHost - Query all parent SWC components
  */
 export function allParentHost(target: Object, propertyKey: string | symbol): void;
 export function allParentHost(): PropertyDecorator;
 export function allParentHost(options: SwcQueryOptions): PropertyDecorator;
 export function allParentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':parentHost', {})(targetOrOptions, propertyKey);
+    return queryAll('$host', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':parentHost', targetOrOptions as SwcQueryOptions);
+    return queryAll('$host', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':parentHost', {});
+    return queryAll('$host', {});
   }
 }
 
 /**
- * @allAppHost - Query all :appHost (All <swc-app> instances)
- * Usage: @allAppHost apps: SwcAppInterface[];
- * Usage: @allAppHost() apps: SwcAppInterface[];
- * Usage: @allAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
+ * @allAppHost - Query all $appHost (All <swc-app> instances)
  */
 export function allAppHost(target: Object, propertyKey: string | symbol): void;
 export function allAppHost(): PropertyDecorator;
 export function allAppHost(options: SwcQueryOptions): PropertyDecorator;
 export function allAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
   if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':appHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':appHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll(':appHost', {});
-  }
-}
-
-/**
- * @allFirstHost - Query all :firstHost (All first components in hierarchy)
- * Usage: @allFirstHost firsts: HTMLElement[];
- * Usage: @allFirstHost() firsts: HTMLElement[];
- * Usage: @allFirstHost({ root: 'shadow' }) firsts: HTMLElement[];
- */
-export function allFirstHost(target: Object, propertyKey: string | symbol): void;
-export function allFirstHost(): PropertyDecorator;
-export function allFirstHost(options: SwcQueryOptions): PropertyDecorator;
-export function allFirstHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':firstHost', {})(targetOrOptions, propertyKey);
+    return queryAll('$appHost', {})(targetOrOptions, propertyKey);
   }
   if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':firstHost', targetOrOptions as SwcQueryOptions);
+    return queryAll('$appHost', targetOrOptions as SwcQueryOptions);
   } else {
-    return queryAll(':firstHost', {});
+    return queryAll('$appHost', {});
   }
 }
 
-/**
- * @allLastHost - Query all :lastHost (All last components in hierarchy)
- * Usage: @allLastHost lasts: HTMLElement[];
- * Usage: @allLastHost() lasts: HTMLElement[];
- * Usage: @allLastHost({ root: 'shadow' }) lasts: HTMLElement[];
- */
-export function allLastHost(target: Object, propertyKey: string | symbol): void;
-export function allLastHost(): PropertyDecorator;
-export function allLastHost(options: SwcQueryOptions): PropertyDecorator;
-export function allLastHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':lastHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':lastHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll(':lastHost', {});
-  }
-}
-
-/**
- * @allFirstAppHost - Query all :firstAppHost (All first <swc-app> in hierarchy)
- * Usage: @allFirstAppHost apps: SwcAppInterface[];
- * Usage: @allFirstAppHost() apps: SwcAppInterface[];
- * Usage: @allFirstAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
- */
-export function allFirstAppHost(target: Object, propertyKey: string | symbol): void;
-export function allFirstAppHost(): PropertyDecorator;
-export function allFirstAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function allFirstAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':firstAppHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':firstAppHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll(':firstAppHost', {});
-  }
-}
-
-/**
- * @allLastAppHost - Query all :lastAppHost (All last <swc-app> in hierarchy)
- * Usage: @allLastAppHost apps: SwcAppInterface[];
- * Usage: @allLastAppHost() apps: SwcAppInterface[];
- * Usage: @allLastAppHost({ root: 'shadow' }) apps: SwcAppInterface[];
- */
-export function allLastAppHost(target: Object, propertyKey: string | symbol): void;
-export function allLastAppHost(): PropertyDecorator;
-export function allLastAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function allLastAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll(':lastAppHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll(':lastAppHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll(':lastAppHost', {});
-  }
-}
-
-
 export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
 };
-

package/src/decorators/setProperty.ts

@@ -56,15 +56,16 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
             targetEls.push(t);
           };
 
-          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 if (selector === ':host' || !selector) applyRoot(host);
+          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) {
@@ -106,6 +107,6 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
   };
 };
 
-export const setPropertyHost = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
-  return setProperty(':host', propertyNameOrOptions, options);
+export const setPropertyThis = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
+  return setProperty('$this', propertyNameOrOptions, options);
 };