@dooboostore/simple-web-component 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -54,6 +54,11 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
+    "./bundle-entry": {
+      "types": "./dist/types/bundle-entry.d.ts",
+      "import": "./dist/esm/bundle-entry.js",
+      "require": "./dist/cjs/bundle-entry.js"
+    },
     "./*": {
       "types": "./dist/types/*.d.ts",
       "import": "./dist/esm/*.js",
@@ -87,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/simple-boot": "1.0.53"
+    "@dooboostore/core": "1.0.30",
+    "@dooboostore/core-node": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-web": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/addEventListener.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions } from '../types';
 
 export interface AddEventListenerBaseOptions extends EventListenerOptions {

package/src/decorators/appendChild.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 
 export type AppendChildPosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd';

package/src/decorators/attribute.ts

@@ -0,0 +1,158 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
+
+export interface AttributeOptions extends SwcQueryOptions {
+  name?: string;
+  connectedInitialize?: boolean;
+  type?: typeof Number | typeof Boolean | typeof String;
+}
+
+export interface AttributeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: AttributeOptions;
+  privateKey: symbol; // Added to bypass getter during initialization
+}
+
+export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+
+/**
+ * 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);
+  if (type === Boolean) return val === 'false' || val === '0' ? false : true;
+  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[] => {
+  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);
+      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);
+    }
+  };
+
+  if (selector === ':host' || !selector) {
+    applyRoot(inst);
+  } else if (selector === ':window') {
+    results.push(currentWin);
+  } else if (selector === ':document') {
+    results.push(currentWin.document);
+  } else {
+    const hostSet = SwcUtils.getHostSet(inst);
+    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else {
+      if (r === 'shadow') {
+        const found = inst.shadowRoot?.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'light') {
+        const found = inst.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'all') {
+        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+        const lMatch = inst.querySelectorAll(selector);
+        if (sMatch) results.push(...sMatch);
+        if (lMatch) results.push(...lMatch);
+      } else {
+        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        if (found) results.push(...found);
+      }
+    }
+  }
+  return results;
+};
+
+/**
+ * @attribute decorator to sync a field value with an element's attribute.
+ */
+export function attribute(selector: string, options: AttributeOptions = {}): 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[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, selector, options, privateKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: any) {
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        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);
+        }
+
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        const primaryTarget = targets[0];
+
+        if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
+          if ((primaryTarget as any).hasAttribute(attrName)) {
+            const domVal = (primaryTarget as any).getAttribute(attrName);
+            return convertValue(domVal, targetType);
+          }
+          return null;
+        }
+
+        return convertValue(this[privateKey], targetType);
+      },
+      set(this: any, nv: any) {
+        const targetType = options.type || designType;
+        // const convertedValue = convertValue(nv, targetType);
+        // console.log('---set', propertyKey, targetType, nv, convertedValue);
+
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        targets.forEach(it => {
+          console.log('----->', it)
+          if (it && typeof (it as any).setAttribute === 'function') {
+            if (nv === null) {
+              (it as any).removeAttribute(attrName);
+            } else {
+              (it as any).setAttribute(attrName, String(nv));
+            }
+          } else {
+            this[privateKey] = nv;
+          }
+        })
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+
+export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
+  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target).flat();
+};

package/src/decorators/changedAttribute.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
 

package/src/decorators/classList.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 

package/src/decorators/elementDefine.ts

@@ -1,5 +1,5 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { ReflectUtils } from '@dooboostore/core';
+import { FunctionUtils } from '@dooboostore/core';
 import { getOnConnectedInnerHtmlMetadata } from './onConnectedInnerHtml';
 import { getAddEventListenerMetadata } from './addEventListener';
 import { 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 } from './lifecycles';
@@ -10,12 +10,13 @@ import { findAllReplaceChildrenMetadata } from './replaceChildren';
 import { findAllAppendChildMetadata } from './appendChild';
 import { findAllClassListMetadata } from './classList';
 import { findAllStyleMetadata } from './style';
+import { findAllAttributeMetadata } from './attribute';
 import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
 import { SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { InjectSituationType, HostSet } from '../types';
 
-// --- Core Interfaces & Types (Moved back from base.ts) ---
+// --- Core Interfaces & Types ---
 
 export const ELEMENT_CONFIG_KEY = Symbol('simple-web-component:element-config');
 
@@ -221,12 +222,13 @@ export const elementDefine =
     const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
     const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
     const attrChangeMap = findAllAttributeChangedMetadata(constructor);
+    const attributeList = findAllAttributeMetadata(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), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
+    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)), ...emitCustomEventList.map(it => it.options.attributeName!), ...swcLifecycleAttributes, ...swcOnEvents])];
 
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
@@ -251,7 +253,33 @@ export const elementDefine =
         for (const m of bMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
       }
 
-      if (typeof (this as any).initCore === 'function') (this as any).initCore();
+      // Initialize @attribute fields (DOM <-> JS Sync)
+      attributeList.forEach(meta => {
+        const attrName = meta.options.name || String(meta.propertyKey);
+        if (meta.options.connectedInitialize) {
+          // JS -> DOM (FORCE OVERWRITE)
+          const memoryVal = (this as any)[meta.privateKey];
+          if (memoryVal !== undefined) {
+            (this as any).__swc_syncing_init = true;
+            try {
+              (this as any)[meta.propertyKey] = memoryVal; // Trigger setter to update DOM
+            } finally {
+              (this as any).__swc_syncing_init = false;
+            }
+          }
+        } else if (meta.selector === ':host' || !meta.selector) {
+          // DOM -> JS (Pull from HTML)
+          const domVal = this.getAttribute(attrName);
+          if (domVal !== null) {
+            (this as any).__swc_syncing_init = true;
+            try {
+              (this as any)[meta.propertyKey] = domVal; // Update memory with DOM value
+            } finally {
+              (this as any).__swc_syncing_init = false;
+            }
+          }
+        }
+      });
 
       if (connectedInnerHtmlList.length > 0) {
         let sContent = '',
@@ -360,12 +388,14 @@ export const elementDefine =
       });
 
       if (originalConnected) originalConnected.apply(this);
+
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
       if (aMethods) {
         for (const m of aMethods) (this as any)._invokeLifecycleMethod(m, hostSet);
       }
       (this as any)._executeSwcScript('swc-on-connected', hostSet);
       (this as any)._executeSwcScript('swc-on-after-connected', hostSet);
+      (this as any).__swc_connected = true;
     };
 
     const originalDisconnected = proto.disconnectedCallback;
@@ -390,6 +420,7 @@ export const elementDefine =
       }
       (this as any)._executeSwcScript('swc-on-disconnected', hostSet);
       (this as any)._executeSwcScript('swc-on-after-disconnected', hostSet);
+      (this as any).__swc_connected = false;
     };
 
     const originalAdopted = proto.adoptedCallback;
@@ -415,6 +446,7 @@ export const elementDefine =
     proto.attributeChangedCallback = function (name: string, old: string | null, newVal: string | null) {
       if (originalAttributeChanged) originalAttributeChanged.apply(this, [name, old, newVal]);
 
+      // Handle swc-on-* events
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
           const customEventMeta = emitCustomEventList.find(it => it.options.attributeName === name);
@@ -423,6 +455,7 @@ export const elementDefine =
         }
       }
 
+      // Handle @changedAttribute callbacks
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
         const hSet = SwcUtils.getHostSet(this as any);

package/src/decorators/emitCustomEvent.ts

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

package/src/decorators/index.ts

@@ -1,4 +1,5 @@
 export * from './addEventListener';
+export * from './attribute';
 export * from './elementDefine';
 export * from './changedAttribute';
 export * from './setAttribute';

package/src/decorators/lifecycles.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttribute';
 import { SET_ATTRIBUTE_METADATA_KEY } from './setAttribute';
 

