@dooboostore/simple-web-component 1.0.24 → 1.0.26

package/src/decorators/attribute.ts

@@ -3,24 +3,21 @@ import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 import {SpecialSelector, SwcQueryOptions} from '../types';
 
-export interface AttributeOptions extends SwcQueryOptions {
+export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
   connectedInitialize?: boolean;
   type?: typeof Number | typeof Boolean | typeof String;
 }
 
-export interface AttributeMetadata {
+export interface AttributeFieldMetadata {
   propertyKey: string | symbol;
   selector: string;
-  options: AttributeOptions;
-  privateKey: symbol; // Added to bypass getter during initialization
+  options: AttributeFieldOptions;
+  privateKey: symbol;
 }
 
-export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+export const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');
 
-/**
- * Helper to perform type conversion from string to target type
- */
 const convertValue = (val: string | null, type: any): any => {
   if (val === null || val === undefined) return val;
   if (type === Number) return Number(val);
@@ -28,18 +25,13 @@ const convertValue = (val: string | null, type: any): any => {
   return val;
 };
 
-/**
- * Helper to resolve target elements based on selector and root options
- */
-export const resolveTargetEls = (inst: any, selector: string, options: AttributeOptions, currentWin: any): HTMLElement[] => {
+export const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
 
   const applyRoot = (target: any) => {
     if (!target) return;
     if (r === 'auto') {
-      // Attributes belong to the ELEMENT, not the ShadowRoot.
-      // So for :host and direct attribute sync, we mostly want the element itself.
       results.push(target);
     } else {
       if (r === 'light' || r === 'all') results.push(target);
@@ -85,24 +77,22 @@ export const resolveTargetEls = (inst: any, selector: string, options: Attribute
 /**
  * @attribute decorator to sync a field value with an element's attribute.
  */
-export function attribute(selector: string, options: AttributeOptions = {}): PropertyDecorator {
+export function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     const privateKey = Symbol(String(propertyKey));
 
     const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);
 
-    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor) as AttributeMetadata[];
+    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];
     if (!metaList) {
       metaList = [];
-      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+      ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);
     }
     metaList.push({propertyKey, selector, options, privateKey});
 
-    // Helper function to apply setAttribute to targets
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
       targets.forEach(it => {
-        console.log('----->', it)
         if (it && typeof (it as any).setAttribute === 'function') {
           if (nv === null) {
             (it as any).removeAttribute(attrName);
@@ -122,8 +112,6 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
         const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
         const targetType = options.type || designType;
 
-        console.log('type-->', propertyKey, targetType);
-        // During early init phase, if syncing memory to DOM, return memory.
         if (this.__swc_syncing_init || (options.connectedInitialize && !this.__swc_connected)) {
           return convertValue(this[privateKey], targetType);
         }
@@ -142,33 +130,25 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
         return convertValue(this[privateKey], targetType);
       },
       set(this: any, nv: any) {
-        const targetType = options.type || designType;
-        // console.log('---set', propertyKey, targetType, nv, this, this.__swc_syncing_init);
-
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
-        // During initialization/syncing phase
         if (this.__swc_syncing_init) {
-          // If connectedInitialize is enabled, force setAttribute (JS -> DOM)
           if (options.connectedInitialize === true) {
             const targets = resolveTargetEls(this, selector, options, currentWin);
             applySetAttribute(this, targets, attrName, nv);
           } else {
-            // Otherwise just update memory
             this[privateKey] = nv;
           }
           return;
         }
 
-        // Before connected, save to memory only
         if (!this.__swc_connected) {
           this[privateKey] = nv;
           return;
         }
 
-        // After connected, normal setAttribute
         const targets = resolveTargetEls(this, selector, options, currentWin);
         applySetAttribute(this, targets, attrName, nv);
       },
@@ -178,48 +158,34 @@ export function attribute(selector: string, options: AttributeOptions = {}): Pro
   };
 }
 
-export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
-  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target).flat();
-};
-
 /**
- * @attributeHost decorator - simplified version of @attribute for :host selector
- * Usage: @attributeHost - uses field name as attribute name
- * Usage: @attributeHost() - uses field name as attribute name
- * Usage: @attributeHost('data-id') - uses custom attribute name
- * Usage: @attributeHost({ type: Boolean }) - uses field name with options
- * Usage: @attributeHost('data-id', { type: Boolean }) - uses custom name with options
+ * @attributeHost decorator to sync a field value with the :host element's attribute.
  */
 export function attributeHost(target: Object, propertyKey: string | symbol): void;
-export function attributeHost(): PropertyDecorator;
-export function attributeHost(options: AttributeOptions): PropertyDecorator;
+export function attributeHost(options: AttributeFieldOptions): PropertyDecorator;
 export function attributeHost(attrName: string): PropertyDecorator;
-export function attributeHost(attrName: string, options: AttributeOptions): PropertyDecorator;
+export function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;
 export function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {
-  // Direct decorator usage: @attributeHost (no parentheses)
   if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    const fieldName = String(propertyKeyOrOptions);
-    return attribute(':host', { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);
   }
 
-  // @attributeHost() or @attributeHost(options) or @attributeHost('name')
   if (typeof targetOrAttrOrOptions === 'string') {
-    // @attributeHost('customName') or @attributeHost('customName', options)
     const attrName = targetOrAttrOrOptions;
-    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeOptions;
+    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;
     return attribute(':host', { ...options, name: attrName });
   } else if (typeof targetOrAttrOrOptions === 'object') {
-    // @attributeHost(options) - use field name as attribute name
-    const options = targetOrAttrOrOptions as AttributeOptions;
+    const options = targetOrAttrOrOptions as AttributeFieldOptions;
     return (target: Object, propertyKey: string | symbol) => {
-      const fieldName = String(propertyKey);
-      return attribute(':host', { ...options, name: fieldName })(target, propertyKey);
+      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);
     };
   } else {
-    // @attributeHost() - use field name as attribute name
     return (target: Object, propertyKey: string | symbol) => {
-      const fieldName = String(propertyKey);
-      return attribute(':host', { name: fieldName })(target, propertyKey);
+      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);
     };
   }
 }
+
+export const findAllAttributeMetadata = (target: any): AttributeFieldMetadata[] => {
+  return ReflectUtils.findAllMetadata<AttributeFieldMetadata[]>(ATTRIBUTE_FIELD_METADATA_KEY, target).flat();
+};

package/src/decorators/changedAttributeHost.ts

@@ -1,6 +1,6 @@
 import {ReflectUtils} from '@dooboostore/core';
 
-export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
 /**
  * @changedAttributeHost decorator - fires when any attribute on :host changes

package/src/decorators/elementDefine.ts

@@ -4,7 +4,7 @@ import { getAddEventListenerMetadata } from './addEventListener';
 import { ON_CONSTRUCTOR_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 } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
 import { findAllAttributeChangedMetadata } from './changedAttributeHost';
-import { findAllSetAttributeMetadata } from './setAttribute';
+import { findAllAttributeApplyMetadata } from './applyAttribute';
 import { findAllAttributeMetadata } from './attribute';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
@@ -13,7 +13,7 @@ import { InjectSituationType, HostSet } from '../types';
 
 // --- Core Interfaces & Types ---
 
-export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
+export const ELEMENT_CONFIG_KEY = Symbol.for('simple-web-component:element-config');
 
 export interface ElementConfig {
   extends?: string;
@@ -161,7 +161,6 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      console.log('execute handler', event);
       const parent = SwcUtils.findNearestSwcHost(el);
       const hostSet = SwcUtils.getHostSet(parent || el);
       const conf = getElementConfig(this);
@@ -185,7 +184,6 @@ const setupPrototype = (proto: any) => {
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
 
-      console.log('execute handler2', event);
     const parent = SwcUtils.findNearestSwcHost(el);
     const hostSet = SwcUtils.getHostSet(parent || el);
     const conf = getElementConfig(this);
@@ -231,15 +229,26 @@ export const elementDefine =
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
     const emitHostCustomEventList = emitCustomEventList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
-    const addHostEventListenerList = addEventListenerList.filter(meta => meta.selector === ':host' || meta.selector === '');
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
     const attributeList = findAllAttributeMetadata(constructor);
+    const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
 
     const swcLifecycleAttributes = ['swc-on-constructor', 'swc-on-connected', 'swc-on-disconnected', 'swc-on-before-connected', 'swc-on-after-connected', 'swc-on-before-disconnected', 'swc-on-after-disconnected', 'swc-on-before-adopted', 'swc-on-after-adopted', 'swc-on-attribute-changed'];
     const swcOnEvents = DOM_EVENT_NAMES.map(e => `swc-on-${e}`);
 
     // Collect all observed attributes from all decorators
-    const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...attrChangeMap.keys(), ...Array.from(findAllSetAttributeMetadata(constructor).values()).map(it => it.name), ...attributeList.map(it => it.options.name || String(it.propertyKey)), ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
+    const attributeApplyNames = Array.from(applyAttributeMap.values()).map(it => it.options.name).filter(Boolean) as string[];
+    const attributeListNames = attributeList.map(it => it.options.name || String(it.propertyKey));
+    
+    const mergedObservedAttributes = [...new Set([
+      ...(metadata.observedAttributes ?? []), 
+      ...attrChangeMap.keys(), 
+      ...attributeApplyNames,
+      ...attributeListNames, 
+      ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), 
+      ...swcLifecycleAttributes, 
+      ...swcOnEvents
+    ])];
 
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
@@ -264,22 +273,19 @@ export const elementDefine =
         for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
       }
 
-      // Initialize @attribute fields (DOM <-> JS Sync)
+      // Initialize @attribute fields
       attributeList.forEach(meta => {
-        const attrName = meta.options.name || String(meta.propertyKey);
         if (meta.options.connectedInitialize === true) {
-          // JS -> DOM (FORCE OVERWRITE with JS value)
           (this as any).__swc_syncing_init = true;
           try {
             const memoryVal = (this as any)[meta.privateKey];
             if (memoryVal !== undefined) {
-              (this as any)[meta.propertyKey] = memoryVal; // Trigger setter to update DOM
+              (this as any)[meta.propertyKey] = memoryVal;
             }
           } finally {
             (this as any).__swc_syncing_init = false;
           }
         }
-        // else: Do NOT sync - Keep the default value from class initialization
       });
 
       if (connectedInnerHtmlList.length > 0) {
@@ -316,7 +322,6 @@ export const elementDefine =
         }
       });
 
-      // Group delegate listeners by (type, root) combination
       const delegatesByTypeAndRoot = new Map<string, any[]>();
       delegateListeners.forEach(meta => {
         const r = meta.options.root || 'auto';
@@ -327,7 +332,6 @@ export const elementDefine =
         delegatesByTypeAndRoot.get(rootKey)!.push(meta);
       });
 
-      // Register unified handlers for delegate listeners
       delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
         const [type, rStr] = typeRootKey.split(':');
         const r = rStr === 'auto' ? 'auto' : rStr;
@@ -343,11 +347,10 @@ export const elementDefine =
         }
 
         bindRoots.forEach(br => {
-          // Sort: stopPropagation handlers first (more specific/terminal actions)
           const sortedMetaList = [...metaList].sort((a, b) => {
             const aStop = a.options.stopPropagation ? 1 : 0;
             const bStop = b.options.stopPropagation ? 1 : 0;
-            return bStop - aStop;  // stopPropagation: true comes first
+            return bStop - aStop;
           });
           
           const unifiedHandler = async (event: Event) => {
@@ -361,8 +364,6 @@ export const elementDefine =
                 const currentHostSet = SwcUtils.getHostSet(this as any);
                 const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
                 await (this as any)[meta.propertyKey](event, currentHostSet, matchedEl, args);
-                
-                // Stop processing if event propagation was stopped
                 if ((event as any).cancelBubble) break;
               }
             }
@@ -372,7 +373,6 @@ export const elementDefine =
         });
       });
 
-      // Process non-delegate listeners
       nonDelegateListeners.forEach(meta => {
         const { selector, type, options } = meta;
         const opts = { capture: options.capture, once: options.once, passive: options.passive };
@@ -430,24 +430,6 @@ export const elementDefine =
         });
       });
 
-      addHostEventListenerList.forEach(meta => {
-        const { type, options } = meta;
-        const opts = { capture: options.capture, once: options.once, passive: options.passive };
-
-        const handler = async (event: Event) => {
-          if (options.stopPropagation) event.stopPropagation();
-          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-          if (options.preventDefault) event.preventDefault();
-          const currentHostSet = SwcUtils.getHostSet(this as any);
-          const args = { event, ...currentHostSet, $el: this, $root: this.getRootNode() };
-          await (this as any)[meta.propertyKey](event, currentHostSet, args);
-        };
-        this.addEventListener(type, handler, opts);
-        if (options.removeOnDisconnected === true) {
-          (this as any)._boundListeners.push({ target: this, type, handler, options: opts });
-        }
-      });
-
       if (originalConnected) originalConnected.apply(this);
 
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
@@ -509,7 +491,6 @@ export const elementDefine =
 
       const hSet = SwcUtils.getHostSet(this as any);
 
-      // Handle swc-on-* events
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
           const eventName = name.substring(7);
@@ -517,13 +498,11 @@ export const elementDefine =
         }
       }
 
-      // Handle @emitHostCustomEvent attribute changes
       const hostCustomEventMeta = emitHostCustomEventList.find(it => (it.options as any).attributeName === name);
       if (hostCustomEventMeta && newVal !== null) {
         (this as any)._bindAttributeEvent(this as any, name, newVal, hostCustomEventMeta.type);
       }
 
-      // Handle @changedAttribute callbacks
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
         for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);

package/src/decorators/emitCustomEvent.ts

@@ -16,7 +16,7 @@ export interface EmitCustomEventMetadata {
   options: (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
 }
 
-export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
+export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
 export function emitCustomEvent(target: SpecialSelector, type: string, options?: EmitCustomEventBaseOptions): MethodDecorator;
 export function emitCustomEvent(selector: string, type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions): MethodDecorator;
 /**
@@ -102,12 +102,15 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 
 /**
  * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
- * Usage: @emitCustomEventHost('navigate')
+ * Usage: @emitCustomEventHost('navigate') // default attributeName: 'on-emit-navigate'
  * Usage: @emitCustomEventHost('navigate', { attributeName: 'on-navigate' })
  * 
  * The attributeName option is used to automatically observe attributes for this event.
  * For example, { attributeName: 'on-navigate' } will add 'on-navigate' to observedAttributes.
  */
-export function emitCustomEventHost(type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator {
+export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string } = {}): MethodDecorator {
+  if (!options.attributeName) {
+    options.attributeName = `on-emit-${type}`;
+  }
   return emitCustomEvent(':host', type, options);
 }

package/src/decorators/index.ts

@@ -2,11 +2,11 @@ export * from './addEventListener';
 export * from './attribute';
 export * from './elementDefine';
 export * from './changedAttributeHost';
-export * from './setAttribute';
 export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';
 export * from './query';
 export * from './queryAll';
-export * from './classList';
-export * from './style';
+export * from './applyClass';
+export * from './applyStyle';
+export * from './applyAttribute';

package/src/decorators/lifecycles.ts

@@ -1,16 +1,14 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttributeHost';
-import { SET_ATTRIBUTE_METADATA_KEY } from './setAttribute';
 
-export const ON_CONSTRUCTOR_METADATA_KEY = Symbol('simple-web-component:on-constructor');
-export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-connected');
-export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-connected');
-export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-before-disconnected');
-export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');
-export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
-export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
-export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
-export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
+export const ON_CONSTRUCTOR_METADATA_KEY = Symbol.for('simple-web-component:on-constructor');
+export const ON_BEFORE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-connected');
+export const ON_AFTER_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-connected');
+export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-disconnected');
+export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-disconnected');
+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 INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 

package/src/decorators/query.ts

@@ -9,7 +9,7 @@ export interface QueryMetadata {
   options: SwcQueryOptions;
 }
 
-export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
+export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
 
 export function query(target: SpecialSelector): PropertyDecorator;
 export function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;

package/src/decorators/queryAll.ts

@@ -9,7 +9,7 @@ export interface QueryAllMetadata {
   options: SwcQueryOptions;
 }
 
-export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
+export const QUERY_ALL_METADATA_KEY = Symbol.for('simple-web-component:query-all');
 
 export function queryAll(target: SpecialSelector): PropertyDecorator;
 export function queryAll(selector: string, options?: SwcQueryOptions): PropertyDecorator;

package/src/elements/SwcAppEngine.ts

@@ -9,12 +9,19 @@ import { ConstructorType, OptionalType } from '@dooboostore/core';
 import { FunctionUtils } from '@dooboostore/core';
 import { SwcUtils } from '../utils/Utils';
 
+import { SwcAppInterface } from '../types';
+import {Intent} from "@dooboostore/simple-boot";
+
 export type SwcConfigType = {
   rootRouter: ConstructorType<any> | symbol;
   routeType: 'path' | 'hash' | 'element';
   connectMode?: 'direct' | 'swap';
+  container?: symbol;
   path?: string;
   window: Window;
+  onStarted?: (app: SwcAppInterface) => void;
+  onConnected?: (app: SwcAppInterface) => void;
+  onDisconnected?: (app: SwcAppInterface) => void;
 };
 
 export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
