@dooboostore/simple-web-component 1.0.37 → 1.0.38

package/src/decorators/elementDefine.ts

@@ -1,19 +1,20 @@
-import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
+import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
 import {getAddEventListenerMetadata} from './addEventListener';
-import {ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata, getOnConnectedBeforeMetadata, getOnConnectedAfterMetadata, ON_CONNECTED_COMPLETED_METADATA_KEY} from './lifecycles';
+import {findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
-import {findAllAttributeChangedMetadata, convertAttributeValue} from './changedAttributeThis';
+import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttributeThis';
 import {findAllAttributeApplyMetadata} from './applyAttribute';
 import {findAllAttributeMetadata, getAttributeValue} from './attribute';
 import {getQueryMetadata} from './query';
 import {getQueryAllMetadata} from './queryAll';
 import {SwcUtils} from '../utils/Utils';
-import {HTML_TAG_ENTRIES, DOM_EVENT_NAMES} from '../config/config';
+import {DOM_EVENT_NAMES, HTML_TAG_ENTRIES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
-import {InjectSituationType, HostSet, HelperHostSet, SwcAppInterface} from '../types';
-import {ConvertUtils, NodeSlot} from '@dooboostore/core-web';
-import {isSSR} from "../elements/SwcApp";
+import {HelperHostSet, HostSet, InjectSituationType} from '../types';
+import {ConvertUtils, ElementApply, NodeSlot} from '@dooboostore/core-web';
+import {isSSR} from "../elements/SwcAppMixin";
 import {findAllApplySlotMetadata} from "./applySlot";
+import {findAllStateMetadata} from "./state";
 
 // --- Core Interfaces & Types ---
 
@@ -39,11 +40,10 @@ export const getElementConfig = (target: any): ElementMetadata | undefined => {
 
 export const ensureInit = (inst: any) => { // HTMLElement
   if (!inst.__swc_initialized) {
-    inst._swcId = inst?.getAttribute?.('swc-use-ssr') ?? Math.random().toString(36).substring(2, 11);
+    inst._swcId = inst?.getAttribute?.('swc-use-ssr') ?? 's' + Math.random().toString(36).substring(2, 11).toLowerCase();
     inst._emitHandlers = new Map();
     inst._boundListeners = [];
     inst.__swc_initialized = true;
-
     // const attributeList = findAllQ(inst);
     // attributeList.forEach(meta => {
     //   delete (inst as any)[meta.propertyKey];
@@ -54,7 +54,7 @@ export const ensureInit = (inst: any) => { // HTMLElement
     // ╔════════════════════════════════════════════════════════════════════════════════╗
     // ║ decorator 필드의 own property 삭제                                              ║
     // ║                                                                                ║
-    // ║ 이유:                                                                          ║
+    // ║ 이유: own property가 있으면 prototype의 getter/setter는 절대 안 탄다                  ║
     // ║ 1. TypeScript는 초기값이 있는 필드를 constructor에서 own property로 생성       ║
     // ║    @attributeThis('id') myId: string = "default"  →  this.myId = "default"    ║
     // ║                                                                                ║
@@ -73,7 +73,11 @@ export const ensureInit = (inst: any) => { // HTMLElement
     // @attribute 필드의 own property 삭제 → getter/setter 작동
     const attributeList = findAllAttributeMetadata(target);
     attributeList.forEach(meta => {
+      const initUserData = (inst as any)[meta.propertyKey];
       delete (inst as any)[meta.propertyKey];
+      // undefined 이면은 외부 attribute string html을 리스팩한다
+      if (initUserData !== undefined)
+      (inst as any)[meta.propertyKey] = initUserData;
     });
 
     // @query 필드의 own property 삭제 → getter 작동
@@ -93,8 +97,16 @@ export const ensureInit = (inst: any) => { // HTMLElement
     }
     const slotAllList = findAllApplySlotMetadata(target);
     if (slotAllList) {
-      slotAllList.filter(it=>it.type === 'property').forEach(meta => {
+      slotAllList.filter(it => it.type === 'property').forEach(meta => {
+        delete (inst as any)[meta.propertyKey];
+      });
+    }
+    const stateAllList = findAllStateMetadata(target);
+    if (stateAllList) {
+      stateAllList.forEach(meta => {
+        const initUserData = (inst as any)[meta.propertyKey];
         delete (inst as any)[meta.propertyKey];
+        (inst as any)[meta.propertyKey] = initUserData;
       });
     }
 
@@ -111,9 +123,11 @@ export const ensureInit = (inst: any) => { // HTMLElement
   }
 };
 
+
+// 훔 이게맞나?? global로 관리하는게..훔... 왜이렇게 했을까..
 // --- Global Event Handling ---
 const globalDelegatedRoots = new WeakSet<Node>();
-
+// 여기에서 중복 호출안되게 잘막아준다 ..
 const handleGlobalSwcEvent = async (event: Event) => {
   if ((event as any).__swc_handled) return;
   const path = event.composedPath();
@@ -155,6 +169,28 @@ const setupPrototype = (proto: any, win: Window) => {
   if (proto.__swc_proto_setup) return;
   proto.__swc_proto_setup = true;
 
+
+  proto.createSlotString = function (id: string) {
+    return NodeSlot.slot(`${this._swcId}-${id}`);
+  }
+  proto.createEaHtml = function (id: string, script: string) {
+    return ElementApply.html(id, script);
+  }
+  proto.createEaText = function (id: string, script: string) {
+    return ElementApply.text(id, script);
+  }
+  proto.createEaAttribute = function (id: string, name: string, script: string) {
+    return ElementApply.attribute(id, name, script);
+  }
+  proto.createEaEvent = function (id: string, name: string, script: string) {
+    return ElementApply.event(id, name, script);
+  }
+  proto.createEaProperty = function (id: string, name: string, script: string) {
+    return ElementApply.property(id, name, script);
+  }
+
+  // swc-id-asdasdasdasd-click="  :value=""    {: value fsdfsdafsad :}       {html: aaa :}   {text: asdas :}
+
   proto._executeSwcScript = function (attrName: string, hostSet: HostSet, extraArgs: Record<string, any> = {}) {
     ensureInit(this);
     const script = this.getAttribute(attrName);
@@ -338,7 +374,7 @@ export const elementDefine =
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const bMethods = getOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const bMethods = findAllOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
           // console.log('beforeConnected', bMethods)
           if (bMethods) {
             for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
@@ -347,65 +383,68 @@ export const elementDefine =
 
           // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
           //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
-          const targetConnectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
-          const shadowMode = conf?.useShadow || targetConnectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
+          const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const shadowMode = conf?.useShadow || targetConnectedList.find(it => it.options.useShadow)?.options.useShadow;
+          // console.log('--------->', this.tagName, shadowMode && !this.shadowRoot)
           if (shadowMode && !this.shadowRoot) {
             const mode = shadowMode === true ? 'open' : shadowMode;
-            this.attachShadow({mode: mode as ShadowRootMode});
+            console.log('tagName=', this.tagName, 'mode', mode, this.shadowRoot);
+            // if (this.tagName!=='INDEX-ROUTER') {
+              this.attachShadow({mode: mode as ShadowRootMode});
+            // }
           }
 
-          if (targetConnectedInnerHtmlList.length > 0) {
-            let sContent = '',
-              lContent = '';
-            for (const meta of targetConnectedInnerHtmlList) {
+          const stateContext: any = {...helperHostSet};
+          findAllStateMetadata(this).forEach(it => {
+            stateContext[it.name] = this[it.propertyKey]
+          })
+
+          const shadowChildren: Node[] = [];
+          const lightChildren: Node[] = [];
+
+          console.log('targetConnectList', this.tagName, targetConnectedList.length)
+          if (targetConnectedList.length > 0) {
+            // let sContent = '',
+            //   lContent = '';
+            for (const meta of targetConnectedList) {
               // const res = (this as any)[meta.propertyKey]();
               let res = await (this as any)._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
-              const actionExpression = new ActionExpression(res, {
-                expression: {
-                  replace: {
-                    start: meta.options.replaceWrap?.start || '[[',
-                    end: meta.options.replaceWrap?.end || ']]'
-                  },
-                  callReturn: {
-                    start: meta.options.replaceWrap?.start || '[[=',
-                    end: meta.options.replaceWrap?.end || ']]'
-                  },
-                  call: {
-                    start: meta.options.replaceWrap?.start || '[[@',
-                    end: meta.options.replaceWrap?.end || ']]'
-                  }
-                }
-              });
-
-              actionExpression.getExpressions().filter(it => it.type === 'replace').forEach(it => {
-                actionExpression.replace(it, NodeSlot.slot(`${this._swcId}-${it.script}`));
-                // try {
-                //   const sr = FunctionUtils.executeReturn({script: it.script, context: this, args: helperHostSet});
-                //   actionExpression.replace(it, sr);
-                // } catch (e) {
-                //   console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
-                // }
-              });
-              res = actionExpression.getUnprocessedTemplate();
+              // res = SwcUtils.projectProcessHtml(this, res);
+              if (typeof res === 'string') {
+                const htmlTemplateElement = doc.createElement('template');
+                htmlTemplateElement.innerHTML = res;//SwcUtils.projectProcessHtml(this._swcId, res, doc);
+                res = htmlTemplateElement.content;
+              }
 
-              if (res !== undefined) {
-                if (meta.options.useShadow || conf?.useShadow) sContent += res;
-                else lContent += res;
+              if (res) {
+                const nodes = Array.isArray(res) ? res : [res];
+                if (meta.options.useShadow || conf?.useShadow) {
+                  shadowChildren.push(...nodes);
+                }else {
+                  lightChildren.push(...nodes);
+                }
               }
             }
             try {
               if (this.shadowRoot) {
-                this.shadowRoot.innerHTML = sContent;
+                const applyShadowChildren = SwcUtils.projectProcessHtml(this._swcId, shadowChildren, doc);
+                this.shadowRoot.replaceChildren(...applyShadowChildren)
               }
-              if (lContent) {
-                this.innerHTML = lContent;
+              if (lightChildren.length) {
+                const applyLightChildren = SwcUtils.projectProcessHtml(this._swcId, lightChildren, doc);
+                this.replaceChildren(...applyLightChildren)
               }
+
             } catch (e) {
               console.error('[ElementDefine] innerHTML setting error:', e);
             }
+            new ElementApply(this, {id: this._swcId}).apply({context: stateContext, bind: this});
+          } else {
+            new ElementApply(this, {id: this._swcId}).apply({exclude: {html: true, text: true, attribute: true}, context: stateContext, bind: this});
           }
 
-          const root = this.getRootNode();
+          // global delegate event
+          const root = this.getRootNode()
           if (!globalDelegatedRoots.has(root)) {
             DOM_EVENT_NAMES.forEach(type => {
               root.addEventListener(type, handleGlobalSwcEvent);
@@ -413,6 +452,7 @@ export const elementDefine =
             globalDelegatedRoots.add(root);
           }
 
+
           // Separate delegate and non-delegate listeners
           const delegateListeners: typeof addEventListenerList = [];
           const nonDelegateListeners: typeof addEventListenerList = [];
@@ -542,15 +582,13 @@ export const elementDefine =
                 await (this as any)[meta.propertyKey](event, {currentHostSet, $$matchedElement: event.currentTarget}, args);
               };
               t.addEventListener(type, handler, opts);
-              if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
-                (this as any)._boundListeners.push({target: t, type, handler, options: opts});
-              }
+              (this as any)._boundListeners.push({target: t, type, handler, options: opts});
             });
           });
 
           if (originalConnected) await (originalConnected.apply(this));
 
-          const aMethods = getOnConnectedAfterMetadata(this).filter(it => {
+          const aMethods = findAllOnConnectedAfterMetadata(this).filter(it => {
             return useSsr ? !it.options.ssrFirst : true;
           });
           // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
@@ -603,6 +641,20 @@ export const elementDefine =
           (this as any)._boundListeners = [];
         }
 
+        new ElementApply(this, {id: this._swcId}).removeAllEventListener();
+
+        // globalDelegatedRoots remove
+        // const roots = [this, this.getRootNode()];
+        // if (this.shadowRoot) {
+        //   roots.push(this.shadowRoot);
+        // }
+        // roots.forEach(root => {
+        //     DOM_EVENT_NAMES.forEach(type => {
+        //       root.removeEventListener(type, handleGlobalSwcEvent);
+        //     });
+        //   }
+        // )
+
         if (originalDisconnected) originalDisconnected.apply(this);
 
         const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);

package/src/decorators/emitCustomEvent.ts

@@ -1,5 +1,5 @@
 import {ReflectUtils} from '@dooboostore/core';
-import {SpecialSelector, SwcQueryOptions, HelperHostSet} from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 

package/src/decorators/index.ts

@@ -15,3 +15,5 @@ export * from './subscribeSwcAppRouteChangeWhileConnected';
 export * from './subscribeSwcAppMessageWhileConnected';
 export * from './publishSwcAppMessage';
 export * from './applySlot';
+export * from './state';
+

package/src/decorators/lifecycles.ts

@@ -8,7 +8,7 @@ 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_METADATA_KEY = Symbol.for('simple-web-component');
 export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
 export const ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for('simple-web-component:on-completed');
 
@@ -16,7 +16,7 @@ export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 export interface InnerHtmlOptions {
   ssrFirst?: boolean;
-  replaceWrap?:{ start: string, end:string},
+  // replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
 }
 export interface InnerHtmlMetadata {
@@ -93,7 +93,7 @@ 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 onConnected = onConnectedAfter;
+// export const onConnected = onConnectedAfter;
 
 export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
 export const onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -108,28 +108,52 @@ export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER
 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.
- */
-export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
-export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-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[]>(ON_CONNECTED_INNER_HTML_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(ON_CONNECTED_INNER_HTML_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
 
-  if (arg2) {
-    return decorator({}, arg1!, arg2);
+
+
+
+const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+  const constructor = target.constructor;
+  let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(ON_CONNECTED_METADATA_KEY, constructor);
+  if (!list) {
+    list = [];
+    ReflectUtils.defineMetadata(ON_CONNECTED_METADATA_KEY, list, constructor);
+  }
+  list.push({ propertyKey, options });
+};
+
+export function onConnectedShadowDom(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedShadowDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedShadowDom(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
+  // parameter option @decorator()
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator({...optionOrTarget??{}, useShadow: true}, target, propertyKey);
+  };
+}
 
+export function onConnectedLightDom(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedLightDom(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({useShadow: false}, optionOrTarget!, propertyKey);
+  }
+  // parameter option @decorator()
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator({...optionOrTarget??{}, useShadow: false}, target, propertyKey);
+  };
+}
+export function onConnected(options: InnerHtmlOptions): MethodDecorator;
+export function onConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({}, optionOrTarget!, propertyKey);
+  }
+  // parameter option @decorator()
   return (target: Object, propertyKey: string | symbol) => {
-    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
+    decorator((optionOrTarget as InnerHtmlOptions) || {}, target, propertyKey);
   };
 }
 
@@ -138,19 +162,19 @@ export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: st
  */
 // 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);
+  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target)??[];
   return results;
 };
 
-export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] => {
+export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_CONNECTED_INNER_HTML_METADATA_KEY, constructor) ?? [];
+  return ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
 };
-export const getOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
+export const findAllOnConnectedBeforeMetadata = (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[] => {
+export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
 };

package/src/decorators/publishSwcAppMessage.ts

@@ -1,6 +1,5 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { SwcAppMessage } from '../types';
-import { SwcUtils } from '../utils/Utils';
+import {ReflectUtils} from '@dooboostore/core';
+import {SwcUtils} from '../utils/Utils';
 
 export const PUBLISH_SWC_APP_MESSAGE_METADATA_KEY = Symbol.for('simple-web-component:publish-swc-app-message');
 

package/src/decorators/query.ts

@@ -1,12 +1,12 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface QueryMetadata {
   propertyKey: string | symbol;
   selector: string;
-  options: SwcQueryOptions;
+  options: SwcQueryOptions ;
 }
 
 export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
@@ -180,7 +180,7 @@ export function queryAppHost(targetOrOptions?: any, propertyKey?: string | symbo
   }
 }
 
-export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
+export const getQueryMetadata = (target: any): QueryMetadata[]  => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
 };

package/src/decorators/queryAll.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface QueryAllMetadata {
   propertyKey: string | symbol;

package/src/decorators/setProperty.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { HelperHostSet, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface PropertySetOptions extends SwcQueryOptions {
   name?: string;

package/src/decorators/state.ts

@@ -0,0 +1,84 @@
+import {ReflectUtils} from '@dooboostore/core';
+import {ElementApply} from "@dooboostore/core-web";
+import {SwcUtils} from "../utils/Utils";
+import {getElementConfig} from "./elementDefine";
+
+export interface StateMetadata {
+  propertyKey: string | symbol;
+  name: string;
+}
+
+export const STATE_METADATA_KEY = Symbol.for('simple-web-component:state');
+
+// export function state(target: SpecialSelector): PropertyDecorator;
+// export function state(): PropertyDecorator;
+export function state(target: Object, propertyKey: string | symbol): void;
+export function state(name: string): PropertyDecorator;
+/**
+ * Supports both forms:
+ * - @state
+ * - @state()
+ * - @state('selector')
+ */
+export function state(nameOrTarget?: string | Object, propertyKey?: string | symbol): any {
+
+  const stateDefine = (targetObj: any, stateMetadata: StateMetadata) => {
+
+    let storage = targetObj[stateMetadata.propertyKey];
+    // console.log('ssssssssssssssss', storage, stateMetadata.propertyKey)
+    Object.defineProperty(targetObj, stateMetadata.propertyKey, {
+      set(this: any, nv: string) {
+        console.log('setState!!', nv)
+        storage = nv;
+        const config = getElementConfig(this)
+        const ea = new ElementApply(this, {id: this._swcId});
+        const helperHostSet = SwcUtils.getHelperAndHostSet(config.window, this);
+        const stateContext: any = {...helperHostSet};
+        findAllStateMetadata(this).forEach(it => {
+          stateContext[it.name] = this[it.propertyKey]
+        })
+        ea.apply({context:stateContext, targetVariableName: stateMetadata.name, bind: this});
+      },
+      get(this: any) {
+        return storage;
+      },
+      enumerable: true,
+      configurable: true
+    });
+  }
+
+  // If used as @state (no parentheses), TypeScript will call this function with (target, propertyKey)
+  if (typeof nameOrTarget === 'object' && propertyKey) {
+    const targetObj = nameOrTarget as Object;
+    const name = String(propertyKey);
+    const constructor = (targetObj as any).constructor;
+    let states = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!states) {
+      states = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, states, constructor);
+    }
+    const stateMetadata = {propertyKey, name};
+    states.push(stateMetadata);
+    stateDefine(targetObj, stateMetadata);
+    return;
+  }
+
+  // Otherwise return a decorator factory
+  return (targetObj: Object, propertyKey: string | symbol): void => {
+    const name = String(nameOrTarget);
+    const constructor = targetObj.constructor;
+    let states = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!states) {
+      states = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, states, constructor);
+    }
+    const stateMetadata = {propertyKey, name};
+    states.push(stateMetadata);
+    stateDefine(targetObj, stateMetadata);
+  };
+}
+
+export const findAllStateMetadata = (target: any): StateMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor) ?? [];
+};

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -1,5 +1,5 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { SwcAppMessage } from '../types';
+import { SwcAppMessage, SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-message-while-connected');
 

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -1,5 +1,6 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { Router } from '@dooboostore/core-web';
+import {ReflectUtils} from '@dooboostore/core';
+import {Router} from '@dooboostore/core-web';
+import {HelperHostSet} from '../types';
 
 export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-route-change-while-connected');
 
@@ -12,7 +13,7 @@ export interface SwcAppRouteChangeSubscriberMetadata {
 
 export interface SwcAppRouteChangeOptions {
   path?: RoutePathType;
-  filter?: (router: Router, currentThis: any) => boolean;
+  filter?: (router: Router, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {