@dooboostore/simple-web-component 1.0.12 → 1.0.14

package/src/elements/apps/SwcAppLegend.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLLegendElementBase } from '../base/SwcHTMLLegendElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-legend', extends: 'legend' })
 export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInte
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInte
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInte
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppLegend extends SwcHTMLLegendElementBase implements SwcAppInte
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppLi.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLLIElementBase } from '../base/SwcHTMLLIElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-li', extends: 'li' })
 export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppLi extends SwcHTMLLIElementBase implements SwcAppInterface {
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppLink.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLLinkElementBase } from '../base/SwcHTMLLinkElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-link', extends: 'link' })
 export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterfac
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppLink extends SwcHTMLLinkElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppMap.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLMapElementBase } from '../base/SwcHTMLMapElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-map', extends: 'map' })
 export class SwcAppMap extends SwcHTMLMapElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppMap extends SwcHTMLMapElementBase implements SwcAppInterface
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppMap extends SwcHTMLMapElementBase implements SwcAppInterface
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppMap extends SwcHTMLMapElementBase implements SwcAppInterface
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppMap extends SwcHTMLMapElementBase implements SwcAppInterface
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppMeta.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLMetaElementBase } from '../base/SwcHTMLMetaElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-meta', extends: 'meta' })
 export class SwcAppMeta extends SwcHTMLMetaElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppMeta extends SwcHTMLMetaElementBase implements SwcAppInterfac
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppMeta extends SwcHTMLMetaElementBase implements SwcAppInterfac
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppMeta extends SwcHTMLMetaElementBase implements SwcAppInterfac
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppMeta extends SwcHTMLMetaElementBase implements SwcAppInterfac
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppMeter.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLMeterElementBase } from '../base/SwcHTMLMeterElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-meter', extends: 'meter' })
 export class SwcAppMeter extends SwcHTMLMeterElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppMeter extends SwcHTMLMeterElementBase implements SwcAppInterf
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppMeter extends SwcHTMLMeterElementBase implements SwcAppInterf
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppMeter extends SwcHTMLMeterElementBase implements SwcAppInterf
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppMeter extends SwcHTMLMeterElementBase implements SwcAppInterf
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppMod.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLModElementBase } from '../base/SwcHTMLModElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-del', extends: 'del' })
 export class SwcAppMod extends SwcHTMLModElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppMod extends SwcHTMLModElementBase implements SwcAppInterface
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppMod extends SwcHTMLModElementBase implements SwcAppInterface
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppMod extends SwcHTMLModElementBase implements SwcAppInterface
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppMod extends SwcHTMLModElementBase implements SwcAppInterface
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {

package/src/elements/apps/SwcAppObject.ts

@@ -1,9 +1,10 @@
 import { SwcHTMLObjectElementBase } from '../base/SwcHTMLObjectElementBase';
 import { elementDefine } from '../../decorators/elementDefine';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcAppInterface';
+import { SwcAppInterface, SwcConfigType, SwcAttributeConfigType } from '../SwcInterfaces';
 import { PathRouter } from '@dooboostore/core-web/routers/PathRouter';
 import { HashRouter } from '@dooboostore/core-web/routers/HashRouter';
+import { ElementRouter } from '../../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
 import { ConstructorType } from '@dooboostore/core/types';
 import { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
@@ -12,7 +13,7 @@ import { Subscription } from '@dooboostore/core/message/Subscription';
 @elementDefine({ name: 'swc-app-object', extends: 'object' })
 export class SwcAppObject extends SwcHTMLObjectElementBase implements SwcAppInterface {
   public simpleApplication?: SimpleApplication;
-  protected _router?: PathRouter | HashRouter;
+  public router?: Router;
   private routerSubscription?: Subscription;
 
   constructor() {
@@ -31,14 +32,21 @@ export class SwcAppObject extends SwcHTMLObjectElementBase implements SwcAppInte
       try {
         const userConfig: SwcAttributeConfigType = new Function(`return ${applicationConfigStr}`).apply(this);
         if (userConfig) {
-          const _config = {
-            routeType: 'path',
+          const _config: SwcConfigType = {
+            routeType: 'element',
             window: window,
             ...userConfig
           };
 
-          this._router = _config.routeType === 'path' ? new PathRouter({ window: _config.window }) : new HashRouter({ window: _config.window });
-          this.routerSubscription = this._router.observable.subscribe((route: RouterEventType) => {
+          if (_config.routeType === 'path') {
+            this.router = new PathRouter({ window: _config.window, firstUrl: _config.path });
+          } else if (_config.routeType === 'hash') {
+            this.router = new HashRouter({ window: _config.window, firstUrl: _config.path });
+          } else {
+            this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+          }
+
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
             if (route.triggerPoint === 'end') {
               this.routingProcess(route.path);
             }
@@ -50,9 +58,10 @@ export class SwcAppObject extends SwcHTMLObjectElementBase implements SwcAppInte
 
           this.simpleApplication = new SimpleApplication(option);
 
-          const otherInstanceSim = new Map<ConstructorType<any> | Function, any>();
-          if (this._router) {
-            otherInstanceSim.set(Router, this._router);
+          // Use 'any' key for Map to allow Abstract classes like Router
+          const otherInstanceSim = new Map<any, any>();
+          if (this.router) {
+            otherInstanceSim.set(Router, this.router);
           }
           this.simpleApplication.run(otherInstanceSim);
           const data = this.simpleApplication.sim(_config.rootRouter);
@@ -64,7 +73,7 @@ export class SwcAppObject extends SwcHTMLObjectElementBase implements SwcAppInte
             }
           }
           if (_config.path) {
-            await this._router?.go(_config.path);
+            await this.router?.go(_config.path);
           }
         }
       } catch (e) {
@@ -78,7 +87,7 @@ export class SwcAppObject extends SwcHTMLObjectElementBase implements SwcAppInte
   }
 
   async routing(path: string) {
-    await this._router?.go(path);
+    await this.router?.go(path);
   }
 
   private async routingProcess(path: string) {