@@ -24,9 +31,13 @@ export class SwcAppEngine {
   public router?: Router;
   private routerSubscription?: Subscription;
   private _isInitialized = false;
+  private _config?: SwcConfigType;
 
   constructor(private host: HTMLElement) {}
 
+  get config() {
+    return this._config;
+  }
   async connect(config?: SwcAttributeConfigType) {
     if (this._isInitialized) return;
 
@@ -37,10 +48,11 @@ export class SwcAppEngine {
       const configStr = this.host.getAttribute('swc-get-application-config');
       if (configStr) {
         try {
+          // console.log('vvvvvvvvvvvvvvvv->>>>', SwcUtils.findNearestSwcHost(this.host), SwcUtils.getHostSet(this.host))
           userConfig = FunctionUtils.executeReturn({
             script: configStr,
             context: this.host,
-            args: SwcUtils.getHelperAndHostSet(win, this.host)
+            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this.host))
           });
         } catch (e) {
           console.error('[SWC-APP-ENGINE] Script execution failed:', e);
@@ -53,11 +65,12 @@ export class SwcAppEngine {
 
     try {
       if (userConfig.rootRouter) {
-        const _config: SwcConfigType = {
+        this._config = {
           routeType: 'element',
           window: win,
           ...userConfig
         } as SwcConfigType;
+        const _config = this._config;
 
         // Router Selection
         if (_config.routeType === 'path') {
@@ -68,23 +81,34 @@ export class SwcAppEngine {
           this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
         }
 
+        // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)
+
         // Routing sync
         if (this.router) {
           this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
-              this.simpleApplication?.routing(route.path);
+              const targetPath = (route.path || '/') + route.search;
+              const intent = new Intent(targetPath);
+              this.simpleApplication?.routing(intent);
             }
           });
         }
 
 
         // App start
-        this.simpleApplication = new SimpleApplication(new SimOption({ excludeProxys: [Node], rootRouter: _config.rootRouter }));
+        const containerSymbol = _config.container || (this.host as any).getContainerSymbol?.();
+        this.simpleApplication = new SimpleApplication(new SimOption({
+          excludeProxys: [Node], 
+          rootRouter: _config.rootRouter,
+          container: containerSymbol
+        }));
 
         const otherInstanceSim = new Map<any, any>();
         if (this.router) otherInstanceSim.set(Router, this.router);
         this.simpleApplication.run(otherInstanceSim);
 
+
+
         // Rendering
         const data = this.simpleApplication.sim(_config.rootRouter);
         if (data instanceof Node) {
@@ -94,12 +118,16 @@ export class SwcAppEngine {
         }
 
         if (_config.path) this.router?.go(_config.path);
+        if (_config.onStarted) {
+          _config.onStarted(this.host as unknown as SwcAppInterface);
+        }
       }
     } catch (e) {
       console.error('[SWC-APP-ENGINE] Init failed:', e);
     }
   }
 
+
   disconnect() {
     this.routerSubscription?.unsubscribe();
   }

package/src/elements/SwcAppMixin.ts

@@ -51,12 +51,14 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       // @ts-ignore
       if (super.connectedCallback) super.connectedCallback();
       this.connect();
+      this.__swc_engine?.config?.onConnected?.(this);
     }
 
     disconnectedCallback() {
       // @ts-ignore
       if (super.disconnectedCallback) super.disconnectedCallback();
       this.__swc_engine.disconnect();
+      this.__swc_engine?.config?.onDisconnected?.(this);
     }
 
     async routing(path: string) {

package/src/utils/Utils.ts

@@ -1,7 +1,7 @@
 import { SwcAppInterface, HostSet, HelperSet, HelperHostSet } from '../types';
 import {getElementConfig} from "../decorators";
 
-export const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');
+export const SWC_NOT_FOUND = Symbol.for('simple-web-component:not-found');
 
 // DOM Creation Utilities
 export const htmlFragment = (html: string, doc?: Document): DocumentFragment => {
@@ -187,6 +187,7 @@ export namespace SwcUtils {
    */
   export const findNearestSwcHost = (el: HTMLElement | Node): HTMLElement | undefined => {
     if ((el as any).__swc_host) return (el as any).__swc_host;
+    // if ((el as any).__swc_proto_setup) return (el as any).__swc_proto_setup;
 
     let current: any = el.parentElement || (el.getRootNode?.() as any)?.host;
     const doc = el.ownerDocument;