@dooboostore/simple-web-component 1.0.14 → 1.0.16

package/src/decorators/emitCustomEvent.ts

@@ -2,9 +2,9 @@ import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface EmitCustomEventOptions {
   type: string;
-  attributeName?: string; // Default: on + type
-  bubbles?: boolean; // Default: true
-  composed?: boolean; // Default: true
+  attributeName?: string;
+  bubbles?: boolean;
+  composed?: boolean;
   cancelable?: boolean;
 }
 
@@ -16,12 +16,12 @@ export interface EmitCustomEventMetadata {
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
 
 export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+  return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;
 
     if (!options.attributeName) {
-      options.attributeName = `on${options.type}`;
+      options.attributeName = `swc-on-${options.type}`;
     }
     if (options.bubbles === undefined) options.bubbles = true;
     if (options.composed === undefined) options.composed = true;
@@ -32,22 +32,6 @@ export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions):
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, options });
-
-    // Wrap the original method to dispatch event after execution
-    const originalMethod = descriptor.value;
-    descriptor.value = function (this: HTMLElement, ...args: any[]) {
-      const detail = originalMethod.apply(this, args);
-
-      const event = new CustomEvent(options.type, {
-        detail,
-        bubbles: options.bubbles,
-        composed: options.composed,
-        cancelable: options.cancelable
-      });
-
-      this.dispatchEvent(event);
-      return detail;
-    };
   };
 }
 

package/src/decorators/index.ts

@@ -1,9 +1,9 @@
-export * from  './addEventListener'
-export * from  './attribute'
-export * from  './elementDefine'
-export * from  './emitCustomEvent'
-export * from  './innerHtml'
-export * from  './lifecycles'
-export * from  './query'
-export * from  './queryAll'
-export * from  './state'
+export * from './addEventListener';
+export * from './elementDefine';
+export * from './changedAttribute';
+export * from './setAttribute';
+export * from './emitCustomEvent';
+export * from './innerHtml';
+export * from './lifecycles';
+export * from './query';
+export * from './queryAll';

package/src/decorators/lifecycles.ts

@@ -1,4 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ON_ATTRIBUTE_CHANGED_METADATA_KEY } from './changedAttribute';
+import { SET_ATTRIBUTE_METADATA_KEY } from './setAttribute';
 
 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');
@@ -7,15 +9,13 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:o
 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 ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
-export const ON_MUTATION_SUBSCRIBE_METADATA_KEY = Symbol('simple-web-component:on-mutation-observed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<(string | symbol)[]>(metadataKey, constructor);
+    let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as (string | symbol)[];
     if (!list) {
       list = [];
       ReflectUtils.defineMetadata(metadataKey, list, constructor);
@@ -38,101 +38,10 @@ export const onAdopted = onAfterAdopted;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
-export function onAttributeChanged(attributeName: string | string[]): MethodDecorator;
-export function onAttributeChanged(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onAttributeChanged(arg1: string | string[] | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
-  const decorator = (attributeName: string, target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let meta = ReflectUtils.getMetadata<Map<string, (string | symbol)[]>>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-    if (!meta) {
-      meta = new Map<string, (string | symbol)[]>();
-      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
-    }
-
-    let methods = meta.get(attributeName);
-    if (!methods) {
-      methods = [];
-      meta.set(attributeName, methods);
-    }
-    if (!methods.includes(propertyKey)) {
-      methods.push(propertyKey);
-    }
-  };
-
-  if (typeof arg1 === 'string') {
-    return (target: Object, propertyKey: string | symbol) => {
-      decorator(arg1, target, propertyKey);
-    };
-  } else if (Array.isArray(arg1)) {
-    return (target: Object, propertyKey: string | symbol) => {
-      arg1.forEach(name => decorator(name, target, propertyKey));
-    };
-  } else if (arg1 && arg2) {
-    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
-  }
-}
-
-export const getLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(metadataKey, constructor);
-};
-
-// ─── @onMutationSubscribe ─────────────────────────────────────────────────────
-
-export interface MutationSubscribeOptions {
-  root?: 'light' | 'shadow' | 'all' | 'auto'; // default: 'auto'
-}
-
-export interface MutationSubscribeMetadata {
-  propertyKey: string | symbol;
-  options: MutationSubscribeOptions;
-}
-
 /**
- * Called when MutationObserver detects DOM changes inside the component.
- *
- * @example
- * // Parameterless — observes auto (shadow if exists, otherwise light)
- * @onMutationObserved
- * onMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
- *
- * // With options
- * @onMutationObserved({ root: 'shadow' })
- * onShadowMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
- *
- * @onMutationObserved({ root: 'all' })
- * onAllMutation(mutationList: MutationRecord[], observer: MutationObserver) { ... }
+ * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
-export function onMutationSubscribe(options: MutationSubscribeOptions): MethodDecorator;
-export function onMutationSubscribe(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onMutationSubscribe(
-  arg1: MutationSubscribeOptions | Object,
-  arg2?: string | symbol,
-  arg3?: PropertyDescriptor
-): MethodDecorator | void {
-  const register = (options: MutationSubscribeOptions, target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<MutationSubscribeMetadata[]>(ON_MUTATION_SUBSCRIBE_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(ON_MUTATION_SUBSCRIBE_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
-
-  // Used as @onMutationObserved (no parentheses)
-  if (arg2 !== undefined) {
-    register({ root: 'auto' }, arg1 as Object, arg2);
-    return;
-  }
-
-  // Used as @onMutationObserved({ root: 'shadow' })
-  return (target: Object, propertyKey: string | symbol) => {
-    register((arg1 as MutationSubscribeOptions) || { root: 'auto' }, target, propertyKey);
-  };
-}
-
-export const getMutationSubscribeMetadataList = (target: any): MutationSubscribeMetadata[] | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_MUTATION_SUBSCRIBE_METADATA_KEY, constructor);
+export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
+  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
+  return results.length > 0 ? (results as unknown as T) : undefined;
 };

package/src/decorators/query.ts

@@ -1,7 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryOptions {
-  selector?: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
@@ -9,61 +8,49 @@ export interface QueryMetadata {
   selector: string;
   options: QueryOptions;
   propertyKey: string | symbol;
-  isMethod: boolean;
 }
 
 export const QUERY_METADATA_KEY = Symbol('simple-web-component:query');
 
-export function query(selector: string): any;
-export function query(options: QueryOptions): any;
-export function query(target: Object, propertyKey: string | symbol): void;
-export function query(arg1?: string | QueryOptions | Object, arg2?: string | symbol): any {
-  const decorator = (selector: string, options: QueryOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const isMethod = !!descriptor;
-    const constructor = target.constructor;
+/**
+ * @query decorator to inject a single element into a class property.
+ * Usage: @query('.my-class') myEl!: HTMLElement;
+ * Usage: @query('#my-id', { root: 'shadow' }) myEl!: HTMLElement;
+ */
+export function query(selector: string, options: QueryOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+    if (descriptor !== undefined) {
+      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
 
+    const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get(this: HTMLElement) {
-          if (!selector) return this;
-          let searchRoot: Node = this;
-          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
-          else if (options.root === 'light') searchRoot = this;
-          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
-
-          return (searchRoot as HTMLElement).querySelector(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-
-  // Case: @query (parameterless decorator)
-  if (arg1 && typeof arg2 === 'string') {
-    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
-  }
-
-  // Case: @query('selector') or @query({ selector: '...', ... })
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    let selector = '';
-    let options: QueryOptions = {};
-
-    if (typeof arg1 === 'string') {
-      selector = arg1;
-    } else if (typeof arg1 === 'object') {
-      options = arg1 as QueryOptions;
-      selector = options.selector || '';
-    }
-
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: HTMLElement) {
+        if (!selector || selector === ':host') return this;
+        const r = options.root || 'auto';
+
+        if (r === 'shadow') {
+          return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+        }
+        if (r === 'light') {
+          return this.querySelector(selector);
+        }
+        if (r === 'all') {
+          return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+        }
+        // auto
+        return (this.shadowRoot || this).querySelector(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 

package/src/decorators/queryAll.ts

@@ -1,7 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 
 export interface QueryAllOptions {
-  selector?: string;
   root?: 'light' | 'shadow' | 'all' | 'auto';
 }
 
@@ -9,61 +8,52 @@ export interface QueryAllMetadata {
   selector: string;
   options: QueryAllOptions;
   propertyKey: string | symbol;
-  isMethod: boolean;
 }
 
 export const QUERY_ALL_METADATA_KEY = Symbol('simple-web-component:query-all');
 
-export function queryAll(selector: string): any;
-export function queryAll(options: QueryAllOptions): any;
-export function queryAll(target: Object, propertyKey: string | symbol): void;
-export function queryAll(arg1?: string | QueryAllOptions | Object, arg2?: string | symbol): any {
-  const decorator = (selector: string, options: QueryAllOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const isMethod = !!descriptor;
-    const constructor = target.constructor;
+/**
+ * @queryAll decorator to inject a list of elements into a class property.
+ * Usage: @queryAll('.items') list!: NodeListOf<HTMLElement>;
+ * Usage: @queryAll('li', { root: 'shadow' }) list!: HTMLElement[];
+ */
+export function queryAll(selector: string, options: QueryAllOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: never): void => {
+    if (descriptor !== undefined) {
+      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+    }
 
+    const constructor = target.constructor;
     let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
     if (!queries) {
       queries = [];
       ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
     }
-    queries.push({ selector, options, propertyKey, isMethod });
-
-    if (!isMethod) {
-      Object.defineProperty(target, propertyKey, {
-        get(this: HTMLElement) {
-          if (!selector) return [this];
-          let searchRoot: Node = this;
-          if (options.root === 'shadow') searchRoot = this.shadowRoot || this;
-          else if (options.root === 'light') searchRoot = this;
-          else searchRoot = this.shadowRoot || this; // Default: Auto (Shadow-First)
-
-          return (searchRoot as HTMLElement).querySelectorAll(selector);
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-
-  // Case: @queryAll (parameterless decorator)
-  if (arg1 && typeof arg2 === 'string') {
-    return decorator('', {}, arg1 as Object, arg2 as string | symbol);
-  }
-
-  // Case: @queryAll('selector') or @queryAll({ selector: '...', ... })
-  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    let selector = '';
-    let options: QueryAllOptions = {};
-
-    if (typeof arg1 === 'string') {
-      selector = arg1;
-    } else if (typeof arg1 === 'object') {
-      options = arg1 as QueryAllOptions;
-      selector = options.selector || '';
-    }
-
-    decorator(selector, options, target, propertyKey, descriptor);
+    queries.push({ selector, options, propertyKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: HTMLElement) {
+        if (!selector || selector === ':host') return [this];
+        const r = options.root || 'auto';
+
+        if (r === 'shadow') {
+          return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
+        }
+        if (r === 'light') {
+          return this.querySelectorAll(selector);
+        }
+        if (r === 'all') {
+          const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          const lNodes = Array.from(this.querySelectorAll(selector));
+          return [...sNodes, ...lNodes];
+        }
+        // auto
+        const root = this.shadowRoot || this;
+        return root.querySelectorAll(selector);
+      },
+      enumerable: true,
+      configurable: true
+    });
   };
 }
 

package/src/decorators/setAttribute.ts

@@ -0,0 +1,31 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
+
+export function setAttribute(attributeName?: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string, string | symbol>;
+    if (!meta) {
+      meta = new Map<string, string | symbol>();
+      ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, meta, constructor);
+    }
+    meta.set(attributeName || String(propertyKey), propertyKey);
+  };
+}
+
+export const getSetAttributeMetadata = (target: any): Map<string, string | symbol> | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor);
+};
+
+export const findAllSetAttributeMetadata = (target: any): Map<string, string | symbol> => {
+  const result = new Map<string, string | symbol>();
+  const maps = ReflectUtils.findAllMetadata<any>(SET_ATTRIBUTE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/elements/SwcApp.ts

@@ -0,0 +1,26 @@
+import { elementDefine } from '../decorators/elementDefine';
+import { SwcAppEngine } from './SwcAppEngine';
+
+@elementDefine({ name: 'swc-app', extends: undefined })
+export class SwcApp extends HTMLElement {
+  private _engine = new SwcAppEngine(this);
+
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+
+  connectedCallback() {
+    this._engine.connect();
+  }
+
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+
+  async routing(path: string) {
+    await this._engine.router?.go(path);
+  }
+}

package/src/elements/SwcAppEngine.ts

@@ -0,0 +1,88 @@
+import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
+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 { Router, RouterEventType } from '@dooboostore/core-web/routers/Router';
+import { Subscription } from '@dooboostore/core/message/Subscription';
+import { ConstructorType, Optional } from '@dooboostore/core/types';
+
+export type SwcConfigType = {
+  rootRouter: ConstructorType<any>;
+  routeType: 'path' | 'hash' | 'element';
+  path?: string;
+  window: Window;
+};
+
+export type SwcAttributeConfigType = Optional<SwcConfigType, 'routeType' | 'window'>;
+
+export class SwcAppEngine {
+  public simpleApplication?: SimpleApplication;
+  public router?: Router;
+  private routerSubscription?: Subscription;
+  private _isInitialized = false;
+
+  constructor(private host: HTMLElement) {}
+
+  async connect() {
+    if (this._isInitialized) return;
+    this._isInitialized = true;
+
+    // Wait for event loop to ensure attributes and global scripts are ready
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const configStr = this.host.getAttribute('swc-get-application-config');
+    if (!configStr) return;
+
+    try {
+      const userConfig: SwcAttributeConfigType = new Function(`return ${configStr}`).apply(this.host);
+      if (userConfig && userConfig.rootRouter) {
+        const _config: SwcConfigType = {
+          routeType: 'element',
+          window: window,
+          ...userConfig
+        } as SwcConfigType;
+
+        // Router Selection
+        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 if (_config.routeType === 'element') {
+          this.router = new ElementRouter({ window: _config.window, firstUrl: _config.path });
+        }
+
+        // Routing sync
+        if (this.router) {
+          this.routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
+            if (route.triggerPoint === 'end') {
+              this.simpleApplication?.routing(route.path);
+            }
+          });
+        }
+
+        // App start
+        this.simpleApplication = new SimpleApplication(new SimOption({ excludeProxys: [Node], rootRouter: _config.rootRouter }));
+
+        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) {
+          if (this.host.shadowRoot) this.host.shadowRoot.replaceChildren(data);
+          else this.host.replaceChildren(data);
+        }
+
+        if (_config.path) await this.router?.go(_config.path);
+      }
+    } catch (e) {
+      console.error('[SWC-APP-ENGINE] Init failed:', e);
+    }
+  }
+
+  disconnect() {
+    this.routerSubscription?.unsubscribe();
+  }
+}

package/src/elements/index.ts

@@ -1,11 +1,3 @@
 // import {SwcHTMLElement} from "./SwcHTMLElement";
 
-export * from './SwcChoose'
-export * from './SwcForOf'
-export * from './SwcIf'
-export * from './SwcObject'
-export * from './SwcOther'
-export * from './SwcWhen'
-export * from './SwcInterfaces'
-
-// export const swcHTMLElements = [SwcHTMLElement];
+export * from './is'

package/src/elements/is/SwcAppAnchor.ts

@@ -0,0 +1,26 @@
+import { elementDefine } from '../../decorators/elementDefine';
+import { SwcAppEngine } from '../SwcAppEngine';
+
+@elementDefine({ name: 'swc-app-a', extends: 'a' })
+export class SwcAppAnchor extends HTMLAnchorElement {
+  private _engine = new SwcAppEngine(this);
+
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+
+  connectedCallback() {
+    this._engine.connect();
+  }
+
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+
+  async routing(path: string) {
+    await this._engine.router?.go(path);
+  }
+}

package/src/elements/is/SwcAppArea.ts

@@ -0,0 +1,26 @@
+import { elementDefine } from '../../decorators/elementDefine';
+import { SwcAppEngine } from '../SwcAppEngine';
+
+@elementDefine({ name: 'swc-app-area', extends: 'area' })
+export class SwcAppArea extends HTMLAreaElement {
+  private _engine = new SwcAppEngine(this);
+
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+
+  connectedCallback() {
+    this._engine.connect();
+  }
+
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+
+  async routing(path: string) {
+    await this._engine.router?.go(path);
+  }
+}

package/src/elements/is/SwcAppAudio.ts

@@ -0,0 +1,26 @@
+import { elementDefine } from '../../decorators/elementDefine';
+import { SwcAppEngine } from '../SwcAppEngine';
+
+@elementDefine({ name: 'swc-app-audio', extends: 'audio' })
+export class SwcAppAudio extends HTMLAudioElement {
+  private _engine = new SwcAppEngine(this);
+
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+
+  connectedCallback() {
+    this._engine.connect();
+  }
+
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+
+  async routing(path: string) {
+    await this._engine.router?.go(path);
+  }
+}