package/src/decorators/onConnectedInnerHtml.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 
 export interface InnerHtmlOptions {
   useShadow?: boolean;

package/src/decorators/query.ts

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

package/src/decorators/queryAll.ts

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

package/src/decorators/replaceChildren.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 
 export const REPLACE_CHILDREN_METADATA_KEY = Symbol('simple-web-component:replace-children');

package/src/decorators/setAttribute.ts

@@ -1,11 +1,13 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export interface SetAttributeMetadata {
   propertyKey: string | symbol;
   selector: string;
   name: string;
+  options: SwcQueryOptions;
 }
 
 export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
@@ -15,7 +17,9 @@ export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attri
  * Usage: @setAttribute(':host', 'count')
  * Usage: @setAttribute('#child', 'disabled')
  */
-export function setAttribute(selector: string, name: string): MethodDecorator {
+export function setAttribute(selector: string, name: string): MethodDecorator;
+export function setAttribute(selector: string, name: string, options?: SwcQueryOptions): MethodDecorator;
+export function setAttribute(selector: string, name: string, options: SwcQueryOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
     let metaList = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string | symbol, SetAttributeMetadata>;
@@ -23,7 +27,7 @@ export function setAttribute(selector: string, name: string): MethodDecorator {
       metaList = new Map<string | symbol, SetAttributeMetadata>();
       ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, metaList, constructor);
     }
-    metaList.set(propertyKey, { propertyKey, selector, name });
+    metaList.set(propertyKey, { propertyKey, selector, name, options });
 
     const original = descriptor.value;
     descriptor.value = async function (...args: any[]) {
@@ -34,22 +38,50 @@ export function setAttribute(selector: string, name: string): MethodDecorator {
         const conf = getElementConfig(this);
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
 
-        let targetEl: HTMLElement | null = null;
-        if (selector === ':host' || !selector) targetEl = this as any;
-        else if (selector === ':window') targetEl = currentWin as any;
-        else if (selector === ':document') targetEl = currentWin.document as any;
-        else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
-        else if (selector === ':appHost') targetEl = hostSet.$appHost;
-        else if (selector === ':firstHost') targetEl = hostSet.$firstHost;
-        else if (selector === ':lastHost') targetEl = hostSet.$lastHost;
-        else if (selector === ':firstAppHost') targetEl = hostSet.$firstAppHost;
-        else if (selector === ':lastAppHost') targetEl = hostSet.$lastAppHost;
-        else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        const targetEls: any[] = [];
+        const r = options.root || 'auto';
 
-        if (targetEl) {
-          if (res === null) targetEl.removeAttribute(name);
-          else targetEl.setAttribute(name, String(res));
+        const applyRoot = (t: any) => {
+          if (!t) return;
+          if (r === 'auto') {
+            targetEls.push((t as any).shadowRoot || t);
+            return;
+          }
+          if (r === 'light' || r === 'all') targetEls.push(t);
+          if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
+        };
+
+        if (selector === ':window') targetEls.push(currentWin);
+        else if (selector === ':document') targetEls.push(currentWin.document as any);
+        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 if (selector === ':host' || !selector) applyRoot(this);
+        else {
+          const roots: any[] = [];
+          if (r === 'shadow') {
+            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
+          } else if (r === 'light') {
+            roots.push(this as any);
+          } else if (r === 'all') {
+            roots.push(this as any);
+            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
+          } else {
+            roots.push((this as any).shadowRoot || (this as any));
+          }
+          roots.forEach(root => targetEls.push(...root.querySelectorAll(selector)));
         }
+
+        targetEls.forEach(targetEl => {
+          if (!targetEl || typeof (targetEl as any).setAttribute !== 'function') return;
+          if (res === null) (targetEl as any).removeAttribute(name);
+          else (targetEl as any).setAttribute(name, String(res));
+        })
       }
       return res;
     };

package/src/decorators/style.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 

package/src/elements/SwcAppEngine.ts

@@ -1,22 +1,23 @@
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
-import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { PathRouter } from '@dooboostore/core-web';
+import { HashRouter } from '@dooboostore/core-web';
 import { ElementRouter } from '../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
-import { Subscription } from '@dooboostore/core/message/Subscription';
-import { ConstructorType, Optional } from '@dooboostore/core/types';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+import { Subscription } from '@dooboostore/core';
+import { ConstructorType, OptionalType } from '@dooboostore/core';
+import { FunctionUtils } from '@dooboostore/core';
 import { SwcUtils } from '../utils/Utils';
 
 export type SwcConfigType = {
-  rootRouter: ConstructorType<any> | Symbol;
+  rootRouter: ConstructorType<any> | symbol;
   routeType: 'path' | 'hash' | 'element';
+  connectMode?: 'direct' | 'swap';
   path?: string;
   window: Window;
 };
 
-export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
+export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
 
 export class SwcAppEngine {
   public simpleApplication?: SimpleApplication;

package/src/elements/SwcAppMixin.ts

@@ -12,7 +12,38 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     async connect(config?: SwcAttributeConfigType) {
-      await this.__swc_engine.connect(config);
+      const mode = config?.connectMode || 'direct';
+
+      if (mode !== 'swap') {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const parent = this.parentNode;
+      if (!parent) {
+        await this.__swc_engine.connect(config);
+        this.setAttribute('swc-connect-mode', 'direct');
+        return;
+      }
+
+      const clonedApp = this.cloneNode(true) as any;
+      clonedApp.style.display = 'none';
+      parent.insertBefore(clonedApp, this.nextSibling);
+
+      try {
+        await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
+        if (this.parentNode) {
+          this.parentNode.removeChild(this);
+        }
+        clonedApp.setAttribute('swc-connect-mode', 'swap');
+        clonedApp.style.display = '';
+      } catch (e) {
+        if (clonedApp.parentNode) {
+          clonedApp.parentNode.removeChild(clonedApp);
+        }
+        throw e;
+      }
     }
 
     connectedCallback() {

package/src/elements/SwcAsync.ts

@@ -1,6 +1,6 @@
 import { changedAttribute } from '../decorators/changedAttribute';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { FunctionUtils } from '@dooboostore/core';
 
 export class SwcAsync extends HTMLTemplateElement {
   private _nodes: Node[] = [];

package/src/elements/SwcChoose.ts

@@ -1,6 +1,6 @@
 import { changedAttribute } from '../decorators/changedAttribute';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { FunctionUtils } from '@dooboostore/core';
 
 export class SwcChoose extends HTMLTemplateElement {
   private _nodes: Node[] = [];

package/src/elements/SwcIf.ts

@@ -1,6 +1,6 @@
 import { changedAttribute } from '../decorators/changedAttribute';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { FunctionUtils } from '@dooboostore/core';
 
 export class SwcIf extends HTMLTemplateElement {
   private _value = false;

package/src/elements/SwcLoop.ts

@@ -1,6 +1,6 @@
 import { changedAttribute } from '../decorators/changedAttribute';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { FunctionUtils } from '@dooboostore/core';
 
 export class SwcLoop extends HTMLTemplateElement {
   private _value: any[] = [];

package/src/elements/register.ts

@@ -1,7 +1,7 @@
 import { elementDefine } from '../decorators/elementDefine';
 import { SwcAppMixin } from './SwcAppMixin';
 import { SwcUtils } from '../utils/Utils';
-import { FunctionUtils } from '@dooboostore/core/function/FunctionUtils';
+import { FunctionUtils } from '@dooboostore/core';
 import { changedAttribute } from '../decorators/changedAttribute';
 
 export const registerAllElements = (w: any) => {

package/src/index.ts

@@ -3,6 +3,7 @@ import { registerAllElements } from './elements/register';
 
 // Decorators
 export * from './decorators/elementDefine';
+export * from './decorators/attribute';
 export * from './decorators/setAttribute';
 export * from './decorators/changedAttribute';
 export { onConnectedInnerHtml } from './decorators/onConnectedInnerHtml';
@@ -27,9 +28,9 @@ export * from './utils/TemplateUtils';
 export * from './config/config';
 
 // Registration Factory
-export default (w: Window, other?: ((w:Window)=>void)[]): void => {
+export default (w: Window, other?: ((w: Window) => void)[]): void => {
   registerAllElements(w);
   other?.forEach(fn => {
-     fn(w);
+    fn(w);
   });
 };

package/src/router/ElementRouter.ts

@@ -1,5 +1,5 @@
-import { ChangeStateConfig, ChangeStateResult, RouteAction, Router, RouterConfig, RouterMethodOptions } from '@dooboostore/core-web/routers/Router';
-import { UrlUtils } from '@dooboostore/core/url/UrlUtils';
+import { ChangeStateConfig, ChangeStateResult, RouteAction, Router, RouterConfig, RouterMethodOptions } from '@dooboostore/core-web';
+import { UrlUtils } from '@dooboostore/core';
 
 export class ElementRouter extends Router {
   private _history: { url: string; data: any; title?: string }[] = [];